:root {
      --ink: #17211d;
      --muted: #69746f;
      --line: #dfe5e1;
      --soft: #f4f6f4;
      --paper: #ffffff;
      --canvas: #f0f3f1;
      --green: #185f4a;
      --green-2: #24765e;
      --mint: #dcebe4;
      --amber: #b87018;
      --amber-bg: #fff1d9;
      --red: #b34949;
      --red-bg: #fdeaea;
      --blue: #2e6799;
      --blue-bg: #e8f1f9;
      --shadow: 0 8px 30px rgba(23, 33, 29, .07);
    }
    * { box-sizing: border-box; }
    body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "DM Sans", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
    button, input, select { font: inherit; }
    button { letter-spacing: 0; }
    .app { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
    .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: #153f34; color: #e7f1ed; display: flex; flex-direction: column; padding: 18px 14px 16px; z-index: 20; }
    .brand { display: flex; gap: 11px; align-items: center; padding: 0 10px 16px; }
    .brand-mark { width: 37px; height: 37px; border-radius: 8px; display: grid; place-items: center; background: #edf5f1; color: var(--green); font-weight: 800; font-size: 18px; }
    .brand .brand-mark { width: 42px; font-size: 13px; line-height: 1; }
    .brand strong { display: block; font-size: 15px; }
    .brand span { color: #a9c4ba; font-size: 11px; }
    .nav-group { margin-top: 8px; }
    .nav-label { padding: 7px 12px 5px; color: #87aa9d; font-size: 9px; font-weight: 700; }
    .nav-section-head { min-height: 30px; padding: 4px 8px 3px 12px; display: flex; align-items: center; justify-content: space-between; color: #87aa9d; font-size: 9px; font-weight: 700; }
    .nav-section-head > span { color: #dbe9e3; font-size: 13px; font-weight: 800; }
    .nav-toggle-all { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; display: grid; place-items: center; color: #a9c4ba; background: transparent; cursor: pointer; }
    .nav-toggle-all:hover { color: white; background: rgba(255,255,255,.08); }
    .nav-toggle-all svg { width: 14px; height: 14px; }
    .nav { display: grid; gap: 3px; }
    .nav button { border: 0; background: transparent; color: #bad0c8; min-height: 36px; border-radius: 6px; padding: 0 11px; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; font-size: 12px; }
    .nav button:hover { color: white; background: rgba(255,255,255,.07); }
    .nav button.active { background: transparent; }
    .nav .nav-direct-item { font-weight: 700; }
    .nav svg { width: 16px; height: 16px; flex: 0 0 16px; }
    .nav .badge { margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: #d88c32; color: white; font-size: 10px; }
    .nav-collapse { margin: 1px 0; border: 0; border-radius: 0; overflow: visible; background: transparent; }
    .nav-collapse-head { display: flex; align-items: stretch; border-radius: 6px; overflow: hidden; }
    .nav .nav-collapse-trigger { min-width: 0; flex: 1; border-radius: 6px 0 0 6px; padding-right: 4px; color: #d7e5df; font-weight: 700; }
    .nav .nav-collapse-trigger:hover { background: rgba(255,255,255,.07); }
    .nav .nav-collapse-trigger span { flex: 1; }
    .nav .nav-collapse-toggle { width: 34px; min-height: 36px; flex: 0 0 34px; justify-content: center; padding: 0; border-radius: 0 6px 6px 0; color: #a9c4ba; }
    .nav .nav-collapse-toggle:hover { color: white; background: rgba(255,255,255,.1); }
    .nav-collapse-head.active { background: transparent; }
    .nav .nav-collapse-head.active button { background: transparent; }
    .nav .nav-collapse-head.active button:hover { background: rgba(255,255,255,.07); }
    .nav .nav-chevron { width: 14px; height: 14px; transition: transform .18s ease; }
    .nav-collapse.open .nav-chevron { transform: rotate(180deg); }
    .nav-submenu { display: grid; gap: 2px; padding: 1px 0 6px 14px; }
    .nav-submenu::before { display: none; }
    .nav .nav-submenu button { min-height: 34px; height: auto; padding: 8px 9px 8px 10px; line-height: 1.35; }
    .nav-subgroup { display: grid; gap: 2px; }
    .nav .nav-subgroup-trigger { width: 100%; color: #d7e5df; font-weight: 700; }
    .nav .nav-subgroup-trigger > span:first-of-type { flex: 1; }
    .nav-sub-chevron { width: 13px !important; height: 13px !important; margin-left: 1px; transition: transform .18s ease; }
    .nav-subgroup.open .nav-sub-chevron { transform: rotate(180deg); }
    .nav-tertiary { display: grid; gap: 2px; padding: 0 0 3px 21px; }
    .nav .nav-tertiary button { min-height: 32px; padding: 7px 8px; color: #a9c8bc; font-size: 11px; }
    .nav .nav-tertiary button:hover { color: white; }
    .nav .nav-tertiary button.active { background: transparent; }
    .sidebar-foot { margin-top: auto; padding: 14px 10px 2px; border-top: 1px solid rgba(255,255,255,.11); color: #91afa4; font-size: 11px; line-height: 1.8; }
    .main { min-width: 0; }
    .topbar { height: 68px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 15; backdrop-filter: blur(10px); }
    .icon-btn.mobile-menu { display: none; }
    .crumb { font-size: 12px; color: var(--muted); }
    .crumb strong { color: var(--ink); font-size: 14px; margin-left: 4px; }
    .top-actions { display: flex; align-items: center; gap: 10px; }
    .btn.topbar-logout-btn { min-width: 68px; padding: 0 12px; color: var(--red); border-color: #e7caca; background: #fff7f7; }
    .btn.topbar-logout-btn:hover { color: #963b3b; border-color: #ddb6b6; background: var(--red-bg); }
    .topbar-logout-btn svg { width: 16px; height: 16px; }
    .icon-btn { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: white; color: #4d5a54; display: grid; place-items: center; cursor: pointer; position: relative; }
    .icon-btn:hover { background: var(--soft); }
    .icon-btn svg { width: 17px; }
    .dot { position: absolute; width: 7px; height: 7px; right: 7px; top: 6px; background: #d16c49; border-radius: 50%; border: 1px solid white; }
    .profile { display: flex; align-items: center; gap: 9px; margin-left: 4px; }
    .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #e5d7c7; color: #714b31; font-size: 12px; font-weight: 700; }
    .profile-text strong { display: block; font-size: 12px; }
    .profile-text span { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
    .content { padding: 28px 30px 50px; max-width: 1600px; margin: 0 auto; }
    .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
    .page-head h1 { margin: 0 0 6px; font-size: 23px; line-height: 1.2; letter-spacing: 0; }
    .page-head p { margin: 0; color: var(--muted); font-size: 12px; }
    .actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .btn { min-height: 36px; border-radius: 6px; border: 1px solid var(--line); background: white; color: var(--ink); padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; }
    .btn:hover { background: var(--soft); }
    .btn.primary { background: var(--green); color: white; border-color: var(--green); }
    .btn.primary:hover { background: var(--green-2); }
    .btn:disabled { opacity: .45; cursor: not-allowed; }
    .btn.danger { color: var(--red); border-color: #ebcaca; }
    .btn svg { width: 15px; height: 15px; }
    .stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--line); background: var(--paper); margin-bottom: 20px; box-shadow: var(--shadow); }
    .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat { min-height: 112px; padding: 20px; position: relative; border-right: 1px solid var(--line); }
    .stat:last-child { border-right: 0; }
    .stat .label { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 7px; }
    .stat .label i { width: 7px; height: 7px; border-radius: 50%; background: var(--green-2); }
    .stat .value { font-size: 28px; line-height: 1; font-weight: 700; margin-top: 13px; }
    .stat .value small { font-size: 12px; color: var(--muted); font-weight: 500; }
    .stat .trend { position: absolute; right: 17px; bottom: 19px; padding: 4px 7px; border-radius: 4px; font-size: 10px; background: var(--mint); color: var(--green); }
    .stat .trend.warn { background: var(--amber-bg); color: var(--amber); }
    .dashboard-stats .headcount-stat .label,
    .dashboard-stats .my-todo-stat .label { color: var(--ink); font-size: 16px; font-weight: 800; }
    .dashboard-stats .pending-onboard-stat .label { color: var(--ink); font-size: 16px; font-weight: 800; }
    .dashboard-stats .headcount-stat .trend,
    .dashboard-stats .pending-onboard-stat .trend,
    .dashboard-stats .my-todo-stat .trend { color: var(--red); font-size: 16px; font-weight: 800; background: var(--red-bg); }
    .dashboard-stats .stat { min-height: 142px; }
    .headcount-stat-actions { position: absolute; right: 17px; bottom: 14px; display: grid; gap: 6px; }
    .dashboard-stats .headcount-stat .headcount-stat-actions .trend { position: static; min-width: 138px; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
    .headcount-stat-actions .trend:hover { background: #f9dfe1; }
    .headcount-stat-actions .trend svg { width: 14px; height: 14px; }
    .dashboard-stats .pending-onboard-stat { z-index: 20; }
    .pending-onboard-trigger { border: 0; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
    .pending-onboard-trigger:hover { background: #f9dfe1; }
    .pending-onboard-trigger svg { width: 14px; height: 14px; transition: transform .18s ease; }
    .pending-onboard-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
    .pending-onboard-menu { position: absolute; top: calc(100% - 8px); left: 14px; width: min(390px, calc(100vw - 36px)); max-height: 410px; overflow-y: auto; z-index: 30; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); box-shadow: 0 14px 35px rgba(25, 49, 40, .18); }
    .pending-onboard-head { min-height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
    .pending-onboard-head strong { font-size: 13px; }
    .pending-onboard-head span { color: var(--red); font-size: 10px; font-weight: 800; }
    .pending-onboard-item { width: 100%; min-height: 72px; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
    .pending-onboard-item:hover { background: #f6faf8; }
    .pending-onboard-item .avatar { width: 32px; height: 32px; font-size: 10px; }
    .pending-onboard-item > span { min-width: 0; }
    .pending-onboard-item strong, .pending-onboard-item small, .pending-onboard-item em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pending-onboard-item strong { font-size: 11px; }
    .pending-onboard-item small { margin-top: 4px; color: var(--muted); font-size: 9px; }
    .pending-onboard-item em { margin-top: 4px; color: var(--green); font-size: 8px; font-style: normal; font-weight: 700; }
    .pending-onboard-item > svg { width: 15px; color: var(--muted); }
    .pending-onboard-empty { min-height: 86px; padding: 20px; color: var(--muted); display: grid; place-items: center; font-size: 10px; }
    .dashboard-stats .my-todo-stat { z-index: 20; }
    .dashboard-todo-trigger { border: 0; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
    .dashboard-todo-trigger:hover { background: #f9dfe1; }
    .dashboard-todo-trigger svg { width: 14px; height: 14px; transition: transform .18s ease; }
    .dashboard-todo-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
    .dashboard-todo-menu { position: absolute; top: calc(100% - 8px); right: 14px; width: min(390px, calc(100vw - 36px)); max-height: 410px; overflow-y: auto; z-index: 30; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); box-shadow: 0 14px 35px rgba(25, 49, 40, .18); }
    .dashboard-todo-head { min-height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
    .dashboard-todo-head strong { font-size: 13px; }
    .dashboard-todo-head span { color: var(--red); font-size: 10px; font-weight: 800; }
    .dashboard-todo-item { width: 100%; min-height: 72px; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
    .dashboard-todo-item:hover { background: #f6faf8; }
    .dashboard-todo-item.example { background: #fafcfb; }
    .dashboard-todo-item.example:hover { background: #f2f7f4; }
    .dashboard-todo-item > span { min-width: 0; }
    .dashboard-todo-item strong, .dashboard-todo-item small, .dashboard-todo-item em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dashboard-todo-item strong { font-size: 11px; }
    .dashboard-todo-item strong b { display: inline-block; margin-left: 6px; padding: 1px 4px; border-radius: 3px; color: var(--muted); background: #edf1ef; font-size: 8px; }
    .dashboard-todo-item small { margin-top: 4px; color: var(--muted); font-size: 9px; }
    .dashboard-todo-item em { margin-top: 4px; color: var(--green); font-size: 8px; font-style: normal; font-weight: 700; }
    .dashboard-todo-item > svg { width: 15px; color: var(--muted); }
    .dashboard-todo-empty { min-height: 86px; padding: 20px; color: var(--muted); display: grid; place-items: center; font-size: 10px; }
    .org-charts { margin-bottom: 20px; }
    .org-chart-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .org-chart-head h2 { margin: 0; font-size: 14px; }
    .org-chart-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .org-chart-panel { min-width: 0; min-height: 320px; padding: 17px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: var(--shadow); }
    .org-chart-panel h3 { margin: 0 0 15px; font-size: 14px; }
    .org-pie-panel { min-height: 510px; }
    .org-pie-layout { width: min(940px, 100%); min-height: 440px; margin: 0 auto; display: grid; grid-template-columns: 680px 240px; gap: 20px; align-items: stretch; }
    .org-pie-visual { width: min(680px, 100%); aspect-ratio: 680 / 440; position: relative; }
    .org-pie-center { width: 64.706%; aspect-ratio: 1; position: absolute; z-index: 1; left: 17.647%; top: 0; }
    .org-pie, .org-pie-depth { width: 86.364%; aspect-ratio: 1; border-radius: 50%; position: absolute; left: 6.818%; transform: scaleY(.72); transform-origin: 50% 50%; }
    .org-pie-depth { z-index: 0; top: calc(6.818% + 26px); filter: brightness(.62) saturate(1.08); box-shadow: 0 15px 18px rgba(41,72,81,.18); }
    .org-pie { z-index: 1; top: 6.818%; border: 1.5px solid rgba(255,255,255,.96); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); transition: filter .25s ease; }
    .org-pie-visual:has(button:hover) .org-pie { filter: saturate(1.07) brightness(1.02); }
    .org-pie-outside-label { position: absolute; z-index: 2; width: 138px; min-height: 30px; padding: 0 16px 0 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-start; cursor: pointer; text-align: left; box-shadow: none; }
    .org-pie-outside-label::after { content: ''; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border: 2px solid var(--paper); border-radius: 50%; background: var(--slice-color); box-shadow: 0 0 0 1px var(--slice-color); transform: translateY(-50%); }
    .org-pie-outside-label:hover, .org-pie-outside-label.active { color: var(--green); background: transparent; }
    .org-pie-outside-label span { font-size: 12px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
    .org-level1-summary { z-index: 2; padding-top: 23px; }
    .org-pie-total { width: 100%; padding: 0 0 14px; border: 0; border-bottom: 2px solid #dce8e2; border-radius: 0; background: transparent; color: var(--ink); display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; cursor: pointer; text-align: left; }
    .org-pie-total:hover span, .org-pie-total.active span { color: var(--green); }
    .org-pie-total span { color: #496259; font-size: 15px; font-weight: 800; }
    .org-pie-total strong { font-size: 30px; font-weight: 900; line-height: 1; }
    .org-pie-total small { margin-left: 4px; color: var(--muted); font-size: 13px; font-weight: 800; }
    .org-level1-details { margin-top: 10px; display: grid; gap: 0; }
    .org-level1-details button { min-height: 46px; padding: 7px 2px; border: 0; border-bottom: 1px solid #e5ebe8; border-radius: 0; background: transparent; color: var(--ink); display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 9px; cursor: pointer; text-align: left; }
    .org-level1-details button:hover, .org-level1-details button.active { background: #f0f7f3; }
    .org-level1-details i { width: 8px; height: 28px; border-radius: 3px; }
    .org-level1-details span { min-width: 0; font-size: 13px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
    .org-level1-details strong { font-size: 15px; font-weight: 900; white-space: nowrap; }
    .org-pie-callouts { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
    .org-pie-callouts polyline { fill: none; opacity: .8; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
    .org-pie-label { position: absolute; z-index: 3; width: 132px; padding: 4px; border: 0; border-radius: 0; background: transparent; color: #14221d; transform: translate(-50%, -50%); cursor: pointer; text-align: center; box-shadow: none; }
    .org-pie-label:hover, .org-pie-label.active { color: #0d5d47; background: rgba(255,255,255,.2); }
    .org-pie-label span, .org-pie-label strong { display: block; overflow-wrap: anywhere; }
    .org-pie-label span { font-size: 13px; font-weight: 800; line-height: 1.25; }
    .org-pie-label strong { margin-top: 2px; font-size: 15px; font-weight: 900; line-height: 1; }
    .org-pie-label span { font-size: 11px; font-weight: 800; line-height: 1.25; }
    .org-bars { width: 100%; padding: 4px 2px 3px; display: grid; gap: 4px; align-items: end; overflow: hidden; }
    .org-bar-item { min-width: 0; height: 264px; padding: 0 2px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink); display: grid; grid-template-rows: 24px 156px 80px; justify-items: center; cursor: pointer; }
    .org-bar-item:hover, .org-bar-item.active { border-color: #a7bdb4; background: #f7faf8; }
    .org-bar-item > strong { align-self: center; font-size: 12px; font-weight: 800; }
    .org-bar-item > strong small { color: var(--muted); font-size: 9px; font-weight: 700; }
    .org-bar-track { width: min(30px, 82%); height: 150px; align-self: end; border-radius: 4px 4px 0 0; background: #edf0ee; display: flex; align-items: flex-end; overflow: hidden; }
    .org-bar-track i { display: block; width: 100%; min-height: 3px; border-radius: 4px 4px 0 0; }
    .org-bar-item > span { width: 100%; max-height: 78px; padding-top: 7px; font-size: 9px; font-weight: 700; line-height: 1.2; text-align: center; overflow: hidden; overflow-wrap: anywhere; }
    .org-department-empty { min-height: 82px; padding: 20px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); font-size: 10px; display: grid; place-items: center; }
    .org-position-tree-panel { min-height: 490px; }
    .org-tree-toolbar { min-height: 54px; margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
    .org-tree-toolbar h3 { margin-bottom: 5px; font-size: 17px; }
    .org-tree-toolbar p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
    .org-tree-filter { min-width: 280px; display: block; }
    .org-tree-filter select { width: 100%; height: 38px; padding: 0 30px 0 10px; border: 1px solid #cbd9d3; border-radius: 5px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 700; }
    .org-tree-filter select option.org-tree-independent-option { font-size: 11px; font-weight: 850; }
    .level2-org-stage { min-height: 425px; margin-top: 16px; padding: 24px 20px; border: 1px solid #dbe2e8; border-radius: 6px; background: #fff; overflow: hidden; }
    .level2-org-chart { width: 100%; min-width: 0; margin: 0 auto; padding: 2px 0 20px; color: #252b32; }
    .level2-org-department-node, .level2-position-node { border: 2px solid #29384d; border-radius: 9px; position: relative; z-index: 1; text-align: center; box-shadow: 0 2px 5px rgba(30,44,61,.08); }
    .level2-org-departments { width: 100%; min-width: 0; position: relative; display: flex; align-items: flex-start; justify-content: center; }
    .level2-org-branch { width: 100%; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
    .level2-org-department-node { width: 132px; height: 58px; padding: 9px 8px 7px; background: #edf7f1; display: grid; align-content: center; justify-items: center; }
    .level2-org-department-node strong { max-width: 100%; font-size: 15px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
    .level2-org-department-node span { margin-top: 3px; color: #35674a; font-size: 12px; font-weight: 800; }
    .level2-management-row { width: min(360px, 100%); height: 112px; margin-top: 24px; position: relative; }
    .level2-management-row::before { content: ''; position: absolute; left: 50%; top: -24px; width: 2px; height: 68px; background: #29384d; transform: translateX(-50%); }
    .level2-management-row.has-supervisor::before { height: 86px; }
    .level2-management-row.has-staff::before { height: auto; bottom: 0; }
    .level2-position-row { width: min(100%, calc(var(--level2-position-count) * 90px - 12px)); min-width: 0; margin-top: 38px; position: relative; display: grid; grid-template-columns: repeat(var(--level2-position-count), minmax(0, 78px)); justify-content: center; align-items: start; gap: clamp(2px, .8vw, 12px); }
    .level2-position-row::before { content: ''; position: absolute; left: calc(50% / var(--level2-position-count)); right: calc(50% / var(--level2-position-count)); top: -18px; height: 2px; background: #29384d; }
    .level2-position-row::after { content: ''; position: absolute; left: 50%; top: -38px; width: 2px; height: 20px; background: #29384d; transform: translateX(-50%); }
    .level2-position-row.single::before { display: none; }
    .level2-position-row.direct { margin-top: 28px; }
    .level2-position-row.direct::after { top: -28px; height: 10px; }
    .level2-position-row.level1-summary { width: min(100%, calc(var(--level2-position-count) * 100px - 10px)); margin-top: 38px; grid-template-columns: repeat(var(--level2-position-count), minmax(0, 92px)); justify-content: center; gap: clamp(2px, .6vw, 10px); }
    .level2-position-row.level1-summary::before { display: block; }
    .level2-position-row.level1-summary::after { top: -38px; height: 20px; }
    .level2-position-row.level1-summary .level2-position-node { width: min(92px, 100%); min-height: 78px; aspect-ratio: auto; }
    .level2-position-row.level1-summary .level2-position-node::after { left: 50%; top: -18px; width: 2px; height: 18px; transform: translateX(-50%); }
    .level2-position-node { container-type: inline-size; width: min(78px, 100%); height: auto; aspect-ratio: 1; padding: 4px; background: #fff4f3; justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; overflow: visible; }
    .level2-position-node::after { content: ''; position: absolute; left: 50%; top: -20px; width: 2px; height: 20px; background: #29384d; transform: translateX(-50%); }
    .level2-primary-node, .level2-supervisor-node { width: 78px; position: absolute; }
    .level2-primary-node { left: calc(50% + 22px); top: 0; }
    .level2-primary-node::after { left: -24px; right: auto; top: 50%; width: 24px; height: 2px; transform: none; }
    .level2-supervisor-node { right: calc(50% + 22px); top: 18px; }
    .level2-supervisor-node::after { left: auto; right: -24px; top: 50%; width: 24px; height: 2px; transform: none; }
    .level2-management-row.supervisor-right::before { height: 68px; }
    .level2-management-row.supervisor-right.has-staff::before { height: auto; }
    .level2-management-row.supervisor-right .level2-supervisor-node { left: calc(50% + 22px); right: auto; top: 0; }
    .level2-management-row.supervisor-right .level2-supervisor-node::after { left: -24px; right: auto; }
    .level2-management-row.single-primary::before { height: 24px; bottom: auto; }
    .level2-management-row.single-primary .level2-primary-node { left: 50%; top: 0; transform: translateX(-50%); }
    .level2-management-row.single-primary .level2-primary-node::after { left: 50%; top: 100%; width: 2px; height: 34px; transform: translateX(-50%); }
    .level2-management-row.has-manager { width: min(420px, 100%); height: 146px; }
    .level2-management-row.has-manager::before { height: auto; bottom: 0; }
    .level2-management-row.has-manager .level2-manager-node { width: 112px; height: 40px; min-height: 40px; aspect-ratio: auto; position: absolute; right: calc(50% + 42px); top: 0; flex-direction: row; gap: 5px; }
    .level2-management-row.has-manager .level2-manager-node::after { left: auto; right: -44px; top: 50%; width: 44px; height: 2px; transform: none; }
    .level2-management-row.has-manager .level2-supervisor-node { width: 92px; height: 38px; min-height: 38px; aspect-ratio: auto; left: auto; right: calc(50% + 54px); top: 66px; flex-direction: row; gap: 5px; }
    .level2-management-row.has-manager .level2-supervisor-node::after { left: auto; right: -56px; top: 50%; width: 56px; height: 2px; transform: none; }
    .level2-management-row.has-manager .level2-primary-node { left: calc(50% + 42px); top: 0; }
    .level2-management-row.has-manager .level2-primary-node::after { left: -44px; width: 44px; }
    .level2-management-row.has-level1-leader { width: min(420px, 100%); height: 88px; }
    .level2-management-row.has-level1-leader::before { height: auto; bottom: 0; }
    .level2-management-row.has-level1-leader .level2-primary-node { width: 132px; height: 42px; min-height: 42px; aspect-ratio: auto; left: calc(50% + 36px); top: 0; flex-direction: row; gap: 5px; }
    .level2-management-row.has-level1-leader .level2-primary-node::after { left: -38px; width: 38px; }
    .level2-position-node strong { max-width: 100%; max-height: 50px; font-size: 14px; font-weight: 850; line-height: 1.15; text-align: center; overflow: hidden; overflow-wrap: anywhere; }
    .level2-position-node span { color: #7b3c3c; font-size: 13px; font-weight: 900; line-height: 1; white-space: nowrap; }
    .level2-position-node.empty { border-style: dashed; background: #f7f8fa; }
    .grid-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, .8fr); gap: 20px; }
    .grid-main > .stack:first-child { display: contents; }
    .department-attendance-panel { grid-column: 1 / -1; }
    .department-attendance-panel .panel-head .attendance-period { color: var(--red); font-weight: 800; }
    .people-dynamics-panel { grid-column: 1 / -1; font-weight: 700; }
    .people-dynamics-panel .panel-head .recent-period { color: var(--red); font-weight: 800; }
    .people-dynamics-table { min-width: 760px; }
    .people-dynamics-table th:nth-child(1) { width: 16%; }
    .people-dynamics-table th:nth-child(2) { width: 11%; }
    .people-dynamics-table th:nth-child(3) { width: 38%; }
    .people-dynamics-table th:nth-child(4) { width: 20%; }
    .people-dynamics-table th:nth-child(5) { width: 15%; }
    .people-dynamics-table th,
    .people-dynamics-table td,
    .people-dynamics-table .tag { font-weight: 700; }
    .people-dynamics-table th { color: var(--green); font-size: 12px; font-weight: 800; }
    .people-dynamics-table .person strong { font-size: 13px; font-weight: 800; }
    .people-dynamics-table .change-summary,
    .people-dynamics-table .current-department,
    .people-dynamics-table .effective-date { font-weight: 800; }
    .people-dynamics-table .current-department { color: var(--ink); }
    .change-summary { color: var(--ink); }
    .people-dynamics-table .example-row { background: #fafcfb; }
    .people-dynamics-table .example-row:hover { background: #f4f8f6; }
    .people-dynamics-table .example-note { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 700; }
    .stack { display: grid; gap: 20px; align-content: start; }
    .panel { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; }
    .panel-head { min-height: 57px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
    .panel-head h2 { margin: 0; font-size: 14px; }
    .panel-head span { color: var(--muted); font-size: 10px; margin-left: 7px; font-weight: 400; }
    .link-btn { padding: 5px; border: 0; background: transparent; color: var(--green); cursor: pointer; font-size: 11px; }
    .dashboard-panel-link { font-size: 13px; font-weight: 800; }
    .attendance { padding: 22px 20px 17px; }
    .chart { height: 205px; display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
    .y-axis { height: 176px; display: flex; flex-direction: column; justify-content: space-between; color: #8b9691; font-size: 9px; text-align: right; }
    .plot { height: 176px; position: relative; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; align-items: end; background: repeating-linear-gradient(to bottom, #fff 0, #fff 43px, #edf0ee 44px); }
    .bar-group { height: 100%; display: flex; align-items: end; justify-content: center; gap: 3px; position: relative; }
    .bar { width: min(13px, 32%); min-height: 3px; background: var(--green); border-radius: 3px 3px 0 0; transition: opacity .2s; }
    .bar.absent { background: #dd9f50; }
    .bar-group:hover .bar { opacity: .72; }
    .day { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 9px; }
    .legend { display: flex; justify-content: center; gap: 17px; font-size: 9px; color: var(--muted); }
    .legend span { display: flex; align-items: center; gap: 5px; }
    .legend i { width: 7px; height: 7px; border-radius: 2px; background: var(--green); }
    .legend i.orange { background: #dd9f50; }
    .department-attendance-grid { padding: 14px; display: grid; grid-template-columns: repeat(var(--department-columns), minmax(0, 1fr)); gap: 7px; overflow: hidden; }
    .department-attendance-card { min-width: 0; min-height: 124px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
    .department-attendance-card:hover { border-color: #a8bdb5; box-shadow: 0 5px 16px rgba(27, 64, 49, .07); }
    .department-attendance-title { min-height: 34px; position: relative; padding-right: 34px; }
    .department-attendance-title > div { min-width: 0; }
    .department-attendance-title strong, .department-attendance-title span { display: block; }
    .department-attendance-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
    .department-attendance-title > div span { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
    .department-attendance-title .attendance-rate { position: absolute; top: 0; right: 0; padding: 3px 4px; border-radius: 4px; color: var(--green); background: var(--mint); font-size: 8px; font-weight: 800; }
    .department-attendance-metrics { margin-top: 9px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .department-attendance-metrics > div { min-width: 0; padding: 0 4px; border-left: 1px solid var(--line); }
    .department-attendance-metrics > div:first-child { padding-left: 0; border-left: 0; }
    .department-attendance-metrics span, .department-attendance-metrics strong { display: block; }
    .department-attendance-metrics span { overflow: hidden; color: var(--muted); font-size: 8px; white-space: nowrap; }
    .department-attendance-metrics strong { margin-top: 3px; font-size: 14px; }
    .department-attendance-metrics .absence strong { color: var(--red); }
    .department-attendance-foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 4px; color: var(--muted); font-size: 7px; white-space: nowrap; }
    .department-attendance-foot span:first-child { display: flex; align-items: center; gap: 4px; }
    .department-attendance-foot i { width: 5px; height: 5px; border-radius: 50%; background: #dd9f50; }
    .department-attendance-progress { height: 4px; margin-top: 6px; overflow: hidden; border-radius: 2px; background: #edf0ee; }
    .department-attendance-progress i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--green); }
    .department-attendance-empty { min-height: 218px; display: grid; place-items: center; }
    .todo-list { display: grid; }
    .todo { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; }
    .todo:last-child { border: 0; }
    .todo-icon { width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; background: var(--blue-bg); color: var(--blue); }
    .todo-icon.amber { background: var(--amber-bg); color: var(--amber); }
    .todo-icon.green { background: var(--mint); color: var(--green); }
    .todo-icon svg { width: 16px; }
    .todo strong { display: block; font-size: 11px; margin-bottom: 4px; }
    .todo p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
    .todo time { color: #8c9691; font-size: 9px; }
    .quick-grid { padding: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .quick { height: 67px; border: 1px solid var(--line); background: white; border-radius: 6px; display: grid; place-items: center; align-content: center; gap: 6px; cursor: pointer; color: var(--ink); font-size: 10px; }
    .quick:hover { border-color: #9eb9ae; background: #f7faf8; color: var(--green); }
    .quick svg { width: 17px; height: 17px; color: var(--green); }
    .birthday { padding: 16px; display: flex; align-items: center; gap: 11px; }
    .birthday .avatar { background: #e2d9ef; color: #604478; }
    .birthday strong { display: block; font-size: 11px; }
    .birthday span { color: var(--muted); font-size: 10px; }
    .birthday .tag { margin-left: auto; }
    .tag { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 4px; background: var(--mint); color: var(--green); font-size: 10px; white-space: nowrap; }
    .tag.warn { background: var(--amber-bg); color: var(--amber); }
    .tag.red { background: var(--red-bg); color: var(--red); }
    .tag.blue { background: var(--blue-bg); color: var(--blue); }
    .toolbar { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
    .employee-list-heading { min-height: 54px; padding: 16px 16px 0; }
    .employee-list-heading h3 { margin: 0; font-size: 17px; }
    .employee-list-heading + .toolbar + .table-wrap th { color: var(--ink); font-size: 12px; font-weight: 900; }
    .filters { display: flex; gap: 8px; flex: 1; }
    .search { position: relative; max-width: 280px; width: 100%; }
    .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; color: #8b9691; }
    .search input, select { width: 100%; height: 35px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); outline: 0; font-size: 11px; }
    .search input { padding: 0 10px 0 33px; }
    select { width: auto; min-width: 112px; padding: 0 28px 0 10px; }
    .search input:focus, select:focus { border-color: #7ba493; box-shadow: 0 0 0 3px rgba(24,95,74,.08); }
    .organization-employee-search { max-width: 280px; }
    .organization-employee-search input { padding-right: 35px; }
    .organization-employee-clear { position: absolute; top: 50%; right: 7px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); transform: translateY(-50%); cursor: pointer; }
    .organization-employee-clear:hover { background: #eef4f1; color: var(--ink); }
    .organization-employee-clear svg { position: static; width: 14px; transform: none; }
    .organization-employee-options { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 300px; overflow-y: auto; padding: 5px; border: 1px solid #d6e3dd; border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(31, 59, 48, .14); }
    .organization-employee-options button { display: flex; width: 100%; padding: 9px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
    .organization-employee-options button:hover { background: #f0f7f3; }
    .organization-employee-option-main { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
    .organization-employee-option-main strong { font-size: 12px; }
    .organization-employee-option-main small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .organization-employee-empty { padding: 12px 10px; color: var(--muted); font-size: 10px; text-align: center; }
    .table-wrap { overflow-x: auto; }
    table { border-collapse: collapse; width: 100%; min-width: 760px; }
    th { height: 41px; padding: 0 15px; text-align: left; background: #f7f8f7; color: #707b76; font-size: 10px; font-weight: 600; border-bottom: 1px solid var(--line); }
    td { height: 59px; padding: 0 15px; border-bottom: 1px solid #edf0ee; font-size: 11px; }
    tr:last-child td { border-bottom: 0; }
    tbody tr:hover { background: #fafcfb; }
    .person { display: flex; align-items: center; gap: 9px; }
    .person .avatar { width: 30px; height: 30px; font-size: 10px; }
    .person strong { display: block; font-size: 11px; }
    .person span { color: var(--muted); font-size: 9px; }
    .muted { color: var(--muted); }
    .pagination { min-height: 50px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; border-top: 1px solid var(--line); }
    .pages { display: flex; gap: 5px; }
    .pages button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 5px; background: white; cursor: pointer; font-size: 10px; }
    .pages button.active { background: var(--green); border-color: var(--green); color: white; }
    .split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
    .approval-card { padding: 18px; border-bottom: 1px solid var(--line); }
    .approval-card:last-child { border-bottom: 0; }
    .approval-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
    .approval-card h3 { font-size: 12px; margin: 0 0 5px; }
    .approval-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
    .approval-meta { margin: 14px 0; padding: 12px; background: var(--soft); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .approval-meta span { color: var(--muted); font-size: 9px; }
    .approval-meta strong { display: block; margin-top: 4px; font-size: 10px; }
    .approval-actions { display: flex; gap: 7px; justify-content: flex-end; }
    .pipeline { padding: 22px; display: grid; gap: 18px; }
    .pipe-row { display: grid; grid-template-columns: 76px 1fr 32px; gap: 10px; align-items: center; font-size: 10px; }
    .track { height: 8px; background: #e9eeeb; border-radius: 5px; overflow: hidden; }
    .fill { height: 100%; background: var(--green-2); border-radius: 5px; }
    .calendar-grid { padding: 18px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
    .cal-head { color: var(--muted); font-size: 9px; text-align: center; padding-bottom: 3px; }
    .cal-day { min-height: 74px; border: 1px solid var(--line); padding: 7px; font-size: 9px; color: var(--muted); position: relative; }
    .cal-day.today { border: 1px solid var(--green); background: #f4f9f6; color: var(--green); font-weight: 700; }
    .cal-day.off { background: #f7f8f7; color: #acb4b0; }
    .event { display: block; margin-top: 8px; padding: 4px 5px; background: var(--blue-bg); color: var(--blue); border-left: 2px solid var(--blue); font-size: 8px; line-height: 1.3; }
    .empty { padding: 55px 20px; text-align: center; color: var(--muted); font-size: 11px; }
    .module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
    .module-card { min-height: 118px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: white; cursor: pointer; text-align: left; color: var(--ink); }
    .module-card:hover { border-color: #91afa3; background: #f8fbf9; box-shadow: 0 5px 18px rgba(23,33,29,.06); }
    .module-card .todo-icon { margin-bottom: 13px; }
    .module-card strong { display: block; font-size: 12px; margin-bottom: 5px; }
    .module-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
    .learning-content-layout { align-items: stretch; }
    .learning-content-layout > .panel { min-height: 100%; }
    .learning-resource-panel { display: grid; grid-template-rows: auto 1fr; }
    .learning-resource-list { min-height: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
    .learning-resource-item { min-width: 0; min-height: 112px; padding: 20px 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
    .learning-resource-item:last-child { border-bottom: 0; }
    .learning-resource-item .todo-icon { width: 42px; height: 42px; }
    .learning-resource-item .todo-icon svg { width: 19px; height: 19px; }
    .learning-resource-copy { min-width: 0; }
    .learning-resource-copy strong, .learning-resource-copy span, .learning-resource-copy small { display: block; }
    .learning-resource-copy strong { margin-bottom: 5px; color: var(--ink); font-size: 13px; }
    .learning-resource-copy span { margin-bottom: 9px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .learning-resource-copy small { color: var(--green); font-size: 9px; font-weight: 700; }
    .learning-resource-upload-shortcut { width: 34px; height: 34px; padding: 0; color: var(--green); background: #f4f9f6; }
    .learning-resource-upload-shortcut:hover { border-color: var(--green); background: var(--mint); }
    .learning-resource-metric { min-width: 68px; text-align: right; }
    .learning-resource-metric strong, .learning-resource-metric span { display: block; }
    .learning-resource-metric strong { color: var(--ink); font-size: 24px; line-height: 1; }
    .learning-resource-metric span { margin-top: 6px; color: var(--muted); font-size: 9px; white-space: nowrap; }
    .steps { display: grid; grid-template-columns: repeat(5, 1fr); padding: 20px; }
    .step { position: relative; text-align: center; color: var(--muted); font-size: 9px; }
    .step::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 2px; background: var(--line); }
    .step:first-child::before { left: 50%; }
    .step:last-child::before { right: 50%; }
    .step i { position: relative; z-index: 1; width: 23px; height: 23px; margin: 0 auto 8px; border-radius: 50%; background: var(--mint); color: var(--green); display: grid; place-items: center; font-style: normal; font-weight: 700; }
    .step.active i { background: var(--green); color: white; }
    .offboard-module-tabs { min-height: 46px; margin-bottom: 20px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-end; gap: 24px; }
    .offboard-module-tabs button { min-height: 45px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: 12px; }
    .offboard-module-tabs button svg { width: 15px; height: 15px; }
    .offboard-module-tabs button span { min-width: 20px; padding: 2px 6px; border-radius: 10px; color: var(--muted); background: var(--soft); font-size: 9px; text-align: center; }
    .offboard-module-tabs button.active { border-bottom-color: var(--green); color: var(--green); font-weight: 700; }
    .offboard-module-tabs button.active span { color: var(--green); background: var(--mint); }
    .offboard-approval-panel { overflow: hidden; }
    .offboard-summary { margin-bottom: 20px; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--paper); box-shadow: var(--shadow); }
    .offboard-summary > div { min-height: 86px; padding: 16px 20px; border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .offboard-summary > div:last-child { border-right: 0; }
    .offboard-summary span { color: var(--muted); font-size: 11px; }
    .offboard-summary strong { font-size: 24px; }
    .offboard-summary small { color: var(--muted); font-size: 10px; font-weight: 500; }
    .offboard-tabs { padding: 3px; border: 1px solid var(--line); border-radius: 6px; display: flex; gap: 2px; background: var(--soft); }
    .offboard-tabs button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; }
    .offboard-tabs button.active { color: var(--green); background: white; box-shadow: 0 1px 4px rgba(23,33,29,.08); font-weight: 700; }
    .offboard-panel .person > div:last-child { min-width: 0; }
    .offboard-panel .person span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
    .offboard-panel table { min-width: 1160px; }
    .offboard-panel th:nth-child(1) { width: 180px; }
    .offboard-panel th:nth-child(3) { width: 112px; }
    .offboard-panel th:nth-child(4) { width: 130px; }
    .offboard-panel th:nth-child(5) { width: 110px; }
    .offboard-panel th:nth-child(6) { width: 118px; }
    .offboard-panel th:last-child { width: 220px; }
    .offboard-progress { width: 112px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
    .offboard-progress > div, .offboard-task-progress { height: 6px; overflow: hidden; border-radius: 3px; background: #dfe8e4; }
    .offboard-progress i, .offboard-task-progress i { height: 100%; display: block; border-radius: inherit; background: var(--green); transition: width .2s ease; }
    .offboard-progress span { margin: 0; color: var(--muted); white-space: nowrap; }
    .offboard-risk-note { max-width: 140px; margin-top: 5px; display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
    .offboard-empty { min-height: 112px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; }
    .offboard-empty > svg { width: 23px; height: 23px; color: #91a099; }
    .offboard-impact { margin-top: 6px; padding: 12px; border: 1px solid #cfe0d8; border-radius: 6px; display: flex; align-items: flex-start; gap: 9px; color: var(--green); background: #f4f9f6; font-size: 10px; line-height: 1.65; }
    .offboard-impact.warn { border-color: #ead8b8; color: #7d531c; background: #fff9ed; }
    .offboard-impact svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
    .offboard-employee-combobox { position: relative; }
    .offboard-employee-search { height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; gap: 8px; align-items: center; background: white; transition: border-color .16s ease, box-shadow .16s ease; }
    .offboard-employee-search.open { border-color: #699684; box-shadow: 0 0 0 3px rgba(24,95,74,.1); }
    .offboard-employee-search.selected { background: #f8fbf9; }
    .offboard-employee-search > svg { width: 17px; height: 17px; color: #7a8c85; }
    .offboard-employee-search input { width: 100%; height: 38px; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 10px; }
    .offboard-employee-search input::placeholder { color: #98a49f; }
    .offboard-search-state { position: relative; width: 16px; height: 16px; }
    .offboard-search-state::before { content: ""; position: absolute; top: 3px; left: 4px; width: 7px; height: 7px; border-right: 1.5px solid #7a8c85; border-bottom: 1.5px solid #7a8c85; transform: rotate(45deg); }
    .offboard-search-state.loading { border: 2px solid #d8e2de; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
    .offboard-search-state.loading::before { display: none; }
    .offboard-search-state.selected { border-radius: 50%; background: var(--green); }
    .offboard-search-state.selected::before { top: 3px; left: 5px; width: 4px; height: 7px; border: 0; border-right: 1.5px solid white; border-bottom: 1.5px solid white; transform: rotate(45deg); }
    .offboard-employee-options { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 80; max-height: 310px; padding: 5px; border: 1px solid var(--line); border-radius: 6px; overflow-y: auto; background: white; box-shadow: 0 14px 34px rgba(26,48,40,.16); }
    .offboard-employee-options > button { width: 100%; min-height: 48px; padding: 7px 9px; border: 0; border-radius: 4px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 17px; gap: 9px; align-items: center; color: var(--ink); background: white; text-align: left; cursor: pointer; }
    .offboard-employee-options > button:hover, .offboard-employee-options > button.selected { background: #eef6f2; }
    .offboard-employee-options .avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #725b42; background: #eadbc7; font-size: 8px; font-weight: 800; }
    .offboard-employee-options button > span:nth-child(2), .offboard-employee-options strong, .offboard-employee-options small { min-width: 0; display: block; }
    .offboard-employee-options strong { font-size: 10px; }
    .offboard-employee-options small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-option-check { width: 16px; height: 16px; border-radius: 50%; opacity: 0; background: var(--green); }
    .offboard-option-check.show { position: relative; opacity: 1; }
    .offboard-option-check.show::after { content: ""; position: absolute; top: 3px; left: 6px; width: 4px; height: 7px; border-right: 1.5px solid white; border-bottom: 1.5px solid white; transform: rotate(45deg); }
    .offboard-employee-empty { min-height: 82px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--muted); font-size: 9px; }
    .offboard-empty-search-icon { position: relative; width: 19px; height: 19px; border: 1.5px solid #91a099; border-radius: 50%; }
    .offboard-empty-search-icon::after { content: ""; position: absolute; right: -5px; bottom: -3px; width: 7px; border-top: 1.5px solid #91a099; transform: rotate(45deg); }
    .offboard-empty-loader { width: 19px; height: 19px; border: 2px solid #d8e2de; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
    .offboard-confirm-summary { margin-bottom: 18px; padding: 16px; border: 1px solid var(--line); display: flex; align-items: center; gap: 12px; background: var(--soft); }
    .offboard-confirm-summary strong, .offboard-confirm-summary span { display: block; }
    .offboard-confirm-summary span { margin-top: 4px; color: var(--muted); font-size: 10px; }
    .offboard-case-drawer { width: min(980px, 98vw); }
    .offboard-case-overview { margin-bottom: 18px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
    .offboard-case-overview > div { min-height: 64px; padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .offboard-case-overview span, .offboard-case-overview strong { display: block; }
    .offboard-case-overview span { margin-bottom: 7px; color: var(--muted); font-size: 9px; }
    .offboard-case-overview strong { font-size: 12px; }
    .offboard-case-overview em { font-style: normal; }
    .offboard-case-meta { margin-bottom: 22px; display: grid; grid-template-columns: minmax(130px, .55fr) minmax(180px, .8fr) minmax(260px, 1.5fr) auto; align-items: end; gap: 12px; }
    .offboard-case-meta .form-row { margin: 0; }
    .offboard-case-meta textarea { min-height: 39px; height: 39px; resize: vertical; }
    .offboard-case-meta > .btn { min-height: 39px; }
    .offboard-task-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
    .offboard-task-head h3 { margin: 0; font-size: 13px; }
    .offboard-task-head span { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
    .offboard-task-head > strong { color: var(--green); font-size: 18px; }
    .offboard-task-progress { margin: 9px 0 20px; }
    .offboard-task-group { margin-bottom: 20px; }
    .offboard-task-group h4 { min-height: 35px; margin: 0; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #c8d5d0; color: #365249; background: #f2f6f4; font-size: 10px; }
    .offboard-task-group h4 span { color: var(--muted); font-weight: 500; }
    .offboard-task-row { min-height: 66px; padding: 9px 6px; display: grid; grid-template-columns: 30px minmax(180px, 1.35fr) minmax(120px, .75fr) 130px minmax(130px, 1fr) 52px; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); }
    .offboard-task-row.done { background: #fbfcfc; }
    .offboard-task-toggle { width: 30px; height: 30px; padding: 0; border: 0; display: grid; place-items: center; color: #81928b; background: transparent; cursor: pointer; }
    .offboard-task-toggle:hover { color: var(--green); }
    .offboard-task-toggle:disabled { cursor: default; opacity: .65; }
    .offboard-task-toggle svg { width: 19px; height: 19px; }
    .offboard-task-row.done .offboard-task-toggle { color: var(--green); }
    .offboard-task-main { min-width: 0; }
    .offboard-task-main strong, .offboard-task-main span { display: block; }
    .offboard-task-main strong { overflow-wrap: anywhere; font-size: 10px; }
    .offboard-task-main span { margin-top: 5px; color: var(--muted); font-size: 8px; }
    .offboard-task-row.done .offboard-task-main strong { color: #688078; }
    .offboard-task-row select, .offboard-task-row input { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: white; font: inherit; font-size: 9px; outline: 0; }
    .offboard-task-row select:focus, .offboard-task-row input:focus { border-color: #699684; box-shadow: 0 0 0 2px rgba(24,95,74,.1); }
    .offboard-task-row select:disabled, .offboard-task-row input:disabled, .offboard-case-meta select:disabled, .offboard-case-meta textarea:disabled { color: #71827b; background: #f4f6f5; }
    .offboard-turnover-panel { margin-bottom: 18px; overflow: hidden; }
    .offboard-period-picker { min-height: 34px; padding: 0 8px 0 11px; border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; gap: 8px; color: var(--muted); background: white; font-size: 8px; font-weight: 700; }
    .offboard-period-picker input { width: 112px; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 9px; }
    .offboard-turnover-summary { padding: 14px; display: grid; grid-template-columns: 1.15fr repeat(4, 1fr) 1.05fr; gap: 12px; background: #fff; transition: opacity .16s ease; }
    .offboard-turnover-summary.loading { opacity: .48; pointer-events: none; }
    .offboard-turnover-summary > div, .offboard-turnover-summary > button { --offboard-card-bg:#f8fcfa; --offboard-card-icon:#eef7f3; --offboard-card-border:#dcebe5; --offboard-card-accent:#287c64; position: relative; min-width: 0; min-height: 106px; padding: 14px 24px 14px 14px; border: 1px solid var(--offboard-card-border); border-radius: 7px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: inherit; background: var(--offboard-card-bg); font: inherit; text-align: left; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
    .offboard-turnover-summary > :nth-child(2) { --offboard-card-bg:#f8fbfe; --offboard-card-icon:#eef5fc; --offboard-card-border:#dce8f3; --offboard-card-accent:#487fb1; }
    .offboard-turnover-summary > :nth-child(3) { --offboard-card-bg:#fffcf7; --offboard-card-icon:#fff5e5; --offboard-card-border:#f1e4d1; --offboard-card-accent:#a66f26; }
    .offboard-turnover-summary > :nth-child(4) { --offboard-card-bg:#fdfbfe; --offboard-card-icon:#f7f0f9; --offboard-card-border:#eadfec; --offboard-card-accent:#8c6a9a; }
    .offboard-turnover-summary > :nth-child(5) { --offboard-card-bg:#f8fbfb; --offboard-card-icon:#edf5f3; --offboard-card-border:#dce8e5; --offboard-card-accent:#5c8179; }
    .offboard-turnover-summary > :nth-child(6) { --offboard-card-bg:#f9fbfd; --offboard-card-icon:#f0f5f8; --offboard-card-border:#dee7ed; --offboard-card-accent:#5f8299; }
    .offboard-turnover-summary > button { cursor: pointer; }
    .offboard-turnover-summary > button:hover, .offboard-turnover-summary > button:focus-visible { border-color: var(--offboard-card-accent); box-shadow: 0 2px 0 var(--offboard-card-accent); outline: 0; transform: translateY(-1px); }
    .offboard-turnover-summary > div > svg, .offboard-turnover-summary > button > svg:first-child { width: 23px; height: 23px; padding: 12px; box-sizing: content-box; border-radius: 7px; color: var(--offboard-card-accent); background: var(--offboard-card-icon); }
    .offboard-turnover-summary span, .offboard-turnover-summary small { min-width: 0; display: block; }
    .offboard-turnover-summary span { color: var(--ink); font-size: 11px; font-weight: 800; }
    .offboard-turnover-summary small { margin-top: 7px; overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-turnover-summary strong { display: flex; align-items: baseline; gap: 3px; color: var(--offboard-card-accent); font-size: 22px; white-space: nowrap; }
    .offboard-turnover-summary strong em { color: var(--muted); font-size: 8px; font-style: normal; font-weight: 500; }
    .offboard-turnover-summary strong b { margin: 0 2px; color: #82928c; font-size: 10px; }
    .offboard-turnover-summary .offboard-drill-arrow { position: absolute; right: 8px; width: 15px; height: 15px; padding: 0; color: #8ea49c; background: transparent; }
    .offboard-overview-cards { padding: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; background: #fff; transition: opacity .16s ease; }
    .offboard-overview-cards.loading { opacity: .48; pointer-events: none; }
    .offboard-overview-cards > button { --overview-bg:#f8fcfa; --overview-icon:#eef7f3; --overview-border:#dcebe5; --overview-accent:#287c64; position: relative; min-width: 0; height: 112px; padding: 16px 38px 16px 16px; overflow: hidden; border: 1px solid var(--overview-border); border-radius: 7px; display: grid; grid-template-columns: 50px minmax(110px, 1fr) max-content; grid-template-rows: 1fr auto; align-items: center; gap: 5px 13px; color: var(--ink); background: var(--overview-bg); font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
    .offboard-overview-cards > button.hiring { --overview-bg:#f8fbfe; --overview-icon:#eef5fc; --overview-border:#dce8f3; --overview-accent:#487fb1; }
    .offboard-overview-cards > button.departures { --overview-bg:#fffcf7; --overview-icon:#fff5e5; --overview-border:#f1e4d1; --overview-accent:#a66f26; }
    .offboard-overview-cards > button:hover, .offboard-overview-cards > button:focus-visible { border-color: var(--overview-accent); box-shadow: 0 2px 0 color-mix(in srgb, var(--overview-accent) 70%, transparent); outline: 0; transform: translateY(-1px); }
    .offboard-overview-cards > button.active { border-color: var(--overview-accent); box-shadow: 0 2px 0 var(--overview-accent), 0 8px 18px rgba(26,55,45,.045); }
    .offboard-overview-cards > button > svg:first-of-type { width: 24px; height: 24px; padding: 13px; box-sizing: content-box; border-radius: 7px; color: var(--overview-accent); background: var(--overview-icon); grid-row: 1 / 3; }
    .offboard-overview-cards > button > span:not(.offboard-card-foot):not(.offboard-rate-badge) { min-width: 0; display: block; align-self: end; }
    .offboard-overview-cards > button > span > small { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--muted); font-size: 8px; font-weight: 500; }
    .offboard-overview-cards > button > span > small b { color: #596a63; font-weight: 700; }
    .offboard-overview-cards > button > span:not(.offboard-card-foot):not(.offboard-rate-badge) { overflow: hidden; font-size: 12px; font-weight: 800; white-space: nowrap; }
    .offboard-overview-cards > button > strong { display: flex; align-items: baseline; gap: 4px; align-self: end; color: var(--overview-accent); font-size: 27px; white-space: nowrap; }
    .offboard-overview-cards > button > strong em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 500; }
    .offboard-overview-cards > button > strong b { margin: 0 2px; color: #82928c; font-size: 11px; }
    .offboard-overview-cards .offboard-card-foot { grid-column: 2 / 4; align-self: start; overflow: hidden; color: var(--overview-accent); font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-overview-cards .offboard-card-foot.down { color: #a84b4b; }
    .offboard-overview-cards .offboard-drill-arrow { position: absolute; right: 14px; width: 16px; height: 16px; color: #829a91; }
    .offboard-rate-badge { position: absolute; top: 10px; right: 12px; min-height: 22px; padding: 0 8px; border: 1px solid #b9d8cc; border-radius: 11px; display: inline-flex; align-items: center; color: #176b54; background: #e9f5f0; font-size: 8px; font-weight: 800; }
    .offboard-overview-cards > button.departures { padding-top: 22px; }
    .offboard-inline-module, .offboard-departure-toolbar-panel, .offboard-analysis-panel, .offboard-department-turnover-panel, .offboard-ledger-panel, .offboard-inline-insight, .offboard-inline-approval-panel { position: relative; border-radius: 7px; }
    .offboard-inline-module::before, .offboard-departure-toolbar-panel::before, .offboard-analysis-panel::before, .offboard-department-turnover-panel::before, .offboard-ledger-panel::before, .offboard-inline-insight::before, .offboard-inline-approval-panel::before { content:""; position: absolute; z-index: 2; top: -1px; right: -1px; left: -1px; height: 4px; border-radius: 7px 7px 0 0; background: var(--module-accent,#23765e); }
    .offboard-inline-module { --module-accent:#7fa99b; margin-bottom: 18px; overflow: hidden; }
    .offboard-hiring-module { --module-accent:#8babc6; }
    .offboard-module-mark { min-height: 28px; padding: 0 10px; border-radius: 4px; display: inline-flex; align-items: center; color: #176b54; background: #e7f3ee; font-size: 9px; font-weight: 800; }
    .offboard-module-mark.blue { color: #2d6693; background: #e7f0f8; }
    .offboard-people-toolbar { min-height:54px; padding:9px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px; background:#f7f9f8; }
    .offboard-planning-scopes { padding:3px; border:1px solid #d4dfda; border-radius:6px; display:flex; gap:3px; background:#edf3f0; }
    .offboard-planning-scopes button { min-height:30px; padding:0 10px; border:0; border-radius:4px; display:inline-flex; align-items:center; gap:6px; color:#596b64; background:transparent; font:inherit; font-size:9px; cursor:pointer; }
    .offboard-planning-scopes button.active { color:#176b54; background:white; box-shadow:0 1px 4px rgba(23,33,29,.1); font-weight:800; }
    .offboard-planning-scopes button b { min-width:20px; padding:2px 5px; border-radius:9px; color:inherit; background:#dfe9e5; font-size:8px; text-align:center; }
    .offboard-people-search { width:min(330px,38vw); height:34px; padding:0 7px 0 10px; border:1px solid #cbd9d3; border-radius:5px; display:grid; grid-template-columns:15px minmax(0,1fr) 22px; align-items:center; gap:7px; background:white; }
    .offboard-people-search > svg { width:14px; color:#7d8f88; }
    .offboard-people-search input { min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:9px; }
    .offboard-people-search button { width:22px; height:22px; padding:0; border:0; display:grid; place-items:center; color:#7d8f88; background:transparent; cursor:pointer; }
    .offboard-people-search button svg { width:13px; }
    .offboard-people-header, .offboard-person-detail-row { display:grid; grid-template-columns:minmax(155px,1.05fr) minmax(175px,1.25fr) 95px 75px 80px 94px; align-items:center; gap:14px; }
    .offboard-people-header { min-height:40px; padding:0 20px; border-bottom:1px solid #cfd9d5; color:#5a6d65; background:#eef3f1; font-size:8px; font-weight:800; }
    .offboard-hiring-module .offboard-people-header { background:#edf4fa; }
    .offboard-people-list { max-height:520px; overflow-y:auto; background:white; }
    .offboard-person-detail-row { min-height:72px; padding:10px 20px; border-bottom:1px solid var(--line); }
    .offboard-person-detail-row:last-child { border-bottom:0; }
    .offboard-person-detail-row:hover { background:#fafcfb; }
    .offboard-person-detail-row > * { min-width:0; }
    .offboard-person-detail-row .person > div:last-child { min-width:0; }
    .offboard-person-detail-row .person span, .offboard-person-org span { margin-top:4px; display:block; overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
    .offboard-person-org strong { display:block; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
    .offboard-person-detail-row > span:not(.tag) { color:#50635b; font-size:9px; }
    .offboard-person-detail-row > .tag { justify-self:start; }
    .offboard-person-detail-row > .btn { justify-self:end; }
    .offboard-inline-empty { min-height: 120px; grid-column: 1 / -1; display: grid; place-items: center; align-content: center; gap: 9px; color: var(--muted); font-size: 9px; }
    .offboard-inline-empty svg { width: 24px; color: #7195ae; }
    .offboard-departure-toolbar-panel { --module-accent:#c9a66f; margin-bottom: 18px; overflow: hidden; }
    .offboard-departure-heading { min-height: 76px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: #fffaf2; }
    .offboard-departure-heading > div { min-width: 0; display: flex; align-items: center; gap: 12px; }
    .offboard-heading-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 7px; display: grid; place-items: center; color: #a9650e; background: #ffebcc; }
    .offboard-heading-icon svg { width: 20px; }
    .offboard-departure-heading > div > span:last-child strong, .offboard-departure-heading > div > span:last-child small { display: block; }
    .offboard-departure-heading > div > span:last-child strong { font-size: 13px; }
    .offboard-departure-heading > div > span:last-child small { margin-top: 6px; color: var(--muted); font-size: 8px; }
    .offboard-total-rate { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
    .offboard-total-rate small { color: var(--muted); font-size: 8px; }
    .offboard-total-rate strong { color: #176b54; font-size: 21px; }
    .offboard-departure-controls { min-height: 64px; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; }
    .offboard-type-filters, .offboard-departure-views { display: flex; align-items: center; gap: 6px; }
    .offboard-type-filters button, .offboard-departure-views button { min-height: 34px; padding: 0 11px; border: 1px solid #d7dfdc; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #566861; background: white; font: inherit; font-size: 9px; cursor: pointer; }
    .offboard-type-filters button b { min-width: 18px; padding: 2px 5px; border-radius: 9px; color: #7b6a51; background: #f1eee8; font-size: 8px; }
    .offboard-type-filters button.active { border-color: #c89448; color: #8f580d; background: #fff6e9; font-weight: 800; }
    .offboard-type-filters button.active b { color: #8f580d; background: #ffebcc; }
    .offboard-departure-views { padding: 3px; border: 1px solid #d8e1dd; border-radius: 7px; background: #f3f6f5; }
    .offboard-departure-views button { min-height: 30px; border: 0; background: transparent; }
    .offboard-departure-views button svg { width: 13px; }
    .offboard-departure-views button b { min-width:17px; padding:2px 5px; border-radius:9px; color:#4c6f62; background:#e6efeb; font-size:7px; text-align:center; }
    .offboard-departure-views button.active { color: #176b54; background: white; box-shadow: 0 1px 4px rgba(23,33,29,.1); font-weight: 800; }
    .offboard-analysis-panel { --module-accent:#7fa99b; }
    .offboard-analysis-grid > div { position: relative; }
    .offboard-analysis-grid > div::before { content:""; position:absolute; top:0; right:0; left:0; height:3px; background:#8fb5a8; }
    .offboard-analysis-grid > div:nth-child(2)::before { background:#9bb6cd; }
    .offboard-analysis-grid > div:nth-child(3)::before { background:#cfb184; }
    .offboard-department-turnover-panel { --module-accent:#8babc6; }
    .offboard-ledger-panel, .offboard-inline-insight { --module-accent:#7fa99b; overflow:hidden; }
    .offboard-inline-approval-panel { --module-accent:#8babc6; margin-bottom:18px; }
    .offboard-inline-insight { margin-bottom:18px; }
    .offboard-inline-insight .offboard-insight-group { margin:0; }
    .offboard-inline-insight .offboard-insight-group-head { padding:0 20px; }
    .offboard-inline-insight .offboard-insight-list { padding:0 20px; }
    .offboard-command-center { margin-bottom: 18px; overflow: hidden; border-color: #ddc49e; }
    .offboard-command-center > .panel-head { background: #fffaf2; }
    .offboard-primary-overview { display: grid; grid-template-columns: minmax(250px, .82fr) minmax(390px, 1.35fr) minmax(250px, .86fr); border-bottom: 1px solid #dce5e1; background: white; transition: opacity .16s ease; }
    .offboard-primary-overview.loading { opacity: .48; pointer-events: none; }
    .offboard-primary-overview > section { min-width: 0; min-height: 238px; padding: 20px 22px; border-right: 1px solid #d8e3de; }
    .offboard-primary-overview > section:last-child { border-right: 0; }
    .offboard-primary-kpi { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 10px 14px; background: #fffcf7; box-shadow: inset 0 3px #c9a66f; }
    .offboard-primary-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 11px; }
    .offboard-primary-label > span { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 6px; display: grid; place-items: center; color: #a96109; background: #ffebcc; }
    .offboard-primary-label > span svg { width: 21px; height: 21px; }
    .offboard-primary-label strong, .offboard-primary-label small { display: block; }
    .offboard-primary-label strong { font-size: 13px; }
    .offboard-primary-label small { margin-top: 5px; color: var(--muted); font-size: 8px; font-weight: 500; }
    .offboard-primary-number { display: flex; align-items: end; gap: 5px; align-self: center; color: #a96008; }
    .offboard-primary-number strong { font-size: 46px; line-height: .9; letter-spacing: 0; }
    .offboard-primary-number span { color: #71624f; font-size: 10px; }
    .offboard-primary-rate { align-self: center; text-align: right; }
    .offboard-primary-rate span, .offboard-primary-rate strong { display: block; }
    .offboard-primary-rate span { margin-bottom: 5px; color: var(--muted); font-size: 8px; }
    .offboard-primary-rate strong { color: #176b54; font-size: 20px; }
    .offboard-primary-types { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
    .offboard-primary-types button { min-width: 0; min-height: 38px; padding: 0 8px; border: 1px solid #e1d5c2; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #655b4d; background: rgba(255,255,255,.72); font: inherit; cursor: pointer; }
    .offboard-primary-types button:hover, .offboard-primary-types button:focus-visible, .offboard-primary-types button.active { border-color: #bd7821; color: #8e560d; background: white; outline: 0; box-shadow: inset 0 -2px #bd7821; }
    .offboard-primary-types span { font-size: 8px; }
    .offboard-primary-types strong { font-size: 10px; }
    .offboard-primary-trend { background: #f7fbf9; box-shadow: inset 0 4px #28745e; }
    .offboard-primary-section-head { min-height: 36px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .offboard-primary-section-head strong, .offboard-primary-section-head span { display: block; }
    .offboard-primary-section-head strong { color: #304a40; font-size: 11px; }
    .offboard-primary-section-head span { margin-top: 5px; color: var(--muted); font-size: 8px; }
    .offboard-primary-section-head > b { color: #527067; font-size: 10px; white-space: nowrap; }
    .offboard-primary-trend .offboard-trend-chart { height: 155px; margin-top: 6px; }
    .offboard-primary-source { background: #f6f9fd; box-shadow: inset 0 4px #4381ad; }
    .offboard-primary-source .offboard-source-stack { margin: 18px 0 12px; }
    .offboard-primary-source .offboard-source-stat { min-height: 34px; }
    .offboard-primary-detail-action { width: 100%; min-height: 34px; margin-top: 7px; padding: 0 10px; border: 1px solid #c8d9e5; border-radius: 5px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #326b91; background: #fff; font: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }
    .offboard-primary-detail-action:hover, .offboard-primary-detail-action:focus-visible { border-color: #4381ad; background: #eef5fa; outline: 0; }
    .offboard-primary-detail-action svg { width: 13px; height: 13px; }
    .offboard-primary-source-actions { margin-top: 7px; display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 6px; }
    .offboard-primary-source-actions .offboard-primary-detail-action { margin-top: 0; }
    .offboard-primary-source-actions > button:last-child { min-height: 34px; padding: 0; border: 1px solid #c8d9e5; border-radius: 5px; display: grid; grid-template-columns: 14px auto; place-content: center; align-items: center; gap: 3px; color: #326b91; background: white; cursor: pointer; }
    .offboard-primary-source-actions > button:last-child:hover, .offboard-primary-source-actions > button:last-child:focus-visible { border-color: #4381ad; background: #eef5fa; outline: 0; }
    .offboard-primary-source-actions > button:last-child svg { width: 13px; height: 13px; }
    .offboard-primary-source-actions > button:last-child b { font-size: 7px; }
    .offboard-support-boards { padding: 11px 14px 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; background: #fff; }
    .offboard-support-boards > button { --support-accent:#28745e; --support-soft:#e7f3ee; --support-border:#c9ded6; min-width: 0; min-height: 68px; padding: 10px 12px; border: 1px solid var(--support-border); border-radius: 6px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 13px; align-items: center; gap: 9px; color: inherit; background: #fbfdfc; font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
    .offboard-support-boards > button.hiring { --support-accent:#3475a6; --support-soft:#e7f0f8; --support-border:#cbdceb; background:#fafcff; }
    .offboard-support-boards > button.departments { --support-accent:#4e756d; --support-soft:#e7f0ed; --support-border:#cfdfda; }
    .offboard-support-boards > button.people { --support-accent:#9b6b2e; --support-soft:#f6eddf; --support-border:#e5d4bb; background:#fffdf9; }
    .offboard-support-boards > button.approvals { --support-accent:#426f8f; --support-soft:#e7f0f6; --support-border:#cfdee8; background:#fafcff; }
    .offboard-support-boards > button:hover, .offboard-support-boards > button:focus-visible, .offboard-support-boards > button.active { border-color: var(--support-accent); background: white; box-shadow: 0 3px 0 var(--support-accent); outline: 0; transform: translateY(-1px); }
    .offboard-support-boards > button > svg:first-child { width: 16px; height: 16px; padding: 8px; box-sizing: content-box; border-radius: 5px; color: var(--support-accent); background: var(--support-soft); }
    .offboard-support-boards > button > span { min-width: 0; }
    .offboard-support-boards > button > span strong, .offboard-support-boards > button > span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-support-boards > button > span strong { font-size: 9px; }
    .offboard-support-boards > button > span small { margin-top: 5px; color: var(--muted); font-size: 7px; }
    .offboard-support-boards > button > b { color: var(--support-accent); font-size: 15px; }
    .offboard-support-boards > button > svg:last-child { width: 13px; height: 13px; color: #82948d; }
    .offboard-kpi-strip { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: white; box-shadow: var(--shadow); }
    .offboard-kpi-strip > button { min-width: 0; min-height: 94px; padding: 17px 14px 17px 18px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 14px; align-items: center; gap: 11px; border: 0; border-right: 1px solid var(--line); color: inherit; background: white; font: inherit; text-align: left; cursor: pointer; transition: background .16s ease, box-shadow .16s ease; }
    .offboard-kpi-strip > button:last-child { border-right: 0; }
    .offboard-kpi-strip > button:hover, .offboard-kpi-strip > button:focus-visible { background: #f7faf9; box-shadow: inset 0 -3px var(--green); outline: 0; }
    .offboard-kpi-strip > button > svg:first-child { width: 18px; height: 18px; padding: 8px; box-sizing: content-box; border-radius: 6px; color: #2d6c59; background: #e7f1ed; }
    .offboard-kpi-strip > button:nth-child(2) > svg:first-child { color: #416780; background: #e8f0f5; }
    .offboard-kpi-strip > button:nth-child(3) > svg:first-child { color: #745c32; background: #f3eee3; }
    .offboard-kpi-strip > button:nth-child(4) > svg:first-child { color: #9a4646; background: #f8e8e8; }
    .offboard-kpi-strip .offboard-drill-arrow { width: 14px; height: 14px; color: #82928c; transition: transform .16s ease, color .16s ease; }
    .offboard-kpi-strip > button:hover .offboard-drill-arrow, .offboard-kpi-strip > button:focus-visible .offboard-drill-arrow { color: var(--green); transform: translateX(2px); }
    .offboard-kpi-strip span, .offboard-kpi-strip small { display: block; }
    .offboard-kpi-strip span { color: #43554e; font-size: 10px; font-weight: 700; }
    .offboard-kpi-strip small { margin-top: 6px; color: var(--muted); font-size: 8px; font-weight: 400; line-height: 1.4; }
    .offboard-kpi-strip strong { font-size: 24px; white-space: nowrap; }
    .offboard-kpi-strip strong em { margin-left: 3px; color: var(--muted); font-size: 9px; font-style: normal; font-weight: 500; }
    .offboard-kpi-strip strong.up, .offboard-kpi-strip strong.risk { color: #b24949; }
    .offboard-kpi-strip strong.down { color: var(--green); }
    .offboard-analysis-panel { margin-bottom: 18px; overflow: hidden; }
    .offboard-analysis-period { color: var(--muted); font-size: 9px; white-space: nowrap; }
    .offboard-analysis-grid { display: grid; grid-template-columns: 1.35fr .8fr 1fr; }
    .offboard-analysis-grid > div { min-height: 210px; padding: 18px 20px; border-right: 1px solid #d7e4df; background: #f7fbf9; }
    .offboard-analysis-grid > div:nth-child(2) { border-right-color: #d8e3ee; background: #f6f9fd; }
    .offboard-analysis-grid > div:nth-child(3) { background: #fffaf2; }
    .offboard-analysis-grid > div:last-child { border-right: 0; }
    .offboard-analysis-title { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .offboard-analysis-title > span { color: #344b42; font-size: 10px; font-weight: 800; }
    .offboard-analysis-title > strong { color: var(--muted); font-size: 9px; }
    .offboard-trend-chart { height: 145px; margin-top: 12px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 12px; border-bottom: 1px solid #cad6d1; }
    .offboard-trend-chart > button { height: 100%; padding: 0; border: 0; display: grid; grid-template-rows: 17px minmax(0, 1fr) 24px; align-items: end; justify-items: center; color: inherit; background: transparent; font: inherit; cursor: pointer; }
    .offboard-trend-chart > button:hover, .offboard-trend-chart > button:focus-visible { border-radius: 4px 4px 0 0; background: #f2f7f5; outline: 0; }
    .offboard-trend-chart span { color: #496159; font-size: 8px; font-weight: 700; }
    .offboard-trend-chart i { width: min(30px, 68%); min-height: 3px; border-radius: 3px 3px 0 0; background: #4e8c76; }
    .offboard-trend-chart > button:last-child i { background: #185f4a; }
    .offboard-trend-chart > button:hover i, .offboard-trend-chart > button:focus-visible i { background: #0e6048; box-shadow: 0 0 0 2px rgba(24,95,74,.12); }
    .offboard-trend-chart small { padding-top: 7px; color: var(--muted); font-size: 8px; }
    .offboard-source-stack { height: 9px; margin: 25px 0 20px; overflow: hidden; display: flex; border-radius: 5px; background: #edf1ef; }
    .offboard-source-stack i { height: 100%; display: block; }
    .offboard-source-stack i.dingtalk { background: #4388b4; }
    .offboard-source-stack i.manual { background: #9b8067; }
    .offboard-source-stat { width: 100%; min-height: 37px; padding: 0 2px; display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 7px; border: 0; border-bottom: 1px solid #edf1ef; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
    .offboard-source-stat:hover, .offboard-source-stat:focus-visible { color: var(--green); background: #f5f8f7; outline: 0; }
    .offboard-source-stat:last-child { border-bottom: 0; }
    .offboard-source-stat > span { display: flex; align-items: center; gap: 7px; color: #4c5d56; font-size: 9px; }
    .offboard-source-stat > span > i { width: 7px; height: 7px; border-radius: 50%; }
    .offboard-source-stat > span > i.dingtalk { background: #4388b4; }
    .offboard-source-stat > span > i.manual { background: #9b8067; }
    .offboard-source-stat > strong { display: flex; align-items: baseline; gap: 4px; font-size: 11px; }
    .offboard-source-stat small { color: var(--muted); font-size: 8px; font-weight: 500; }
    .offboard-source-stat > svg, .offboard-department-stat > svg { width: 13px; height: 13px; color: #84948e; }
    .offboard-type-block > button { width: 100%; min-height: 44px; padding: 0 2px; border: 0; border-bottom: 1px solid #edf1ef; display: grid; grid-template-columns: minmax(70px, .8fr) minmax(80px, 1fr) 58px 14px; align-items: center; gap: 9px; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
    .offboard-type-block > button:last-child { border-bottom: 0; }
    .offboard-type-block > button:hover, .offboard-type-block > button:focus-visible { background: #f5f8f7; outline: 0; }
    .offboard-type-block > button > span { display: flex; align-items: center; gap: 7px; color: #4c5d56; font-size: 8px; }
    .offboard-type-block > button > span i { width: 7px; height: 7px; border-radius: 50%; background: #5d8e7c; }
    .offboard-type-block > button > span i.optimization { background: #b27b55; }
    .offboard-type-block > button > span i.other { background: #70869a; }
    .offboard-type-block > button > div { height: 5px; overflow: hidden; border-radius: 3px; background: #e8eeeb; }
    .offboard-type-block > button > div i { height: 100%; display: block; border-radius: inherit; background: #6e9587; }
    .offboard-type-block > button > strong { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; font-size: 10px; }
    .offboard-type-block > button > strong small { color: var(--muted); font-size: 7px; font-weight: 500; }
    .offboard-type-block > button > svg { width: 13px; height: 13px; color: #84948e; }
    .offboard-department-stat { width: 100%; min-height: 34px; padding: 0 2px; border: 0; display: grid; grid-template-columns: minmax(70px, 1fr) minmax(70px, 1fr) 22px 14px; align-items: center; gap: 9px; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
    .offboard-department-stat:hover, .offboard-department-stat:focus-visible { background: #f5f8f7; outline: 0; }
    .offboard-department-stat > span { overflow: hidden; color: #4c5d56; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-department-stat > div { height: 5px; overflow: hidden; border-radius: 3px; background: #e8eeeb; }
    .offboard-department-stat > div i { height: 100%; display: block; border-radius: inherit; background: #6e9587; }
    .offboard-department-stat > strong { font-size: 9px; text-align: right; }
    .offboard-analysis-empty { min-height: 120px; display: grid; place-items: center; color: var(--muted); font-size: 9px; }
    .offboard-department-turnover-panel { margin-bottom: 18px; overflow: hidden; }
    .offboard-department-head-actions { display: flex; align-items: center; gap: 10px; }
    .offboard-turnover-table-block { border-top: 1px solid #dce5e1; background: #fff; }
    .offboard-turnover-table-block:first-of-type { border-top: 0; }
    .offboard-turnover-table-title { min-height: 46px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f7faf8; }
    .offboard-turnover-table-title h3 { margin: 0; color: #214d40; font-size: 12px; }
    .offboard-turnover-table-title span { color: var(--muted); font-size: 9px; }
    .offboard-turnover-board-tabs { padding: 3px; display: inline-flex; align-items: center; gap: 3px; border: 1px solid #d2ded9; border-radius: 6px; background: #f2f6f4; }
    .offboard-turnover-board-tabs button { min-height: 31px; padding: 0 10px; border: 0; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; color: #5d7068; background: transparent; font: inherit; font-size: 8px; cursor: pointer; }
    .offboard-turnover-board-tabs button svg { width: 13px; height: 13px; }
    .offboard-turnover-board-tabs button:hover, .offboard-turnover-board-tabs button:focus-visible { color: #225f4d; outline: 0; }
    .offboard-turnover-board-tabs button.active { color: #175f4b; background: #fff; box-shadow: 0 1px 4px rgba(24,68,53,.12); font-weight: 800; }
    .offboard-turnover-table { min-width: 1120px; }
    .offboard-turnover-table th, .offboard-turnover-table td { height: 42px; padding: 7px 9px; text-align: center; white-space: nowrap; }
    .offboard-turnover-table th:first-child, .offboard-turnover-table td:first-child { min-width: 150px; text-align: left; }
    .offboard-turnover-table thead th { color: #50645b; background: #eef3f1; font-size: 8px; }
    .offboard-turnover-table tbody td { font-size: 9px; }
    .offboard-turnover-table tbody td > button { max-width: 180px; padding: 0; border: 0; display: inline-flex; align-items: center; gap: 4px; overflow: hidden; color: #314a40; background: transparent; cursor: pointer; font: inherit; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-turnover-table tbody td > button:hover { color: var(--green); }
    .offboard-turnover-table tbody td > button svg { width: 12px; height: 12px; flex: 0 0 12px; }
    .offboard-turnover-table tbody td > button > span { min-width: 0; display: block; }
    .offboard-turnover-table tbody td > button > span strong, .offboard-turnover-table tbody td > button > span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-turnover-table tbody td > button > span small { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 500; }
    .offboard-turnover-table tbody tr:hover { background: #fafcfb; }
    .offboard-monthly-turnover-table { min-width: 1040px; }
    .offboard-monthly-turnover-table tbody tr.current { background: #eef7f3; }
    .offboard-monthly-turnover-table tbody tr.current td { color: #174f40; font-weight: 700; }
    @media (max-width: 760px) {
      .offboard-turnover-board-head { min-height: 0; padding: 12px 14px; align-items: stretch; flex-direction: column; }
      .offboard-turnover-board-head h2 span { display: block; margin: 4px 0 0; }
      .offboard-turnover-board-head .offboard-department-head-actions { width: 100%; justify-content: space-between; }
      .offboard-turnover-table-title { min-height: 44px; padding: 0 14px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; }
    }
    .offboard-turnover-table tfoot th { border-top: 1px solid #b9c9c2; color: #203f34; background: #e5f0eb; font-size: 9px; }
    .offboard-ledger-panel { overflow: hidden; }
    .offboard-ledger-toolbar { min-height: 54px; padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); background: #f7f9f8; }
    .offboard-ledger-toolbar > span { color: var(--muted); font-size: 9px; font-weight: 700; }
    .offboard-source-filter { display: flex; align-items: center; gap: 4px; }
    .offboard-source-filter button { min-height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; display: inline-flex; align-items: center; gap: 6px; color: #566861; background: transparent; cursor: pointer; font: inherit; font-size: 9px; }
    .offboard-source-filter button:hover { background: white; }
    .offboard-source-filter button.active { border-color: #a9bcb4; color: var(--green); background: white; font-weight: 700; }
    .offboard-source-filter button svg { width: 13px; height: 13px; }
    .offboard-source-filter button b { min-width: 18px; padding: 2px 5px; border-radius: 9px; color: var(--muted); background: #e7ecea; font-size: 8px; text-align: center; }
    .offboard-source-filter button.active b { color: var(--green); background: var(--mint); }
    .offboard-ledger-search { width: min(330px, 38vw); height: 34px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 5px; display: grid; grid-template-columns: 15px minmax(0, 1fr) 22px; align-items: center; gap: 7px; background: white; }
    .offboard-ledger-search > svg { width: 14px; height: 14px; color: #7e9088; }
    .offboard-ledger-search input { min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 9px; }
    .offboard-ledger-search > button { width: 22px; height: 22px; padding: 0; border: 0; display: grid; place-items: center; color: #7e9088; background: transparent; cursor: pointer; }
    .offboard-ledger-search > button svg { width: 13px; height: 13px; }
    .offboard-ledger-header, .offboard-ledger-row { display: grid; grid-template-columns: minmax(155px, 1.05fr) 95px minmax(165px, 1.2fr) minmax(145px, 1fr) minmax(150px, 1.05fr) minmax(190px, 1.2fr); align-items: center; gap: 15px; }
    .offboard-ledger-header { min-height: 42px; padding: 0 20px; border-bottom: 1px solid #cfd9d5; color: #5a6d65; background: #eef3f1; font-size: 8px; font-weight: 800; }
    .offboard-ledger-row { min-height: 94px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
    .offboard-ledger-row:last-child { border-bottom: 0; }
    .offboard-ledger-row:hover { background: #fafcfb; }
    .offboard-ledger-row > div { min-width: 0; }
    .offboard-ledger-row .person > div:last-child { min-width: 0; }
    .offboard-ledger-row .person span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
    .offboard-source-pill { width: fit-content; min-height: 26px; padding: 0 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 8px; font-weight: 800; }
    .offboard-source-pill svg { width: 12px; height: 12px; }
    .offboard-source-pill.dingtalk { color: #28698f; background: #e5f0f7; }
    .offboard-source-pill.manual { color: #765a43; background: #f1ece6; }
    .offboard-leave-info strong, .offboard-leave-info span, .offboard-leave-info small, .offboard-org-info strong, .offboard-org-info span, .offboard-ledger-progress span, .offboard-ledger-progress small { display: block; }
    .offboard-leave-info strong, .offboard-org-info strong { font-size: 9px; }
    .offboard-leave-info span, .offboard-org-info span { margin-top: 5px; color: #50635b; font-size: 8px; }
    .offboard-leave-info small { max-width: 180px; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-ledger-progress > div { width: 100%; height: 6px; margin-bottom: 6px; overflow: hidden; border-radius: 3px; background: #dfe8e4; }
    .offboard-ledger-progress > div i { height: 100%; display: block; border-radius: inherit; background: var(--green); }
    .offboard-ledger-progress span { color: #40564d; font-size: 8px; font-weight: 800; }
    .offboard-ledger-progress small { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-ledger-actions { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
    .offboard-ledger-actions > div { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
    .offboard-ledger-actions .icon-btn { width: 31px; height: 31px; }
    .offboard-ledger-actions .icon-btn svg { width: 14px; height: 14px; }
    .offboard-ledger-actions .icon-btn.danger { border-color: #e3baba; color: #a64040; }
    .offboard-ledger-list > .offboard-empty { min-height: 170px; }
    .offboard-insight-drawer { width: min(820px, 96vw); }
    .offboard-insight-group { margin: 0 -22px 24px; }
    .offboard-insight-group-head { min-height: 46px; padding: 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: #f5f8f7; }
    .offboard-insight-group-head h3 { margin: 0; font-size: 11px; }
    .offboard-insight-group-head span { min-width: 44px; padding: 4px 8px; border-radius: 10px; color: var(--green); background: var(--mint); font-size: 8px; font-weight: 800; text-align: center; }
    .offboard-insight-list { padding: 0 22px; }
    .offboard-insight-row { min-height: 82px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(145px, 1fr) 90px minmax(180px, 1.25fr) 86px 104px; align-items: center; gap: 12px; }
    .offboard-insight-row:last-child { border-bottom: 0; }
    .offboard-insight-row:hover { background: #fafcfb; }
    .offboard-insight-row .person > div:last-child { min-width: 0; }
    .offboard-insight-row .person span, .offboard-insight-info span, .offboard-insight-info small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
    .offboard-insight-info { min-width: 0; }
    .offboard-insight-info strong { display: block; font-size: 9px; }
    .offboard-insight-info span, .offboard-insight-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-insight-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
    .offboard-insight-actions .icon-btn { width: 31px; height: 31px; }
    .offboard-insight-empty { min-height: 160px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted); font-size: 9px; }
    .offboard-insight-empty svg { width: 24px; height: 24px; color: #9cadA6; }
    .offboard-case-overview { grid-template-columns: repeat(4, 1fr); }
    @media (max-width: 1400px) and (min-width: 761px) {
      .offboard-overview-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; }
      .offboard-overview-cards > button { height:104px; padding:12px 28px 12px 12px; grid-template-columns:42px minmax(72px,1fr) max-content; gap:4px 8px; }
      .offboard-overview-cards > button > svg:first-of-type { width:20px; height:20px; padding:11px; }
      .offboard-overview-cards > button > span:not(.offboard-card-foot):not(.offboard-rate-badge) { font-size:10px; }
      .offboard-overview-cards > button > span > small { margin-top:5px; gap:3px 6px; font-size:7px; }
      .offboard-overview-cards > button > strong { font-size:22px; }
      .offboard-overview-cards .offboard-card-foot { font-size:7px; }
      .offboard-overview-cards > button.departures { grid-column:auto; padding-top:19px; }
      .offboard-rate-badge { top:6px; right:8px; min-height:18px; padding:0 6px; font-size:7px; }
    }
    @media (max-width: 1100px) and (min-width: 761px) {
      .offboard-overview-cards { padding:10px; gap:8px; }
      .offboard-overview-cards > button { height:98px; padding:9px 20px 9px 9px; grid-template-columns:34px minmax(46px,1fr) max-content; gap:3px 5px; }
      .offboard-overview-cards > button > svg:first-of-type { width:16px; height:16px; padding:9px; }
      .offboard-overview-cards > button > strong { font-size:18px; }
      .offboard-overview-cards > button > strong em { font-size:7px; }
      .offboard-overview-cards > button > strong b { font-size:8px; }
      .offboard-overview-cards .offboard-drill-arrow { right:5px; width:12px; }
    }
    @media (max-width: 1700px) {
      .offboard-turnover-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 1180px) {
      .offboard-primary-overview { grid-template-columns: minmax(240px, .8fr) minmax(380px, 1.2fr); }
      .offboard-primary-source { grid-column: 1 / -1; }
      .offboard-primary-overview > section:nth-child(2) { border-right: 0; }
      .offboard-primary-overview > section:last-child { min-height: 190px; border-top: 1px solid #d8e3de; }
      .offboard-support-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .offboard-turnover-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .offboard-departure-controls { align-items: stretch; flex-direction: column; }
      .offboard-departure-views { align-self: flex-start; }
      .offboard-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .offboard-kpi-strip > button:nth-child(2) { border-right: 0; }
      .offboard-kpi-strip > button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .offboard-analysis-grid { grid-template-columns: 1fr 1fr; }
      .offboard-analysis-grid > div { border-bottom: 1px solid var(--line); }
      .offboard-analysis-grid > div:nth-child(2) { border-right: 0; }
      .offboard-analysis-grid > div:last-child { grid-column: 1 / -1; border-bottom: 0; }
      .offboard-ledger-header { display: none; }
      .offboard-ledger-row { grid-template-columns: minmax(155px, 1fr) 105px minmax(180px, 1.2fr) minmax(160px, 1fr); grid-template-areas: "person source leave org" "progress progress actions actions"; row-gap: 13px; }
      .offboard-ledger-row > div:nth-child(1) { grid-area: person; }
      .offboard-ledger-row > div:nth-child(2) { grid-area: source; }
      .offboard-ledger-row > div:nth-child(3) { grid-area: leave; }
      .offboard-ledger-row > div:nth-child(4) { grid-area: org; }
      .offboard-ledger-row > div:nth-child(5) { grid-area: progress; }
      .offboard-ledger-row > div:nth-child(6) { grid-area: actions; }
    }
    @media (max-width: 760px) {
      .offboard-command-center > .panel-head { align-items: flex-start; }
      .offboard-primary-overview { grid-template-columns: 1fr; }
      .offboard-primary-overview > section, .offboard-primary-overview > section:nth-child(2) { min-height: 220px; border-right: 0; border-bottom: 1px solid #d8e3de; }
      .offboard-primary-overview > section:last-child { min-height: 190px; border-bottom: 0; }
      .offboard-support-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .offboard-turnover-panel .panel-head { align-items: flex-start; }
      .offboard-period-picker { width: 100%; justify-content: space-between; }
      .offboard-turnover-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .offboard-overview-cards { grid-template-columns: 1fr; }
      .offboard-overview-cards > button.departures { grid-column: auto; }
      .offboard-overview-cards > button { height: 112px; padding: 16px 38px 16px 16px; grid-template-columns: 50px minmax(110px,1fr) auto; gap: 5px 11px; }
      .offboard-overview-cards > button > svg:first-of-type { width: 23px; height: 23px; padding: 12px; }
      .offboard-overview-cards > button > strong { font-size: 21px; }
      .offboard-people-toolbar { align-items:stretch; flex-direction:column; }
      .offboard-planning-scopes { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
      .offboard-planning-scopes button { justify-content:center; }
      .offboard-people-search { width:100%; }
      .offboard-people-header { display:none; }
      .offboard-person-detail-row { padding:14px; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"person status" "org date" "city action"; align-items:start; gap:10px 12px; }
      .offboard-person-detail-row > .person { grid-area:person; }
      .offboard-person-detail-row > .offboard-person-org { grid-area:org; }
      .offboard-person-detail-row > span:nth-child(3) { grid-area:date; text-align:right; }
      .offboard-person-detail-row > span:nth-child(4) { grid-area:city; }
      .offboard-person-detail-row > .tag { grid-area:status; justify-self:end; }
      .offboard-person-detail-row > .btn { grid-area:action; }
      .offboard-departure-heading { align-items: flex-start; }
      .offboard-departure-controls { padding: 12px; }
      .offboard-type-filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
      .offboard-type-filters button { min-width: 0; padding: 0 5px; }
      .offboard-departure-views { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
      .offboard-departure-views button { min-width: 0; padding: 0 5px; }
      .offboard-turnover-summary > div, .offboard-turnover-summary > button { min-height: 96px; padding: 12px 24px 12px 12px; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; }
      .offboard-turnover-summary > div > svg, .offboard-turnover-summary > button > svg:first-child { width: 20px; height: 20px; padding: 10px; }
      .offboard-turnover-summary span { font-size: 10px; }
      .offboard-turnover-summary strong { font-size: 19px; }
      .offboard-turnover-summary > :first-child strong { gap: 2px; font-size: 16px; }
      .offboard-kpi-strip > button { min-height: 82px; padding: 12px; grid-template-columns: 30px minmax(0, 1fr) auto 12px; gap: 8px; }
      .offboard-kpi-strip > button > svg:first-child { width: 15px; height: 15px; padding: 7px; }
      .offboard-kpi-strip strong { font-size: 19px; }
      .offboard-analysis-grid { grid-template-columns: 1fr; }
      .offboard-analysis-grid > div, .offboard-analysis-grid > div:nth-child(2) { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--line); }
      .offboard-analysis-grid > div:last-child { border-bottom: 0; }
      .offboard-ledger-toolbar { align-items: stretch; flex-direction: column; }
      .offboard-ledger-search { width: 100%; }
      .offboard-source-filter { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .offboard-source-filter button { min-width: 0; padding: 0 5px; justify-content: center; }
      .offboard-ledger-row { padding: 16px 14px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "person source" "leave org" "progress progress" "actions actions"; align-items: start; column-gap: 12px; }
      .offboard-leave-info small { max-width: 46vw; }
      .offboard-ledger-actions { align-items: center; }
      .offboard-insight-row { padding: 14px 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "person source" "info status" "actions actions"; align-items: start; }
      .offboard-insight-row > .person { grid-area: person; }
      .offboard-insight-row > .offboard-source-pill { grid-area: source; }
      .offboard-insight-row > .offboard-insight-info { grid-area: info; }
      .offboard-insight-row > .tag { grid-area: status; justify-self: end; }
      .offboard-insight-actions { grid-area: actions; }
      .offboard-case-overview { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .offboard-primary-overview > section { padding: 18px 14px; }
      .offboard-primary-number strong { font-size: 40px; }
      .offboard-primary-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .offboard-support-boards { grid-template-columns: 1fr; }
      .offboard-turnover-summary { grid-template-columns: 1fr; }
      .offboard-overview-cards { padding: 10px; }
      .offboard-overview-cards > button { height: 124px; grid-template-columns: 46px minmax(0,1fr); }
      .offboard-overview-cards > button > strong { grid-column: 2; }
      .offboard-overview-cards .offboard-card-foot { grid-column: 2; }
      .offboard-rate-badge { top: 8px; }
      .offboard-total-rate { display: grid; gap: 3px; text-align:right; }
      .offboard-type-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .offboard-departure-views { grid-template-columns: 1fr; }
    }
    .offboard-overview-workspace, .offboard-detail-workspace { margin-bottom: 18px; overflow: hidden; border-color: #d9c5a5; }
    .offboard-workspace-head { min-height: 70px; align-items: center; background: #fffaf2; }
    .offboard-period-actions { padding: 3px; border: 1px solid #d7dfdc; border-radius: 6px; display: flex; align-items: center; gap: 3px; background: #f5f7f6; }
    .offboard-period-actions button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #60716a; background: transparent; font: inherit; font-size: 9px; cursor: pointer; white-space: nowrap; }
    .offboard-period-actions button:hover, .offboard-period-actions button:focus-visible { color: #176b54; background: white; outline: 0; }
    .offboard-period-actions button.active { color: #8e570e; background: #fff2df; box-shadow: 0 1px 4px rgba(74,48,15,.12); font-weight: 800; }
    .offboard-period-actions button svg { width: 13px; height: 13px; }
    .offboard-custom-range { min-height: 58px; padding: 9px 18px; border-bottom: 1px solid #dce4e0; display: flex; align-items: end; justify-content: flex-end; gap: 10px; background: #f8faf9; }
    .offboard-custom-range label { display: grid; gap: 5px; }
    .offboard-custom-range label span { color: var(--muted); font-size: 8px; font-weight: 700; }
    .offboard-custom-range input { width: 140px; height: 32px; padding: 0 8px; border: 1px solid #cbd8d3; border-radius: 5px; background: white; font: inherit; font-size: 9px; outline: 0; }
    .offboard-custom-range input:focus { border-color: #668f80; box-shadow: 0 0 0 2px rgba(32,107,83,.08); }
    .offboard-custom-range > svg { width: 14px; height: 14px; margin-bottom: 9px; color: #81928b; }
    .offboard-summary-boards { padding: 14px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; border-bottom: 1px solid #dce4e0; background: white; transition: opacity .16s ease; }
    .offboard-summary-boards.loading { opacity: .48; pointer-events: none; }
    .offboard-summary-boards > button { --board-accent:#28745e; --board-icon:#e6f2ed; --board-border:#c9ded6; position: relative; min-width: 0; min-height: 82px; padding: 12px 24px 12px 11px; border: 1px solid var(--board-border); border-radius: 6px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 12px; align-items: center; gap: 8px; color: inherit; background: #fbfdfc; font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
    .offboard-summary-boards > button.departures { --board-accent:#ae660b; --board-icon:#ffebcc; --board-border:#e6cfae; background:#fffaf2; }
    .offboard-summary-boards > button.trend { --board-accent:#28745e; --board-icon:#e5f1ec; --board-border:#c9ded6; }
    .offboard-summary-boards > button.source { --board-accent:#427da7; --board-icon:#e6f0f7; --board-border:#ccdce8; background:#fafcff; }
    .offboard-summary-boards > button.planning { --board-accent:#327561; --board-icon:#e5f1ed; --board-border:#c9ded6; }
    .offboard-summary-boards > button.hiring { --board-accent:#2e70a5; --board-icon:#e4eef8; --board-border:#cadcec; background:#fafcff; }
    .offboard-summary-boards > button.departments { --board-accent:#6f5d86; --board-icon:#eee8f3; --board-border:#ddd2e5; background:#fcfafd; }
    .offboard-summary-boards > button:hover, .offboard-summary-boards > button:focus-visible, .offboard-summary-boards > button.active { border-color: var(--board-accent); box-shadow: 0 3px 0 var(--board-accent); outline: 0; transform: translateY(-1px); }
    .offboard-summary-boards > button > svg:first-child { width: 16px; height: 16px; padding: 9px; box-sizing: content-box; border-radius: 5px; color: var(--board-accent); background: var(--board-icon); }
    .offboard-summary-boards > button > span { min-width: 0; }
    .offboard-summary-boards > button > span strong, .offboard-summary-boards > button > span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-summary-boards > button > span strong { font-size: 9px; }
    .offboard-summary-boards > button > span small { margin-top: 6px; color: var(--muted); font-size: 7px; }
    .offboard-summary-boards > button > b { color: var(--board-accent); font-size: 18px; }
    .offboard-summary-boards > button > em { position: absolute; top: 8px; right: 10px; color: #176b54; font-size: 7px; font-style: normal; font-weight: 800; }
    .offboard-summary-boards > button > svg:last-child { position: absolute; right: 7px; bottom: 10px; width: 12px; height: 12px; color: #84958e; }
    .offboard-detail-workspace .offboard-workspace-view { margin: 0; overflow: hidden; border: 0; border-radius: 0; background: white; box-shadow: none; }
    .offboard-detail-workspace .offboard-workspace-view::before { display: none; }
    .offboard-detail-workspace .offboard-workspace-view > .panel-head { min-height: 62px; border-top: 0; border-bottom: 1px solid #d8e2de; background: #f8faf9; box-shadow: none; }
    .offboard-detail-workspace .offboard-workspace-view > .panel-head h2 { color: #253e35; }
    .offboard-trend-view-body { padding: 16px 24px 22px; }
    .offboard-trend-view .offboard-trend-chart { height: 190px; margin: 0; }
    .offboard-source-view-body { padding: 14px 22px 20px; display: grid; grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(180px, .7fr)); align-items: center; gap: 16px; }
    .offboard-source-view-body .offboard-source-stack { margin: 0; }
    .offboard-source-view-body .offboard-source-stat { min-height: 46px; padding: 0 12px; border: 1px solid #d8e2de; border-radius: 5px; background: white; }
    .offboard-ledger-filter-groups { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
    .offboard-type-filters.compact { gap: 3px; }
    .offboard-type-filters.compact button { min-height: 30px; padding: 0 8px; }
    .offboard-overview-workspace { max-width: 100%; overflow: hidden; }
    .offboard-overview-workspace .offboard-primary-overview { width: 100%; max-width: 100%; grid-template-columns: minmax(0, .94fr) minmax(0, 1.18fr) minmax(0, .94fr) minmax(0, .94fr); overflow: hidden; }
    .offboard-overview-workspace .offboard-primary-overview > section { min-height: 218px; padding: 15px 13px; overflow: hidden; }
    .offboard-overview-workspace .offboard-primary-label { gap: 8px; }
    .offboard-overview-workspace .offboard-primary-label > span { width: 36px; height: 36px; flex-basis: 36px; }
    .offboard-overview-workspace .offboard-primary-label > span svg { width: 18px; height: 18px; }
    .offboard-overview-workspace .offboard-primary-label strong { font-size: 11px; }
    .offboard-overview-workspace .offboard-primary-label small { margin-top: 3px; font-size: 7px; }
    .offboard-overview-workspace .offboard-primary-number strong { font-size: 38px; }
    .offboard-overview-workspace .offboard-primary-rate strong { font-size: 17px; }
    .offboard-overview-workspace .offboard-primary-types { gap: 3px; }
    .offboard-overview-workspace .offboard-primary-types button { min-height: 34px; padding: 0 5px; gap: 3px; }
    .offboard-overview-workspace .offboard-primary-section-head { min-height: 32px; gap: 7px; }
    .offboard-overview-workspace .offboard-primary-section-head strong { font-size: 10px; }
    .offboard-overview-workspace .offboard-primary-section-head span { margin-top: 3px; font-size: 7px; }
    .offboard-overview-workspace .offboard-primary-section-head > b { font-size: 9px; }
    .offboard-overview-workspace .offboard-primary-trend .offboard-trend-chart { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .offboard-overview-workspace .offboard-primary-trend .offboard-trend-chart { height: 132px; margin-top: 4px; }
    .offboard-overview-workspace .offboard-primary-source .offboard-source-stack { margin: 12px 0 7px; }
    .offboard-overview-workspace .offboard-primary-source .offboard-source-stat { min-height: 29px; }
    .offboard-overview-workspace .offboard-primary-source-actions { margin-top: 4px; grid-template-columns: minmax(0, 1fr) 34px; }
    .offboard-overview-workspace .offboard-primary-detail-action, .offboard-overview-workspace .offboard-primary-source-actions > button:last-child { min-height: 31px; }
    .offboard-primary-auxiliary { padding: 15px 11px !important; background: #fbfafc; box-shadow: inset 0 4px #735d89; }
    .offboard-primary-auxiliary .offboard-primary-section-head > i { width: 18px; height: 18px; color: #735d89; }
    .offboard-primary-auxiliary > button { width: 100%; min-height: 47px; padding: 0 2px; border: 0; border-bottom: 1px solid #e6e0e9; display: grid; grid-template-columns: minmax(0, 1fr) auto 11px; align-items: center; gap: 6px; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
    .offboard-primary-auxiliary > button:last-child { border-bottom: 0; }
    .offboard-primary-auxiliary > button:hover, .offboard-primary-auxiliary > button:focus-visible, .offboard-primary-auxiliary > button.active { color: #654d77; background: #f5f0f7; outline: 0; }
    .offboard-primary-auxiliary > button > span { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 6px; }
    .offboard-primary-auxiliary > button > span > svg { width: 14px; height: 14px; padding: 5px; box-sizing: content-box; border-radius: 5px; grid-row: 1 / 3; color: #6b557e; background: #eee8f2; }
    .offboard-primary-auxiliary > button b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-primary-auxiliary > button small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
    .offboard-primary-auxiliary > button > strong { color: #6b557e; font-size: 13px; }
    .offboard-primary-auxiliary > button > svg { width: 11px; height: 11px; color: #8a7c93; }
    .offboard-detail-head { min-height: 66px; background: #fffaf2; }
    .offboard-detail-head.has-ledger-tabs { min-height: 58px; }
    .offboard-detail-head.has-ledger-tabs .offboard-tabs { margin-left: auto; flex: 0 0 auto; }
    @media (max-width: 1500px) {
      .offboard-summary-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .offboard-detail-workspace .offboard-ledger-toolbar { align-items: stretch; flex-direction: column; }
      .offboard-detail-workspace .offboard-ledger-search { width: 100%; }
      .offboard-ledger-filter-groups { justify-content: space-between; }
    }
    @media (max-width: 900px) and (min-width: 761px) {
      .offboard-overview-workspace .offboard-primary-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .offboard-overview-workspace .offboard-primary-overview > section { grid-column: auto; min-height: 238px; border-top: 0; border-bottom: 1px solid #d8e3de; }
      .offboard-overview-workspace .offboard-primary-overview > section:nth-child(even) { border-right: 0; }
      .offboard-overview-workspace .offboard-primary-overview > section:nth-last-child(-n+2) { border-bottom: 0; }
    }
    @media (max-width: 900px) {
      .offboard-workspace-head { align-items: stretch; }
      .offboard-period-actions { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .offboard-period-actions button { min-width: 0; padding: 0 6px; }
      .offboard-source-view-body { grid-template-columns: 1fr; }
    }
    @media (max-width: 760px) {
      .offboard-summary-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
      .offboard-custom-range { align-items: stretch; flex-wrap: wrap; justify-content: flex-start; }
      .offboard-custom-range label { flex: 1 1 130px; }
      .offboard-custom-range input { width: 100%; }
      .offboard-custom-range > svg { align-self: center; margin: 15px 0 0; }
      .offboard-custom-range > .btn { flex: 1 1 100%; }
      .offboard-ledger-filter-groups { align-items: stretch; flex-direction: column; }
      .offboard-type-filters.compact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .offboard-overview-workspace .offboard-primary-overview { grid-template-columns: 1fr; }
      .offboard-overview-workspace .offboard-primary-overview > section, .offboard-overview-workspace .offboard-primary-overview > section:nth-child(2), .offboard-overview-workspace .offboard-primary-overview > section:last-child { grid-column: auto; min-height: 220px; border-right: 0; border-top: 0; border-bottom: 1px solid #d8e3de; }
      .offboard-overview-workspace .offboard-primary-overview > section:last-child { border-bottom: 0; }
    }
    @media (max-width: 520px) {
      .offboard-summary-boards { grid-template-columns: 1fr; }
      .offboard-summary-boards > button { min-height: 78px; }
      .offboard-period-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .toast { position: fixed !important; top: 50%; left: 50%; right: auto; bottom: auto; z-index: 9999 !important; min-width: 280px; max-width: min(460px, calc(100vw - 44px)); min-height: 52px; background: #fff !important; color: #b42318 !important; border: 1px solid #9bd2b4; box-shadow: 0 14px 34px rgba(24, 65, 47, .2), 0 3px 10px rgba(0,0,0,.08); padding: 14px 18px; border-radius: 9px; display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 700; line-height: 1.55; transform: translate(-50%, calc(-50% + 25px)); opacity: 0; pointer-events: none; transition: .25s ease; }
    .toast.show { transform: translate(-50%, -50%); opacity: 1; }
    .toast svg { width: 20px; height: 20px; flex: 0 0 20px; color: #17804f; stroke-width: 2.5; }
    .toast span { color: #b42318 !important; }
    @media (max-width: 640px) { .toast { min-width: 0; width: calc(100vw - 28px); padding: 13px 15px; font-size: 13px; } }
    .drawer-mask { position: fixed; inset: 0; background: rgba(12,24,19,.34); z-index: 50; display: none; }
    .drawer-mask.show { display: block; }
    .drawer { position: absolute; right: 0; top: 0; width: min(420px, 92vw); height: 100%; background: white; padding: 22px; box-shadow: -15px 0 40px rgba(0,0,0,.12); overflow-y: auto; }
    .drawer.wide { width: min(760px, 96vw); padding-bottom: 0; }
    .drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
    .drawer-head h2 { margin: 0; font-size: 17px; }
    .drawer-head span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
    .form-row { display: grid; gap: 7px; margin-bottom: 15px; }
    .form-row label { font-size: 11px; color: var(--muted); }
    .form-row input, .form-row textarea, .form-row select { border: 1px solid var(--line); border-radius: 6px; min-height: 39px; padding: 9px 10px; width: 100%; font: inherit; font-size: 11px; outline: 0; }
    .form-row textarea { min-height: 90px; resize: vertical; }
    .drawer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
    .form-section { margin: 22px 0 15px; padding-top: 18px; border-top: 1px solid var(--line); }
    .form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
    .form-section h3 { margin: 0; font-size: 12px; }
    .sticky-actions { position: sticky; bottom: 0; margin: 24px -22px 0; padding: 14px 22px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); }
    .onboarding-tabs { min-height: 44px; display: flex; gap: 24px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
    .onboarding-tabs button { position: relative; border: 0; background: transparent; color: var(--muted); padding: 0 2px; cursor: pointer; font-size: 11px; }
    .onboarding-tabs button.active { color: var(--green); font-weight: 700; }
    .onboarding-tabs button.active::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--green); }
    .onboarding-modules { min-height: 76px; gap: 0; margin-bottom: 20px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
    .onboarding-modules button { flex: 1; min-width: 0; padding: 14px 18px; display: flex; align-items: center; gap: 11px; text-align: left; border-right: 1px solid var(--line); }
    .onboarding-modules button:last-child { border-right: 0; }
    .onboarding-modules button:hover { background: var(--soft); }
    .onboarding-modules button.active { background: #f2f8f5; }
    .onboarding-modules button.active::after { inset: auto 16px -1px; }
    .onboarding-modules button > svg { width: 19px; height: 19px; flex: 0 0 auto; }
    .onboarding-modules button span { min-width: 0; }
    .onboarding-modules button strong { display: block; color: inherit; font-size: 12px; }
    .onboarding-modules button small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 400; }
    .onboarding-modules.materials-flow { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; overflow-x: hidden; border: 0; background: transparent; box-shadow: none; }
    .onboarding-modules.materials-flow button { min-width: 0; min-height: 104px; padding: 14px 16px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; grid-template-rows: auto auto; grid-template-areas: "icon copy arrow" "icon count arrow"; align-items: center; column-gap: 12px; row-gap: 6px; border: 1px solid #d8e2de; border-radius: 7px; color: var(--ink); background: #fbfcfc; text-align: left; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
    .onboarding-modules.materials-flow button:last-child { border-right: 1px solid #d8e2de; }
    .onboarding-modules.materials-flow button:hover { border-color: #9cb4aa; background: white; box-shadow: 0 6px 16px rgba(30, 54, 46, .07); }
    .onboarding-modules.materials-flow button.active { border-color: #7da596; background: #f6faf8; box-shadow: 0 0 0 1px rgba(24, 95, 74, .12); }
    .onboarding-modules.materials-flow button.active::after { content: none; }
    .onboarding-flow-icon { grid-area: icon; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; color: #146b54; background: #e3f1ec; }
    .onboarding-modules.materials-flow button:nth-child(2) .onboarding-flow-icon { color: #2e6799; background: #e5eef7; }
    .onboarding-modules.materials-flow button:nth-child(3) .onboarding-flow-icon { color: #a35b0a; background: #fff0d9; }
    .onboarding-modules.materials-flow button:nth-child(4) .onboarding-flow-icon { color: #765482; background: #f1e9f4; }
    .onboarding-flow-icon svg { width: 22px; height: 22px; }
    .onboarding-flow-copy { grid-area: copy; min-width: 0; align-self: end; }
    .onboarding-modules.materials-flow .onboarding-flow-copy strong, .onboarding-modules.materials-flow .onboarding-flow-copy small { display: block; white-space: normal; }
    .onboarding-modules.materials-flow .onboarding-flow-copy strong { font-size: 11px; line-height: 1.35; }
    .onboarding-modules.materials-flow .onboarding-flow-copy small { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.4; }
    .onboarding-flow-count { grid-area: count; min-width: 0; display: flex; align-items: baseline; align-self: start; gap: 4px; color: #143f35; white-space: nowrap; }
    .onboarding-flow-count b { font-size: 16px; line-height: 1; }
    .onboarding-modules.materials-flow .onboarding-flow-count small { margin: 0; color: #536a61; font-size: 8px; font-weight: 700; }
    .onboarding-modules.materials-flow .onboarding-flow-arrow { grid-area: arrow; width: 16px; height: 16px; color: #9fb0aa; }
    .onboarding-registration-panel { overflow: hidden; }
    .onboarding-registration-head { min-height: 72px; padding: 16px 18px 14px; align-items: flex-start; border-bottom: 0; }
    .onboarding-registration-head h2 { margin-bottom: 6px; }
    .onboarding-registration-head p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
    .onboarding-registration-tabs { padding: 0 20px 16px; display: grid; grid-template-columns: minmax(190px, 240px) minmax(250px, 310px); gap: 8px; border-bottom: 1px solid var(--line); }
    .onboarding-registration-top-button.active { color: var(--green); border-color: #6f9d8b; background: #eaf4f0; }
    .onboarding-registration-tabs button { min-width: 0; min-height: 58px; padding: 8px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid #d5dfdb; border-radius: 6px; background: #fbfcfc; color: #4e6058; text-align: left; cursor: pointer; }
    .onboarding-registration-tabs button:hover { border-color: #9eb5ab; background: #f7faf8; }
    .onboarding-registration-tabs button.active { border-color: #5f907e; background: #edf6f2; color: var(--green); box-shadow: inset 0 -2px 0 var(--green); }
    .onboarding-registration-tabs button:focus-visible { outline: 2px solid var(--green-2); outline-offset: 2px; }
    .onboarding-registration-tabs button > span:last-child { min-width: 0; }
    .onboarding-registration-tabs strong, .onboarding-registration-tabs small { display: block; }
    .onboarding-registration-tabs strong { overflow-wrap: anywhere; font-size: 10px; line-height: 1.35; }
    .onboarding-registration-tabs small { margin-top: 4px; color: var(--muted); font-size: 8px; }
    .registration-tab-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; background: #e8efec; color: #4f6d61; }
    .onboarding-registration-tabs button.active .registration-tab-icon { background: #d9ece4; color: var(--green); }
    .registration-tab-icon svg { width: 17px; height: 17px; }
    .onboarding-pending-table table { min-width: 1120px; }
    .onboarding-compliance-workspace { display: grid; background: #f7faf8; }
    .onboarding-compliance-guide { min-height: 62px; padding: 11px 18px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 11px; color: #315b4c; border-top: 1px solid #dbe7e2; border-bottom: 1px solid #dbe7e2; background: #edf6f2; }
    .onboarding-compliance-guide > svg { width: 21px; height: 21px; color: var(--green); }
    .onboarding-compliance-guide strong, .onboarding-compliance-guide span { display: block; }
    .onboarding-compliance-guide strong { font-size: 10px; }
    .onboarding-compliance-guide span { margin-top: 4px; color: #5c746a; font-size: 8px; line-height: 1.5; }
    .onboarding-compliance-person { min-width: 0; min-height: 128px; margin: 14px 18px 0; padding: 12px; display: grid; grid-template-columns: minmax(170px, .62fr) repeat(2, minmax(300px, 1fr)); align-items: stretch; gap: 10px; border: 1px solid #d6e2dd; border-radius: 7px; background: white; box-shadow: 0 5px 14px rgba(30, 54, 46, .04); }
    .onboarding-compliance-person:last-of-type { margin-bottom: 18px; }
    .onboarding-compliance-employee { min-width: 0; padding: 10px 12px; display: grid; align-content: center; gap: 7px; border-right: 1px solid #e1e9e6; }
    .onboarding-compliance-employee > small, .onboarding-compliance-employee > em { overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
    .onboarding-compliance-task { min-width: 0; padding: 12px; display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 8px 10px; border: 1px solid #d7e2dd; border-radius: 6px; background: #fbfcfc; }
    .onboarding-compliance-task.contract-task { border-color: #bdd8cd; background: #f5faf8; }
    .onboarding-compliance-task.material-task { border-color: #cbddec; background: #f7fafc; }
    .onboarding-compliance-task.done { border-color: #c7d8d1; background: #f8fbfa; }
    .onboarding-compliance-task-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; color: #176c51; background: #e3f1ec; }
    .material-task .onboarding-compliance-task-icon { color: #356886; background: #e7f1f6; }
    .onboarding-compliance-task-icon svg { width: 19px; height: 19px; }
    .onboarding-compliance-task > div { min-width: 0; }
    .onboarding-compliance-task strong, .onboarding-compliance-task small, .onboarding-compliance-task em { display: block; }
    .onboarding-compliance-task strong { font-size: 10px; }
    .onboarding-compliance-task small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.45; }
    .onboarding-compliance-task em { margin-top: 6px; color: #49645a; font-size: 8px; font-style: normal; font-weight: 800; }
    .onboarding-compliance-task > .btn { min-height: 36px; grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
    .checkin-workflow-drawer { width: min(720px, 100vw); padding-bottom: 0; }
    .checkin-workflow-summary { min-height: 70px; margin-bottom: 18px; padding: 12px 14px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; color: #174f40; background: #edf6f2; border-left: 3px solid var(--green); }
    .checkin-workflow-summary .avatar { width: 42px; height: 42px; }
    .checkin-workflow-summary strong, .checkin-workflow-summary span { display: block; }
    .checkin-workflow-summary strong { font-size: 12px; }
    .checkin-workflow-summary div > span { margin-top: 4px; color: var(--muted); font-size: 9px; }
    .checkin-workflow-steps { display: grid; border-top: 1px solid var(--line); }
    .checkin-workflow-steps article { min-height: 76px; padding: 14px 4px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
    .checkin-workflow-steps article > span { width: 36px; height: 36px; display: grid; place-items: center; color: #61746b; background: #edf1ef; border-radius: 50%; }
    .checkin-workflow-steps article > span svg { width: 18px; height: 18px; }
    .checkin-workflow-steps article strong, .checkin-workflow-steps article small { display: block; }
    .checkin-workflow-steps article strong { font-size: 11px; }
    .checkin-workflow-steps article small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
    .checkin-workflow-steps article em { padding: 5px 8px; color: #5d7067; background: #eef2f0; border-radius: 4px; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
    .checkin-workflow-steps article.done > span { color: white; background: var(--green); }
    .checkin-workflow-steps article.done em { color: #176048; background: #dfeee8; }
    .checkin-workflow-steps article.pending > span { color: #9a6010; background: #fff0d7; }
    .checkin-workflow-steps article.pending em { color: #9a6010; background: #fff0d7; }
    .checkin-salary-pending-note, .checkin-workflow-permissions { margin-top: 16px; padding: 13px 14px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
    .checkin-salary-pending-note { color: #71480f; background: #fff7e8; border-left: 3px solid #c8872e; }
    .checkin-workflow-permissions { color: #315b4e; background: #f1f6f4; }
    .checkin-salary-pending-note svg, .checkin-workflow-permissions svg { width: 19px; height: 19px; }
    .checkin-salary-pending-note strong, .checkin-salary-pending-note span { display: block; }
    .checkin-salary-pending-note strong { font-size: 10px; }
    .checkin-salary-pending-note span, .checkin-workflow-permissions span { margin-top: 3px; font-size: 9px; line-height: 1.6; }
    .checkin-workflow-permissions strong { margin-right: 6px; }
    .checkin-workflow-drawer .sticky-actions { margin-top: 20px; }
    .salary-confirmation-status-button { min-width: 112px; padding: 7px 9px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e5c88f; border-radius: 5px; color: #875713; background: #fff8e9; text-align: left; cursor: pointer; }
    .salary-confirmation-status-button:hover { border-color: #c58d35; background: #fff3d8; }
    .salary-confirmation-status-button.confirmed { color: #176149; border-color: #b9d7ca; background: #e9f4ef; }
    .salary-confirmation-status-button svg { width: 17px; height: 17px; flex: 0 0 auto; }
    .salary-confirmation-status-button strong, .salary-confirmation-status-button small { display: block; }
    .salary-confirmation-status-button strong { font-size: 9px; }
    .salary-confirmation-status-button small { margin-top: 2px; color: #6d7b75; font-size: 7px; }
    .checkin-step-action { display: flex; align-items: center; gap: 7px; }
    .checkin-step-action .btn { min-height: 28px; }
    .checkin-salary-pending-note.ready { color: #215d4a; background: #eaf5f0; border-left-color: #2d7b61; }
    .salary-confirmation-mask { position: fixed; inset: 0; z-index: 62; display: none; background: rgba(14, 29, 23, .54); }
    .salary-confirmation-mask.show { display: block; }
    .salary-confirmation-modal { width: min(1240px, 100vw); height: 100vh; margin: 0 auto; display: grid; grid-template-rows: 66px minmax(0, 1fr) 64px; background: #eef3f1; box-shadow: 0 0 50px rgba(0, 0, 0, .2); }
    .salary-confirmation-toolbar { padding: 0 22px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-bottom: 1px solid #d6e0dc; background: #fff; }
    .salary-confirmation-toolbar h2 { margin: 0; font-size: 17px; }
    .salary-confirmation-toolbar span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
    .salary-confirmation-toolbar-actions { display: flex; align-items: center; gap: 8px; }
    .salary-confirmation-stage { overflow: auto; padding: 24px; }
    .salary-confirmation-sheet { width: min(210mm, 100%); min-height: 297mm; margin: 0 auto; padding: 10mm; color: #17231f; background: #fff; border: 1px solid #d2ddd8; box-shadow: 0 12px 36px rgba(29, 55, 45, .12); font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
    .salary-sheet-hero { min-height: 88px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; color: #fff; background: #17634f; }
    .salary-sheet-hero small { display: block; font-size: 8px; }
    .salary-sheet-hero h1 { margin: 7px 0 0; color: inherit; font-size: 23px; letter-spacing: 0; }
    .salary-sheet-hero dl { min-width: 190px; margin: 0; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.42); }
    .salary-sheet-hero dl div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; margin: 4px 0; font-size: 8px; }
    .salary-sheet-hero dt { opacity: .78; }
    .salary-sheet-hero dd { margin: 0; font-weight: 800; }
    .salary-sheet-intro { padding: 13px 14px 11px; border: 1px solid #b9cbc4; border-top: 0; font-size: 9px; line-height: 1.7; }
    .salary-sheet-intro > div { display: flex; align-items: center; gap: 8px; }
    .salary-sheet-intro > div > span { min-width: 120px; padding: 0 6px 2px; border-bottom: 1px solid #77988c; font-weight: 800; }
    .salary-sheet-intro select { min-height: 28px; padding: 3px 22px 3px 7px; border: 1px solid #bdcbc6; border-radius: 4px; background: #fff; font: inherit; }
    .salary-sheet-intro p { margin: 8px 0 0; }
    .salary-sheet-section { margin-top: 10px; border: 1px solid #b9cbc4; }
    .salary-sheet-section > header { min-height: 32px; padding: 0 12px; display: flex; justify-content: space-between; align-items: center; border-left: 3px solid #17634f; background: #eef3f1; }
    .salary-sheet-section > header strong { font-size: 10px; }
    .salary-sheet-section > header em { color: #71847d; font-size: 7px; font-style: normal; }
    .salary-sheet-section-actions { display: flex; align-items: center; gap: 8px; }
    .salary-inline-edit { min-height: 25px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #a9c0b6; border-radius: 4px; color: #17634f; background: #fff; font: inherit; font-size: 7px; font-weight: 800; cursor: pointer; }
    .salary-inline-edit:hover { border-color: #17634f; background: #f6faf8; }
    .salary-inline-edit svg { width: 13px; height: 13px; }
    .salary-sheet-info-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .salary-sheet-info-grid label { min-width: 0; padding: 7px 8px; border-right: 1px solid #b9cbc4; }
    .salary-sheet-info-grid label:last-child { border-right: 0; }
    .salary-sheet-info-grid span, .salary-work-time-grid span { display: block; margin-bottom: 3px; color: #70827b; font-size: 7px; }
    .salary-sheet-info-grid input, .salary-sheet-info-grid select, .salary-work-time-grid input { width: 100%; min-height: 25px; padding: 3px 5px; border: 1px solid #c3d0cb; border-radius: 3px; background: #fff; font: inherit; font-size: 8px; font-weight: 700; }
    .salary-sheet-info-grid input[readonly] { border-color: transparent; padding-left: 0; }
    .salary-contract-term-field { grid-column: span 2; }
    .salary-contract-term-field small { display: block; margin-top: 3px; overflow: hidden; color: #7a8b85; font-size: 6px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
    .salary-contract-term-control { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .salary-contract-term-control > * { min-width: 0; }
    .salary-contract-term-control select { cursor: pointer; }
    .salary-contract-term-control:has(input) { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
    .salary-work-schedule-buttons { padding: 7px 8px; display: flex; gap: 5px; flex-wrap: wrap; border-bottom: 1px solid #b9cbc4; }
    .salary-work-schedule-buttons button { min-height: 28px; padding: 4px 11px; border: 1px solid #b9cbc4; border-radius: 4px; color: #4f625b; background: #fff; font: inherit; font-size: 8px; cursor: pointer; }
    .salary-work-schedule-buttons button.active { color: #fff; border-color: #17634f; background: #17634f; font-weight: 800; }
    .salary-work-time-grid { display: grid; grid-template-columns: 1.2fr 1.3fr 1.3fr 2fr; }
    .salary-work-time-grid label { min-width: 0; min-height: 46px; padding: 7px 8px; border-right: 1px solid #b9cbc4; }
    .salary-work-time-grid label:last-child { border-right: 0; }
    .salary-work-time-grid strong { display: block; font-size: 8px; line-height: 1.45; }
    .salary-time-range { display: grid; grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr); gap: 3px; align-items: center; }
    .salary-time-range input { min-width: 0; padding-right: 2px; color-scheme: light; cursor: pointer; }
    .salary-time-range b { color: #70827b; font-size: 7px; font-weight: 600; }
    .salary-sheet-table-wrap { overflow-x: auto; }
    .salary-sheet-table { width: 100%; min-width: 670px; border-collapse: collapse; font-size: 8px; }
    .salary-sheet-table th, .salary-sheet-table td { height: 38px; padding: 5px; border-right: 1px solid #b9cbc4; border-top: 1px solid #b9cbc4; text-align: center; }
    .salary-sheet-table thead th { height: 29px; color: #4c655c; border-top: 0; background: #f4f7f6; font-size: 7px; }
    .salary-sheet-table th:last-child, .salary-sheet-table td:last-child { border-right: 0; }
    .salary-sheet-table input { width: 100%; min-width: 68px; height: 27px; padding: 3px 5px; border: 1px solid #c0cec8; border-radius: 3px; text-align: right; font: inherit; font-size: 8px; }
    .salary-sheet-table td strong { color: #174f40; font-size: 9px; }
    .salary-total-control { min-width: 94px; display: flex; justify-content: center; align-items: center; gap: 4px; }
    .salary-total-control > input { min-width: 62px; }
    .salary-total-control .icon-btn { width: 25px; height: 25px; min-width: 25px; color: #17634f; border-color: #b8ccc4; }
    .salary-total-control .icon-btn svg { width: 13px; height: 13px; }
    .salary-match-tag { display: inline-flex; min-width: 42px; justify-content: center; padding: 4px 5px; border-radius: 3px; color: #6a7772; background: #edf1ef; font-size: 7px; font-weight: 800; }
    .salary-match-tag.ok { color: #176149; background: #dfeee8; }
    .salary-match-tag.warn { color: #9a6010; background: #fff0d7; }
    .salary-sheet-caption { margin: 0; padding: 6px 10px; color: #805b1a; background: #fff8e9; font-size: 7px; }
    .salary-sheet-notes-benefits { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(155px, 1fr); }
    .salary-sheet-notes-benefits ol { margin: 0; padding: 9px 12px 9px 27px; font-size: 7px; line-height: 1.55; }
    .salary-sheet-notes-benefits dl { margin: 0; padding: 7px; border-left: 1px solid #b9cbc4; }
    .salary-sheet-notes-benefits dl div { padding: 5px 4px; display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #dce5e1; font-size: 7px; }
    .salary-sheet-notes-benefits dl div:last-child { border-bottom: 0; }
    .salary-sheet-notes-benefits dt { color: #63766f; }
    .salary-sheet-notes-benefits dd { margin: 0; font-weight: 800; }
    .salary-sheet-terms { margin: 0; padding: 0; list-style: none; }
    .salary-sheet-terms li { min-height: 30px; padding: 5px 9px; display: grid; grid-template-columns: 20px 1fr; gap: 7px; align-items: center; border-top: 1px solid #d4dfda; font-size: 7px; line-height: 1.45; }
    .salary-sheet-terms li:first-child { border-top: 0; }
    .salary-sheet-terms b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #17634f; font-size: 7px; }
    .salary-sheet-declaration { margin: 0; padding: 8px 10px; color: #315f50; background: #f2f8f5; font-size: 7px; line-height: 1.5; }
    .salary-sheet-signatures { display: grid; grid-template-columns: repeat(3, 1fr); }
    .salary-sheet-signatures > div { min-height: 60px; padding: 9px; border-right: 1px solid #b9cbc4; font-size: 7px; }
    .salary-sheet-signatures > div:last-child { border-right: 0; }
    .salary-sheet-signatures span { display: block; margin-top: 20px; border-bottom: 1px solid #69877c; }
    .salary-sheet-signatures small { display: block; margin-top: 6px; color: #71847d; font-size: 6px; }
    .salary-sheet-closing { padding: 10px 0; color: #17634f; text-align: center; font-size: 9px; font-weight: 800; }
    .salary-sheet-footer { padding-top: 7px; display: flex; justify-content: space-between; border-top: 1px solid #b9cbc4; color: #71847d; font-size: 6px; }
    .salary-confirmation-actions { padding: 10px 18px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; border-top: 1px solid #d2ddd8; background: #fff; }
    .salary-confirmation-actions > div { min-width: 0; margin-right: auto; display: flex; align-items: center; gap: 8px; color: #45665a; font-size: 8px; }
    .salary-confirmation-actions > div svg { width: 17px; height: 17px; }
    .salary-template-settings-mask { z-index: 72; }
    .salary-template-settings-drawer { width: min(780px, 96vw); }
    .salary-template-version-note { padding: 11px 12px; display: grid; grid-template-columns: 20px 1fr; gap: 9px; color: #315b4e; background: #eef6f2; font-size: 9px; line-height: 1.55; }
    .salary-template-version-note svg { width: 18px; height: 18px; }
    .salary-template-section-head { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .salary-template-section-head h3 { margin: 0; }
    .salary-template-schedule-list { display: grid; gap: 10px; }
    .salary-template-schedule-list article { padding: 12px; border: 1px solid #d6e0dc; border-radius: 6px; background: #fbfcfc; }
    .salary-template-item-heading { margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
    .salary-template-item-heading strong { font-size: 10px; }
    .salary-template-schedule-list .form-row { margin-bottom: 9px; }
    .salary-template-text-list { display: grid; gap: 8px; }
    .salary-template-text-list > div { display: grid; grid-template-columns: 24px minmax(0, 1fr) 34px; gap: 8px; align-items: start; }
    .salary-template-text-list > div > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #17634f; font-size: 8px; font-weight: 800; }
    .salary-template-text-list textarea { min-height: 62px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 5px; resize: vertical; font: inherit; font-size: 9px; line-height: 1.55; }
    .salary-template-benefit-list { display: grid; gap: 8px; }
    .salary-template-benefit-list > div { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(160px, 1fr) 34px; gap: 8px; }
    .salary-template-benefit-list input { min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: 9px; }
    .salary-template-settings-drawer .icon-btn.danger { color: #a2463b; }

    /* Original confirmation layout with an orange-only color treatment. */
    .salary-confirmation-modal {
      --salary-accent: #f4512a;
      --salary-accent-dark: #d93f1c;
      --salary-soft: #fff1ec;
      --salary-line: #efb6a6;
      --salary-ink: #2d2d2d;
    }
    .salary-confirmation-toolbar-actions .btn:hover { border-color: var(--salary-accent); color: var(--salary-accent-dark); }
    .salary-confirmation-sheet { color: var(--salary-ink); border-color: var(--salary-line); }
    .salary-sheet-hero { background: var(--salary-accent); }
    .salary-sheet-intro { border-color: var(--salary-line); background: #fffdfc; }
    .salary-sheet-intro > div > span { border-bottom-color: #d87359; }
    .salary-sheet-intro select,
    .salary-sheet-info-grid input,
    .salary-sheet-info-grid select,
    .salary-work-time-grid input,
    .salary-sheet-table input { border-color: #e5b4a7; }
    .salary-sheet-intro select:focus,
    .salary-sheet-info-grid input:focus,
    .salary-sheet-info-grid select:focus,
    .salary-work-time-grid input:focus,
    .salary-sheet-table input:focus { border-color: var(--salary-accent); outline: 2px solid rgba(244,81,42,.12); }
    .salary-sheet-section { border-color: var(--salary-line); }
    .salary-sheet-section > header { border-left-color: var(--salary-accent); background: var(--salary-soft); }
    .salary-sheet-section > header strong { color: #4a2c25; }
    .salary-inline-edit { color: var(--salary-accent-dark); border-color: #e7a795; }
    .salary-inline-edit:hover { color: #fff; border-color: var(--salary-accent); background: var(--salary-accent); }
    .salary-work-schedule-buttons,
    .salary-sheet-info-grid label,
    .salary-work-time-grid label,
    .salary-sheet-table th,
    .salary-sheet-table td,
    .salary-sheet-signatures > div { border-color: var(--salary-line); }
    .salary-work-schedule-buttons button { border-color: #e4ad9e; }
    .salary-work-schedule-buttons button.active { border-color: var(--salary-accent); background: var(--salary-accent); }
    .salary-sheet-table thead th { color: #6b4035; background: #fff5f1; }
    .salary-sheet-table td strong { color: var(--salary-accent-dark); }
    .salary-total-control .icon-btn { color: var(--salary-accent-dark); border-color: #e5b4a7; }
    .salary-sheet-caption { color: #8a442f; background: #fff1e8; }
    .salary-sheet-notes-benefits dl { border-left-color: var(--salary-line); }
    .salary-sheet-terms li { border-top-color: #f0d2ca; }
    .salary-sheet-terms b { background: var(--salary-accent); }
    .salary-sheet-declaration { color: #7b3b29; background: #fff2ed; }
    .salary-sheet-closing { color: var(--salary-accent-dark); }
    .salary-sheet-footer { border-top-color: var(--salary-accent); color: #8a5b4e; }
    .salary-confirmation-actions { border-top-color: #e5cec7; }
    .salary-confirmation-actions > div { color: #704638; }
    .salary-confirmation-actions .btn.primary { border-color: var(--salary-accent); background: var(--salary-accent); }
    .salary-confirmation-actions .btn.primary:hover { border-color: var(--salary-accent-dark); background: var(--salary-accent-dark); }
    @media (max-width: 800px) {
      .salary-confirmation-modal { grid-template-rows: auto minmax(0, 1fr) auto; }
      .salary-confirmation-toolbar { min-height: 92px; padding: 12px 14px; align-items: flex-start; flex-direction: column; }
      .salary-confirmation-toolbar-actions { width: 100%; }
      .salary-confirmation-toolbar-actions .icon-btn { margin-left: auto; }
      .salary-confirmation-stage { padding: 8px; }
      .salary-confirmation-sheet { min-height: 0; padding: 6mm; }
      .salary-sheet-hero { padding: 15px; align-items: flex-start; flex-direction: column; gap: 12px; }
      .salary-sheet-hero dl { width: 100%; padding: 8px 0 0; border-top: 1px solid rgba(255,255,255,.42); border-left: 0; }
      .salary-sheet-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .salary-contract-term-field { grid-column: auto; }
      .salary-contract-term-control:has(input) { grid-template-columns: minmax(0, 1fr); }
      .salary-sheet-info-grid label { border-bottom: 1px solid #b9cbc4; }
      .salary-sheet-info-grid label:nth-child(2n) { border-right: 0; }
      .salary-sheet-info-grid label:last-child { grid-column: 1 / -1; border-bottom: 0; }
      .salary-work-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .salary-work-time-grid label { border-bottom: 1px solid #b9cbc4; }
      .salary-work-time-grid label:nth-child(2n) { border-right: 0; }
      .salary-work-time-grid label:nth-last-child(-n+2) { border-bottom: 0; }
      .salary-sheet-notes-benefits { grid-template-columns: 1fr; }
      .salary-sheet-notes-benefits dl { border-top: 1px solid #b9cbc4; border-left: 0; }
      .salary-sheet-signatures { grid-template-columns: 1fr; }
      .salary-sheet-signatures > div { border-right: 0; border-bottom: 1px solid #b9cbc4; }
      .salary-sheet-signatures > div:last-child { border-bottom: 0; }
      .salary-confirmation-actions { min-height: 82px; padding: 10px 12px; flex-wrap: wrap; }
      .salary-confirmation-actions > div { width: 100%; }
      .salary-template-benefit-list > div { grid-template-columns: 1fr 1fr 34px; }
    }
    .employee-info-register { background: #eef3f1; }
    .onboarding-register-builder-head { min-height: 76px; padding: 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: white; }
    .onboarding-register-builder-title { min-width: 0; display: flex; align-items: center; gap: 11px; }
    .onboarding-register-builder-title > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; color: var(--green); background: #dfeee8; }
    .onboarding-register-builder-title svg { width: 19px; height: 19px; }
    .onboarding-register-builder-title h3 { margin: 0; font-size: 12px; }
    .onboarding-register-builder-title p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
    .onboarding-register-builder-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
    .onboarding-register-builder-actions > .btn { min-height: 40px; white-space: nowrap; }
    .onboarding-registration-picker { min-width: 280px; position: relative; }
    .onboarding-registration-picker-trigger { width: 100%; min-height: 40px; display: grid; grid-template-columns: 17px minmax(100px, 1fr) auto 14px; align-items: center; gap: 7px; text-align: left; }
    .onboarding-registration-picker-trigger > svg { width: 15px; height: 15px; }
    .onboarding-registration-picker-trigger > span { overflow: hidden; color: var(--ink); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
    .onboarding-registration-picker-trigger > small { color: var(--muted); font-size: 8px; }
    .onboarding-registration-picker-menu { width: min(420px, calc(100vw - 34px)); max-height: 420px; position: absolute; z-index: 120; top: calc(100% + 6px); right: 0; display: grid; grid-template-rows: auto auto minmax(80px, 1fr); border: 1px solid #aabbb4; border-radius: 6px; background: white; box-shadow: 0 16px 36px rgba(22, 49, 39, .18); }
    .onboarding-registration-picker-search { min-height: 48px; position: relative; display: flex; align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--line); }
    .onboarding-registration-picker-search svg { width: 15px; position: absolute; left: 19px; color: var(--muted); }
    .onboarding-registration-picker-search input { width: 100%; height: 34px; padding: 0 10px 0 32px; border: 1px solid #c7d3ce; border-radius: 4px; outline: 0; font: inherit; font-size: 9px; }
    .onboarding-registration-picker-search input:focus { border-color: #659180; box-shadow: 0 0 0 2px rgba(24, 95, 74, .1); }
    .onboarding-registration-picker-count { min-height: 29px; padding: 0 11px; display: flex; align-items: center; color: var(--muted); background: #f8faf9; font-size: 8px; }
    .onboarding-registration-picker-options { max-height: 310px; overflow-y: auto; }
    .onboarding-registration-picker-options > button { width: 100%; min-height: 58px; padding: 7px 10px; display: grid; grid-template-columns: 32px minmax(100px, 1fr) minmax(90px, .7fr) 15px; align-items: center; gap: 9px; border: 0; border-top: 1px solid #edf1ef; background: white; color: var(--ink); text-align: left; cursor: pointer; }
    .onboarding-registration-picker-options > button:hover, .onboarding-registration-picker-options > button.selected { background: #edf6f2; }
    .onboarding-registration-picker-options .avatar { width: 32px; height: 32px; font-size: 8px; }
    .onboarding-registration-picker-options button > span:nth-child(2) { min-width: 0; }
    .onboarding-registration-picker-options strong, .onboarding-registration-picker-options small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .onboarding-registration-picker-options strong { font-size: 9px; }
    .onboarding-registration-picker-options small { margin-top: 3px; color: var(--muted); font-size: 8px; }
    .onboarding-registration-picker-options em { overflow: hidden; color: #52665e; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
    .onboarding-registration-picker-options svg { width: 14px; color: #879991; }
    .onboarding-registration-picker-empty { min-height: 100px; display: grid; place-items: center; color: var(--muted); font-size: 9px; }
    .onboarding-registration-document-stage { min-height: 480px; padding: 24px; overflow: auto; background: #eef3f1; }
    .onboarding-registration-archive-frame { width: 210mm; height: 296mm; margin: 0 auto; display: block; border: 0; background: white; box-shadow: 0 10px 28px rgba(31, 55, 47, .09); }
    .onboarding-registration-document-empty { min-height: 380px; display: grid; place-items: center; align-content: center; gap: 9px; color: #6c7d76; }
    .onboarding-registration-document-empty svg { width: 30px; height: 30px; color: #83a397; }
    .onboarding-registration-document-empty .lucide-loader-circle { animation: spin .8s linear infinite; }
    .onboarding-registration-document-empty strong { font-size: 11px; }
    .onboarding-registration-document-empty span { font-size: 8px; }
    .onboarding-registration-document { width: min(100%, 900px); min-width: 760px; margin: 0 auto; padding: 30px 34px 34px; border: 1px solid #b7c5bf; border-top: 5px solid var(--green); background: white; box-shadow: 0 10px 28px rgba(31, 55, 47, .09); }
    .onboarding-registration-document > header { padding-bottom: 18px; border-bottom: 1px solid #b8c7c1; }
    .registration-document-company { color: #4b675d; font-size: 9px; font-weight: 800; }
    .registration-document-title { margin-top: 7px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .registration-document-title h2 { margin: 0; font-size: 23px; }
    .registration-document-title > span { padding: 5px 8px; border-radius: 4px; color: var(--green); background: var(--mint); font-size: 8px; font-weight: 700; }
    .registration-document-meta { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #c7d3ce; border-left: 1px solid #c7d3ce; }
    .registration-document-meta > div { min-height: 49px; padding: 7px 9px; border-right: 1px solid #c7d3ce; border-bottom: 1px solid #c7d3ce; }
    .registration-document-meta small, .registration-document-meta strong { display: block; }
    .registration-document-meta small { margin-bottom: 5px; color: var(--muted); font-size: 8px; }
    .registration-document-meta strong { font-size: 10px; }
    .registration-document-section { margin-top: 15px; }
    .registration-document-section h3 { min-height: 34px; margin: 0; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #b9cac3; border-bottom: 0; background: #eaf3ef; font-size: 10px; }
    .registration-document-section h3 em { color: #557066; font-size: 8px; font-style: normal; font-weight: 500; }
    .registration-document-section > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #bdcbc6; border-left: 1px solid #bdcbc6; }
    .registration-document-section dl { min-height: 54px; margin: 0; padding: 8px 9px; border-right: 1px solid #bdcbc6; border-bottom: 1px solid #bdcbc6; }
    .registration-document-section dt { margin-bottom: 6px; color: var(--muted); font-size: 8px; }
    .registration-document-section dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 9px; font-weight: 800; line-height: 1.45; }
    .registration-document-section dl.missing dd { color: #9a6823; }
    .onboarding-registration-document > footer { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
    .onboarding-registration-document > footer div { min-height: 34px; padding: 5px; display: flex; align-items: flex-end; border-bottom: 1px solid #5e6b66; color: #3f4e48; font-size: 9px; }
    .onboarding-collection-panel .onboarding-collection-table { min-width: 1285px !important; table-layout: fixed; }
    .onboarding-collection-table th:nth-child(1) { width: 180px; }
    .onboarding-collection-table th:nth-child(2) { width: 180px; }
    .onboarding-collection-table th:nth-child(3), .onboarding-collection-table th:nth-child(4), .onboarding-collection-table th:nth-child(5) { width: 95px; text-align: center; }
    .onboarding-collection-table th:nth-child(6) { width: 190px; }
    .onboarding-collection-table th:nth-child(7) { width: 160px; }
    .onboarding-collection-table th:nth-child(8) { width: 300px; }
    .onboarding-collection-table td:nth-child(3), .onboarding-collection-table td:nth-child(4), .onboarding-collection-table td:nth-child(5) { text-align: center; }
    .onboarding-collection-progress { width: 100%; min-width: 0; display: flex; align-items: center; gap: 9px; }
    .onboarding-collection-progress > span { height: 7px; flex: 1; overflow: hidden; border-radius: 4px; background: #dfe8e4; }
    .onboarding-collection-progress i { height: 100%; display: block; border-radius: inherit; background: var(--green); }
    .onboarding-collection-progress strong { width: 34px; color: var(--green); font-size: 9px; text-align: right; }
    .onboarding-collection-table td:nth-child(7) { min-width: 0; overflow-wrap: anywhere; }
    .onboarding-collection-table td:nth-child(7) .tag { max-width: 100%; white-space: normal; }
    .onboarding-collection-table td:last-child { min-width: 0; }
    .onboarding-collection-table td:last-child .row-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; }
    .onboarding-collection-table td:last-child .row-actions .btn { width: 100%; min-width: 0; justify-content: center; white-space: nowrap; }
    .onboarding-four-stage-page { --onboarding-stage-accent: #185f4a; }
    .onboarding-workbench-head { margin-bottom: 14px; align-items: flex-end; }
    .onboarding-workbench-head .page-kicker { display: block; margin-bottom: 5px; color: var(--green); font-size: 9px; font-weight: 800; }
    .onboarding-workbench-actions { align-items: flex-end; flex-wrap: nowrap; }
    .onboarding-scope-picker { width: min(360px, 32vw); min-width: 260px; display: grid; gap: 6px; }
    .onboarding-scope-picker > span { color: #50625b; font-size: 8px; font-weight: 800; }
    .onboarding-scope-picker select { width: 100%; min-height: 38px; padding: 0 34px 0 10px; border: 1px solid #b9c8c2; border-radius: 5px; background: #fbfcfc; color: var(--ink); font: inherit; font-size: 9px; font-weight: 700; }
    .onboarding-workbench-actions > .btn { min-height: 38px; flex: 0 0 auto; }
    .onboarding-person-workbench { min-height: 76px; margin-bottom: 14px; padding: 11px 16px; display: grid; grid-template-columns: minmax(210px, .8fr) minmax(190px, .65fr) minmax(260px, 1fr); align-items: center; gap: 16px; border: 1px solid #d7e1dd; border-left: 4px solid var(--green); background: #fff; box-shadow: 0 5px 16px rgba(28, 57, 47, .05); }
    .onboarding-selected-person { min-width: 0; display: flex; align-items: center; gap: 10px; }
    .onboarding-selected-person .avatar { width: 38px; height: 38px; flex: 0 0 auto; }
    .onboarding-selected-person div { min-width: 0; }
    .onboarding-selected-person strong, .onboarding-selected-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .onboarding-selected-person strong { font-size: 11px; }
    .onboarding-selected-person small { margin-top: 5px; color: var(--muted); font-size: 8px; }
    .onboarding-overall-progress { min-width: 0; }
    .onboarding-overall-progress > div { margin-bottom: 7px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .onboarding-overall-progress span { color: var(--muted); font-size: 8px; }
    .onboarding-overall-progress strong { color: var(--green); font-size: 13px; }
    .onboarding-overall-progress > i { height: 7px; display: block; overflow: hidden; border-radius: 4px; background: #dfe8e4; }
    .onboarding-overall-progress b { height: 100%; display: block; border-radius: inherit; background: var(--green); }
    .onboarding-next-task { min-width: 0; min-height: 54px; padding: 9px 11px; display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; gap: 4px 8px; border: 1px solid #d7e1dd; border-radius: 6px; background: #f7faf8; color: var(--ink); text-align: left; cursor: pointer; }
    .onboarding-next-task:hover { border-color: #86a99b; background: #edf6f2; }
    .onboarding-next-task span, .onboarding-next-task strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .onboarding-next-task span { color: var(--muted); font-size: 8px; }
    .onboarding-next-task strong { grid-column: 1; font-size: 9px; }
    .onboarding-next-task svg { width: 15px; grid-column: 2; grid-row: 1 / span 2; color: var(--green); }
    .onboarding-stage-tabs { margin-bottom: 12px !important; }
    .onboarding-stage-tabs button { min-height: 84px !important; }
    .onboarding-stage-tabs .onboarding-flow-copy strong { font-size: 11px !important; }
    .onboarding-registration-steps { margin-bottom: 14px; display: grid; grid-template-columns: repeat(7, minmax(104px, 1fr)); overflow-x: auto; border: 1px solid #d8e2de; background: white; box-shadow: 0 4px 13px rgba(30, 54, 46, .04); }
    .onboarding-registration-steps button { min-width: 104px; min-height: 64px; padding: 9px 8px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 7px; border: 0; border-right: 1px solid #e4ebe8; background: white; color: #64766f; cursor: pointer; text-align: left; }
    .onboarding-registration-steps button:last-child { border-right: 0; }
    .onboarding-registration-steps button:hover { background: #f7faf8; }
    .onboarding-registration-steps button.active { color: var(--green); background: #edf6f2; box-shadow: inset 0 -3px 0 var(--green); }
    .onboarding-registration-steps button.done:not(.active) { color: #28705a; background: #f8fbfa; }
    .onboarding-registration-steps button > svg { width: 17px; }
    .onboarding-registration-steps button > span { min-width: 0; }
    .onboarding-registration-steps b, .onboarding-registration-steps strong { display: block; }
    .onboarding-registration-steps b { margin-bottom: 3px; color: #90a099; font-size: 7px; }
    .onboarding-registration-steps strong { overflow-wrap: anywhere; font-size: 8px; line-height: 1.35; }
    .onboarding-registration-steps button.done b::after { content: " · 已完成"; color: #28705a; }
    .onboarding-training-records { margin-top: 16px; border-top: 1px solid var(--line); }
    .onboarding-training-records-head { min-height: 58px; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .onboarding-training-records-head h3 { margin: 0; font-size: 11px; }
    .onboarding-training-records-head span { color: var(--muted); font-size: 8px; }
    .onboarding-training-records table { min-width: 960px; }
    .onboarding-subflow-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #f7faf8; }
    .onboarding-subflow-tabs button { min-height: 54px; padding: 9px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-right: 1px solid #e1e9e6; background: transparent; color: #64766f; cursor: pointer; font: inherit; font-size: 9px; font-weight: 800; }
    .onboarding-subflow-tabs button:last-child { border-right: 0; }
    .onboarding-subflow-tabs button.active { color: var(--green); background: white; box-shadow: inset 0 -3px 0 var(--green); }
    .onboarding-subflow-tabs svg { width: 16px; }
    .onboarding-job-description-focus { min-height: 260px; padding: 30px; display: grid; place-items: center; align-content: center; gap: 20px; background: #f8faf9; }
    .onboarding-job-description-focus > div { display: flex; align-items: center; gap: 14px; }
    .onboarding-job-description-focus > div > svg { width: 34px; color: var(--green); }
    .onboarding-job-description-focus strong, .onboarding-job-description-focus small { display: block; }
    .onboarding-job-description-focus strong { font-size: 12px; }
    .onboarding-job-description-focus small { margin-top: 5px; color: var(--muted); font-size: 9px; }
    .onboarding-issuance-items { padding: 18px; background: #f7faf8; }
    .onboarding-issuance-item-list { display: grid; gap: 9px; }
    .onboarding-issuance-item-list article { min-height: 62px; padding: 9px 10px; display: grid; grid-template-columns: 32px minmax(0, 1fr) 70px 32px; align-items: center; gap: 10px; border: 1px solid #d7e1dd; border-radius: 6px; background: white; }
    .onboarding-issuance-check { display: grid; place-items: center; cursor: pointer; }
    .onboarding-issuance-check input { position: absolute; opacity: 0; pointer-events: none; }
    .onboarding-issuance-check span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #75877f; background: #edf2f0; }
    .onboarding-issuance-check input:checked + span { color: white; background: var(--green); }
    .onboarding-issuance-check svg { width: 17px; }
    .onboarding-issuance-item-list article > div { min-width: 0; display: grid; grid-template-columns: minmax(150px, .65fr) minmax(240px, 1.35fr); gap: 8px; }
    .onboarding-issuance-item-list input { min-width: 0; height: 36px; padding: 0 9px; border: 1px solid #cbd7d2; border-radius: 4px; color: var(--ink); font: inherit; font-size: 9px; }
    .onboarding-issuance-actions { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .onboarding-issuance-actions > span { color: var(--muted); font-size: 8px; }
    @media (max-width: 1180px) {
      .onboarding-person-workbench { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .onboarding-next-task { grid-column: 1 / -1; }
      .onboarding-compliance-person { grid-template-columns: minmax(160px, .58fr) minmax(280px, 1fr); }
      .onboarding-compliance-task.material-task { grid-column: 2; }
      .onboarding-compliance-employee { grid-row: 1 / span 2; }
    }
    @media (max-width: 680px) {
      .onboarding-workbench-head { align-items: stretch; }
      .onboarding-workbench-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
      .onboarding-scope-picker { width: 100%; min-width: 0; }
      .onboarding-registration-head { min-height: 0; }
      .onboarding-registration-tabs { padding: 0 12px 12px; grid-template-columns: 1fr; }
      .onboarding-register-builder-head { padding: 12px; align-items: stretch; flex-direction: column; }
      .onboarding-register-builder-title p { display: none; }
      .onboarding-register-builder-actions { width: 100%; align-items: stretch; flex-direction: column; }
      .onboarding-registration-picker { width: 100%; min-width: 0; }
      .checkin-workflow-summary { grid-template-columns: 38px minmax(0, 1fr); }
      .checkin-workflow-summary > .tag { grid-column: 2; justify-self: start; }
      .checkin-workflow-steps article { grid-template-columns: 34px minmax(0, 1fr); }
      .checkin-workflow-steps article em { grid-column: 2; justify-self: start; }
      .onboarding-register-builder-actions > .btn { width: 100%; justify-content: center; }
      .onboarding-registration-picker-menu { width: 100%; right: auto; left: 0; }
      .onboarding-registration-document-stage { min-height: 420px; padding: 10px; }
      .onboarding-registration-archive-frame { margin-left: 0; }
      .onboarding-registration-document-empty { min-height: 320px; }
      .onboarding-person-workbench { padding: 12px; grid-template-columns: 1fr; gap: 12px; }
      .onboarding-next-task { grid-column: auto; }
      .onboarding-compliance-person { margin: 10px 12px 0; grid-template-columns: 1fr; }
      .onboarding-compliance-employee { grid-row: auto; border-right: 0; border-bottom: 1px solid #e1e9e6; }
      .onboarding-compliance-task.material-task { grid-column: auto; }
      .onboarding-stage-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      .onboarding-stage-tabs button { min-height: 84px !important; }
      .onboarding-registration-steps { grid-template-columns: repeat(7, 126px); }
      .onboarding-subflow-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .onboarding-issuance-item-list article { grid-template-columns: 32px minmax(0, 1fr) 32px; }
      .onboarding-issuance-item-list article > div { grid-template-columns: 1fr; }
      .onboarding-issuance-item-list article > .tag { grid-column: 2; justify-self: start; }
      .onboarding-issuance-actions { align-items: stretch; flex-direction: column; }
    }
    .onboarding-checklist table, .probation-panel table { min-width: 850px; }
    .onboarding-contracts table { min-width: 1180px; }
    .contract-panel-head { align-items: center; gap: 18px; }
    .contract-panel-head > div:first-child p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
    .contract-create-controls { min-width: min(520px, 52%); display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 8px; }
    .contract-employee-picker { position: relative; min-width: 0; }
    .contract-employee-combobox { min-height: 38px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 5px; padding: 0 5px 0 11px; border: 1px solid var(--line); border-radius: 5px; background: white; transition: border-color .16s, box-shadow .16s; }
    .contract-employee-combobox:focus-within, .contract-employee-combobox.open { border-color: #759b8b; box-shadow: 0 0 0 3px rgba(21, 101, 76, .1); }
    .contract-employee-combobox > svg { width: 15px; height: 15px; color: #718079; }
    .contract-employee-combobox input { min-width: 0; height: 36px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 10px; }
    .contract-employee-combobox input::placeholder { color: #7b8782; }
    .contract-employee-combobox .icon-btn { width: 29px; height: 29px; min-height: 29px; padding: 0; border: 0; background: transparent; color: #53635c; }
    .contract-employee-combobox .icon-btn:hover { background: #eef4f1; }
    .contract-employee-combobox .icon-btn svg { width: 15px; height: 15px; }
    .contract-employee-combobox.open .contract-employee-toggle svg { transform: rotate(180deg); }
    .contract-employee-options { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; right: 0; max-height: 330px; overflow-y: auto; border: 1px solid #ccd8d2; border-radius: 5px; background: white; box-shadow: 0 14px 32px rgba(20, 44, 35, .16); }
    .contract-employee-results { min-height: 32px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e7ece9; color: var(--muted); font-size: 8px; }
    .contract-employee-results strong { color: #496158; font-size: 8px; }
    .contract-employee-option { width: 100%; min-height: 54px; padding: 7px 10px; display: grid; grid-template-columns: 30px minmax(90px, .8fr) minmax(110px, 1.2fr) 18px; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid #edf0ee; background: white; color: var(--ink); text-align: left; cursor: pointer; }
    .contract-employee-option:last-of-type { border-bottom: 0; }
    .contract-employee-option:hover, .contract-employee-option.active { background: #f0f6f3; }
    .contract-employee-option.selected { background: #e8f3ee; }
    .contract-employee-option .avatar { width: 28px; height: 28px; font-size: 8px; }
    .contract-employee-option-main, .contract-employee-option-meta { min-width: 0; display: grid; gap: 2px; }
    .contract-employee-option-main strong, .contract-employee-option-main small, .contract-employee-option-meta, .contract-employee-option-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .contract-employee-option-main strong { font-size: 9px; }
    .contract-employee-option-main small, .contract-employee-option-meta small { color: var(--muted); font-size: 8px; font-weight: 400; }
    .contract-employee-option-meta { color: #43564e; font-size: 8px; }
    .contract-employee-option > svg { width: 15px; height: 15px; color: var(--green); }
    .contract-employee-empty { min-height: 118px; padding: 20px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); text-align: center; }
    .contract-employee-empty svg { width: 22px; height: 22px; color: #91a099; }
    .contract-employee-empty strong { color: #43564e; font-size: 9px; }
    .contract-employee-empty span { font-size: 8px; }
    .contract-autofill-note { min-height: 48px; padding: 9px 18px; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 9px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #315b4c; background: #edf6f2; font-size: 9px; line-height: 1.55; }
    .contract-autofill-note svg { width: 17px; color: var(--green); }
    .contract-autofill-note strong { margin-right: 7px; }
    .contract-row-actions { display: grid; grid-template-columns: minmax(96px, auto) repeat(2, minmax(66px, auto)); justify-content: end; gap: 6px; }
    .contract-row-actions .btn { min-height: 31px; padding: 0 9px; }
    .contract-page-head { align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
    .contract-page-head h1 { margin-bottom: 3px; font-size: 18px; }
    .contract-page-head p { font-size: 10px; }
    .contract-management-tabs { margin-bottom: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #d6e0dc; background: white; box-shadow: 0 6px 18px rgba(30, 54, 46, .04); }
    .contract-management-tabs > button { min-width: 0; min-height: 66px; padding: 10px 14px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: center; gap: 10px; border: 0; border-right: 1px solid var(--line); color: var(--ink); background: white; font: inherit; text-align: left; cursor: pointer; transition: background .16s, box-shadow .16s; }
    .contract-management-tabs > button:last-child { border-right: 0; }
    .contract-management-tabs > button:hover { background: #fafcfb; }
    .contract-management-tabs > button.active { background: #f0f7f4; box-shadow: inset 0 -3px var(--green); }
    .contract-management-tab-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 5px; color: var(--green); background: #e4f0eb; }
    .contract-management-tab-icon.housing { color: #356886; background: #e7f1f6; }
    .contract-management-tab-icon svg { width: 18px; height: 18px; }
    .contract-management-tabs strong, .contract-management-tabs small { display: block; }
    .contract-management-tabs strong { font-size: 11px; }
    .contract-management-tabs small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
    .contract-management-tabs > button > svg { width: 15px; height: 15px; color: #84938d; }
    .contract-management-board { display: grid; gap: 12px; }
    .contract-risk-overview { border: 1px solid #d6e0dc; background: white; box-shadow: 0 8px 22px rgba(30, 54, 46, .05); }
    .contract-risk-head { min-height: 54px; padding: 9px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
    .contract-risk-head > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
    .contract-risk-head-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 5px; color: var(--green); background: #e6f1ed; }
    .contract-risk-head-icon svg { width: 17px; height: 17px; }
    .contract-risk-head strong, .contract-risk-head small { display: block; }
    .contract-risk-head strong { font-size: 12px; }
    .contract-risk-head small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.4; }
    .contract-risk-reset { min-height: 31px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 5px; color: var(--green); background: white; font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
    .contract-risk-reset:hover { border-color: #82a495; background: #f7faf8; }
    .contract-risk-reset svg { width: 14px; height: 14px; }
    .contract-risk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .contract-risk-card { min-width: 0; min-height: 86px; padding: 12px 14px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; border: 0; border-right: 1px solid var(--line); color: var(--ink); background: white; font: inherit; text-align: left; cursor: pointer; transition: background .16s, box-shadow .16s; }
    .contract-risk-card:last-child { border-right: 0; }
    .contract-risk-card:hover { background: #fafcfb; }
    .contract-risk-card.active { box-shadow: inset 0 -3px currentColor; }
    .contract-risk-card.overdue { color: #a5463f; }
    .contract-risk-card.overdue.active { background: #fdf4f2; }
    .contract-risk-card.due-soon { color: #9a6417; }
    .contract-risk-card.due-soon.active { background: #fff9ef; }
    .contract-risk-card.renewal { color: #356886; }
    .contract-risk-card.renewal.active { background: #f1f7fa; }
    .contract-risk-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 5px; background: #fae9e7; }
    .contract-risk-card.due-soon .contract-risk-icon { background: #fff0d8; }
    .contract-risk-card.renewal .contract-risk-icon { background: #e8f2f7; }
    .contract-risk-icon svg { width: 19px; height: 19px; }
    .contract-risk-copy { min-width: 0; color: var(--ink); }
    .contract-risk-copy strong, .contract-risk-copy small { display: block; }
    .contract-risk-copy strong { overflow-wrap: anywhere; font-size: 11px; }
    .contract-risk-copy small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
    .contract-risk-count { min-width: 44px; display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; white-space: nowrap; }
    .contract-risk-count b { font-size: 23px; line-height: 1; }
    .contract-risk-count small { color: var(--muted); font-size: 8px; font-weight: 700; }
    .contract-risk-arrow { width: 15px; height: 15px; opacity: .65; }
    .contract-priority-panel { margin: 0; overflow: visible; }
    .contract-priority-head { min-height: 64px; padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
    .contract-priority-head > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
    .contract-priority-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 5px; color: var(--green); background: #e6f1ed; }
    .contract-priority-icon svg { width: 17px; height: 17px; }
    .contract-priority-head h2 { margin: 0; font-size: 12px; }
    .contract-priority-head p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
    .contract-priority-total { flex: 0 0 auto; color: var(--muted); font-size: 9px; white-space: nowrap; }
    .contract-priority-total b { margin-right: 3px; color: var(--green); font-size: 17px; }
    .contract-priority-rule { min-height: 42px; padding: 8px 16px; display: flex; align-items: center; gap: 8px; color: #315b4c; background: #f0f6f3; font-size: 8px; line-height: 1.5; }
    .contract-priority-rule svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--green); }
    .contract-priority-table { min-width: 1340px !important; table-layout: fixed; }
    .contract-priority-table th:nth-child(1) { width: 150px; }
    .contract-priority-table th:nth-child(2) { width: 170px; }
    .contract-priority-table th:nth-child(3) { width: 180px; }
    .contract-priority-table th:nth-child(4) { width: 220px; }
    .contract-priority-table th:nth-child(5) { width: 150px; }
    .contract-priority-table th:nth-child(6) { width: 135px; }
    .contract-priority-table th:nth-child(7) { width: 335px; }
    .contract-priority-table th { color: #617169; background: #fafbfa; }
    .contract-priority-table td { height: 72px; vertical-align: middle; }
    .contract-priority-table td:last-child { padding-left: 12px; padding-right: 12px; }
    .contract-priority-table .contract-row-actions { min-width: 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; }
    .contract-priority-table .contract-row-actions .btn { flex: 0 0 auto; white-space: nowrap; }
    .contract-priority-table tbody tr:hover { background: #f8fbf9; }
    .contract-priority-badge { min-height: 27px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; border-radius: 4px; color: #52645d; background: #edf1ef; font-size: 8px; font-weight: 800; white-space: nowrap; }
    .contract-priority-badge svg { width: 13px; height: 13px; }
    .contract-priority-badge.overdue { color: #963e35; background: #fae7e4; }
    .contract-priority-badge.dueSoon { color: #7c5418; background: #fff0d8; }
    .contract-priority-badge.renewal { color: #285d87; background: #e6f0f8; }
    .contract-priority-empty { height: 150px !important; color: var(--muted); text-align: center; }
    .contract-priority-empty svg, .contract-priority-empty strong, .contract-priority-empty span { display: block; margin-left: auto; margin-right: auto; }
    .contract-priority-empty svg { width: 24px; height: 24px; margin-bottom: 7px; color: #8da098; }
    .contract-priority-empty strong { color: #43564e; font-size: 10px; }
    .contract-priority-empty span { margin-top: 4px; font-size: 8px; }
    .housing-contract-panel { margin: 0; }
    .housing-contract-head { min-height: 68px; padding: 11px 16px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
    .housing-contract-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 5px; color: #356886; background: #e7f1f6; }
    .housing-contract-icon svg { width: 19px; height: 19px; }
    .housing-contract-head h2 { margin: 0; font-size: 12px; }
    .housing-contract-head p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
    .housing-contract-head-actions { display: flex; align-items: center; gap: 7px; }
    .housing-contract-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #fff; }
    .housing-contract-trigger-summary, .housing-contract-history-entry, .housing-contract-management-entry { min-height: 74px; padding: 12px 16px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
    .housing-contract-trigger-summary { border-right: 1px solid var(--line); }
    .housing-contract-trigger-summary > span, .housing-contract-history-entry > span, .housing-contract-management-entry > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 5px; color: #176c51; background: #e8f3ef; }
    .housing-contract-trigger-summary svg, .housing-contract-history-entry > span svg, .housing-contract-management-entry > span svg { width: 17px; height: 17px; }
    .housing-contract-trigger-summary strong, .housing-contract-history-entry strong, .housing-contract-management-entry strong { display: block; color: var(--ink); font-size: 10px; }
    .housing-contract-trigger-summary small, .housing-contract-history-entry small, .housing-contract-management-entry small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
    .housing-contract-trigger-summary > b { color: #176c51; font-size: 20px; white-space: nowrap; }
    .housing-contract-trigger-summary > b small { display: inline; margin: 0 0 0 3px; font-size: 8px; }
    .housing-contract-history-entry, .housing-contract-management-entry { width: 100%; border: 0; border-left: 1px solid var(--line); color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
    .housing-contract-history-entry:hover, .housing-contract-management-entry:hover { background: #f8fbfa; }
    .housing-contract-history-entry > span { color: #356886; background: #e7f1f6; }
    .housing-contract-management-entry > span { color: #73507d; background: #f2eaf5; }
    .housing-contract-history-entry > svg, .housing-contract-management-entry > svg { width: 16px; height: 16px; color: #73877f; }
    .housing-contract-alert { min-height: 52px; padding: 9px 16px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; color: #75501b; border-bottom: 1px solid #efd7ad; background: #fff8ea; }
    .housing-contract-alert > svg { width: 18px; height: 18px; }
    .housing-contract-alert strong, .housing-contract-alert small { display: block; }
    .housing-contract-alert strong { font-size: 9px; }
    .housing-contract-alert small { margin-top: 3px; color: #8b6d3e; font-size: 8px; }
    .housing-contract-note { min-height: 42px; padding: 8px 16px; display: flex; align-items: center; gap: 8px; color: #315b4c; background: #f0f6f3; font-size: 8px; line-height: 1.5; }
    .housing-contract-note svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--green); }
    .housing-contract-table { min-width: 900px !important; }
    .housing-contract-table th { color: #617169; background: #fafbfa; }
    .housing-contract-table td { height: 68px; vertical-align: middle; }
    .housing-contract-table tbody tr:hover { background: #f8fbf9; }
    .housing-agreements-inline { min-width: 0; background: white; }
    .housing-agreement-summary { min-height: 78px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #f6faf9; }
    .housing-agreement-summary > div { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-right: 1px solid var(--line); }
    .housing-agreement-summary > div:last-child { border-right: 0; }
    .housing-agreement-summary span { color: var(--muted); font-size: 9px; font-weight: 800; }
    .housing-agreement-summary strong { color: #356886; font-size: 22px; line-height: 1; }
    .housing-agreement-tools { min-height: 58px; padding: 10px 16px; display: grid; grid-template-columns: minmax(260px, 1fr) 150px auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); }
    .housing-agreement-tools .search { max-width: none; }
    .housing-agreement-tools select { height: 36px; padding: 0 30px 0 9px; border: 1px solid #bdcbc5; border-radius: 5px; color: var(--ink); background: white; font: inherit; font-size: 9px; }
    .housing-agreement-tools > span { color: var(--muted); font-size: 9px; white-space: nowrap; }
    .housing-agreement-tools > span b { color: #356886; }
    .housing-agreement-table { min-width: 1080px !important; }
    .housing-agreement-table th { color: #617169; background: #fafbfa; }
    .housing-agreement-table td { height: 68px; vertical-align: middle; }
    .housing-agreement-table tbody tr:hover { background: #f8fbf9; }
    .housing-dormitory-inline { min-width: 0; padding: 14px; background: #f3f7f5; }
    .housing-dormitory-inline [data-dormitory-root] { margin: 0; }
    .housing-contract-source { min-height: 25px; padding: 0 7px; display: inline-flex; align-items: center; gap: 5px; border-radius: 4px; color: #52645d; background: #edf1ef; font-size: 8px; font-weight: 800; white-space: nowrap; }
    .housing-contract-source svg { width: 12px; height: 12px; }
    .housing-contract-source.onboarding { color: #176c51; background: #e6f2ed; }
    .housing-contract-source.resident { color: #285d87; background: #e6f0f8; }
    .housing-contract-empty { min-height: 260px; padding: 28px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
    .housing-contract-empty > svg { width: 30px; height: 30px; margin-bottom: 2px; color: #7f9eaa; }
    .housing-contract-empty strong { color: var(--ink); font-size: 11px; }
    .housing-contract-empty span { font-size: 8px; }
    .housing-contract-empty .btn { margin-top: 8px; }
    .housing-contract-empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
    .housing-contract-meta { min-height: 58px; padding: 9px 16px; display: grid; grid-template-columns: repeat(2, minmax(180px, 280px)); gap: 12px; align-items: end; border-bottom: 1px solid var(--line); background: #f8faf9; }
    .housing-contract-meta label span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; font-weight: 700; }
    .housing-contract-meta input { width: 100%; height: 32px; padding: 0 9px; border: 1px solid #bdcbc5; border-radius: 5px; color: var(--ink); background: white; font: inherit; font-size: 9px; }
    .housing-contract-meta input:focus { outline: 2px solid rgba(53, 104, 134, .12); border-color: #5f889f; }
    .housing-contract-room-field { min-width: 0; }
    .housing-contract-room-entry { display: grid; grid-template-columns: minmax(110px, 1fr) auto; gap: 7px; }
    .housing-contract-room-entry .btn { min-height: 32px; padding: 0 9px; white-space: nowrap; }
    .housing-room-overview-mask { position: fixed; inset: 0; z-index: 95; padding: 18px; display: grid; place-items: center; background: rgba(8, 22, 17, .68); }
    .housing-room-overview-dialog { width: min(1080px, 100%); max-height: min(820px, calc(100vh - 36px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid #cbd8d2; border-radius: 7px; background: #f5f8f7; box-shadow: 0 22px 60px rgba(8, 27, 20, .24); }
    .housing-room-overview-dialog > header { min-height: 92px; padding: 16px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: #fff; }
    .housing-room-overview-dialog > header span { color: var(--green); font-size: 8px; font-weight: 800; }
    .housing-room-overview-dialog > header h2 { margin: 4px 0 0; font-size: 18px; }
    .housing-room-overview-dialog > header p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
    .housing-room-overview-summary { min-height: 72px; display: grid; grid-template-columns: repeat(3, 150px) minmax(240px, 1fr); align-items: stretch; border-bottom: 1px solid var(--line); background: #edf5f1; }
    .housing-room-overview-summary > div { padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-right: 1px solid #d4e1db; }
    .housing-room-overview-summary > div span { color: var(--muted); font-size: 9px; font-weight: 700; }
    .housing-room-overview-summary > div strong { color: var(--green); font-size: 21px; }
    .housing-room-overview-summary > label { height: 38px; margin: 17px 18px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid #bdcbc5; border-radius: 5px; background: #fff; }
    .housing-room-overview-summary > label:focus-within { border-color: #5f889f; box-shadow: 0 0 0 2px rgba(53, 104, 134, .1); }
    .housing-room-overview-summary > label svg { width: 15px; height: 15px; color: var(--muted); }
    .housing-room-overview-summary > label input { min-width: 0; width: 100%; border: 0; outline: 0; font: inherit; font-size: 9px; background: transparent; }
    .housing-room-overview-dialog > main { min-height: 0; padding: 14px; overflow: auto; }
    .housing-room-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .housing-room-overview-item { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
    .housing-room-overview-item.selected { border-color: #18715a; box-shadow: 0 0 0 2px rgba(24, 113, 90, .12); }
    .housing-room-overview-item.full { background: #fbfcfb; }
    .housing-room-overview-item > header { min-height: 58px; padding: 10px 11px 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line-soft); }
    .housing-room-overview-item > header > div { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
    .housing-room-overview-item > header strong { font-size: 13px; }
    .housing-room-overview-item > header small { color: var(--muted); font-size: 8px; }
    .housing-room-overview-item > header > b { color: #176c51; font-size: 18px; white-space: nowrap; }
    .housing-room-overview-item > header > b small { color: inherit; font-size: 8px; }
    .housing-room-gender { padding: 3px 6px; border-radius: 4px; color: #285d87; background: #e6f0f8; font-size: 8px; font-weight: 800; }
    .housing-room-gender.female { color: #73507d; background: #f2eaf5; }
    .housing-room-bed-status { padding: 8px 11px; display: grid; grid-template-columns: auto minmax(60px, 1fr); align-items: center; gap: 9px; color: var(--muted); font-size: 8px; }
    .housing-room-bed-status > i { height: 5px; overflow: hidden; border-radius: 999px; background: #dce7e2; }
    .housing-room-bed-status > i em { height: 100%; display: block; border-radius: inherit; background: var(--green); }
    .housing-room-overview-item.full .housing-room-bed-status > i em { background: #a06a1b; }
    .housing-room-resident-list { min-height: 100px; padding: 0 11px 8px; display: grid; align-content: start; gap: 5px; }
    .housing-room-resident-list > span { min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
    .housing-room-resident-list .avatar { width: 26px; height: 26px; font-size: 8px; font-style: normal; }
    .housing-room-resident-list b { overflow: hidden; text-overflow: ellipsis; font-size: 9px; white-space: nowrap; }
    .housing-room-resident-list small { max-width: 86px; overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
    .housing-room-resident-list p { min-height: 72px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-size: 9px; }
    .housing-room-resident-list p svg { width: 18px; height: 18px; }
    .housing-room-overview-item > footer { min-height: 45px; padding: 7px 10px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; border-top: 1px solid var(--line-soft); background: #fafbfb; }
    .housing-room-overview-item > footer > span { margin-right: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 8px; }
    .housing-room-overview-item > footer > span svg { width: 12px; height: 12px; }
    .housing-room-overview-item.selected > footer > span { color: var(--green); font-weight: 700; }
    .housing-room-overview-dialog > footer { min-height: 62px; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); background: #fff; }
    .housing-room-overview-dialog > footer > span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; }
    .housing-room-overview-dialog > footer > span svg { width: 14px; height: 14px; color: var(--green); }
    .housing-room-overview-empty { min-height: 330px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
    .housing-room-overview-empty > svg { width: 28px; height: 28px; color: #78988b; }
    .housing-room-overview-empty strong { color: var(--ink); font-size: 10px; }
    .housing-room-overview-empty span { font-size: 8px; }
    .housing-contract-picker-drawer { width: min(620px, 100%); }
    .housing-contract-picker-search { margin: 14px 16px 8px; height: 40px; padding: 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid #bdcbc5; border-radius: 5px; background: #fff; }
    .housing-contract-picker-search:focus-within { border-color: #5f889f; box-shadow: 0 0 0 2px rgba(53, 104, 134, .1); }
    .housing-contract-picker-search svg { width: 16px; height: 16px; color: var(--muted); }
    .housing-contract-picker-search input { min-width: 0; flex: 1; border: 0; outline: 0; font: inherit; font-size: 9px; }
    .housing-contract-picker-list { padding: 0 16px 18px; overflow-y: auto; }
    .housing-contract-picker-list > button { width: 100%; min-height: 60px; padding: 8px 6px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 16px; align-items: center; gap: 9px; border: 0; border-bottom: 1px solid var(--line); color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
    .housing-contract-picker-list > button:hover { background: #f6faf8; }
    .housing-contract-picker-list > button > span:nth-child(2) { min-width: 0; }
    .housing-contract-picker-list > button strong, .housing-contract-picker-list > button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .housing-contract-picker-list > button strong { font-size: 10px; }
    .housing-contract-picker-list > button small { margin-top: 4px; color: var(--muted); font-size: 8px; }
    .housing-contract-picker-list > button em { padding: 4px 7px; border-radius: 4px; color: #8b5d18; background: #fff0d8; font-size: 8px; font-style: normal; white-space: nowrap; }
    .housing-contract-picker-list > button em.done { color: #176c51; background: #e6f2ed; }
    .housing-contract-picker-list > button > svg { width: 14px; height: 14px; color: #7e9088; }
    .housing-contract-picker-empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
    .housing-contract-picker-empty svg { width: 28px; height: 28px; color: #829d91; }
    .housing-contract-picker-empty strong { color: var(--ink); font-size: 10px; }
    .housing-contract-picker-empty span { font-size: 8px; }
    .training-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); }
    .training-path, .training-roster { padding: 22px; }
    .training-roster { border-left: 1px solid var(--line); background: #fafbfa; }
    .training-layout h3 { margin: 0 0 16px; font-size: 12px; }
    .training-layout h3 span { margin-left: 5px; color: var(--muted); font-size: 10px; font-weight: 400; }
    .training-step { min-height: 68px; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; position: relative; }
    .training-step > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--green); font-size: 9px; font-weight: 700; }
    .training-step:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; width: 1px; background: var(--line); }
    .training-step strong { font-size: 11px; }
    .training-step p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
    .training-person { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
    .training-person:last-child { border-bottom: 0; }
    .empty.compact { padding: 35px 10px; }
    .probation-progress { min-width: 165px; display: flex; align-items: center; gap: 9px; }
    .probation-progress .track { flex: 1; }
    .probation-progress .track i { display: block; height: 100%; background: var(--green); border-radius: inherit; }
    .probation-progress span { min-width: 30px; color: var(--muted); font-size: 9px; text-align: right; }
    .warn-text { color: var(--amber); }
    .checklist-missing { max-width: 230px; line-height: 1.5; }
    .packet-settings .form-row { margin-bottom: 11px; }
    .packet-settings .form-row textarea { min-height: 68px; }
    .training-path-title { margin-top: 28px !important; padding-top: 20px; border-top: 1px solid var(--line); }
    .review-banner { margin-bottom: 20px; padding: 13px 14px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; background: var(--soft); border-left: 3px solid var(--muted); }
    .review-banner.pending_review { background: var(--blue-bg); border-color: var(--blue); }
    .review-banner.returned { background: var(--amber-bg); border-color: var(--amber); }
    .review-banner.approved { background: var(--mint); border-color: var(--green); }
    .review-banner > svg { width: 18px; color: var(--green); }
    .review-banner strong { display: block; font-size: 11px; }
    .review-banner p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
    .review-checklist { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
    .review-checklist span { min-height: 30px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cfe1d8; background: var(--mint); color: var(--green); border-radius: 4px; font-size: 9px; }
    .review-checklist span.missing { border-color: #ead7b8; background: var(--amber-bg); color: var(--amber); }
    .review-checklist svg { width: 13px; height: 13px; }
    .row-actions { display: flex; justify-content: flex-end; gap: 6px; }
    .row-actions .btn { min-height: 30px; padding: 0 9px; font-size: 10px; }
    .roster-panel table { min-width: 1200px; }
    .roster-page-head { margin-bottom: 10px; }
    .roster-summary-stats { gap: 12px; margin-bottom: 20px; padding: 12px; overflow: visible; border: 1px solid #dce6e2; border-radius: 8px; background: white; box-shadow: 0 8px 22px rgba(30,54,46,.035); }
    .roster-summary-stats button.stat { --roster-card-bg: #f8fcfa; --roster-card-soft: #eef7f3; --roster-card-border: #dcebe5; --roster-card-accent: #287c64; min-width: 0; min-height: 104px; box-sizing: border-box; padding: 14px; border: 1px solid var(--roster-card-border); border-radius: 7px; background: var(--roster-card-bg); font: inherit; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
    .roster-summary-stats button.stat:nth-child(2) { --roster-card-bg: #f8fbfe; --roster-card-soft: #eef5fc; --roster-card-border: #dce8f3; --roster-card-accent: #487fb1; }
    .roster-summary-stats button.stat:nth-child(3) { --roster-card-bg: #fffcf7; --roster-card-soft: #fff5e5; --roster-card-border: #f1e4d1; --roster-card-accent: #a66f26; }
    .roster-summary-stats button.stat:nth-child(4) { --roster-card-bg: #fdfbfe; --roster-card-soft: #f7f0f9; --roster-card-border: #eadfec; --roster-card-accent: #8c6a9a; }
    .roster-stat-trigger { width: 100%; background: transparent; color: inherit; text-align: left; cursor: pointer; }
    .roster-stat-trigger:hover, .roster-stat-trigger:focus-visible, .contract-stat:hover, .contract-stat:focus-visible { outline: 0; border-color: var(--roster-card-accent); box-shadow: 0 5px 13px rgba(34,65,55,.07); transform: translateY(-1px); }
    .roster-summary-stats button.stat.selected { padding: 13px; border: 2px solid var(--roster-card-accent); box-shadow: 0 2px 0 var(--roster-card-accent); }
    .roster-summary-stats .label { color: #16251f; font-size: 10px; font-weight: 800; }
    .roster-stat-icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px; display: grid; place-items: center; background: var(--roster-card-soft); color: var(--roster-card-accent); }
    .roster-stat-icon svg { width: 14px; height: 14px; }
    .roster-summary-stats .value { margin-top: 8px; color: var(--roster-card-accent); font-size: 23px; }
    .roster-summary-stats .trend, .roster-summary-stats .trend.warn { right: 12px; bottom: 11px; padding: 2px 5px; border-radius: 4px; color: var(--roster-card-accent); background: var(--roster-card-soft); font-size: 8px; line-height: 1.25; }
    .roster-summary-stats .contract-stat-links { gap: 4px; margin-top: 8px; }
    .roster-summary-stats .contract-stat-links strong { gap: 6px; font-size: 11px; }
    .roster-summary-stats .contract-stat-links span { min-width: 17px; padding: 1px 4px; color: var(--roster-card-accent); background: var(--roster-card-soft); font-size: 8px; line-height: 1.25; }
    .roster-panel { overflow: hidden; border-radius: 8px; }
    .roster-contextbar { min-height: 64px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #cbd8d3; background: #f7faf9; }
    .roster-context-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
    .roster-context-title > span { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 5px; color: var(--green); background: #e2f0eb; }
    .roster-context-title > span svg { width: 15px; height: 15px; }
    .roster-context-title strong, .roster-context-title small { display: block; }
    .roster-context-title strong { color: #0d1713; font-size: 13px; }
    .roster-context-title small { margin-top: 3px; color: #5e7069; font-size: 9px; }
    .roster-context-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
    .roster-context-actions > .tag { white-space: nowrap; }
    .roster-contract-tabs { min-width: 0; }
    .roster-contract-tabs button { min-height: 32px; padding: 0 14px; font-size: 9px; font-weight: 800; white-space: nowrap; }
    .roster-viewbar { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 16px; border-top: 1px solid var(--line); background: #f8faf9; }
    .roster-capturebar { min-height: 54px; padding: 8px 16px; border-top: 1px solid #d4dfda; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #f4f8f6; }
    .roster-capture-title { min-width: 168px; display: flex; align-items: center; gap: 8px; }
    .roster-capture-title > span { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 5px; display: grid; place-items: center; background: #dcece5; color: var(--green); }
    .roster-capture-title svg { width: 13px; height: 13px; }
    .roster-capture-title strong, .roster-capture-title small { display: block; }
    .roster-capture-title strong { color: #101815; font-size: 10px; }
    .roster-capture-title small { margin-top: 2px; color: #34443e; font-size: 8px; }
    .roster-capture-controls { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .roster-capture-modes { min-height: 34px; display: inline-flex; border: 1px solid #aebfb8; border-radius: 6px; overflow: hidden; background: white; }
    .roster-capture-modes button { min-width: 58px; padding: 0 12px; border: 0; border-right: 1px solid #cbd6d2; background: white; color: #53665e; font: inherit; font-size: 9px; cursor: pointer; }
    .roster-capture-modes button:last-child { border-right: 0; }
    .roster-capture-modes button.active { background: var(--green); color: white; font-weight: 800; }
    .roster-capture-controls select { width: min(270px, 28vw); height: 36px; padding: 0 32px 0 10px; border: 1px solid #b9c8c2; border-radius: 6px; background-color: white; font: inherit; font-size: 9px; }
    .roster-capture-action { min-height: 32px; padding-inline: 10px; white-space: nowrap; font-size: 10px; }
    .roster-capture-action svg { width: 13px; height: 13px; }
    .roster-name-cell { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .roster-name-cell strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .roster-person-capture { width: 24px; height: 24px; flex: 0 0 24px; padding: 0; border: 1px solid #9eb7ad; border-radius: 5px; display: grid; place-items: center; background: white; color: #316d59; cursor: pointer; }
    .roster-person-capture:hover, .roster-person-capture:focus-visible { border-color: var(--green); background: var(--mint); outline: 0; }
    .roster-person-capture:disabled { opacity: .45; cursor: wait; }
    .roster-person-capture svg { width: 12px; height: 12px; }
    .roster-viewbar-status { display: flex; align-items: center; gap: 10px; }
    .roster-viewbar-status > span { color: var(--muted); font-size: 9px; font-weight: 700; }
    .roster-viewbar-status button { min-height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #d6b46d; background: #fff8e8; color: #77591f; font: inherit; font-size: 8px; cursor: pointer; }
    .roster-viewbar-status button:hover { background: #ffefc9; }
    .roster-viewbar-status svg { width: 12px; height: 12px; }
    .roster-layout-fixed { min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #185f4a; background: #185f4a; color: white; font-size: 9px; font-weight: 800; }
    .roster-layout-fixed svg { width: 13px; height: 13px; }
    .roster-filter-popover { width: min(290px, calc(100vw - 20px)); max-height: 400px; position: fixed; z-index: 2500; display: grid; grid-template-rows: auto auto auto minmax(80px,1fr) auto; border: 1px solid #879c94; background: white; box-shadow: 0 14px 34px rgba(23,49,40,.2); color: var(--ink); text-align: left; }
    .roster-filter-head { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 13px; border-bottom: 1px solid #dce7e2; background: #f5f9f7; }
    .roster-filter-head strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .roster-filter-head .icon-btn { width: 29px; height: 29px; flex: 0 0 auto; }
    .roster-filter-search { min-height: 38px; position: relative; display: flex; align-items: center; margin: 10px 10px 6px; }
    .roster-filter-search svg { width: 14px; position: absolute; left: 9px; color: var(--muted); }
    .roster-filter-search input { width: 100%; height: 36px; padding: 0 10px 0 30px; border: 1px solid #bdcbc5; outline: 0; font: inherit; font-size: 9px; }
    .roster-filter-search input:focus { border-color: #367a65; box-shadow: 0 0 0 2px rgba(24,95,74,.1); }
    .roster-filter-tools { display: flex; justify-content: space-between; padding: 0 10px 7px; border-bottom: 1px solid #e0e7e4; }
    .roster-filter-tools button { padding: 2px 0; border: 0; background: transparent; color: #286b56; font: inherit; font-size: 8px; cursor: pointer; }
    .roster-filter-tools button:hover { text-decoration: underline; }
    .roster-filter-options { max-height: 214px; overflow-y: auto; padding: 5px 0; }
    .roster-filter-options label { min-height: 33px; display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 7px; align-items: center; padding: 4px 12px; cursor: pointer; }
    .roster-filter-options label:hover { background: #f0f6f3; }
    .roster-filter-options input { width: 15px; height: 15px; margin: 0; accent-color: #185f4a; }
    .roster-filter-options span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .roster-filter-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 9px 10px; border-top: 1px solid #d7e0dc; background: #fafcfb; }
    .roster-filter-actions .btn { min-height: 31px; padding: 0 10px; font-size: 8px; }
    .roster-table-wrap { height: auto; max-height: none; min-height: 0; border: 1px solid #aebdb7; border-right: 0; border-left: 0; background: white; }
    .roster-horizontal-scrollbar { height: 26px; padding: 0 9px; position: fixed; bottom: 8px; z-index: 2450; display: flex; align-items: center; border: 1px solid #9fb1aa; border-radius: 5px; background: #f7faf9; box-shadow: 0 5px 18px rgba(18,49,39,.2); }
    .roster-horizontal-scrollbar input { width: 100%; height: 18px; margin: 0; appearance: none; background: transparent; cursor: ew-resize; }
    .roster-horizontal-scrollbar input::-webkit-slider-runnable-track { height: 7px; border: 1px solid #b7c5bf; border-radius: 4px; background: #dfe7e3; }
    .roster-horizontal-scrollbar input::-webkit-slider-thumb { width: 38px; height: 17px; margin-top: -6px; appearance: none; border: 2px solid #f7faf9; border-radius: 8px; background: #61766d; box-shadow: 0 1px 4px rgba(20,48,39,.25); }
    .roster-horizontal-scrollbar input::-moz-range-track { height: 7px; border: 1px solid #b7c5bf; border-radius: 4px; background: #dfe7e3; }
    .roster-horizontal-scrollbar input::-moz-range-thumb { width: 34px; height: 13px; border: 2px solid #f7faf9; border-radius: 8px; background: #61766d; }
    .comprehensive-roster { width: 5312px; min-width: 5312px !important; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
    .comprehensive-roster th, .comprehensive-roster td { box-sizing: border-box; min-width: 0; max-width: none; padding: 9px 10px; overflow: hidden; border-right: 1px solid #c5d0cc; border-bottom: 1px solid #d5dedb; white-space: nowrap; text-align: center; text-overflow: ellipsis; vertical-align: middle; }
    .comprehensive-roster thead th { height: 44px; position: sticky; top: 0; z-index: 3; background: #edf2f0; color: #0d1713; border-color: #aab9b3; text-align: center; font-size: 12px; font-weight: 800; }
    .comprehensive-roster thead .roster-groups th { height: 38px; top: 0; padding: 7px 10px; color: #122c24; border-bottom: 2px solid #718e84; font-size: 11px; }
    .comprehensive-roster thead .roster-groups th:nth-child(1) { background: #d8e8e1; }
    .comprehensive-roster thead .roster-groups th:nth-child(2) { background: #dce8ee; }
    .comprehensive-roster thead .roster-groups th:nth-child(3) { background: #e7eadc; }
    .comprehensive-roster thead .roster-groups th:nth-child(4) { background: #eee6d8; }
    .comprehensive-roster thead .roster-groups th:nth-child(5) { background: #e5e4ed; }
    .comprehensive-roster thead .roster-groups th:nth-child(6) { background: #dce9e9; }
    .comprehensive-roster thead .roster-groups th:nth-child(7) { background: #e8e2dc; }
    .comprehensive-roster thead .roster-groups th:nth-child(8) { background: #e1e7db; }
    .comprehensive-roster thead .roster-groups + tr th { top: 38px; }
    .comprehensive-roster .roster-column-head th { padding-right: 23px; }
    .comprehensive-roster .roster-column-head th > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .roster-column-filter { width: 16px; height: 16px; position: absolute; right: 3px; top: 50%; display: grid; place-items: center; padding: 0; transform: translateY(-50%); border: 1px solid #839c92; background: white; color: #245b49; cursor: pointer; }
    .roster-column-filter:hover, .roster-column-filter[aria-expanded="true"] { background: #dfeae5; color: #174c3c; }
    .roster-column-filter.locked { border-color: #f1d082; background: #ffe5a7; color: #624a16; }
    .roster-column-filter svg { width: 9px; height: 9px; }
    .comprehensive-roster thead .roster-groups th, .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(4), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(8), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(14), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(20), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(29), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(32), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(38) { border-right: 3px solid #789187; }
    .comprehensive-roster tbody td { height: 52px; color: #0b1210; font-size: 12px; font-weight: 600; }
    .comprehensive-roster tbody tr:nth-child(even) td { background: #f8faf9; }
    .comprehensive-roster tbody tr:hover td { background: #edf5f1 !important; }
    .comprehensive-roster .roster-data-row { cursor: pointer; }
    .comprehensive-roster .roster-data-row:focus-visible { outline: 3px solid var(--green-2); outline-offset: -3px; }
    .comprehensive-roster .roster-address { white-space: normal; line-height: 1.45; }
    .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(1), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(4), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(9), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(11), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(13), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(14), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(15), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(17), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(19), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(24), .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(25) { text-align: center; }
    .comprehensive-roster thead tr:not(.roster-groups) th:nth-child(1), .comprehensive-roster td:nth-child(1) { position: sticky; left: 0; z-index: 2; text-align: center; }
    .comprehensive-roster thead tr:not(.roster-groups) th:nth-child(2), .comprehensive-roster td:nth-child(2) { position: sticky; left: 54px; z-index: 2; }
    .comprehensive-roster thead tr:not(.roster-groups) th:nth-child(3), .comprehensive-roster td:nth-child(3) { position: sticky; left: 174px; z-index: 2; border-right: 2px solid #789187; }
    .comprehensive-roster tbody td:nth-child(-n+3) { background: white; }
    .comprehensive-roster tbody tr:nth-child(even) td:nth-child(-n+3) { background: #f8faf9; }
    .comprehensive-roster tbody tr:hover td:nth-child(-n+3) { background: #edf5f1; }
    .comprehensive-roster thead tr:not(.roster-groups) th:nth-child(-n+3) { z-index: 5; }
    .comprehensive-roster.roster-layout-office thead .roster-groups th { background: #174d3e; color: white; border-color: #0c382c; }
    .comprehensive-roster.roster-layout-office thead tr:nth-child(2) th { height: 40px; background: #eef3f1; color: #1d3a31; border-color: #aebdb7; border-bottom: 2px solid #365f52; }
    .comprehensive-roster.roster-layout-office .roster-column-filter { border-color: #9fb1aa; background: white; color: #315d4f; }
    .comprehensive-roster.roster-layout-office .roster-column-filter.locked { border-color: #c79d45; background: #ffe5a7; color: #624a16; }
    .comprehensive-roster.roster-layout-office tbody td { height: 46px; padding-top: 7px; padding-bottom: 7px; border-right-color: transparent; border-bottom-color: #cbd6d2; }
    .comprehensive-roster.roster-layout-office tr:not(.roster-groups) > :is(th,td):nth-child(4), .comprehensive-roster.roster-layout-office tr:not(.roster-groups) > :is(th,td):nth-child(8), .comprehensive-roster.roster-layout-office tr:not(.roster-groups) > :is(th,td):nth-child(14), .comprehensive-roster.roster-layout-office tr:not(.roster-groups) > :is(th,td):nth-child(20), .comprehensive-roster.roster-layout-office tr:not(.roster-groups) > :is(th,td):nth-child(29), .comprehensive-roster.roster-layout-office tr:not(.roster-groups) > :is(th,td):nth-child(32), .comprehensive-roster.roster-layout-office tr:not(.roster-groups) > :is(th,td):nth-child(38) { border-right-color: #567b6f; }
    .comprehensive-roster.roster-layout-comfort tbody td { height: 62px; padding: 12px 11px; }
    .comprehensive-roster.roster-layout-comfort thead tr:nth-child(2) th { background: #edf2f0; color: #0d1713; border-color: #aab9b3; border-bottom: 2px solid #59766b; }
    .comprehensive-roster.roster-layout-comfort tbody td:nth-child(n+5):nth-child(-n+8), .comprehensive-roster.roster-layout-comfort tbody td:nth-child(n+15):nth-child(-n+20), .comprehensive-roster.roster-layout-comfort tbody td:nth-child(n+30):nth-child(-n+32), .comprehensive-roster.roster-layout-comfort tbody td:nth-child(n+39):nth-child(-n+40) { background: #f3f7f5; }
    .comprehensive-roster.roster-layout-comfort tbody tr:nth-child(even) td { filter: brightness(.985); }
    @media (max-width: 1050px) {
      .stats { grid-template-columns: repeat(2, 1fr); }
      .offboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .offboard-summary > div:nth-child(2) { border-right: 0; }
      .offboard-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .dashboard-stats .stat { border-bottom: 0; }
      .dashboard-stats .stat:nth-child(2) { border-right: 1px solid var(--line); }
      .dashboard-stats .stat:last-child { border-right: 0; }
      .stat:nth-child(2) { border-right: 0; }
      .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .grid-main, .split, .org-chart-grid { grid-template-columns: 1fr; }
      .department-attendance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .org-pie-layout { width: 100%; min-height: 0; grid-template-columns: 1fr; gap: 18px; }
      .org-pie-visual { justify-self: center; }
      .org-level1-summary { width: 100%; padding-top: 0; }
      .org-level1-details { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 760px) {
      .app { grid-template-columns: 1fr; }
      .sidebar { position: fixed; left: 0; width: min(260px, calc(100vw - 32px)); box-sizing: border-box; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 10px 0 30px rgba(0,0,0,.18); }
      .sidebar.open { transform: translateX(0); }
      .icon-btn.mobile-menu { display: grid; }
      .topbar { height: 60px; padding: 0 15px; }
      .crumb { display: none; }
      .profile-text { display: none; }
      .topbar-logout-btn { min-width: 62px; padding: 0 10px; }
      .content { padding: 20px 14px 35px; }
      .page-head { flex-direction: column; }
      .page-head h1 { font-size: 20px; }
      .roster-viewbar { align-items: flex-start; flex-direction: column; gap: 7px; }
      .roster-viewbar-status { width: 100%; justify-content: space-between; }
      .roster-layout-fixed { align-self: stretch; justify-content: center; }
      .stats { grid-template-columns: 1fr 1fr; }
      .dashboard-stats { grid-template-columns: 1fr; }
      .dashboard-stats .stat, .dashboard-stats .stat:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
      .dashboard-stats .stat:last-child { border-bottom: 0; }
      .org-pie-layout { justify-items: center; padding-top: 18px; }
      .org-pie-visual { width: 100%; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
      .org-pie-center { width: min(440px, 100%); height: auto; aspect-ratio: 1; position: relative; left: auto; grid-column: 1 / -1; justify-self: center; }
      .org-pie, .org-pie-depth { width: 86.36%; left: 6.82%; }
      .org-pie { top: 6.82%; }
      .org-pie-depth { top: calc(6.82% + 20px); }
      .org-pie-outside-label { position: static; width: auto; min-height: 34px; padding-right: 0; transform: none; justify-content: flex-start !important; text-align: left !important; }
      .org-pie-outside-label::after { display: none; }
      .org-pie-callouts { display: none; }
      .org-level1-details { grid-template-columns: 1fr 1fr; }
      .org-pie-label { width: 84px; }
      .org-pie-label span { font-size: 10px; }
      .org-pie-total { gap: 8px; }
      .org-pie-total span { font-size: 17px; }
      .org-pie-total strong { font-size: 32px; }
      .org-tree-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
      .org-tree-filter { min-width: 0; }
      .level2-org-stage { min-height: 415px; padding: 18px 12px; }
      .level2-org-chart { padding-bottom: 18px; }
      .level2-position-row { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); column-gap: 8px; row-gap: 24px; background: linear-gradient(#29384d,#29384d) center top / 2px max(0px, calc(100% - 100px)) no-repeat; }
      .level2-position-row::before { display: none; }
      .level2-position-row::after { height: 26px; }
      .level2-position-row.direct::after { height: 16px; }
      .level2-position-row .level2-position-node::before { content: ''; position: absolute; left: -8px; right: -8px; top: -12px; height: 2px; background: #29384d; }
      .level2-position-row .level2-position-node:nth-child(3n+1)::before { left: 50%; }
      .level2-position-row .level2-position-node:nth-child(3n)::before,
      .level2-position-row .level2-position-node:last-child::before { right: 50%; }
      .level2-position-row .level2-position-node::after { display: block; top: -12px; height: 12px; }
      .level2-position-row.level1-summary { width: 100%; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); row-gap: 24px; }
      .level2-position-row.level1-summary .level2-position-node { width: min(92px, 100%); }
      .level2-position-row.level1-summary .level2-position-node::after { top: -12px; height: 12px; }
      .stat { min-height: 102px; padding: 16px; }
      .stat .value { font-size: 23px; }
      .stat .trend { position: static; display: inline-block; margin-top: 8px; }
      .filters { flex-wrap: wrap; }
      .search { max-width: none; flex: 1 0 100%; }
      .toolbar { align-items: flex-end; }
      .quick-grid { grid-template-columns: repeat(3,1fr); }
      .department-attendance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
      .calendar-grid { padding: 10px; gap: 3px; }
      .cal-day { min-height: 55px; padding: 4px; }
      .event { padding: 3px; overflow: hidden; white-space: nowrap; }
      .approval-meta { grid-template-columns: 1fr; }
      .module-grid { grid-template-columns: 1fr 1fr; padding: 12px; }
      .learning-resource-item { min-height: 104px; }
      .steps { overflow-x: auto; grid-template-columns: repeat(5, minmax(90px,1fr)); }
      .offboard-summary { grid-template-columns: 1fr; }
      .offboard-module-tabs { gap: 16px; overflow-x: auto; }
      .offboard-approval-panel, .offboard-approval-panel .approval-card { width: 100%; max-width: 100%; overflow: hidden; }
      .offboard-approval-panel .approval-top { grid-template-columns: minmax(0, 1fr); display: grid; }
      .offboard-approval-panel .approval-top > * { min-width: 0; }
      .offboard-approval-panel .approval-top .actions { justify-content: flex-start; flex-wrap: wrap; }
      .offboard-approval-panel .approval-meta { width: 100%; min-width: 0; }
      .offboard-approval-panel .approval-actions { justify-content: flex-start; flex-wrap: wrap; }
      .offboard-approval-panel .approval-actions > div { flex-basis: 100%; }
      .offboard-summary > div { min-height: 68px; border-right: 0; border-bottom: 1px solid var(--line); }
      .offboard-summary > div:last-child { border-bottom: 0; }
      .offboard-panel .panel-head { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; flex-direction: column; }
      .offboard-tabs { width: 100%; }
      .offboard-tabs button { flex: 1; }
      .offboard-case-drawer { width: 100vw; max-width: 100vw; padding-left: 14px; padding-right: 14px; }
      .offboard-case-overview { grid-template-columns: 1fr; }
      .offboard-case-meta { grid-template-columns: 1fr; align-items: stretch; }
      .offboard-case-meta > .btn { width: 100%; justify-content: center; }
      .offboard-task-row { padding: 12px 2px; grid-template-columns: 30px minmax(0, 1fr) 52px; grid-template-areas: "toggle main waive" ". owner owner" ". date date" ". note note"; gap: 8px; }
      .offboard-task-toggle { grid-area: toggle; }
      .offboard-task-main { grid-area: main; }
      .offboard-task-row select { grid-area: owner; }
      .offboard-task-row input[type="date"] { grid-area: date; }
      .offboard-task-row input:not([type="date"]) { grid-area: note; }
      .offboard-task-row > .btn { grid-area: waive; }
      .offboard-case-drawer .sticky-actions { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
      .form-grid2 { grid-template-columns: 1fr; }
      .row-actions { justify-content: flex-start; flex-wrap: wrap; }
      .onboarding-modules { overflow-x: auto; }
      .onboarding-modules button { flex: 0 0 155px; padding: 12px; }
      .onboarding-modules.materials-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: hidden; }
      .training-layout { grid-template-columns: 1fr; }
      .training-roster { border-left: 0; border-top: 1px solid var(--line); }
    }

/* ===== 正式版增量样式 ===== */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 70% -10%, #dcebe4 0%, var(--canvas) 55%); padding: 20px; }
.login-card { width: min(400px, 94vw); background: white; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 38px 34px 30px; }
.login-card .brand-mark { width: 46px; height: 46px; font-size: 22px; background: var(--green); color: white; margin-bottom: 18px; }

/* ===== 薪酬福利 ===== */
.payroll-head { align-items: center; }
.pay-tabs { min-height: 44px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); margin: -8px 0 18px; }
.pay-tabs > button { align-self: stretch; padding: 0 2px; border: 0; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; position: relative; }
.pay-tabs > button.active { color: var(--green); font-weight: 700; }
.pay-tabs > button.active::after { content: ""; position: absolute; height: 2px; background: var(--green); inset: auto 0 -1px; }
.pay-period { margin-left: auto; height: 32px; display: flex; align-items: center; border: 1px solid var(--line); background: white; border-radius: 6px; }
.pay-period button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; color: var(--muted); }
.pay-period button:hover { background: var(--soft); }
.pay-period button:disabled { color: #b8c0bd; background: #f4f6f5; cursor: not-allowed; }
.pay-period button svg { width: 14px; }
.pay-period strong { min-width: 92px; text-align: center; font-size: 10px; }
.pay-stats { box-shadow: none; }
.pay-stats .stat { min-height: 108px; }
.pay-stats .value { font-size: 24px; }
.pay-analytics { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-bottom: 20px; }
.pay-processing-analytics { align-items: stretch; }
.pay-processing-analytics > .panel { height: 100%; }
.pay-processing-analytics .pay-trend { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.pay-processing-analytics .pay-chart { height: auto; min-height: 370px; }
.pay-processing-analytics .pay-distribution-chart { display: block; padding: 18px 14px 14px; }
.pay-processing-analytics .pay-axis { display: none; }
.pay-processing-analytics .pay-bars-scroll { min-width: 0; height: 100%; overflow: visible; }
.pay-processing-analytics .pay-bars { width: 100%; height: 100%; grid-template-columns: repeat(var(--pay-chart-columns, 1), minmax(0, 1fr)); background: none; border-bottom: 0; }
.pay-processing-analytics .pay-bar-pair { gap: 5px; border-bottom: 1px solid var(--line); }
.pay-processing-analytics .pay-bar-pair i { width: 7px; }
.pay-processing-analytics .pay-bar-pair i b.pay-bar-values { z-index: 1; top: -32px; left: calc(50% + 6px); width: 29px; min-height: 25px; padding: 0; display: grid; align-content: center; gap: 3px; transform: translateX(-50%); border: 0; border-radius: 0; color: var(--ink); background: transparent; font-size: 6px; line-height: 1; }
.pay-processing-analytics .pay-bar-pair i b.pay-bar-values > span { display: flex; align-items: center; justify-content: center; gap: 1px; white-space: nowrap; }
.pay-processing-analytics .pay-bar-pair i b.pay-bar-values > span.gross { color: var(--green); }
.pay-processing-analytics .pay-bar-pair i b.pay-bar-values > span.net { color: #b85f48; }
.pay-processing-analytics .pay-bar-pair i b.pay-bar-values em { font-size: 6px; font-style: normal; font-weight: 900; }
.pay-processing-analytics .pay-bar-pair i b.pay-bar-values::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 7px; background: var(--green); }
.pay-processing-analytics .pay-bar-group { grid-template-rows: minmax(0, 1fr) 36px; }
.pay-processing-analytics .pay-bar-group > span { overflow: hidden; padding: 6px 2px 0; place-items: start center; color: var(--ink); font-size: 8px; font-weight: 700; line-height: 1.2; text-align: center; white-space: normal; word-break: break-all; }
.pay-trend .panel-head h2 > span { color: var(--ink); font-size: 11px; font-weight: 600; }
.pay-legend { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 9px; }
.pay-legend span { display: flex; align-items: center; gap: 5px; margin: 0; }
.pay-legend i { width: 7px; height: 7px; border-radius: 2px; background: var(--green); }
.pay-legend i.net { background: #d98268; }
.pay-chart { height: 230px; padding: 20px 20px 15px; display: grid; grid-template-columns: 38px 1fr; }
.pay-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 23px; color: var(--ink); font-size: 10px; font-weight: 700; }
.pay-bars { display: grid; grid-template-columns: repeat(6, 1fr); background: repeating-linear-gradient(to bottom, white 0, white 55px, #edf0ee 56px); border-bottom: 1px solid var(--line); }
.pay-bar-group { display: grid; grid-template-rows: 1fr 23px; min-width: 0; }
.pay-bar-pair { display: flex; align-items: flex-end; justify-content: center; gap: 24px; }
.pay-bar-pair i { display: block; width: 13px; position: relative; border-radius: 3px 3px 0 0; background: var(--green); }
.pay-bar-pair i.net { background: #d98268; }
.pay-bar-pair i b { position: absolute; top: -15px; left: 50%; width: 44px; transform: translateX(-50%); color: var(--green); font-size: 8px; font-style: normal; font-weight: 800; text-align: center; white-space: nowrap; }
.pay-bar-pair i.net b { color: #b85f48; }
.pay-bar-group > span { display: grid; place-items: end center; color: var(--ink); font-size: 10px; font-weight: 600; }
.pay-progress .steps { padding: 22px 12px 18px; }
.pay-progress-note { min-height: 63px; padding: 11px 14px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; }
.pay-progress-note strong { display: block; font-size: 10px; }
.pay-progress-note p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.pay-progress-note.error { background: #fff8f7; box-shadow: inset 3px 0 var(--red); }
.pay-progress-note.error strong, .pay-progress-note.error p { color: var(--red); }
.pay-checks .payroll-check-waiting { background: #fffcf3; box-shadow: inset 3px 0 #d99a25; }
.pay-checks .payroll-check-waiting strong { color: #8a5b0f; }
.pay-checks .todo-icon svg { width: 16px; height: 16px; stroke-width: 2.4; }
.pay-check-state { display: grid; justify-items: end; gap: 5px; }
.pay-check-action { font-size: 8px; white-space: nowrap; }
.pay-checks .panel-head > .link-btn { display: inline-flex; align-items: center; gap: 4px; }
.pay-checks .panel-head > .link-btn svg { width: 13px; height: 13px; }
.pay-anomaly-table td:nth-child(2) strong, .pay-anomaly-table td:nth-child(2) small { display: block; }
.pay-anomaly-table td:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.pay-anomaly-table [data-payroll-confirm-anomaly] { min-width: 82px; justify-content: center; white-space: nowrap; }
.pay-workflow-panel { margin-bottom: 20px; }
.pay-workflow-source { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.pay-workflow-source > i { width: 7px; height: 7px; border-radius: 50%; background: #aab5b0; }
.pay-workflow-source.ready { color: var(--green); }
.pay-workflow-source.ready > i { background: var(--green); }
.pay-workflow-scroll { overflow-x: auto; }
.pay-workflow-steps { min-width: 1095px; display: grid; grid-template-columns: minmax(140px, 1fr) minmax(250px, 1.55fr) repeat(5, minmax(140px, 1fr)); }
.pay-workflow-step { position: relative; min-height: 224px; padding: 18px 10px 12px; border-right: 1px solid var(--line); text-align: center; }
.pay-workflow-step:last-child { border-right: 0; }
.pay-workflow-step::before, .pay-workflow-step::after { content: ""; position: absolute; top: 34px; width: calc(50% - 16px); height: 2px; background: var(--line); }
.pay-workflow-step::before { left: 0; }
.pay-workflow-step::after { right: 0; }
.pay-workflow-step:first-child::before, .pay-workflow-step:last-child::after { display: none; }
.pay-workflow-step.complete::before, .pay-workflow-step.complete::after, .pay-workflow-step.active::before { background: var(--green); }
.pay-workflow-number { position: relative; z-index: 1; width: 32px; height: 32px; margin: 0 auto 9px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; color: var(--muted); background: #f4f7f5; font-size: 10px; font-weight: 800; }
.pay-workflow-number:disabled { cursor: default; opacity: 1; }
.pay-workflow-number svg { width: 14px; height: 14px; }
.pay-workflow-step.complete .pay-workflow-number { border-color: #104a3d; color: white; background: #104a3d; }
.pay-workflow-step.active .pay-workflow-number { border-color: var(--amber); color: var(--amber); background: #fff8ed; }
.pay-workflow-step > strong { display: block; color: var(--ink); font-size: 10px; }
.pay-workflow-step.complete > strong { color: #104a3d; }
.pay-workflow-step > small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.pay-workflow-substeps { display: grid; gap: 4px; margin-top: 9px; }
.pay-workflow-substep { min-height: 28px; padding: 4px 7px; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 4px; color: var(--ink); background: #f1f4f3; font-size: 10px; font-weight: 800; text-align: left; }
.pay-workflow-substep > i { width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid #aab5b0; border-radius: 50%; background: white; }
.pay-workflow-substep.done { color: white; background: #104a3d; }
.pay-workflow-substep[data-payroll-performance-total].done { min-height: 36px; line-height: 1.35; }
.pay-workflow-substep.done > i { border-color: white; background: white; box-shadow: inset 0 0 0 2px #104a3d; }
.pay-workflow-substep:disabled { cursor: default; opacity: .55; }
.pay-workflow-substep.done:disabled { opacity: 1; }
.pay-workflow-step[data-payroll-step="performance"] .pay-workflow-substeps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pay-workflow-step[data-payroll-step="performance"] .pay-workflow-substep { min-width: 0; min-height: 47px; padding: 6px 7px; display: grid; grid-template-columns: 8px minmax(0, 1fr); align-content: center; justify-content: stretch; gap: 5px; font-size: 10px; line-height: 1.3; text-align: left; white-space: normal; }
.pay-workflow-step[data-payroll-step="performance"] .pay-workflow-substep:not(.done) { border: 1px solid #a9cdbf; color: #185f4a; background: #e7f3ee; }
.pay-workflow-step[data-payroll-step="performance"] .pay-workflow-substep:not(.done) > i { border-color: #6fa48f; background: #fff; }
.pay-workflow-step[data-payroll-step="performance"] .pay-workflow-substep:disabled:not(.done) { opacity: 1; }
.pay-performance-total-modal { position: fixed; inset: 0; z-index: 96; padding: 18px; display: none; place-items: center; background: rgba(12, 31, 24, .62); }
.pay-performance-total-modal.open { display: grid; }
.pay-performance-total-modal[hidden] { display: none !important; }
.pay-performance-total-dialog { width: min(1240px, calc(100vw - 24px)); max-height: calc(100vh - 24px); display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 24px 70px rgba(4, 23, 16, .34); }
.pay-performance-total-dialog > header { min-height: 66px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.pay-performance-total-dialog > header > div:last-child { display: flex; align-items: center; gap: 8px; }
.pay-base-salary-confirm-dialog { width: calc(100vw - 28px); height: calc(100vh - 28px); max-height: none; }
.pay-base-salary-confirm-dialog > header h2 span { margin-left: 10px; color: #5f6e67; font-size: 11px; font-weight: 400; }
.pay-base-salary-confirm-dialog > main { display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.pay-base-salary-confirm-table-wrap { min-width: 0; min-height: 0; overflow: auto; background: white; }
.pay-base-salary-confirm-table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; }
.pay-base-salary-confirm-table th, .pay-base-salary-confirm-table td { height: 42px; padding: 7px 8px; border: 1px solid #aab8b2; color: #17231f; text-align: center; font-size: 11px; }
.pay-base-salary-confirm-table th { color: #173e31; background: #dcebe4; font-weight: 850; }
.pay-base-salary-confirm-table th:nth-child(1) { width: 52px; }
.pay-base-salary-confirm-table th:nth-child(2) { width: 92px; }
.pay-base-salary-confirm-table th:nth-child(3) { width: 126px; }
.pay-base-salary-confirm-table td strong { font-weight: 850; }
.pay-base-salary-confirm-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.pay-base-salary-confirm-table tr.invalid td { color: #a62e35; background: #fff0f0; }
.pay-base-salary-confirm-table tr.invalid td:nth-child(7) { box-shadow: inset 0 0 0 2px #c64249; }
.pay-base-salary-confirm-table-wrap .base-salary-full-table tr.invalid td { color: #a62e35; background: #fff0f0; }
.pay-base-salary-confirm-table-wrap .base-salary-full-table tr.invalid td:nth-child(19) { box-shadow: inset 0 0 0 2px #c64249; }
.pay-base-salary-confirm-table-wrap .base-salary-full-table tr.base-salary-total-row td { color: #111814; background: #eef6f1; font-weight: 850; border-top: 2px solid #104a3d; }
.pay-base-salary-confirm-footer { min-height: 62px; padding: 11px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pay-base-salary-confirm-footer > span { color: var(--muted); font-size: 10px; line-height: 1.55; }
.pay-performance-total-dialog > header span { color: var(--green); font-size: 8px; font-weight: 800; }
.pay-performance-total-dialog > header h2 { margin: 3px 0 0; font-size: 16px; }
.pay-performance-total-dialog > header .btn { display: inline-flex; align-items: center; gap: 5px; }
[data-payroll-performance-total-modal] [data-payroll-download-performance-total] { display: none !important; }
.pay-performance-total-dialog > header svg { width: 14px; height: 14px; }
.payroll-source-actions { display: flex !important; align-items: flex-start; justify-content: flex-end; gap: 0.5cm !important; flex-wrap: nowrap; margin-left: auto; }
.payroll-source-actions > .btn,
.payroll-source-actions > .icon-btn,
.payroll-source-confirm-wrap > .btn { height: 36px; min-height: 36px; margin: 0; align-self: start; }
.payroll-source-confirm-wrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; }
.payroll-source-confirm-wrap .btn { min-width: 108px; }
.payroll-source-confirmed-at { margin: 0; color: #53655e !important; font-size: 10px !important; font-weight: 700; line-height: 1.35; text-align: center; white-space: nowrap; }
.payroll-source-note { display: none !important; }
.pay-performance-total-toolbar { min-height: 56px; padding: 9px 16px; display: flex; align-items: end; gap: 10px; border-bottom: 1px solid var(--line); background: #f8faf9; }
.pay-performance-total-toolbar label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; }
.pay-performance-total-toolbar select, .pay-performance-total-toolbar input { width: 170px; height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: #fff; font: inherit; font-size: 9px; }
.pay-performance-total-toolbar > strong { margin: 0 0 8px auto; color: var(--muted); font-size: 9px; }
.pay-performance-total-dialog > main { min-height: 0; overflow: auto; }
.pay-performance-total-table-wrap { overflow: auto; }
.pay-attendance-report-modal .pay-performance-total-dialog { width: calc(100vw - 28px); height: calc(100vh - 28px); max-height: none; }
.pay-attendance-report-modal .pay-performance-total-dialog > main { display: grid; grid-template-rows: minmax(0, 1fr) 45px; overflow: hidden; }
.pay-attendance-report-modal .pay-performance-total-dialog > header input[type="file"] { display: none; }
.pay-attendance-report-modal .pay-performance-total-toolbar > strong { max-width: 48%; margin-bottom: 0; color: #173f33; font-size: 10px; text-align: right; }
.pay-attendance-template-wrap { min-height: 0; overflow: auto; background: #fff; }
.pay-attendance-template-table { table-layout: fixed; border-collapse: collapse; color: #000; background: #fff; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 11px; }
.pay-attendance-template-table th,
.pay-attendance-template-table td { height: 43px; padding: 3px 4px; border: 1px solid #222 !important; color: #000; line-height: 1.25; text-align: center; vertical-align: middle; white-space: normal; overflow-wrap: anywhere; }
.pay-attendance-template-table tr:last-child td { border-bottom: 1px solid #222 !important; }
.pay-attendance-template-table thead th { height: 30px; background: #fff; font-size: 12px; font-weight: 800; }
.pay-attendance-template-table thead .pay-attendance-template-title th { height: 42px; border: 0 !important; background: #fff; font-size: 22px; font-weight: 900; letter-spacing: 0; }
.pay-attendance-template-table tbody td { font-size: 11px; }
.pay-attendance-template-table tbody tr:hover td { background: #f7fbf9; }
.pay-attendance-template-table td.warning { color: #000; background: #fff2cc; font-weight: 400; }
.pay-attendance-template-table .pay-attendance-fixed { position: sticky; z-index: 2; background: #fff; }
.pay-attendance-template-table tbody tr:hover .pay-attendance-fixed { background: #f7fbf9; }
.pay-attendance-template-table .pay-attendance-fixed-1 { left: 0; padding-inline: 2px; font-size: 10px; }
.pay-attendance-template-table .pay-attendance-fixed-2 { left: 28px; font-weight: 800; }
.pay-attendance-template-table .pay-attendance-fixed-3 { left: 76px; }
.pay-attendance-template-table .pay-attendance-fixed-4 { left: 128px; }
.pay-attendance-template-table .pay-attendance-fixed-5 { left: 180px; }
.pay-attendance-template-table .pay-attendance-fixed-6 { left: 234px; }
.pay-attendance-template-table .pay-attendance-fixed-7 { left: 278px; box-shadow: 2px 0 0 #222; }
.pay-attendance-template-table thead tr:nth-child(2) th:nth-child(-n+7) { position: sticky; z-index: 5; }
.pay-attendance-template-table thead tr:nth-child(2) th:nth-child(1) { left: 0; }
.pay-attendance-template-table thead tr:nth-child(2) th:nth-child(2) { left: 28px; }
.pay-attendance-template-table thead tr:nth-child(2) th:nth-child(3) { left: 76px; }
.pay-attendance-template-table thead tr:nth-child(2) th:nth-child(4) { left: 128px; }
.pay-attendance-template-table thead tr:nth-child(2) th:nth-child(5) { left: 180px; }
.pay-attendance-template-table thead tr:nth-child(2) th:nth-child(6) { left: 234px; }
.pay-attendance-template-table thead tr:nth-child(2) th:nth-child(7) { left: 278px; box-shadow: 2px 0 0 #222; }
.pay-performance-total-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; color: #000; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 16px; }
.pay-performance-total-table th, .pay-performance-total-table td { height: 32px; padding: 0 8px; overflow: hidden; border: 1px solid #808080; color: #000; font-size: 16px; font-weight: 400; line-height: 1.25; vertical-align: middle; white-space: normal; overflow-wrap: anywhere; }
.pay-performance-total-table thead tr:not(.pay-performance-excel-title) th { height: 37px; background: #f0f4f2; font-weight: 700; text-align: center; }
.pay-performance-total-table .pay-performance-excel-title th { height: 32px; background: #fff; font-weight: 700; text-align: center; }
.pay-performance-total-table tbody td:nth-child(1) { text-align: center; }
.pay-performance-total-table tbody td:nth-child(2), .pay-performance-total-table tbody td:nth-child(3), .pay-performance-total-table tbody td:nth-child(9) { text-align: left; }
.pay-performance-total-table tbody td:nth-child(4), .pay-performance-total-table tbody td:nth-child(5), .pay-performance-total-table tbody td:nth-child(6), .pay-performance-total-table tbody td:nth-child(7), .pay-performance-total-table tbody td:nth-child(8), .pay-performance-total-table tbody td:nth-child(10) { text-align: right; }
.pay-performance-total-table tbody tr:hover td { background: #fff; }
.pay-performance-score { min-width: 38px; height: 23px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 3px; font-weight: 800; }
.pay-performance-score.excellent { color: #0f7568; background: #e3f3ef; }
.pay-performance-score.good { color: #256fc8; background: #eaf2fc; }
.pay-performance-score.normal { color: #9b6513; background: #fff1da; }
.pay-performance-score.warning { color: #c34843; background: #fbe7e5; }
.pay-performance-total-footer { height: 45px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); border-top: 1px solid #e7ebe9; font-size: 8px; }
.pay-change-table-modal .pay-performance-total-dialog { width: calc(100vw - 28px); height: calc(100vh - 28px); max-height: none; }
.pay-change-table-modal .pay-performance-total-dialog > header { justify-content: flex-end; }
.pay-change-table-modal .pay-performance-total-dialog > main { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 56px; overflow: hidden; }
.pay-change-table-modal.payroll-source-header-confirm .pay-performance-total-dialog > main { grid-template-rows: minmax(0, 1fr); }
.pay-base-salary-confirm-modal.payroll-source-header-confirm .pay-base-salary-confirm-dialog > main { grid-template-rows: minmax(0, 1fr); }
.pay-change-table-toolbar { align-items: center; justify-content: flex-end; }
.pay-change-table-toolbar > span { min-height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid #cbd7d1; border-radius: 4px; color: #263c34; background: #fff; font-size: 10px; font-weight: 800; }
.pay-change-table { width: 100%; min-width: 1290px; table-layout: fixed; border-collapse: collapse; color: #000; background: #e9f4ea; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; }
.pay-change-table th, .pay-change-table td { height: 39px; padding: 5px 7px; border: 1px solid #7f9787; color: #000; font-size: 13px; line-height: 1.25; text-align: center; vertical-align: middle; white-space: normal; overflow-wrap: anywhere; }
.pay-change-table thead th { position: sticky; z-index: 2; background: #cfe8d2; font-size: 13px; font-weight: 800; }
.pay-change-table thead .pay-change-excel-title th { top: 0; z-index: 4; height: 48px; background: #cfe8d2; font-size: 20px; font-weight: 900; }
.pay-change-table thead tr:nth-child(2) th { top: 49px; height: 44px; }
.pay-change-table thead tr:nth-child(3) th { top: 94px; height: 38px; }
.pay-change-table tbody td { background: #e9f4ea; font-weight: 500; }
.pay-change-table tbody tr:hover td { background: #e2f0e5; }
.pay-change-table tbody td:last-child { font-weight: 800; }
.pay-change-table tbody td.pay-change-note-negative { background: #fff200; }
.pay-change-table tbody tr.pay-change-total-row td { background: #fff; font-weight: 800; }
.pay-change-table tbody tr.pay-change-total-row:hover td { background: #fff; }
.pay-change-table-footer { min-height: 56px; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); background: #fff; }
.pay-change-table-footer > span { color: var(--muted); font-size: 10px; }
.pay-change-table-footer .btn { min-width: 130px; }
.pay-workflow-stage-action { width: 100%; min-height: 29px; margin-top: 10px; padding: 4px 6px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--green); border-radius: 5px; color: white; background: var(--green); font-size: 9px; font-weight: 800; text-align: center; }
.pay-workflow-stage-action svg { width: 13px; height: 13px; }
.pay-workflow-stage-action:hover { background: var(--green-2); }
.pay-workflow-stage-action:disabled { cursor: not-allowed; border-color: var(--line); color: #96a19c; background: #f3f5f4; }
.pay-workflow-stage-action[data-payroll-start-salary].ready { border-color: #104a3d; color: white; background: #104a3d; }
.pay-workflow-stage-action[data-payroll-start-salary].ready:hover { background: #0c3d32; }
.pay-workflow-stage-actions { display: grid; gap: 5px; margin-top: 9px; }
.pay-workflow-stage-actions .pay-workflow-stage-action { margin-top: 0; }
.pay-workflow-stage-action.secondary { border-color: #a9b9b2; color: var(--green); background: white; }
.pay-workflow-stage-action.secondary:hover { border-color: var(--green); background: var(--mint); }
.pay-workflow-generate { width: 100%; min-height: 45px; padding: 6px 7px; border: 1px solid #d0d7d4; border-radius: 5px; display: grid; justify-items: center; align-items: center; gap: 2px; color: #7b8782; background: #eef1f0; text-align: center; }
.pay-workflow-generate svg { width: 15px; height: 15px; }
.pay-workflow-generate span { font-size: 9px; font-weight: 800; }
.pay-workflow-generate small { color: inherit; font-size: 7px; }
.pay-workflow-generate:disabled { cursor: not-allowed; }
.pay-workflow-generate.done { border-color: #104a3d; color: white; background: #104a3d; cursor: pointer; }
.pay-workflow-generate.done:hover { background: #0c3d32; }
.pay-workflow-stage-action.done { border-color: #104a3d; color: white; background: #104a3d; }
.pay-workflow-stage-action.done:hover { background: #0c3d32; }
.pay-workflow-stage-action.pay-workflow-attendance-report { min-height: 38px; }
.pay-workflow-stage-action.pay-workflow-attendance-report span { line-height: 1.3; }
.pay-workflow-stage-action.pay-workflow-attendance-report.ready-generate { border-color: #a9b9b2; color: var(--green); background: #fff; }
.pay-workflow-stage-action.pay-workflow-attendance-report.ready-generate:hover { border-color: var(--green); background: var(--mint); }
.pay-workflow-stage-action.pay-workflow-attendance-report.pending-import { border-color: #aebbb5; color: #21483c; background: #fff; }
.pay-workflow-stage-action.pay-workflow-attendance-report.pending-import:hover { border-color: #176b55; background: #edf6f1; }
.pay-workflow-stage-action.pay-workflow-attendance-report.needs-confirmation { border-color: #a9b9b2; color: var(--green); background: #fff; }
.pay-workflow-stage-action.pay-workflow-attendance-report.needs-confirmation:hover { border-color: var(--green); background: var(--mint); }
.pay-workflow-stage-action[data-export-state="pending"],
.pay-workflow-stage-action[data-export-state="waiting"] { cursor: default; }
.pay-workflow-stage-action[data-export-state="waiting"] { border-color: #c49332; color: #5d4512; background: #fff7dc; }
.pay-workflow-stage-action[data-export-state="waiting"] svg { animation: none; }
.pay-workflow-stage-action.pay-workflow-final-salary { min-height: 46px; padding: 6px 7px; display: grid; justify-items: center; gap: 2px; border-color: #cbd2cf; color: #47534e; background: #e9edeb; }
.pay-workflow-final-salary > span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 9px; font-weight: 900; }
.pay-workflow-final-salary > small { display: block; color: inherit; font-size: 7px; font-weight: 800; }
.pay-workflow-stage-action.pay-workflow-final-salary:hover { border-color: #aeb8b3; background: #dfe5e2; }
.pay-workflow-stage-action.pay-workflow-final-salary.done { border-color: #104a3d; color: white; background: #104a3d; }
.pay-workflow-stage-action.pay-workflow-final-salary.done:hover { background: #0c3d32; }
.pay-workflow-stage-action.pay-workflow-final-salary:disabled { border-color: #d7dcda; color: #8d9893; background: #f0f2f1; }
.pay-workflow-dingtalk-status { margin-top: 6px !important; color: var(--muted); line-height: 1.4; }
.pay-workflow-dingtalk-status.ready { color: var(--green); font-weight: 700; }
.pay-workflow-step.active .pay-workflow-number[data-payroll-complete-step] { cursor: pointer; }
.pay-workflow-step.active .pay-workflow-number[data-payroll-complete-step]:hover { box-shadow: 0 0 0 4px rgba(184, 112, 24, .12); }
.pay-workbook-modal { position: fixed; inset: 0; z-index: 95; padding: 16px; display: none; place-items: center; background: rgba(12, 31, 24, .62); }
.pay-workbook-modal.open { display: grid; }
.pay-workbook-modal.department-preview { z-index: 100; }
.pay-workbook-modal.department-preview .pay-workbook-table { font-size: 8px; }
.pay-workbook-modal.department-preview .pay-workbook-table th,
.pay-workbook-modal.department-preview .pay-workbook-table td { padding: 4px 3px; }
.pay-workbook-modal.department-preview .pay-workbook-table thead th { height: 44px; line-height: 1.15; white-space: normal; }
.pay-workbook-modal.department-preview .pay-workbook-table .pay-workbook-corner,
.pay-workbook-modal.department-preview .pay-workbook-table .pay-workbook-row-number { width: 38px; min-width: 38px; }
.pay-workbook-modal.department-preview .pay-workbook-dialog > footer [data-payroll-close-workbook] { display: none; }
.pay-workbook-modal[hidden] { display: none !important; }
.pay-workbook-dialog { position: relative; width: min(1500px, calc(100vw - 32px)); height: calc(100vh - 32px); min-height: 520px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid #c5cec9; border-radius: 6px; background: #f7f9f8; box-shadow: 0 24px 70px rgba(4, 23, 16, .34); }
.pay-workbook-dialog > header { min-height: 67px; padding: 11px 16px; display: grid; grid-template-columns: minmax(240px, 1fr) auto 34px; align-items: center; gap: 14px; border-bottom: 1px solid #cdd5d1; background: white; }
.pay-workbook-dialog > header > div span { display: block; margin-bottom: 3px; color: var(--green); font-size: 8px; font-weight: 800; }
.pay-workbook-dialog > header h2 { margin: 0; font-size: 16px; }
.pay-workbook-status { padding: 5px 9px; border: 1px solid #c8ded4; border-radius: 4px; color: #104a3d; background: #edf6f2; font-size: 9px; font-weight: 700; white-space: nowrap; }
.pay-workbook-dialog > header .icon-btn { width: 31px; height: 31px; }
.pay-workbook-dialog > header .icon-btn svg { width: 15px; height: 15px; }
.pay-workbook-tabs { min-height: 39px; padding: 0 10px; display: flex; align-items: end; gap: 2px; overflow-x: auto; border-bottom: 1px solid #aebbb5; background: #eef1f0; }
.pay-workbook-tabs button { min-width: 116px; height: 33px; padding: 0 9px; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #53615b; background: transparent; font-size: 9px; font-weight: 700; white-space: nowrap; }
.pay-workbook-tabs button.active { border-color: #aebbb5; color: #104a3d; background: white; }
.pay-workbook-tabs .pay-workbook-delete-tab { width: 17px; height: 17px; border-radius: 2px; display: inline-grid; place-items: center; color: #75827c; font-size: 11px; font-weight: 800; line-height: 1; }
.pay-workbook-tabs .pay-workbook-delete-tab:hover { color: #a12626; background: #f9dddd; }
.pay-workbook-tabs .pay-workbook-add-tab { min-width: 33px; width: 33px; height: 33px; padding: 0; border: 1px dashed #9eada6; border-bottom: 0; color: #185f4a; background: #f7faf8; font-size: 20px; font-weight: 400; line-height: 1; }
.pay-workbook-tabs .pay-workbook-add-tab:hover { border-color: #185f4a; background: #e5f3ec; }
.pay-workbook-sheet { min-width: 0; min-height: 0; overflow: auto; background: white; }
.pay-workbook-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; color: #18231e; font-size: 9px; }
.pay-workbook-table th, .pay-workbook-table td { width: 72px; min-width: 72px; height: 31px; padding: 5px 6px; border-right: 1px solid #d6dcd9; border-bottom: 1px solid #d6dcd9; overflow: hidden; background: white; text-overflow: ellipsis; white-space: nowrap; }
.pay-workbook-table thead th { position: sticky; top: 0; z-index: 2; color: #25332d; background: #eef1f0; font-weight: 800; text-align: center; }
.pay-workbook-table .pay-workbook-corner, .pay-workbook-table .pay-workbook-row-number { position: sticky; left: 0; z-index: 3; width: 42px; min-width: 42px; color: #68756f; background: #f1f3f2; text-align: center; }
.pay-workbook-table .pay-workbook-corner { z-index: 4; }
.pay-workbook-table td.number { text-align: right; font-variant-numeric: tabular-nums; }
.pay-workbook-table td.editable { background: #fffef2; cursor: text; }
.pay-workbook-table td.editable:hover { background: #fff9cf; }
.pay-workbook-table td.editable:focus { position: relative; z-index: 1; outline: 2px solid #17805f; outline-offset: -2px; background: white; }
.pay-workbook-dialog input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.pay-workbook-dialog input[type="number"]::-webkit-inner-spin-button,
.pay-workbook-dialog input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.pay-workbook-table td.review-modified { color: #a82828; background: #fff0f0; box-shadow: inset 0 0 0 1px #d84b4b; font-weight: 800; cursor: pointer; }
.pay-workbook-table td.review-modified:hover, .pay-workbook-table td.review-modified:focus { background: #ffe4e4; outline-color: #c73535; }
.pay-workbook-table td.review-flagged:not(.review-modified) { color: #76500a; background: #fff5d8; box-shadow: inset 0 0 0 1px #d29a28; font-weight: 800; cursor: pointer; }
.pay-workbook-table td.review-flagged:not(.review-modified):hover { background: #ffedbb; }
.pay-workbook-table tbody tr:nth-child(even) td:not(.editable) { background: #fbfcfb; }
.pay-workbook-table tbody tr:nth-child(even) td.review-modified { background: #fff0f0; }
.pay-workbook-table tfoot th, .pay-workbook-table tfoot td { border-top: 2px solid #6fa88e; color: #103f32; background: #e4f2eb; font-weight: 900; }
.pay-workbook-table tfoot .pay-workbook-summary-label { text-align: center; }
.pay-workbook-loading, .pay-workbook-empty { height: 100%; min-height: 240px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 10px; }
.pay-workbook-loading svg { width: 17px; height: 17px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pay-workbook-dialog > footer { min-height: 58px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #cdd5d1; background: white; }
.pay-workbook-dialog > footer > span { color: var(--muted); font-size: 8px; }
.pay-workbook-dialog > footer > div { display: flex; gap: 8px; }
.pay-workbook-dialog > footer .btn { min-width: 94px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.pay-workbook-dialog > footer .btn svg { width: 13px; height: 13px; }
.pay-workbook-dialog > footer [hidden], .pay-workbook-cell-note[hidden] { display: none !important; }
.pay-workbook-finance { min-width: 215px; display: grid; grid-template-columns: auto minmax(145px, 1fr); align-items: center; gap: 6px; color: var(--muted); font-size: 8px; font-weight: 700; }
.pay-workbook-finance select { width: 100%; height: 34px; min-width: 0; }
.pay-workbook-cell-note { position: absolute; z-index: 8; top: 112px; right: 18px; width: min(330px, calc(100% - 36px)); border: 1px solid #dc9c9c; border-radius: 5px; overflow: hidden; background: white; box-shadow: 0 14px 38px rgba(63, 18, 18, .2); }
.pay-workbook-cell-note > header { min-height: 42px; padding: 7px 10px 7px 13px; display: flex; align-items: center; justify-content: space-between; color: #8e2020; background: #fff0f0; }
.pay-workbook-cell-note > header strong { font-size: 11px; }
.pay-workbook-cell-note > header .icon-btn { width: 27px; height: 27px; }
.pay-workbook-cell-note dl { margin: 0; padding: 6px 13px 12px; }
.pay-workbook-cell-note dl > div { padding: 8px 0; border-bottom: 1px solid #eee; }
.pay-workbook-cell-note dl > div:last-child { border-bottom: 0; }
.pay-workbook-cell-note dt { margin-bottom: 4px; color: var(--muted); font-size: 8px; font-weight: 700; }
.pay-workbook-cell-note dd { margin: 0; color: var(--ink); font-size: 10px; overflow-wrap: anywhere; }
.pay-workbook-cell-note dl > div:nth-child(2) dd { color: #a82828; font-weight: 800; }
.pay-finance-link-modal { position: fixed; inset: 0; z-index: 100; padding: 20px; display: none; place-items: center; background: rgba(12, 31, 24, .62); }
.pay-finance-link-modal.open { display: grid; }
.pay-finance-link-modal[hidden] { display: none !important; }
.pay-finance-link-modal > div { width: min(620px, calc(100vw - 40px)); border-radius: 6px; overflow: hidden; background: white; box-shadow: 0 24px 70px rgba(4, 23, 16, .34); }
.pay-finance-link-modal header { min-height: 64px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.pay-finance-link-modal header span { color: var(--green); font-size: 8px; font-weight: 800; }
.pay-finance-link-modal header h2 { margin: 3px 0 0; font-size: 15px; }
.pay-finance-link-modal main { padding: 18px 16px; }
.pay-finance-link-modal main > strong { display: block; margin-bottom: 9px; font-size: 10px; }
.pay-finance-link-modal main > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pay-finance-link-modal input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #f7f9f8; font-size: 9px; }
.pay-finance-link-modal main .btn, .pay-finance-link-modal footer .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.pay-finance-link-modal svg { width: 14px; height: 14px; }
.pay-finance-link-modal footer { padding: 11px 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
.pay-department-confirm-modal { position: fixed; inset: 0; z-index: 98; padding: 18px; display: none; place-items: center; background: rgba(12, 31, 24, .62); }
.pay-department-confirm-modal.open { display: grid; }
.pay-department-confirm-modal[hidden], .pay-department-confirm-dialog [hidden] { display: none !important; }
.pay-department-confirm-dialog { width: min(1380px, calc(100vw - 36px)); height: min(760px, calc(100vh - 36px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 7px; background: white; box-shadow: 0 24px 70px rgba(4, 23, 16, .34); }
.pay-department-confirm-dialog > header { min-height: 68px; padding: 12px 16px 12px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.pay-department-confirm-dialog > header > div > span { color: var(--green); font-size: 8px; font-weight: 800; }
.pay-department-confirm-dialog > header h2 { margin: 3px 0 0; font-size: 16px; }
.pay-department-confirm-summary { padding: 5px 9px; border-radius: 4px; color: #7b551b; background: var(--amber-bg); font-size: 9px; font-weight: 800; white-space: nowrap; }
.pay-department-confirm-summary.ready { color: #104a3d; background: var(--mint); }
.pay-department-confirm-toolbar { min-height: 66px; padding: 10px 20px; display: flex; align-items: end; gap: 10px; border-bottom: 1px solid var(--line); background: #fafcfb; }
.pay-department-confirm-toolbar label { display: grid; gap: 5px; }
.pay-department-confirm-toolbar label > span { color: var(--ink); font-size: 9px; font-weight: 800; }
.pay-department-confirm-toolbar select { width: 220px; height: 35px; }
.pay-department-confirm-toolbar .btn { min-height: 35px; display: inline-flex; align-items: center; gap: 6px; }
.pay-department-confirm-toolbar .btn svg { width: 14px; }
.pay-department-confirm-toolbar > .pay-department-generate-hint { margin: 0 0 9px; color: #b42323; font-size: 9px; font-weight: 900; white-space: nowrap; }
.pay-department-confirm-toolbar > span { margin: 0 0 9px auto; color: var(--muted); font-size: 9px; font-weight: 700; }
.pay-department-confirm-dialog > main { min-width: 0; min-height: 0; overflow: hidden; }
.pay-department-confirm-table-wrap { width: 100%; height: 100%; overflow: auto; }
.pay-department-confirm-table { min-width: 1280px; table-layout: fixed; }
.pay-department-confirm-table th { position: sticky; top: 0; z-index: 2; height: 43px; padding: 7px 9px; color: #101a16; background: #f1f5f3; font-size: 10px; font-weight: 900; text-align: center; }
.pay-department-confirm-table td { height: 58px; padding: 7px 9px; color: var(--ink); font-size: 10px; text-align: center; }
.pay-department-confirm-table th:nth-child(1) { width: 8%; }
.pay-department-confirm-table th:nth-child(2) { width: 11%; }
.pay-department-confirm-table th:nth-child(3) { width: 10%; }
.pay-department-confirm-table th:nth-child(4) { width: 8%; }
.pay-department-confirm-table th:nth-child(5) { width: 13%; }
.pay-department-confirm-table th:nth-child(6), .pay-department-confirm-table th:nth-child(7) { width: 9%; }
.pay-department-confirm-table th:nth-child(8), .pay-department-confirm-table th:nth-child(9), .pay-department-confirm-table th:nth-child(10) { width: 10%; }
.pay-department-confirm-table td > small { display: block; margin-top: 3px; color: var(--ink); font-size: 8px; font-weight: 800; }
.pay-department-reviewer-select { width: 108px; min-width: 92px; max-width: 128px; height: 32px; padding: 0 20px 0 7px; border: 1px solid #b9c9c2; border-radius: 4px; color: #101a16; background: white; font-size: 10px; font-weight: 900; }
.pay-department-reviewer-select option { color: #101a16; font-size: 10px; font-weight: 900; }
.pay-department-reviewer-select:focus { border-color: var(--green); outline: 2px solid rgba(24, 95, 74, .14); }
.pay-department-reviewer-exempt { color: #66736e; font-weight: 800; }
.pay-department-delivery-status, .pay-department-confirm-status { min-width: 72px; min-height: 25px; padding: 4px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid #cfd7d3; border-radius: 4px; color: #38443f; background: #eef1ef; font-size: 9px; font-weight: 800; white-space: nowrap; }
.pay-department-delivery-status.sent, .pay-department-confirm-status.confirmed { border-color: #94c5ad; color: #126047; background: #e5f3ec; }
.pay-department-delivery-status.failed { border-color: #e5aaa4; color: #9b2f27; background: #fae9e7; }
.pay-department-delivery-status button { width: 19px; height: 19px; padding: 0; display: grid; place-items: center; border: 0; color: #b72f25; background: transparent; cursor: pointer; }
.pay-department-delivery-status button:hover, .pay-department-delivery-status button:focus-visible { color: #861e18; outline: 2px solid rgba(183, 47, 37, .18); outline-offset: 1px; }
.pay-department-delivery-status button svg { width: 16px; height: 16px; stroke-width: 2.4; }
.pay-department-confirm-status.exempt { border-style: dashed; color: #66736e; background: #f4f6f5; }
.pay-department-signature.exempt { color: #185f4a; background: #e9f5ef; }
.pay-department-signature { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; justify-content: center; gap: 1px 5px; color: #7b551b; }
.pay-department-signature svg { grid-row: 1 / span 2; width: 16px; }
.pay-department-signature b, .pay-department-signature small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.pay-department-signature b { font-size: 9px; }
.pay-department-signature small { color: inherit; font-size: 8px; }
.pay-department-signature.confirmed { color: #126047; }
.pay-department-confirm-dialog > footer { min-height: 62px; padding: 10px 16px 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); background: white; }
.pay-department-confirm-dialog > footer > div:last-child { display: grid; grid-template-columns: repeat(3, max-content); align-items: center; justify-content: end; gap: 8px; }
.pay-department-send-controls { grid-column: 1 / -1; display: grid; grid-template-columns: 150px 104px 112px; justify-content: end; gap: 10px; }
.pay-department-send-control { min-height: 49px; display: grid; grid-template-rows: 15px 32px; align-items: center; justify-items: start; gap: 2px; color: #18231e; }
.pay-department-send-label { max-width: 100%; overflow: hidden; color: #101a16; font-size: 9px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.pay-department-send-control.empty { color: #75817c; }
.pay-department-send-control .pay-department-reviewer-select { width: 128px; max-width: 128px; }
.pay-department-confirm-dialog [data-payroll-send-department-reviews] { grid-column: 3; justify-self: end; }
.pay-department-confirm-dialog > footer .btn { min-width: 100px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pay-department-confirm-dialog > footer .btn svg { width: 14px; }
.pay-department-signature-state { min-width: 0; display: flex; align-items: center; gap: 8px; color: #7b551b; font-size: 9px; }
.pay-department-signature-state svg { flex: 0 0 auto; width: 17px; }
.pay-department-signature-state.ready { color: #126047; }
.pay-payslip-modal { position: fixed; inset: 0; z-index: 90; padding: 24px; display: none; place-items: center; background: rgba(12, 31, 24, .56); }
.pay-payslip-modal.open { display: grid; }
.pay-payslip-modal[hidden] { display: none !important; }
.pay-payslip-dialog { width: min(1440px, calc(100vw - 48px)); height: min(760px, calc(100vh - 48px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 7px; background: white; box-shadow: 0 24px 70px rgba(4, 23, 16, .28); }
.pay-payslip-modal.detail-mode .pay-payslip-dialog { width: min(1180px, calc(100vw - 64px)); height: min(620px, calc(100vh - 48px)); grid-template-rows: minmax(0, 1fr) auto; }
.pay-payslip-modal.detail-mode .pay-payslip-modal-head { display: none; }
.pay-payslip-modal-head { position: sticky; top: 0; z-index: 1; min-height: 72px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: white; }
.pay-payslip-modal-title { min-width: 0; flex: 1; }
.pay-payslip-title-row { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.pay-payslip-modal-head h2 { margin: 0; font-size: 16px; }
.pay-payslip-period-query { display: flex; align-items: end; gap: 8px; }
.pay-payslip-count { min-width: 54px; height: 31px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-size: 10px; font-weight: 800; white-space: nowrap; }
.pay-payslip-period-query label { display: grid; gap: 4px; }
.pay-payslip-period-query label > span { color: var(--muted); font-size: 8px; font-weight: 700; }
.pay-payslip-period-query select { width: 104px; min-width: 0; height: 31px; }
.pay-payslip-period-query label:nth-child(2) select { width: 116px; }
.pay-payslip-period-query .btn { min-width: 72px; height: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.pay-payslip-period-query .btn svg { width: 13px; height: 13px; }
.pay-payslip-click-hint { margin: 7px 0 0; display: flex; align-items: center; gap: 5px; color: var(--red); font-size: 10px; font-weight: 800; }
.pay-payslip-click-hint svg { width: 13px; height: 13px; }
.pay-payslip-all { min-height: 0; overflow-x: hidden; overflow-y: auto; }
.pay-payslip-preview-filters { padding: 10px 20px; display: flex; align-items: end; gap: 12px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
.pay-payslip-preview-filters label { display: grid; gap: 5px; }
.pay-payslip-preview-filters label > span { color: var(--ink); font-size: 10px; font-weight: 800; }
.pay-payslip-preview-filters select { width: 190px; min-width: 0; }
.pay-payslip-download { min-height: 35px; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.pay-payslip-download svg { width: 14px; height: 14px; }
.pay-payslip-all .table-wrap { overflow: visible; }
.pay-payslip-all-table { width: 100%; min-width: 0; table-layout: fixed; }
.pay-payslip-all-table th, .pay-payslip-all-table td { min-width: 0; padding-inline: 7px; overflow-wrap: anywhere; }
.pay-payslip-all-table th { height: auto; min-height: 41px; padding-block: 8px; color: var(--ink); font-weight: 800; line-height: 1.35; }
.pay-payslip-all-table th:nth-child(1) { width: 8%; }
.pay-payslip-all-table th:nth-child(2), .pay-payslip-all-table th:nth-child(3) { width: 12%; }
.pay-payslip-all-table th:nth-child(4) { width: 10%; }
.pay-payslip-all-table th:nth-child(5) { width: 9%; }
.pay-payslip-all-table th:nth-child(6) { width: 14%; }
.pay-payslip-all-table th:nth-child(7), .pay-payslip-all-table th:nth-child(9) { width: 12%; }
.pay-payslip-all-table th:nth-child(8) { width: 11%; }
.pay-payslip-all-table th { position: sticky; top: 0; z-index: 1; background: #f7f9f8; }
.pay-payslip-all-table th:nth-child(2), .pay-payslip-all-table th:nth-child(3) { font-size: 11px; }
.pay-payslip-all-table td:nth-child(2), .pay-payslip-all-table td:nth-child(3), .pay-payslip-all-table td:nth-child(5), .pay-payslip-all-table td:nth-child(6), .pay-payslip-all-table td:nth-child(7), .pay-payslip-all-table td:nth-child(9) { color: var(--ink); font-weight: 800; }
.pay-payslip-all-table td:nth-child(2), .pay-payslip-all-table td:nth-child(3) { font-size: 12px; }
.pay-payslip-all-table td[colspan] { padding: 34px; text-align: center; }
.pay-payslip-name { min-height: 25px; padding: 4px 7px; border: 1px solid #b8dccc; border-radius: 3px; color: #125a45; background: #e7f5ef; font-weight: 800; }
.pay-payslip-name:hover { border-color: var(--green); background: #d9eee5; }
.pay-payslip-attendance { display: grid; gap: 3px; }
.pay-payslip-attendance strong { color: var(--ink); font-size: 10px; font-weight: 800; white-space: nowrap; }
.pay-payslip-attendance small { color: var(--ink); font-size: 8px; font-weight: 800; white-space: nowrap; }
.pay-payslip-detail[hidden] { display: none !important; }
.pay-payslip-detail { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow-y: auto; }
.pay-payslip-detail-state { position: sticky; top: 0; z-index: 1; min-height: 46px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: white; }
.pay-payslip-detail-state .link-btn { display: inline-flex; align-items: center; gap: 5px; }
.pay-payslip-detail-state .link-btn svg { width: 13px; height: 13px; }
.pay-payslip-detail-person { display: grid; justify-items: end; gap: 3px; }
.pay-payslip-detail-person strong { color: var(--ink); font-size: 20px; line-height: 1.15; }
.pay-payslip-detail-person span { color: var(--green); font-size: 10px; font-weight: 800; }
.pay-payslip-preview { min-height: 100%; padding: 2px 22px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(76px, .85fr) minmax(58px, .65fr) minmax(58px, .65fr) minmax(74px, .85fr) minmax(58px, .65fr); gap: 0 22px; align-items: stretch; }
.pay-payslip-section { min-height: 0; padding: 10px 0; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line); }
.pay-payslip-section h3 { margin: 0 0 8px; color: var(--green); font-size: 12px; }
.pay-payslip-section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.pay-payslip-section span { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pay-payslip-section small { color: var(--ink); font-size: 11px; font-weight: 800; }
.pay-payslip-section strong { font-size: 11px; white-space: nowrap; }
.pay-payslip-section.basic-info > div { grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr) minmax(0, 1.25fr); gap: 0; align-items: stretch; }
.pay-payslip-section.basic-info span { min-height: 42px; padding: 3px 12px 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; }
.pay-payslip-section.basic-info .pay-payslip-field-name { padding-top: 7px; align-items: center; border-right: 1px solid var(--line); text-align: center; }
.pay-payslip-section.basic-info .pay-payslip-field-position { border-left: 1px solid var(--line); }
.pay-payslip-section.basic-info small, .pay-payslip-section.basic-info strong { font-size: 16px; line-height: 1.15; }
.pay-payslip-section.basic-info strong { max-width: 100%; color: var(--red); white-space: normal; overflow-wrap: anywhere; }
.pay-payslip-section.earnings { grid-column: 1; grid-row: 2 / span 2; }
.pay-payslip-section.subsidies { grid-column: 2; grid-row: 2; }
.pay-payslip-section.payable-total { grid-column: 2; grid-row: 3; }
.pay-payslip-section.deductions { grid-column: 1 / -1; grid-row: 4; }
.pay-payslip-section.deduction-total { grid-column: 1; grid-row: 5; }
.pay-payslip-section.final-total { grid-column: 2; grid-row: 5; }
.pay-payslip-section.deductions > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pay-payslip-section.total { margin-block: 5px; padding-inline: 14px; border-bottom: 0; border-radius: 5px; background: var(--mint); }
.pay-payslip-section.total h3, .pay-payslip-section.total strong { color: #104a3d; }
.pay-payslip-section.total strong { font-size: 13px; }
.pay-payslip-actions { min-height: 54px; padding: 9px 20px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
.pay-payslip-actions .btn { min-width: 116px; }
.pay-checks .pay-progress-note:first-of-type { border-top: 0; }
.pay-departments { margin-bottom: 20px; }
.pay-dept-grid { padding: 4px 18px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
.pay-processing-departments .pay-dept-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 18px; }
.pay-dept { min-width: 0; min-height: 78px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pay-dept:nth-last-child(-n+4) { border-bottom: 0; }
.pay-processing-departments .pay-dept { border-bottom: 1px solid var(--line); }
.pay-dept > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.pay-dept > div:first-child > span { min-width: 0; color: var(--ink); font-weight: 700; }
.pay-dept > div:first-child strong { font-size: 12px; }
.pay-dept .track { margin-top: 10px; height: 7px; }
.pay-dept .track i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.pay-dept p { display: flex; justify-content: space-between; margin: 8px 0 0; color: #8d9792; font-size: 9px; }
.pay-dept p b { color: var(--amber); font-weight: 600; }
.pay-table tbody .person span { display: none; }
.pay-dept-empty { grid-column: 1 / -1; padding: 34px 0 20px; color: var(--muted); text-align: center; font-size: 10px; }
.pay-department-overview .pay-dept-grid { grid-template-columns: repeat(var(--pay-dept-columns), minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(78px, auto)); grid-auto-flow: row; column-gap: 20px; overflow: visible; }
.pay-department-overview .pay-dept-row-top { border-bottom: 1px solid var(--line); }
.pay-department-overview .pay-dept-row-middle { border-bottom: 1px solid var(--line); }
.pay-department-overview .pay-dept-row-bottom { border-bottom: 0; }
.pay-department-overview .pay-dept > div:first-child strong { color: var(--red); }
.pay-department-overview .pay-dept p { gap: 6px; color: var(--ink); font-size: 10px; font-weight: 600; }
.pay-department-overview .pay-dept p span { white-space: nowrap; }
.pay-department-overview .pay-dept p b { color: var(--red); font-weight: 700; }
.pay-department-head-actions { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; }
.pay-department-period { display: flex; align-items: center; gap: 7px; }
.pay-department-period label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 600; white-space: nowrap; }
.pay-department-period select { height: 31px; min-width: 78px; padding: 0 24px 0 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: white; outline: 0; font-size: 10px; }
.pay-department-period select:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(25, 105, 81, .1); }
.pay-cost-period { display: flex; align-items: center; gap: 6px; }
.pay-cost-period select { height: 31px; min-width: 66px; padding: 0 22px 0 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: white; outline: 0; font-size: 10px; }
.pay-cost-period select:first-child { min-width: 78px; }
.pay-cost-period select:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(25, 105, 81, .1); }
.pay-table .panel-head { min-height: 60px; }
.pay-table-actions { display: flex; align-items: center; gap: 8px; }
.pay-table-actions .btn { min-height: 31px; font-size: 10px; }
.pay-table table { min-width: 1280px; }
.payroll-filters { display: grid; grid-template-columns: repeat(3, minmax(150px, 210px)); gap: 10px; padding: 0 18px 16px; border-bottom: 1px solid var(--line); }
.payroll-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.payroll-filters label > span { color: var(--ink); font-size: 10px; font-weight: 800; }
.payroll-filters select { width: 100%; height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: white; outline: 0; }
.payroll-filters select:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(25, 105, 81, .1); }
.payroll-table-head { min-height: 78px; gap: 18px; flex-wrap: wrap; }
.payroll-table-head > h2 { min-width: 280px; flex: 1 1 300px; }
.payroll-filters.payroll-filters-inline { min-width: 540px; padding: 0; border-bottom: 0; flex: 0 1 630px; grid-template-columns: repeat(3, minmax(150px, 1fr)); align-items: end; }
.pay-department-cell { color: var(--ink); font-weight: 700; }
.pay-salary-previous strong, .pay-salary-previous small, .pay-salary-difference strong, .pay-salary-difference small { display: block; }
.pay-salary-previous small, .pay-salary-difference small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.45; white-space: normal; }
.pay-salary-difference { min-width: 170px; }
.pay-salary-difference.positive strong { color: var(--green); }
.pay-salary-difference.negative strong { color: var(--red); }
.pay-status { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 5px 8px; border: 1px solid #8ac1ae; border-radius: 4px; color: #0f674d; background: #eaf6f0; font-size: 9px; font-weight: 800; white-space: nowrap; }
.pay-status::before { display: none; }
.pay-status.pending, .pay-status.held { border-color: #d9b36b; color: #996716; background: #fff8e9; }
.pay-status.unpaid { border-color: #e79c98; color: #b52929; background: #fff0ef; }
.payroll-empty { padding: 34px 18px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: 11px; }
.pay-more { width: 28px; height: 28px; border: 0; }
.pay-more svg { width: 14px; }
.pay-cost-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.pay-cost-pipeline { min-height: 230px; padding: 26px 18px; grid-template-rows: repeat(4, minmax(0, 1fr)); align-content: stretch; gap: 0; }
.pay-cost-pipeline .pipe-row { grid-template-columns: 82px minmax(36px, 1fr) 62px; gap: 8px; }
.pay-cost-pipeline .pipe-row > span { color: var(--ink); font-size: 12px; font-weight: 700; }
.pay-cost-pipeline .pipe-row > strong { color: var(--red); font-size: 12px; font-weight: 800; text-align: right; white-space: nowrap; }
.pay-workbench-bar { min-height: 54px; margin: -8px 0 18px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: white; }
.pay-workbench-bar > div:first-child { display: flex; align-items: center; gap: 9px; }
.pay-workbench-bar strong { font-size: 11px; }
.pay-workbench-bar small { color: var(--muted); font-size: 9px; }
.pay-structure-layout { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); margin-bottom: 20px; }
.pay-compact-table { min-width: 650px; }
.pay-composition { padding: 18px; display: grid; gap: 17px; }
.pay-composition > div > span { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: 9px; }
.pay-composition > div > span b { color: var(--ink); }
.pay-composition .track { height: 7px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.pay-composition .track i { display: block; height: 100%; border-radius: inherit; }
.salary-view-tabs { margin: -4px 0 10px; display: flex; align-items: center; gap: 19px; flex-wrap: wrap; }
.salary-view-tabs > button { min-width: 260px; min-height: 60px; padding: 0 26px 0 12px; border: 1px solid #d3ddd9; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 11px; color: #35453f; background: white; cursor: pointer; box-shadow: 0 4px 14px rgba(23,33,29,.06); }
.salary-view-tabs > button:hover { border-color: #8eb3a6; color: var(--green); background: #f8fbfa; }
.salary-view-tabs > button.active { border-color: #75a493; color: #155b47; background: #f7fbf9; box-shadow: inset 4px 0 0 var(--green), 0 4px 14px rgba(23,33,29,.06); }
.salary-view-tabs > button > i, .salary-view-tabs > button > svg { width: 34px; height: 34px; padding: 8px; border-radius: 9px; color: var(--green); background: var(--mint); }
.salary-view-tabs > button span { text-align: left; }
.salary-view-tabs > button strong, .salary-view-tabs > button small { display: block; }
.salary-view-tabs > button strong { font-size: 14px; }
.salary-view-tabs > button small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 650; }
.salary-system-tabs { display: flex; align-items: center; gap: 19px; flex-wrap: wrap; margin: 0 0 4px; }
.salary-system-tabs > button { min-width: 0; min-height: 46px; padding: 0 22px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--ink); background: white; text-align: center; cursor: pointer; position: relative; box-shadow: none; }
.salary-system-tabs > button:hover { border-color: #afc9bf; background: #fbfdfc; }
.salary-system-tabs > button.active { border-color: #90b2a5; color: white; background: #246d57; box-shadow: 0 5px 14px rgba(24,95,74,.14); }
.salary-system-tabs > button strong, .salary-system-tabs > button small { display: block; }
.salary-system-tabs > button strong { margin-bottom: 0; font-size: 12px; }
.salary-system-tabs > button small { color: var(--muted); font-size: 9px; }
.salary-system-tab-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--green); background: var(--mint); }
.salary-system-tab-icon.blue { color: var(--blue); background: var(--blue-bg); }
.salary-system-tab-icon.amber { color: var(--amber); background: var(--amber-bg); }
.salary-system-tab-icon.red { color: var(--red); background: var(--red-bg); }
.salary-system-tab-icon svg { width: 18px; height: 18px; }
.salary-system-summary { min-height: 102px; margin-bottom: 18px; padding: 16px 18px; border-left: 3px solid var(--green); display: flex; align-items: center; justify-content: space-between; gap: 28px; background: #e7efeb; }
.salary-system-summary h2 { margin: 3px 0 7px; font-size: 17px; }
.salary-system-summary p { max-width: 760px; margin: 0; color: #59655f; font-size: 10px; line-height: 1.65; }
.salary-system-kicker { color: var(--green); font-size: 8px; font-weight: 800; }
.salary-system-kicker.blue, .salary-level-code.blue, .salary-range-row > div:first-child > span.blue { color: var(--blue); }
.salary-system-kicker.amber, .salary-level-code.amber, .salary-range-row > div:first-child > span.amber { color: var(--amber); }
.salary-system-meta { flex: 0 0 auto; display: flex; gap: 22px; }
.salary-system-meta span { color: var(--muted); font-size: 8px; }
.salary-system-meta strong { display: block; margin-top: 5px; color: var(--ink); font-size: 11px; }
.salary-system-summary.commission-summary { border-left-color: var(--red); background: #f7eeee; }
.salary-system-kicker.red { color: var(--red); }
.commission-rule-panel { margin-bottom: 18px; overflow: hidden; }
.commission-scheme-toolbar { display:flex; align-items:flex-end; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line); background:#fbfcfb; }
.commission-scheme-toolbar label { display:grid; gap:5px; min-width:150px; color:var(--muted); font-size:11px; font-weight:700; }
.commission-scheme-toolbar select { min-height:36px; border:1px solid var(--line); border-radius:6px; background:#fff; padding:0 10px; color:var(--ink); font-weight:700; }
.commission-scheme-status { align-self:center; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:800; }
.commission-scheme-status.published { color:#17633b; background:#e4f2e9; }
.commission-scheme-status.draft { color:#8b5a13; background:#fff1d7; }
.commission-scheme-actions { display:flex; gap:8px; margin-left:auto; }
.commission-scheme-dialog, .commission-new-dialog { width:min(1080px,100%); max-height:88vh; }
.commission-scheme-dialog > form { min-height:0; flex:1; display:flex; flex-direction:column; overflow:hidden; }
.commission-rule-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.commission-rule-heading-actions .btn { white-space:nowrap; }
.commission-editor-source { flex:0 0 auto; display:grid; grid-template-columns:160px minmax(180px,1fr) 180px; gap:14px; padding:16px 18px; border-bottom:1px solid var(--line); }
.commission-editor-source label, .commission-editor-grid label, .commission-new-grid label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:700; }
.commission-editor-source label.full { grid-column:1 / -1; }
.commission-editor-source input, .commission-editor-source select, .commission-editor-grid input, .commission-new-grid input, .commission-editor-grid select { width:100%; min-height:36px; border:1px solid var(--line); border-radius:6px; background:#fff; padding:7px 9px; color:var(--ink); }
.commission-editor-source small { color:var(--muted); font-weight:500; }
.commission-editor-list { min-height:0; flex:1; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding:16px 18px; overflow-y:auto; scrollbar-gutter:stable; }
.commission-editor-list::-webkit-scrollbar { width:10px; }
.commission-editor-list::-webkit-scrollbar-track { background:#eef2f0; }
.commission-editor-list::-webkit-scrollbar-thumb { border:2px solid #eef2f0; border-radius:8px; background:#91a59c; }
.commission-editor-card { min-width:0; border:1px solid var(--line); border-radius:8px; padding:12px; background:#fff; }
.commission-editor-card[hidden] { display:none; }
.commission-editor-card legend { padding:0 6px; color:var(--ink); font-size:13px; font-weight:800; }
.commission-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.commission-editor-grid label.full { grid-column:1 / -1; }
.commission-margin-editor { padding:12px; border:1px solid #dce4e0; border-radius:6px; background:#f8faf9; }
.commission-margin-editor-title { margin-bottom:9px; }
.commission-margin-editor-title strong { color:var(--ink); font-size:12px; }
.commission-margin-matrix { display:grid; grid-template-columns:90px repeat(var(--commission-band-count),minmax(0,1fr)); border:1px solid #dce4e0; border-radius:6px; overflow:hidden; background:#fff; }
.commission-margin-matrix > strong, .commission-margin-cell { min-height:46px; padding:7px 10px; display:flex; align-items:center; justify-content:center; gap:6px; border-right:1px solid #e0e7e3; border-bottom:1px solid #e0e7e3; color:#48564f; font-size:11px; }
.commission-margin-matrix > strong { justify-content:flex-start; color:var(--ink); background:#f1f5f3; font-weight:850; }
.commission-margin-matrix > :nth-child(4), .commission-margin-matrix > :last-child { border-right:0; }
.commission-margin-matrix > :nth-last-child(-n + 4) { border-bottom:0; }
.commission-margin-cell input { width:64px; min-height:32px; padding:5px 7px; text-align:center; }
.commission-margin-cell em { color:var(--muted); font-size:10px; font-style:normal; }
.commission-scheme-dialog form > footer, .commission-new-dialog form > footer { flex:0 0 auto; display:flex; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid var(--line); background:#fbfcfb; }
.commission-new-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:20px 18px; }
  .commission-scheme-toolbar { align-items:stretch; flex-wrap:wrap; }
  .commission-scheme-actions { width:100%; margin-left:0; }
  .commission-scheme-actions .btn { flex:1; }
  .commission-editor-source, .commission-editor-list, .commission-new-grid { grid-template-columns:1fr; }
  .commission-editor-card:last-child, .commission-editor-source label.full, .commission-editor-grid label.full { grid-column:auto; }
  .commission-editor-grid { grid-template-columns:1fr; }
  .commission-margin-matrix { grid-template-columns:76px repeat(var(--commission-band-count),minmax(74px,1fr)); }
  .commission-margin-matrix > strong, .commission-margin-cell { padding:6px 5px; font-size:10px; }
  .commission-margin-cell input { width:52px; }
}
.commission-rule-tabs { padding: 15px 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; background: #f6f8f7; }
.commission-rule-tabs button { min-width: 0; min-height: 52px; padding: 8px 12px; border: 1px solid #d8e0dc; border-radius: 7px; display: grid; place-items: center; color: #42514b; background: white; cursor: pointer; text-align: center; }
.commission-rule-tabs button:hover { border-color: #9cbbae; color: var(--green); }
.commission-rule-tabs button.active { border-color: var(--green); color: white; background: var(--green); box-shadow: 0 5px 14px rgba(24,95,74,.14); }
.commission-rule-tabs strong, .commission-rule-tabs small { display: block; }
.commission-rule-tabs strong { font-size: 11px; }
.commission-rule-tabs small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.3; }
.commission-rule-tabs button.active small { color: #dcebe4; }
.commission-rule-view { padding: 18px; }
.commission-rule-heading { min-height: 48px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.commission-rule-heading > div > span { display: block; margin-top: 5px; color: var(--red); font-size: 8px; font-weight: 800; }
.commission-rule-heading h3 { margin: 0; color: var(--ink); font-size: 17px; }
.commission-rule-metrics { margin-top: 10px; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fafbfa; }
.commission-rule-metrics > div { min-height: 68px; padding: 13px 16px; border-right: 1px solid var(--line); display: grid; align-content: center; }
.commission-rule-metrics > div:last-child { border-right: 0; }
.commission-rule-metrics span, .commission-rule-metrics strong { display: block; }
.commission-rule-metrics span { color: var(--muted); font-size: 8px; }
.commission-rule-metrics strong { margin-top: 6px; color: var(--ink); font-size: 12px; }
.commission-rule-formula { min-height: 54px; padding: 10px 16px; border-left: 3px solid var(--red); display: flex; align-items: center; gap: 18px; background: #fbf5f5; }
.commission-rule-formula span { color: var(--red); font-size: 8px; font-weight: 800; }
.commission-rule-formula strong { color: var(--ink); font-size: 11px; }
.commission-calculator { margin-top: 16px; border: 1px solid #cfdcd7; border-radius: 7px; overflow: hidden; background: #f8faf9; }
.commission-calculator > header { min-height: 58px; padding: 10px 14px 10px 16px; border-bottom: 1px solid #dce5e1; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #edf4f1; }
.commission-calculator > header > div:last-child { display: flex; gap: 8px; }
.commission-calculator > header span { color: var(--green); font-size: 7px; font-weight: 850; }
.commission-calculator > header h4 { margin: 4px 0 0; color: var(--ink); font-size: 13px; }
.commission-calculator-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; }
.commission-calculator-fields { padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 12px; }
.commission-calculator-fields.brand { grid-template-columns: repeat(2, minmax(0, 260px)); }
.commission-calculator-fields label { min-width: 0; display: grid; gap: 6px; color: var(--ink); font-size: 9px; font-weight: 750; }
.commission-calculator-fields label[hidden] { display: none; }
.commission-calculator-fields label > span { min-height: 20px; }
.commission-calculator-fields label small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; font-weight: 500; }
.commission-calculator-fields input, .commission-calculator-fields select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #cdd9d4; border-radius: 5px; color: var(--ink); background: white; outline: 0; font-size: 10px; }
.commission-calculator-fields input:focus, .commission-calculator-fields select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(24,95,74,.09); }
.commission-calculator-fields input:disabled { color: #96a19c; background: #eef1ef; cursor: not-allowed; }
.commission-calculator-result { min-height: 168px; padding: 16px 18px; border-left: 1px solid #dce5e1; display: grid; align-content: center; background: white; }
.commission-calculator-result > span { color: var(--muted); font-size: 8px; }
.commission-calculator-result > strong { margin-top: 5px; color: var(--red); font-size: 22px; }
.commission-calculator-result > div { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.commission-calculator-result > div span { min-width: 0; }
.commission-calculator-result small, .commission-calculator-result b { display: block; }
.commission-calculator-result small { color: var(--muted); font-size: 7px; }
.commission-calculator-result b { margin-top: 3px; color: var(--ink); font-size: 9px; overflow-wrap: anywhere; }
.commission-calculator-result > p { margin: 11px 0 0; padding-top: 9px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 7px; }
.commission-calculator-result > p span { display: grid; gap: 2px; }
.commission-calculator-result > p b { color: var(--ink); font-size: 8px; }
.commission-calculator-detail { min-height: 42px; padding: 10px 16px; border-top: 1px solid #dce5e1; display: flex; align-items: center; color: #405048; background: #f1f6f4; font-size: 8px; font-weight: 650; line-height: 1.5; }
.commission-calculator-summary { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.8fr); align-items:stretch; border-top:1px solid #dce5e1; background:#f1f6f4; }
.commission-calculator-summary .commission-calculator-detail { min-height:48px; border-top:0; }
.commission-calculator-formula { min-height: 48px; padding: 10px 16px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; color: #405048; background: #f1f6f4; font-size: 8px; font-weight: 650; line-height: 1.5; text-align: right; }
.commission-calculator-formula span, .commission-calculator-formula strong { color: inherit; font-size: inherit; font-weight: inherit; }
.commission-calculator > footer { padding: 8px 16px; border-top: 1px solid #e3e9e6; color: var(--muted); background: white; font-size: 7px; line-height: 1.5; }
.commission-rule-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.commission-rule-grid section { min-width: 0; }
.commission-rule-grid h4 { margin: 0 0 9px; color: var(--ink); font-size: 11px; }
.commission-detail-table { width: 100%; min-width: 0; table-layout: fixed; }
.commission-detail-table th { padding: 9px 10px; color: var(--ink); background: #f5f7f6; font-size: 9px; font-weight: 800; }
.commission-detail-table td { padding: 10px; font-size: 9px; line-height: 1.5; }
.commission-detail-table td strong { color: var(--ink); }
.commission-policy-layout { margin-top: 20px; }
.commission-policy-matrix { min-width: 0; margin-top: 14px; }
.commission-policy-title { min-height: 44px; margin-bottom: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.commission-policy-title h4 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 900; }
.commission-policy-title p { margin: 5px 0 0; color: #4f5d57; font-size: 10px; font-weight: 700; line-height: 1.45; }
.commission-policy-title > span { flex: 0 0 auto; color: var(--green); font-size: 11px; font-weight: 900; }
.commission-matrix-table { border: 1px solid var(--line); }
.commission-matrix-table th, .commission-matrix-table td { padding: 12px 10px; border-right: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 850; text-align: center; vertical-align: middle; line-height: 1.55; overflow-wrap: normal; word-break: keep-all; }
.commission-matrix-table th { font-size: 12px; font-weight: 900; }
.commission-matrix-table th:last-child, .commission-matrix-table td:last-child { border-right: 0; }
.commission-matrix-table td[rowspan] { background: #fbfcfb; }
.commission-matrix-table .commission-profit-tier strong, .commission-matrix-table .commission-rate-tier strong { font-size: 13px; font-weight: 900; }
.commission-platform-tier-table td { height: 58px; }
.commission-brand-policy-layout { display: grid; grid-template-columns: minmax(560px, 1.2fr) minmax(390px, .8fr); align-items: start; gap: 20px; }
.commission-brand-policy-layout .commission-policy-matrix, .commission-brand-policy-layout .commission-policy-matrix + .commission-policy-matrix { margin-top: 0; }
.commission-brand-tier-table td { height: 48px; }
.commission-brand-margin-table td { height: 60px; }
.commission-brand-tier-table .commission-tier-method { position: relative; overflow: hidden; background: #f3f8f6; }
.commission-brand-tier-table .commission-tier-method::before { content: ""; position: absolute; z-index: 0; top: 47px; right: 0; left: 0; height: 1px; background: var(--line); box-shadow: 0 48px 0 var(--line), 0 96px 0 var(--line), 0 144px 0 var(--line); }
.commission-brand-tier-table .commission-tier-method strong { position: relative; z-index: 1; color: var(--green); font-size: 14px; font-weight: 900; }
[data-calculator-type="brand"] .commission-calculator-detail { min-height: 44px; color: var(--ink); font-size: 10px; font-weight: 850; }
[data-calculator-type="brand"] > footer { color: var(--ink); font-size: 9px; font-weight: 800; }
.commission-team-rule { min-width: 0; border: 1px solid #cdded7; display: grid; grid-template-columns: 190px minmax(0, 1fr); background: #f5f9f7; }
.commission-team-rule-title { min-height: 62px; padding: 10px 14px; border-right: 1px solid #cdded7; display: flex; align-items: center; justify-content: center; color: var(--green); background: #eaf3ef; }
.commission-team-rule-title strong { color: var(--green); font-size: 13px; font-weight: 900; }
.commission-team-rule-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.commission-team-rule-items > span { min-height: 58px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.commission-team-rule-items > span:first-child { border-right: 1px solid #cdded7; }
.commission-team-rule-items small { color: var(--ink); font-size: 11px; font-weight: 800; line-height: 1.45; }
.commission-team-rule-items strong { flex: 0 0 auto; color: var(--red); font-size: 16px; font-weight: 900; }
.commission-team-rule-note { grid-column: 1 / -1; min-height: 38px; margin: 0; padding: 9px 14px; border-top: 1px solid #cdded7; display: flex; align-items: center; color: #46564f; background: #f8faf9; font-size: 11px; font-weight: 800; line-height: 1.45; }
.commission-settlement-strip { margin-top: 18px; border-top: 1px solid #ead4d4; border-bottom: 1px solid #ead4d4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fbf6f6; }
.commission-settlement-strip > span { min-height: 72px; padding: 14px 16px; border-right: 1px solid #ead4d4; display: grid; align-content: center; }
.commission-settlement-strip > span:last-child { border-right: 0; }
.commission-settlement-strip strong, .commission-settlement-strip small { display: block; }
.commission-settlement-strip strong { color: var(--ink); font-size: 12px; font-weight: 850; }
.commission-settlement-strip > span:nth-child(-n+2) strong, .commission-settlement-strip > span.emphasis strong { color: var(--red); }
.commission-settlement-strip small { margin-top: 5px; color: #4f5d57; font-size: 10px; font-weight: 700; line-height: 1.45; }
.commission-settlement-strip > span.equal-copy small { color: inherit; font-size: 12px; font-weight: 850; }
.commission-settlement-strip > span.equal-copy:first-child small { color: var(--red); }
.commission-rule-footnote { margin: 11px 0 0; color: var(--muted); font-size: 8px; line-height: 1.6; }
.commission-rule-footnote.danger { color: var(--red); font-weight: 700; }
.salary-path-panel { margin-bottom: 18px; }
.salary-path { padding: 20px 18px 22px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.salary-path::before { content: ""; position: absolute; left: 10%; right: 10%; top: 38px; height: 2px; background: #dce5e1; }
.salary-path-step { min-width: 0; display: grid; justify-items: center; position: relative; z-index: 1; text-align: center; }
.salary-path-step > span { width: 38px; height: 38px; border: 4px solid white; border-radius: 50%; display: grid; place-items: center; color: #68766f; background: #dce5e1; box-shadow: 0 0 0 1px #c9d5d0; font-size: 9px; font-weight: 800; }
.salary-path-step.current > span { color: white; background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.salary-path.jd .salary-path-step.current > span { background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.salary-path-step strong { margin-top: 9px; font-size: 11px; }
.salary-path-step small { margin-top: 4px; color: var(--ink); font-size: 9px; font-weight: 800; }
.salary-standard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; margin-bottom: 18px; }
.salary-standard-table { min-width: 760px; table-layout: fixed; }
.salary-standard-table th:nth-child(1) { width: 110px; }
.salary-standard-table th:nth-child(2) { width: 150px; }
.salary-standard-table th:nth-child(3) { width: 140px; }
.salary-standard-table th:nth-child(4) { width: 90px; }
.salary-standard-table td { line-height: 1.55; }
.salary-standard-table td:first-child strong { display: block; margin-top: 5px; }
.salary-level-code { display: inline-flex; padding: 3px 6px; border-radius: 4px; color: var(--green); background: var(--mint); font-size: 9px; font-weight: 800; }
.salary-review-panel .pay-composition { padding-bottom: 12px; }
.salary-review-notes { padding: 4px 18px 16px; display: grid; gap: 9px; }
.salary-review-notes p { margin: 0; display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.salary-review-notes svg { flex: 0 0 13px; width: 13px; height: 13px; color: var(--green); }
.content:has([data-salary-system-root]) { max-width: none; }
.salary-standard-layout.promotion-only { grid-template-columns: 1fr; }
.salary-standard-table.ecommerce { width: 100%; min-width: 0; table-layout: fixed; }
.salary-standard-table.ecommerce th:nth-child(1) { width: 110px; }
.salary-standard-table.ecommerce th:nth-child(2) { width: 120px; }
.salary-standard-table.ecommerce th:nth-child(3) { width: 280px; }
.salary-standard-table.ecommerce th:nth-child(4) { width: 100px; }
.salary-standard-table.ecommerce th:nth-child(5) { width: 300px; }
.salary-standard-table.ecommerce th:nth-child(6) { width: 100px; }
.salary-standard-layout.promotion-only .panel-head h2, .salary-band-panel .panel-head h2 { color: var(--ink); font-size: 15px; font-weight: 800; }
.salary-standard-table.ecommerce th { color: var(--ink); font-size: 11px; font-weight: 800; }
.salary-standard-table.ecommerce tbody td:nth-child(3), .salary-standard-table.ecommerce tbody td:nth-child(4), .salary-standard-table.ecommerce tbody td:nth-child(5), .salary-standard-table.ecommerce tbody td:nth-child(6) { color: var(--ink); font-weight: 800; }
.salary-standard-table.ecommerce .salary-level-code { font-size: 10px; }
.salary-standard-table.ecommerce tbody td:nth-child(2) { color: var(--ink); font-size: 11px; font-weight: 800; }
.salary-standard-table.ecommerce th:nth-child(6), .salary-standard-table.ecommerce tbody td:nth-child(6) { color: var(--red); }
.salary-range-panel { margin-bottom: 20px; }
.salary-range-list { padding: 4px 18px 14px; }
.salary-range-row { min-height: 70px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 22px; }
.salary-range-row:last-child { border-bottom: 0; }
.salary-range-row > div:first-child { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; }
.salary-band-table { width: 100%; min-width: 620px; table-layout: fixed; }
.salary-band-table th:first-child { width: 34%; }
.salary-band-table th:nth-child(2), .salary-band-table th:nth-child(3), .salary-band-table th:nth-child(4) { width: 22%; }
.salary-band-table.split-stage th:first-child { width: 14%; }
.salary-band-table.split-stage th:nth-child(2) { width: 16%; }
.salary-band-table.split-stage th:nth-child(3), .salary-band-table.split-stage th:nth-child(4) { width: 22%; }
.salary-band-table.split-stage th:nth-child(5) { width: 26%; }
.salary-band-table th { color: var(--ink); font-size: 10px; font-weight: 800; }
.salary-band-table.split-stage th { font-size: 11px; }
.salary-band-table .salary-level-code { font-size: 10px; }
.salary-band-table td:first-child strong { display: inline-block; margin-left: 12px; }
.salary-band-table td, .salary-band-table td strong { overflow-wrap: anywhere; word-break: break-word; }
.salary-band-table td:nth-child(2), .salary-band-table td:nth-child(3), .salary-band-table td:nth-child(4) { word-spacing: 8px; }
.pm-review-toolbar { margin: -4px 0 18px; padding: 12px 14px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pm-review-tabs { display: flex; gap: 8px; }
.pm-review-tabs > button { min-width: 188px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 9px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.pm-review-tabs > button.active { border-color: var(--green); background: #f5faf7; box-shadow: inset 0 -2px 0 var(--green); }
.pm-review-tabs > button strong, .pm-review-tabs > button small { display: block; }
.pm-review-tabs > button strong { font-size: 11px; }
.pm-review-tabs > button small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.pm-track-mark { width: 32px; height: 32px; border-radius: 5px; display: grid; place-items: center; color: var(--green); background: var(--mint); font-size: 16px; font-weight: 800; }
.pm-track-mark.amber { color: var(--amber); background: var(--amber-bg); }
.pm-review-filters { display: flex; align-items: end; gap: 10px; }
.pm-review-filters label { color: var(--muted); font-size: 9px; }
.pm-review-filters select, .pm-review-filters input { min-height: 31px; margin-top: 5px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; }
.pm-review-search input { width: 138px; }
.pm-review-panels { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, .8fr); gap: 18px; align-items: start; }
.pm-review-table-panel { min-width: 0; }
.pm-review-table { min-width: 700px; }
.pm-review-table td { vertical-align: middle; }
.pm-review-table td strong { font-size: 11px; }
.pm-review-table td small { display: block; }
.pm-role, .pm-score-note { margin-top: 3px; color: var(--muted); font-size: 8px; }
.pm-review-table .person span { color: var(--muted); }
.pm-review-guide { min-width: 0; }
.pm-dimension { padding: 12px 0 13px; border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.pm-dimension > div strong, .pm-dimension > div span { display: block; }
.pm-dimension strong { font-size: 11px; }
.pm-dimension span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.pm-dimension > b { color: var(--green); font-size: 12px; }
.pm-dimension > i { height: 5px; border-radius: 3px; grid-column: 1 / -1; background: #edf1ee; overflow: hidden; }
.pm-dimension > i em { height: 100%; display: block; border-radius: inherit; background: var(--green); }
[data-pm-review-guide="m"] .pm-dimension > b { color: var(--amber); }
[data-pm-review-guide="m"] .pm-dimension > i em { background: var(--amber); }
.pm-review-process { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pm-review-process .panel-head { padding: 0 0 5px; border: 0; }
.pm-review-process .panel-head h2 { font-size: 13px; }
.pm-process-step { padding: 10px 0; display: flex; align-items: center; gap: 9px; color: var(--muted); }
.pm-process-step > i { width: 20px; height: 20px; display: grid; place-items: center; }
.pm-process-step > i svg { width: 16px; height: 16px; }
.pm-process-step strong, .pm-process-step small { display: block; }
.pm-process-step strong { color: var(--ink); font-size: 10px; }
.pm-process-step small { margin-top: 3px; font-size: 8px; }
.pm-process-step.done > i { color: var(--green); }
.pm-process-step.active > i { color: var(--amber); }
.pm-review-empty { padding: 28px; color: var(--muted); text-align: center; font-size: 10px; }
.content:has([data-pm-review-root]) { max-width: none; }
.pm-year-strip { margin: -4px 0 18px; position: sticky; top: 68px; z-index: 14; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: rgba(255,255,255,.98); box-shadow: 0 8px 18px rgba(23, 63, 52, .1); }
.pm-year-strip > div { min-height: 62px; padding: 11px 14px; border-right: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 3px 8px; color: var(--muted); }
.pm-year-strip > div:last-child { border-right: 0; }
.pm-year-strip > div.active { box-shadow: inset 0 -3px 0 var(--green); background: #f6faf8; }
.pm-year-strip span { grid-row: 1 / 3; align-self: center; color: var(--muted); font-size: 14px; font-weight: 850; }
.pm-year-strip .active span { color: var(--green); }
.pm-year-strip strong { color: var(--ink); font-size: 10px; }
.pm-year-strip small { font-size: 8px; }
.pm-year-strip > button { min-width: 0; min-height: 76px; padding: 0 14px; border: 0; border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--ink); background: white; cursor: pointer; }
.pm-year-strip > button:last-child { border-right: 0; }
.pm-year-strip > button.active { box-shadow: inset 0 -3px 0 var(--green); background: #f7faf8; }
.pm-year-strip > button:hover { background: #f7faf8; }
.pm-year-strip > button span { grid-row: auto; color: var(--ink); font-size: 17px; font-weight: 850; }
.pm-year-strip > button strong { color: var(--ink); font-size: 17px; font-weight: 850; }
.pm-year-strip > button.complete strong { color: #b4232f; }
.pm-analysis-grid { margin-bottom: 18px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 18px; align-items: stretch; }
.pm-result-analysis, .pm-result-detail { min-width: 0; height: 100%; }
.pm-result-analysis { display: flex; flex-direction: column; }
.pm-result-columns { padding: 10px 22px 6px; border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: 105px minmax(150px, 1fr) 60px 52px; align-items: center; gap: 12px; color: var(--muted); }
.pm-result-columns strong, .pm-result-columns b { text-align: right; font-size: 12px; font-weight: 850; white-space: nowrap; }
.pm-result-bars { flex: 0 0 auto; padding: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 82px); gap: 0; }
.pm-result-bar { min-height: 0; padding: 14px 22px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; display: grid; grid-template-columns: 105px minmax(150px, 1fr) 60px 52px; align-items: center; gap: 12px; background: white; }
.pm-result-bar:last-child { border-bottom: 0; }
.pm-result-bar > span { color: var(--ink); font-size: 17px; font-weight: 850; white-space: nowrap; }
.pm-result-bar > i { width: 100%; height: 14px; border-radius: 4px; background: #edf1ef; overflow: hidden; }
.pm-result-bar > i em { height: 100%; display: block; border-radius: inherit; background: var(--green); }
.pm-result-bar > strong { color: var(--ink); text-align: right; font-size: 15px; white-space: nowrap; }
.pm-result-bar > b { color: var(--ink); text-align: right; font-size: 15px; font-weight: 850; white-space: nowrap; }
.pm-result-bar.down > i em { background: #b87018; }
.pm-result-bar.same > i em { background: #2e6799; }
.pm-result-bar.down > span { color: #9b5b10; }
.pm-result-bar.up > span { color: var(--green); }
.pm-result-bar.same > span { color: #2e6799; }
.pm-result-analysis .panel-head h2 span, .pm-result-detail .panel-head h2 span { color: var(--ink); font-weight: 700; }
.pm-review-stats .stat .label { color: var(--green); font-size: 13px; font-weight: 850; }
.pm-review-stats .stat .value { width: calc(100% - .5cm); transform: translateX(.5cm); font-size: 22px; }
.pm-review-stats .stat .value small { font-size: 11px; }
@media (max-width: 1100px) {
  .pm-analysis-grid { grid-template-columns: 1fr; }
}
.pm-migration-cloud { padding: 10px 18px 17px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 7px; }
.pm-migration-cloud span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: #fbfcfb; font-size: 8px; }
.pm-migration-cloud strong { margin-right: 6px; color: var(--ink); font-size: 9px; }
.pm-data-readiness { padding-bottom: 14px; }
.pm-readiness-row { padding: 10px 18px 0; display: grid; grid-template-columns: 90px 1fr 42px; align-items: center; gap: 10px; font-size: 9px; }
.pm-readiness-row > i { height: 6px; overflow: hidden; border-radius: 2px; background: #edf1ef; }
.pm-readiness-row > i em { height: 100%; display: block; background: var(--green); }
.pm-readiness-row.warning > i em { background: var(--amber); }
.pm-readiness-row strong { text-align: right; }
.pm-analysis-alert { margin: 15px 18px 0; padding: 11px 12px; border-left: 3px solid var(--amber); display: grid; grid-template-columns: 20px 1fr; gap: 9px; background: #fff8ee; }
.pm-analysis-alert > svg { width: 17px; height: 17px; color: var(--amber); }
.pm-analysis-alert strong { font-size: 10px; }
.pm-analysis-alert p { margin: 4px 0 0; color: #725d3f; font-size: 8px; line-height: 1.6; }
.pm-department-panel { margin-bottom: 18px; }
.pm-department-table { min-width: 680px; }
.pm-department-table th:not(:first-child), .pm-department-table td:not(:first-child) { text-align: center; }
.pm-department-table thead th { padding-top: 10px; padding-bottom: 10px; color: var(--ink); font-size: 11px; font-weight: 900; }
.pm-department-table tbody td { height: 38px; padding-top: 6px; padding-bottom: 6px; }
.pm-department-table tfoot th, .pm-department-table tfoot td { padding-top: 12px; padding-bottom: 12px; border-top: 2px solid var(--line); color: var(--ink); background: #f3f7f5; font-size: 12px; font-weight: 900; }
.pm-department-total th { color: var(--ink); font-size: 13px; }
.pm-rate { color: var(--amber); font-weight: 800; }
.pm-rate.good { color: var(--green); }
.pm-result-cells { white-space: nowrap; }
.pm-result-cells span { min-width: 22px; display: inline-block; color: var(--muted); }
.pm-result-cells .down, .pm-result-legend .down, .pm-result-down { color: #a76516; font-weight: 800; }
.pm-result-cells .up, .pm-result-legend .up, .pm-result-up { color: var(--green); font-weight: 800; }
.pm-result-legend { display: flex; gap: 11px; color: var(--muted); font-size: 8px; }
.pm-review-ledger { min-width: 0; }
.pm-review-ledger .pm-review-filters { padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fafcfb; }
.pm-review-table { min-width: 1160px; table-layout: fixed; }
.pm-review-table th:nth-child(1) { width: 90px; }
.pm-review-table th:nth-child(2) { width: 120px; }
.pm-review-table th:nth-child(3) { width: 110px; }
.pm-review-table th:nth-child(4) { width: 105px; }
.pm-review-table th:nth-child(5) { width: 110px; }
.pm-review-table th:nth-child(6) { width: 160px; }
.pm-review-table th:nth-child(7), .pm-review-table th:nth-child(8) { width: 190px; }
.pm-review-table td { min-height: 52px; }
.pm-review-salary strong, .pm-review-salary small { display: block; }
.pm-review-salary strong { color: var(--ink); font-size: 11px; }
.pm-review-salary small { margin-top: 4px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.pm-person-workspace .table-wrap { overflow-x: hidden; }
.pm-person-workspace .pm-review-table { width: 100%; min-width: 0; table-layout: fixed; }
.pm-person-workspace .pm-review-table th:nth-child(1) { width: 6%; }
.pm-person-workspace .pm-review-table th:nth-child(2) { width: 9%; }
.pm-person-workspace .pm-review-table th:nth-child(3) { width: 8%; }
.pm-person-workspace .pm-review-table th:nth-child(4) { width: 8%; }
.pm-person-workspace .pm-review-table th:nth-child(5) { width: 8%; }
.pm-person-workspace .pm-review-table th:nth-child(6) { width: 9%; }
.pm-person-workspace .pm-review-table th:nth-child(7) { width: 12%; }
.pm-person-workspace .pm-review-table th:nth-child(8), .pm-person-workspace .pm-review-table th:nth-child(9) { width: 15%; }
.pm-person-workspace .pm-review-table th:nth-child(10) { width: 10%; }
.pm-person-workspace .pm-review-table th, .pm-person-workspace .pm-review-table td { padding-left: 8px; padding-right: 8px; overflow-wrap: anywhere; }
.pm-management-review-table th:nth-child(3), .pm-management-review-table td:nth-child(3), .pm-management-review-table th:nth-child(6), .pm-management-review-table td:nth-child(6) { text-align: center; }
.pm-operations-review-table th:nth-child(1) { width: 5.5%; }
.pm-operations-review-table th:nth-child(2) { width: 8%; }
.pm-operations-review-table th:nth-child(3) { width: 7%; }
.pm-operations-review-table th:nth-child(4) { width: 7%; }
.pm-operations-review-table th:nth-child(5) { width: 8%; }
.pm-operations-review-table th:nth-child(6) { width: 8%; }
.pm-operations-review-table th:nth-child(7) { width: 8%; }
.pm-operations-review-table th:nth-child(8) { width: 11%; }
.pm-operations-review-table th:nth-child(9) { width: 13%; }
.pm-operations-review-table th:nth-child(10) { width: 14%; }
.pm-operations-review-table th:nth-child(11) { width: 10.5%; }
.pm-operations-review-table th:nth-child(4), .pm-operations-review-table td:nth-child(4), .pm-operations-review-table th:nth-child(7), .pm-operations-review-table td:nth-child(7) { text-align: center; }
.pm-person-workspace .pm-review-table thead th { color: var(--ink); font-size: 14px; font-weight: 850; }
.pm-person-workspace .pm-review-table thead th small { margin-top: 4px; display: block; color: var(--ink); font-size: 9px; font-weight: 700; }
.pm-person-workspace .pm-review-salary small { white-space: normal; }
.pm-salary-difference, .pm-salary-difference.positive, .pm-salary-difference.negative { color: var(--red); font-weight: 900; white-space: nowrap; }
.pm-evidence { color: var(--muted); font-size: 9px; }
.pm-evidence.has-data { color: var(--green); font-weight: 750; }
.pm-result-detail table { width: 100%; min-width: 0; table-layout: fixed; }
.pm-result-detail th, .pm-result-detail td { padding: 8px 6px; text-align: center; }
.pm-result-detail th { font-size: 13px; font-weight: 850; }
.pm-result-detail td { height: 38px; font-size: 12px; }
.pm-result-detail td strong, .pm-result-detail td .tag { font-size: 12px; }
.pm-quarter-result-value { font-size: 18px !important; white-space: nowrap; }
.pm-salary-total { font-size: 18px !important; white-space: nowrap; }
.pm-person-workspace { margin-top: 20px; }
.pm-person-heading { margin-bottom: 12px; }
.pm-person-heading h2 { margin: 0; color: var(--ink); font-size: 17px; }
.pm-person-heading p { margin: 5px 0 0; color: var(--ink); font-size: 10px; }
.pm-person-entry-tabs { margin-bottom: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pm-person-entry-tabs > button { min-height: 70px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 11px; color: var(--ink); background: white; text-align: left; cursor: pointer; }
.pm-person-entry-tabs > button:hover { border-color: #aac7bc; background: #f8fbfa; }
.pm-person-entry-tabs > button.active { border-color: var(--green); box-shadow: inset 0 -3px 0 var(--green); background: #f6faf8; }
.pm-person-entry-tabs svg { width: 20px; height: 20px; color: var(--green); }
.pm-person-entry-tabs strong, .pm-person-entry-tabs small { display: block; }
.pm-person-entry-tabs strong { font-size: 13px; }
.pm-person-entry-tabs small { margin-top: 4px; color: var(--ink); font-size: 9px; }
.pm-person-workspace [data-pm-review-person-panel] .panel-head [data-pm-review-visible] { color: var(--ink); font-weight: 850; }
.pm-review-panel-head { min-height: 64px; flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
.pm-review-panel-head h2 { flex: 0 0 auto; margin-right: 0; }
.pm-review-inline-filters { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.pm-operations-panel .pm-review-inline-filters { transform: translateX(-2cm); }
.pm-review-inline-filters select, .pm-review-inline-filters input { height: 32px; margin: 0; padding: 0 27px 0 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: white; font-size: 10px; font-weight: 800; }
.pm-review-inline-filters select { min-width: 88px; }
.pm-review-inline-filters .pm-review-search { display: flex; align-items: center; gap: 6px; }
.pm-review-inline-filters .pm-review-search input { width: 176px; padding-right: 9px; }
.pm-review-panel-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.pm-review-panel-head .pm-review-panel-actions { margin-left: 0; }
@media (max-width: 760px) {
  .pm-review-inline-filters { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .pm-operations-panel .pm-review-inline-filters { transform: none; }
  .pm-review-inline-filters select { min-width: 0; flex: 1 1 120px; }
  .pm-review-inline-filters .pm-review-search { width: 100%; }
  .pm-review-inline-filters .pm-review-search input { width: auto; min-width: 0; flex: 1; }
  .pm-review-panel-head .pm-review-panel-actions { margin-left: auto; }
}
.pm-review-import-btn { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); border-color: #b8cec5; background: #f8fbfa; font-weight: 850; }
.pm-review-import-btn:hover { border-color: var(--green); background: var(--mint); }
.pm-review-import-btn svg { width: 14px; height: 14px; }
.pm-review-export-btn { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; color: white; border-color: var(--green); background: var(--green); font-weight: 850; }
.pm-review-export-btn:hover { border-color: #145e49; background: #145e49; }
.pm-review-export-btn svg { width: 14px; height: 14px; }
.pm-review-pagination { min-height: 54px; padding: 10px 14px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--muted); background: #fafcfb; font-size: 10px; }
.pm-review-pagination[hidden] { display: none; }
.pm-review-pagination > div { display: flex; align-items: center; gap: 5px; }
.pm-review-pagination button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 5px; display: grid; place-items: center; color: var(--ink); background: white; font-weight: 800; cursor: pointer; }
.pm-review-pagination button.active { color: white; border-color: var(--green); background: var(--green); }
.pm-review-pagination button:disabled { opacity: .35; cursor: default; }
.pm-review-pagination button svg { width: 14px; height: 14px; }
.pm-review-pagination > strong { justify-self: end; color: var(--ink); font-size: 10px; }
.pm-person-workspace .pm-review-search > span { color: var(--ink); font-weight: 850; }
.pm-person-workspace .pm-review-search input { color: var(--ink); font-weight: 850; }
.pm-person-workspace .pm-review-search input::placeholder { color: var(--ink); opacity: 1; font-weight: 850; }
.pm-person-workspace > .pm-review-filters { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--line); align-items: center; background: white; }
.pm-person-workspace > .pm-review-filters > select { min-width: 118px; margin-top: 0; padding-right: 30px; color: var(--ink); font-size: 10px; font-weight: 800; }
.pm-manager-table { min-width: 900px; }
.pm-operations-panel { display: block; }
.pm-operations-panel[hidden] { display: none; }
.pm-panel-summary { padding: 10px 14px; border-left: 3px solid var(--green); color: var(--ink); background: var(--mint); font-size: 11px; font-weight: 800; }
.pm-panel-summary span { margin-left: 7px; color: var(--muted); font-size: 9px; font-weight: 600; }
.pm-operation-department { min-width: 0; }
.pm-operation-department .panel-head h2 { font-size: 13px; }
.salary-band-panel .panel-head { flex-wrap: wrap; }
.salary-band-panel .panel-head h2 { margin-right: auto; }
.salary-band-panel .panel-head .btn + .btn { margin-left: 8px; }
.salary-band-download { color: var(--green); border-color: #b8cec5; background: #f8fbfa; }
.salary-promotion-head-actions { margin-left: auto; display: flex; align-items: center; }
.salary-promotion-head-actions .btn { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; color: #b4232f; border-color: #e3b7bc; background: #fff8f8; font-size: 12px !important; font-weight: 850; }
.salary-promotion-head-actions .btn:hover { border-color: #b4232f; background: #ffedef; }
.salary-promotion-head-actions .btn svg { width: 14px; height: 14px; }
.salary-promotion-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.salary-promotion-controls label { height: 32px; padding-left: 10px; border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; gap: 7px; color: var(--muted); background: white; font-size: 9px; font-weight: 700; }
.salary-promotion-controls select { height: 30px; padding: 0 27px 0 7px; border: 0; color: var(--ink); background: transparent; outline: 0; font-size: 10px; font-weight: 800; }
.salary-band-editor-modal { position: fixed; inset: 0; z-index: 120; padding: 20px; display: grid; place-items: center; background: rgba(12, 31, 24, .58); }
.salary-band-editor-dialog { width: min(1180px, calc(100vw - 40px)); max-height: min(760px, calc(100vh - 40px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 7px; background: #f5f7f6; box-shadow: 0 24px 70px rgba(4, 23, 16, .32); }
.salary-band-editor-dialog > header { min-height: 78px; padding: 14px 18px 14px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; background: white; }
.salary-band-editor-dialog > header h2 { margin: 0; color: var(--ink); font-size: 18px; }
.salary-band-editor-dialog > header p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.salary-band-editor-dialog > main { min-height: 0; overflow: auto; padding: 18px; }
.salary-band-editor-dialog table { width: 100%; min-width: 930px; table-layout: fixed; }
.salary-band-editor-dialog th:nth-child(1) { width: 100px; }
.salary-band-editor-dialog th:nth-child(2) { width: 120px; }
.salary-band-editor-dialog th:nth-child(3), .salary-band-editor-dialog th:nth-child(4), .salary-band-editor-dialog th:nth-child(5) { width: 230px; }
.salary-band-editor-dialog th { color: var(--ink); font-weight: 800; }
.salary-band-editor-dialog td { background: white; }
.salary-band-editor-dialog input { width: 100%; height: 36px; padding: 0 9px; border: 1px solid #c8d9d3; border-radius: 5px; color: var(--ink); background: white; outline: 0; font-size: 10px; font-weight: 700; }
.salary-band-editor-dialog input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(25, 105, 81, .1); }
.salary-promotion-editor-dialog { width: min(1460px, calc(100vw - 40px)); }
.salary-promotion-editor-dialog table { min-width: 1320px; }
.salary-promotion-editor-dialog th:nth-child(1) { width: 90px; }
.salary-promotion-editor-dialog th:nth-child(2) { width: 120px; }
.salary-promotion-editor-dialog th:nth-child(3), .salary-promotion-editor-dialog th:nth-child(5) { width: 360px; }
.salary-promotion-editor-dialog th:nth-child(4), .salary-promotion-editor-dialog th:nth-child(6) { width: 120px; }
.salary-promotion-editor-dialog td:first-child, .salary-promotion-editor-dialog td:nth-child(2) { text-align: center; }
.salary-promotion-editor-dialog textarea { width: 100%; min-height: 76px; padding: 9px; border: 1px solid #c8d9d3; border-radius: 5px; color: var(--ink); background: white; outline: 0; resize: vertical; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.65; }
.salary-promotion-editor-dialog textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(25, 105, 81, .1); }
.salary-promotion-editor-dialog .salary-level-code { font-size: 12px; }
.company-band-editor-dialog { width: min(1460px, calc(100vw - 40px)); }
.company-band-editor-dialog table { min-width: 1320px; }
.company-band-editor-dialog th:nth-child(1) { width: 95px; }
.company-band-editor-dialog th:nth-child(2) { width: 175px; }
.company-band-editor-dialog th:nth-child(3) { width: 105px; }
.company-band-editor-dialog th:nth-child(4), .company-band-editor-dialog th:nth-child(5), .company-band-editor-dialog th:nth-child(6) { width: 145px; }
.company-band-editor-dialog th:nth-child(7) { width: 235px; }
.company-band-editor-dialog th:nth-child(8) { width: 130px; }
.company-band-editor-dialog td:first-child, .company-band-editor-dialog td:nth-child(2) { text-align: center; }
.salary-band-editor-dialog > footer { min-height: 64px; padding: 12px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: white; }
.salary-band-editor-dialog > footer > span { color: var(--muted); font-size: 9px; }
.salary-band-editor-dialog > footer > div { display: flex; gap: 8px; }
.salary-course-modal { position: fixed; inset: 0; z-index: 110; padding: 18px; display: grid; place-items: center; background: rgba(12, 31, 24, .58); opacity: 0; transition: opacity .16s ease; }
.salary-course-modal.open { opacity: 1; }
.salary-course-modal[hidden], .salary-course-level-panel[hidden], .salary-course-platform-panel[hidden], .salary-course-shared[hidden] { display: none !important; }
.salary-course-dialog { width: min(1400px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; border-radius: 7px; background: #f5f7f6; box-shadow: 0 24px 70px rgba(4, 23, 16, .32); }
.salary-course-dialog > header { position: relative; min-height: 96px; padding: 17px 62px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 18px; background: white; text-align: center; }
.salary-course-dialog > header > div { width: 100%; }
.salary-course-dialog > header > div > span { display: none; }
.salary-course-dialog > header h2 { margin: 5px 0 5px; color: var(--ink); font-size: 22px; font-weight: 850; text-align: center; }
.salary-course-dialog > header p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; }
.salary-course-dialog > header .icon-btn { position: absolute; top: 18px; right: 20px; flex: 0 0 36px; width: 36px; height: 36px; }
.salary-course-toolbar { padding: 16px 22px; border-bottom: 1px solid var(--line); display: grid; gap: 14px; background: white; }
.salary-course-level-tabs { display: flex; align-items: stretch; gap: 7px; overflow-x: hidden; }
.salary-course-level-tabs button { flex: 1 1 0; min-width: 0; min-height: 58px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: white; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 850; cursor: pointer; }
.salary-course-level-tabs button small { margin-top: 0; display: block; color: #b4232f; font-size: 11px; font-weight: 850; }
.salary-course-level-tabs button.active { border-color: var(--green); color: var(--green); background: var(--mint); }
.salary-course-dialog > main { min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 24px 22px 30px; }
.salary-course-level-panel { min-width: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; gap: 20px; }
.salary-course-ability { border: 1px solid var(--line); background: white; }
.salary-course-ability > header { min-height: 76px; padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.salary-course-ability > header span { color: var(--green); font-size: 10px; font-weight: 850; }
.salary-course-ability > header h3 { margin: 5px 0 0; color: #b4232f; font-size: 16px; font-weight: 850; }
.salary-course-ability > header b { flex: 0 0 auto; padding: 5px 8px; border-radius: 4px; color: var(--green); background: var(--mint); font-size: 10px; font-weight: 850; }
.salary-course-ability ul { margin: 0; padding: 18px 18px 20px 34px; display: grid; gap: 12px; color: var(--ink); font-size: 12px; font-weight: 750; line-height: 1.7; }
.salary-course-platform-content { min-width: 0; }
.salary-course-platform-panel { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.salary-course-platform-panel[data-salary-course-platform="all"] .salary-course-shared { grid-column: 1 / -1; }
.salary-course-platform-panel:not([data-salary-course-platform="all"]) { display: block; }
.salary-course-shared, .salary-course-platform-specific, .salary-course-platform-panel:not([data-salary-course-platform="all"]) { border: 1px solid var(--line); background: white; }
.salary-course-shared > header, .salary-course-platform-specific > header, .salary-course-platform-panel:not([data-salary-course-platform="all"]) > header { min-height: 58px; padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.salary-course-shared > header strong { color: var(--green); }
.salary-course-shared > header strong::after { content: "淘系 / 拼多多 / 抖音 / 京东"; margin-left: 8px; padding: 3px 6px; border-radius: 4px; color: var(--green); background: var(--mint); font-size: 7px; font-weight: 700; }
.salary-course-shared > header strong, .salary-course-platform-specific > header strong, .salary-course-platform-panel:not([data-salary-course-platform="all"]) > header strong { font-size: 13px; font-weight: 850; }
.salary-course-shared > header span, .salary-course-platform-specific > header span, .salary-course-platform-panel:not([data-salary-course-platform="all"]) > header span { color: var(--muted); font-size: 10px; font-weight: 750; }
.salary-course-platform-panel ol, .salary-course-shared ol, .salary-course-platform-specific ol { margin: 0; padding: 18px 22px 22px 40px; display: grid; gap: 11px; color: var(--ink); font-size: 12px; font-weight: 750; line-height: 1.7; }
.salary-course-empty { min-height: 88px; margin: 0; padding: 28px 16px; color: var(--muted); background: white; text-align: center; font-size: 9px; }
.salary-range-row > div:first-child > span { color: var(--green); font-size: 11px; font-weight: 800; }
.salary-range-row > div:first-child strong { font-size: 10px; }
.salary-range-chart { min-width: 0; }
.salary-range-track { height: 10px; border-radius: 5px; background: #edf1ef; position: relative; }
.salary-range-track i { position: absolute; left: var(--range-start); right: calc(100% - var(--range-end)); top: 0; bottom: 0; border-radius: inherit; background: #5c9b88; }
.salary-range-track i.blue { background: #6795bc; }
.salary-range-track i.amber { background: #c7924e; }
.salary-range-track b { position: absolute; top: -3px; width: 3px; height: 16px; border-radius: 2px; transform: translateX(-50%); background: var(--ink); }
.salary-range-values { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; color: var(--muted); font-size: 8px; }
.salary-range-values strong { color: var(--ink); }
.salary-dual-path { padding: 16px 18px 20px; display: grid; gap: 12px; }
.salary-dual-path > div { min-height: 58px; display: grid; grid-template-columns: 90px 1fr 28px 1fr 28px 1fr 28px 1fr; align-items: center; gap: 4px; }
.salary-dual-path > div > strong { font-size: 10px; }
.salary-dual-path > div > span { min-height: 48px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; display: grid; place-items: center; color: var(--green); background: #f8fbfa; text-align: center; font-size: 9px; font-weight: 800; }
.salary-dual-path > div:nth-child(2) > span { color: var(--amber); background: #fffaf3; }
.salary-dual-path small { color: var(--muted); font-size: 8px; font-weight: 400; }
.salary-dual-path i { height: 1px; background: #b8c8c1; position: relative; }
.salary-dual-path i::after { content: ""; position: absolute; right: -1px; top: -3px; border-left: 5px solid #b8c8c1; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.company-career-map { padding: 18px; display: grid; gap: 14px; }
.company-career-lane { min-width: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: stretch; gap: 16px; }
.company-career-label { min-height: 74px; padding: 13px; border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; background: #f8fbfa; }
.company-career-label.management { background: #fffaf3; }
.company-career-label > svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--green); }
.company-career-label.management > svg { color: var(--amber); }
.company-career-label strong, .company-career-label small { display: block; }
.company-career-label strong { font-size: 11px; }
.company-career-label small { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.company-career-flow { min-width: 0; display: flex; align-items: stretch; gap: 24px; }
.company-career-node { min-width: 0; min-height: 74px; padding: 10px 11px; border: 1px solid #bfd3cb; position: relative; flex: 1 1 0; display: grid; align-content: center; justify-items: start; background: #fbfdfc; }
.company-career-flow.management .company-career-node { border-color: #ead0a9; background: #fffcf7; }
.company-career-node > span { min-width: 32px; padding: 3px 7px; border-radius: 4px; color: white; background: var(--green); font-size: 8px; font-weight: 800; text-align: center; }
.company-career-flow.management .company-career-node > span { background: var(--amber); }
.company-career-node strong { margin-top: 7px; font-size: 10px; }
.company-career-node small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.company-career-node:not(:last-child)::after { content: ""; width: 16px; height: 1px; position: absolute; right: -21px; top: 50%; background: #aebfb8; }
.company-career-node:not(:last-child)::before { content: ""; position: absolute; right: -22px; top: calc(50% - 3px); border-left: 5px solid #aebfb8; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.company-career-switch { margin-left: 166px; padding: 2px 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 8px; }
.company-career-switch svg { width: 14px; height: 14px; color: var(--amber); }
.salary-standard-layout.company-level-layout { grid-template-columns: 1fr; }
.company-level-table { min-width: 1080px; table-layout: fixed; }
.company-level-table th:nth-child(1) { width: 70px; }
.company-level-table th:nth-child(2) { width: 135px; }
.company-level-table th:nth-child(3) { width: 235px; }
.company-level-table th:nth-child(4) { width: 315px; }
.company-level-table th:nth-child(5) { width: 315px; }
.company-band-table { width: 100%; min-width: 1080px; table-layout: fixed; }
.company-band-table th:nth-child(1) { width: 105px; }
.company-band-table th:nth-child(2) { width: 180px; }
.company-band-table th:nth-child(3) { width: 80px; }
.company-band-table th:nth-child(4), .company-band-table th:nth-child(5), .company-band-table th:nth-child(6) { width: 110px; }
.company-band-table th:nth-child(7) { width: 205px; }
.company-band-table th:nth-child(8) { width: 90px; }
.company-band-table th:first-child, .company-band-table td:first-child { text-align: center; vertical-align: middle; }
.company-band-table .salary-family-code { font-size: 9px; }
.company-band-table tbody tr:nth-child(8) td, .company-band-table tbody tr:nth-child(13) td { border-top: 2px solid #cfdad5; }
.salary-family-code { display: inline-flex; padding: 3px 7px; border-radius: 4px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.salary-family-code.marketing { color: #9a5a11; background: var(--amber-bg); }
.salary-family-code.functional { color: var(--green); background: var(--mint); }
.salary-family-code.technical { color: var(--blue); background: var(--blue-bg); }
.pay-page-table { margin-top: 20px; }
.base-salary-page { min-width: 0; }
.base-salary-stats { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr) minmax(0, 1.32fr) minmax(0, 1fr); }
.base-salary-stats .stat { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.base-salary-stats .label { font-size: 12px; font-weight: 800; }
.base-salary-stats .value { max-width: 100%; overflow-wrap: normal; font-size: 29px; font-weight: 800; white-space: nowrap; }
.base-salary-stats .value small { font-size: 13px; font-weight: 700; }
.base-salary-stats .trend { position: static; max-width: 100%; box-sizing: border-box; margin-top: auto; align-self: flex-end; font-size: 11px; font-weight: 800; white-space: nowrap; }
.base-salary-ledger { overflow: hidden; }
.base-salary-ledger-head { min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.base-salary-ledger-head h2 { flex: 0 0 auto; }
.base-salary-ledger-head h2 > span { display: flex; align-items: center; }
.base-salary-ledger-head .base-salary-ledger-title { margin-left: 0; gap: 19px; color: #000; font-size: 17px; font-weight: 900; }
.base-salary-ledger-meta { margin-top: 5px; gap: 9px; }
.base-salary-ledger-meta i, .base-salary-ledger-meta b { color: var(--muted); font-size: 8px; font-style: normal; font-weight: 650; white-space: nowrap; }
.base-salary-ledger-meta b { padding-left: 9px; border-left: 1px solid #d5ddda; color: #446159; }
.base-salary-name-guide { color: #c62828; font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }
.base-salary-filters { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.base-salary-filters label { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 750; }
.base-salary-filters label > span { margin: 0; white-space: nowrap; }
.base-salary-filters .base-salary-search { width: min(270px, 34%); }
.base-salary-filters .base-salary-search > div { min-width: 0; flex: 1; }
.base-salary-filters .base-salary-department-filter { width: min(210px, 28%); }
.base-salary-filters .base-salary-scope-filter { width: min(190px, 25%); }
.base-salary-filters input, .base-salary-filters select { width: 100%; height: 34px; padding: 0 10px; border: 1px solid #cfd9d5; border-radius: 5px; background: white; color: var(--ink); font-size: 10px; }
.base-salary-search > div { position: relative; }
.base-salary-search > div > svg { width: 14px; height: 14px; position: absolute; left: 10px; top: 11px; color: var(--muted); pointer-events: none; }
.base-salary-filters .base-salary-search input { padding-left: 32px; }
.base-salary-ledger .table-wrap { overflow-x: visible; }
.base-salary-table { width: 100%; min-width: 0; table-layout: fixed; }
.base-salary-table .base-salary-col-sequence { width: 62px; }
.base-salary-table .base-salary-col-name { width: 12%; }
.base-salary-table .base-salary-col-department { width: 15%; }
.base-salary-table .base-salary-col-money { width: auto; }
.base-salary-table th, .base-salary-table td { padding: 10px 12px; border-right: 1px solid #edf1ef; }
.base-salary-table th:last-child, .base-salary-table td:last-child { border-right: 0; }
.base-salary-table th { color: #34443e; font-size: 10px; text-align: center; }
.base-salary-table td { font-size: 10px; text-align: center; }
.base-salary-table th:nth-child(-n+3) { color: var(--ink); font-weight: 900; }
.base-salary-table th.base-salary-payable-header { color: #c62828; background: #fff0f0; }
.base-salary-sequence { color: var(--ink); font-weight: 850; font-variant-numeric: tabular-nums; }
.base-salary-name button { padding: 0 0 2px; border: 0; border-bottom: 1px solid currentColor; color: #17654f; background: transparent; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.base-salary-name button:hover { color: #c62828; }
.base-salary-name button:focus-visible { outline: 2px solid #75a493; outline-offset: 3px; }
.base-salary-name > span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.base-salary-row-badge { padding: 2px 5px; border-radius: 3px; font-size: 8px; font-style: normal; font-weight: 850; line-height: 1.2; white-space: nowrap; }
.base-salary-row-badge.new { background: #fff0eb; color: #b73522; }
.base-salary-row-badge.missing { background: #fff6d8; color: #8a5a00; }
.base-salary-money.missing strong { color: #9a6700; font-size: 9px; }
.base-salary-department { color: #34443e; font-weight: 850; }
.base-salary-money { font-variant-numeric: tabular-nums; }
.base-salary-money strong { color: var(--ink); font-size: 11px; }
.base-salary-money.gross strong { color: var(--green); }
.base-salary-money.performance strong { color: #80528f; }
.base-salary-money.seniority strong { color: #9a651d; }
.base-salary-money.payable { background: #fff0f0; }
.base-salary-money.payable strong, .base-salary-payable-field > span { color: #c62828; }
.base-salary-payable-field input { color: #c62828 !important; background: #fff0f0 !important; border-color: #efb0b0 !important; }
.base-salary-profile-fields .base-salary-payable-field small { display: block; margin-top: 6px; color: #c62828; font-size: 9px; font-weight: 700; line-height: 1.35; text-align: center; }
.base-salary-profile-mask[hidden] { display: none; }
.drawer.wide.base-salary-profile-drawer { width: min(700px, 96vw); }
.base-salary-profile-drawer { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.base-salary-profile-drawer > [data-base-salary-profile-content] { min-height: 100%; display: flex; flex-direction: column; }
.base-salary-profile-head { min-height: 64px; margin: 0; padding: 13px 22px; border-bottom: 1px solid var(--line); }
.base-salary-profile-head > div { min-width: 0; }
.base-salary-profile-head h2, .base-salary-profile-head span { overflow-wrap: anywhere; }
.base-salary-profile-period { min-width: 104px; margin-left: auto; display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 750; }
.base-salary-profile-period input { width: 112px; height: 30px; box-sizing: border-box; padding: 0 7px; border: 1px solid #ccd7d2; border-radius: 5px; color: var(--ink); background: white; font: inherit; font-size: 10px; text-align: center; }
.base-salary-profile-period input:focus { border-color: var(--green); outline: 2px solid rgba(36,109,87,.13); outline-offset: 1px; }
.base-salary-profile-period em { color: #557068; font-size: 8px; font-style: normal; font-weight: 750; text-align: center; white-space: nowrap; }
.base-salary-profile-head .icon-btn { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--line); border-radius: 5px; display: grid; place-items: center; color: var(--muted); background: white; cursor: pointer; }
.base-salary-profile-head .icon-btn svg { width: 16px; height: 16px; }
.base-salary-full-table-modal { position: fixed; inset: 0; z-index: 112; padding: 14px; display: none; place-items: center; background: rgba(12,31,24,.58); }
.base-salary-full-table-modal.open { display: grid; }
.base-salary-full-table-modal[hidden] { display: none !important; }
.base-salary-full-table-dialog { width: calc(100vw - 28px); height: calc(100vh - 28px); min-height: 520px; display: grid; grid-template-rows: 58px minmax(0, 1fr) 48px; overflow: hidden; border: 1px solid #bfc8c4; border-radius: 5px; background: white; box-shadow: 0 24px 70px rgba(4,23,16,.34); }
.base-salary-full-table-dialog > header { padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #cfd7d3; background: white; }
.base-salary-full-table-dialog > header h2 { margin: 0; color: #000; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 16px; font-weight: 800; }
.base-salary-full-table-dialog > header h2 span { margin-left: 10px; color: #5f6e67; font-size: 11px; font-weight: 400; }
.base-salary-full-table-dialog > main { min-width: 0; min-height: 0; overflow: auto; background: white; }
.base-salary-full-table { width: 2200px; min-width: 2200px; border-collapse: collapse; table-layout: fixed; color: #000; background: white; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 11px; }
.base-salary-full-table th, .base-salary-full-table td { height: 32px; padding: 3px 5px; border: 1px solid #000; color: #000; background: white; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 11px; text-align: center; vertical-align: middle; white-space: nowrap; }
.base-salary-full-table th { height: 42px; font-weight: 700; line-height: 1.25; white-space: normal; }
.base-salary-full-table td { font-weight: 400; }
.base-salary-full-table .c1{width:50px}.base-salary-full-table .c2{width:90px}.base-salary-full-table .c3{width:120px}.base-salary-full-table .c4{width:90px}.base-salary-full-table .c5{width:100px}.base-salary-full-table .c7{width:190px}.base-salary-full-table .c8{width:120px}.base-salary-full-table .c9{width:74px}.base-salary-full-table .c10{width:74px}.base-salary-full-table .c11{width:100px}.base-salary-full-table .c12{width:95px}.base-salary-full-table .c13{width:74px}.base-salary-full-table .c14{width:90px}.base-salary-full-table .c15{width:90px}.base-salary-full-table .c16{width:90px}.base-salary-full-table .c17{width:90px}.base-salary-full-table .c18{width:80px}.base-salary-full-table .c19{width:90px}.base-salary-full-table .c20{width:80px}.base-salary-full-table .c21{width:74px}.base-salary-full-table .c22{width:110px}.base-salary-full-table .c23{width:80px}.base-salary-full-table .c24{width:80px}.base-salary-full-table .c25{width:74px}
.base-salary-full-table-dialog > footer { padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #cfd7d3; color: #68766f; background: white; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 10px; }
.base-salary-profile-drawer form { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.base-salary-profile-tabs { min-height: 48px; padding: 0 22px; border-bottom: 1px solid var(--line); display: flex; gap: 24px; }
.base-salary-profile-tabs button { position: relative; padding: 0 2px; border: 0; color: var(--muted); background: transparent; font-size: 11px; cursor: pointer; }
.base-salary-profile-tabs button.active { color: var(--green); font-weight: 800; }
.base-salary-profile-tabs button.active::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--green); }
.base-salary-profile-panel { min-height: 0; padding: 22px; flex: 1 1 auto; overflow-y: auto; }
.base-salary-profile-panel.maintenance { padding-top: 18px; padding-bottom: 18px; }
.base-salary-profile-section + .base-salary-profile-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.base-salary-profile-section > h3 { margin: 0 0 14px; display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 12px; }
.base-salary-profile-section > h3 svg { width: 14px; height: 14px; color: var(--green); }
.base-salary-profile-section > h4 { margin: 16px 0 10px; color: #52635c; font-size: 10px; font-weight: 850; }
.base-salary-profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.base-salary-profile-fields.employee { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .85fr); }
.base-salary-profile-fields.employee.attendance { grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.3fr); }
.base-salary-profile-fields label { min-width: 0; display: block; }
.base-salary-profile-fields label > span { margin-bottom: 7px; display: block; color: #45564f; font-size: 10px; font-weight: 800; }
.base-salary-profile-fields input, .base-salary-profile-fields select, .base-salary-profile-fields textarea { width: 100%; min-height: 38px; box-sizing: border-box; padding: 0 11px; border: 1px solid #ccd7d2; border-radius: 5px; color: var(--ink); background: white; font: inherit; font-size: 11px; text-align: center; }
.base-salary-profile-fields textarea { min-height: 72px; padding-top: 9px; padding-bottom: 9px; resize: vertical; text-align: left; line-height: 1.5; }
.base-salary-profile-fields .editable { border-color: #8eafa3; background: #fff; box-shadow: inset 0 0 0 1px rgba(36,109,87,.04); }
.base-salary-profile-fields .editable:hover { border-color: #5f907e; }
.base-salary-profile-fields .editable:focus { border-color: var(--green); outline: 2px solid rgba(36,109,87,.13); outline-offset: 1px; }
.base-salary-profile-fields input[readonly] { border-color: #e0e6e3; color: #64736d; background: #f5f7f6; }
.base-salary-profile-fields .base-salary-seniority-field small { display: block; margin-top: 6px; color: #9b5f19; font-size: 9px; font-weight: 700; line-height: 1.35; text-align: center; }
.base-salary-profile-fields .wide { grid-column: 1 / -1; }
.base-salary-profile-panel.history h3 { margin: 0 0 10px; font-size: 12px; }
.base-salary-profile-panel.history h3:not(:first-child) { margin-top: 24px; }
.base-salary-profile-panel.history table { width: 100%; min-width: 0; table-layout: fixed; }
.base-salary-profile-panel.history th, .base-salary-profile-panel.history td { padding: 9px 6px; font-size: 9px; text-align: center; overflow-wrap: anywhere; }
.base-salary-manual-change { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.base-salary-manual-change-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px 14px; }
.base-salary-manual-change-fields label { min-width: 0; }
.base-salary-manual-change-fields label > span { margin-bottom: 6px; display: block; color: #45564f; font-size: 9px; font-weight: 800; }
.base-salary-manual-change-fields input, .base-salary-manual-change-fields select { width: 100%; height: 34px; box-sizing: border-box; padding: 0 9px; border: 1px solid #ccd7d2; border-radius: 5px; background: white; font: inherit; font-size: 10px; text-align: center; }
.base-salary-manual-change-fields .wide { grid-column: 1 / -1; }
.base-salary-manual-change-fields .btn { justify-self: end; }
.base-salary-profile-drawer .drawer-actions { position: sticky; bottom: 0; margin: auto 0 0; padding: 12px 22px; border-top: 1px solid var(--line); background: white; }
.base-salary-profile-drawer .drawer-actions[hidden] { display: none; }
.base-salary-profile-drawer .base-salary-profile-remove { margin-right: auto; }
.base-salary-profile-loading { min-height: 180px; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.pay-input-flow { margin-bottom: 20px; }
.pay-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pay-source { min-width: 0; min-height: 128px; padding: 16px; border-right: 1px solid var(--line); display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-content: start; }
.pay-source:last-child { border-right: 0; }
.pay-source > div:nth-child(2) { min-width: 0; }
.pay-source strong { display: block; margin: 2px 0 6px; font-size: 10px; }
.pay-source p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.pay-source > .tag { width: fit-content; margin-top: 3px; }
.pay-source > .link-btn { width: fit-content; margin-top: 8px; }
.pay-social-layout, .pay-benefit-layout { margin-bottom: 20px; }
.pay-social-filters { display: flex; padding: 0; border: 0; }
.pay-social-filters label { min-width: 150px; }
.social-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.social-stats .social-metric-stat .label { color: #111; font-size: 14px; font-weight: 800; }
.social-stats .social-metric-stat .value, .social-stats .social-metric-stat .value small { color: #c62828; }
.social-stats .stat .value { width: calc(100% - 1cm); transform: translateX(1cm); }
.social-stats .social-metric-stat .trend { font-weight: 800; }
[data-social-security-root] { width: 100%; min-width: 0; overflow: hidden; }
[data-social-security-root].social-no-data .pay-social-layout,
[data-social-security-root].social-no-data [data-social-employee-details] { display: none; }
.social-empty-state { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); }
.social-empty-state svg { width: 17px; color: var(--green); flex: 0 0 auto; }
.social-empty-state strong { color: var(--ink); font-size: 12px; }
.social-empty-state span { font-size: 10px; }
.social-period-picker { display: inline-flex; align-items: center; gap: 8px; height: 34px; margin-left: auto; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font-size: 10px; font-weight: 800; }
.social-period-picker select { min-width: 92px; height: 28px; padding: 0 24px 0 6px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 900; cursor: pointer; }
.social-period-notice { display: flex; align-items: center; gap: 7px; margin: -8px 0 12px; padding: 8px 10px; border: 1px solid #ead9ad; border-radius: 5px; background: #fff9e9; color: #765b20; font-size: 10px; font-weight: 700; }
.social-period-notice svg { width: 14px; flex: 0 0 auto; }
.has-social-workbook .pay-social-layout { grid-template-columns: 1fr; }
.has-social-workbook .pay-social-layout > section:first-child { display: none; }
.has-social-workbook .pay-page-table:not(.social-actual-details) { display: none; }
[data-social-employee-details] .table-wrap { width: 100%; overflow-x: hidden; }
[data-social-employee-details] .panel-head { align-items: center; gap: 24px; padding: 18px 18px 16px 16px; }
.social-employee-heading { min-width: 0; flex: 1 1 auto; }
.social-employee-heading h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: #26332e; font-size: 16px; line-height: 1.35; text-align: left; }
.social-employee-heading h2 span { color: #7d8984; font-size: 11px; font-weight: 500; }
.social-employee-filters { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex: 0 0 auto; margin-left: auto; }
.social-employee-filter-select, .social-employee-search { position: relative; display: flex; align-items: center; height: 40px; color: #697570; background: #fff; border: 1px solid #d6dedb; border-radius: 9px; box-shadow: 0 1px 2px rgb(31 49 43 / 3%); }
.social-employee-filter-select { width: 246px; }
.social-employee-search { width: 190px; }
.social-employee-filters select, .social-employee-filters input { width: 100%; height: 100%; color: #53605b; background: transparent; border: 0; outline: none; padding: 0 42px 0 16px; font-size: 12px; font-weight: 400; }
.social-employee-filters select { appearance: none; cursor: pointer; }
.social-employee-filter-select svg { position: absolute; right: 17px; width: 21px; height: 21px; color: #7c8883; pointer-events: none; }
.social-employee-search svg { flex: 0 0 auto; width: 22px; height: 22px; margin-left: 20px; color: #87938e; pointer-events: none; }
.social-employee-search input { padding-left: 12px; padding-right: 16px; }
.social-employee-filters select:focus, .social-employee-filters input:focus { outline: none; }
.social-employee-filter-select:focus-within, .social-employee-search:focus-within { border-color: #aebfba; box-shadow: 0 0 0 2px #e8f1ee; }
.social-employee-filter-empty { color: #7d8984; text-align: center; padding: 28px 16px; font-size: 11px; }
[data-social-employee-details] table { width: 100%; min-width: 0; table-layout: fixed; }
[data-social-employee-details] th, [data-social-employee-details] td { height: auto; min-width: 0; padding: 11px 6px; line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; }
[data-social-employee-details] th { font-size: 9px; }
[data-social-employee-details] td { font-size: 10px; }
[data-social-employee-details] th:nth-child(1), [data-social-employee-details] th:nth-child(2) { font-size: 11px; font-weight: 800; }
[data-social-employee-details] th:nth-child(1) { width: 12%; }
[data-social-employee-details] th:nth-child(2) { width: 10%; }
[data-social-employee-details] th:nth-child(3) { width: 5%; }
[data-social-employee-details] th:nth-child(4) { width: 14%; }
[data-social-employee-details] th:nth-child(5) { width: 14%; }
[data-social-employee-details] th:nth-child(6), [data-social-employee-details] th:nth-child(7), [data-social-employee-details] th:nth-child(8) { width: 11%; }
[data-social-employee-details] th:nth-child(9) { width: 12%; }
[data-social-employee-details] td:nth-child(4) { word-break: break-all; }
[data-social-employee-page-row][hidden] { display: none !important; }
[data-social-employee-details] .tag { min-height: 21px; padding-inline: 6px; font-size: 10px; }
.social-employee-pagination { min-height: 58px; gap: 12px; }
.social-employee-pagination .pages { flex-wrap: wrap; justify-content: flex-end; }
.social-employee-pagination .pages button { flex: 0 0 28px; }
.social-pending-stat, .social-feedback-stat { width: 100%; min-height: 108px; border: 0; border-right: 1px solid var(--line); color: var(--ink); background: white; text-align: left; cursor: pointer; }
.social-feedback-stat { border-right: 0; }
.social-pending-stat:hover, .social-feedback-stat:hover { background: #fbfdfc; }
.social-pending-stat .label, .social-feedback-stat .label { color: #111; font-size: 14px; font-weight: 800; }
.social-pending-stat .value, .social-pending-stat .value small { color: #c62828; }
.social-pending-stat .trend { color: #c62828; font-weight: 800; }
.social-feedback-stat .value { color: var(--green); }
.social-feedback-stat .value small { margin-left: 2px; color: var(--green); }
.social-feedback-stat .trend { color: var(--green); font-weight: 800; }
.social-feedback-summary-modal { z-index: 111; }
.social-feedback-summary-dialog { width: min(780px, 94vw); grid-template-rows: auto auto minmax(0, 1fr) auto; }
.social-feedback-summary-title { display: flex; align-items: baseline; gap: 1cm; flex-wrap: wrap; }
.social-feedback-summary-title h2 { margin: 0 !important; }
.social-feedback-summary-title span { font-size: 10px !important; }
.social-feedback-inline-title { min-height: 48px; padding: 8px 2px; display: flex; align-items: baseline; gap: 1cm; }
.social-feedback-inline-title h3 { margin: 0; color: var(--ink); font-size: 15px; }
.social-feedback-inline-title span { color: var(--green); font-size: 10px; font-weight: 800; }
.social-feedback-summary-toolbar { min-height: 64px; padding: 10px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #f8faf9; }
.social-feedback-summary-toolbar > div { min-width: 0; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.social-feedback-summary-toolbar label { display: flex; align-items: center; gap: 9px; }
.social-feedback-summary-toolbar label > span { color: var(--ink); font-size: 12px; font-weight: 800; }
.social-feedback-summary-toolbar select { min-width: 150px; height: 34px; font-size: 10px; }
.social-feedback-summary-toolbar input { width: 190px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: white; font-size: 10px; outline: 0; }
.social-feedback-summary-toolbar input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(24, 95, 74, .09); }
.social-feedback-summary-toolbar > strong { color: var(--green); font-size: 11px; }
.social-feedback-summary-body { min-width: 0; overflow: auto; padding: 14px 18px 18px; }
.social-feedback-summary-body table { width: 100%; min-width: 0; table-layout: fixed; }
.social-feedback-summary-body th, .social-feedback-summary-body td { height: 52px; padding: 10px; overflow-wrap: anywhere; }
.social-feedback-summary-body th { color: var(--muted); background: #f4f6f5; font-size: 9px; }
.social-feedback-summary-body td { font-size: 10px; }
.social-feedback-summary-body th:nth-child(1) { width: 18%; }
.social-feedback-summary-body th:nth-child(2) { width: 19%; }
.social-feedback-summary-body th:nth-child(3) { width: 13%; }
.social-feedback-summary-body th:nth-child(4) { width: 15%; }
.social-feedback-summary-body th:nth-child(5) { width: 16%; }
.social-feedback-summary-body th:nth-child(6) { width: 19%; }
.social-feedback-detail-button { width: 100%; min-height: 30px; justify-content: center; padding-inline: 7px; font-size: 8px; white-space: nowrap; }
.social-feedback-detail-button svg { width: 13px; }
.social-feedback-preview-tag { margin-left: 4px; padding: 2px 5px; border-radius: 3px; color: #8a5b12; background: #fff3d6; font-size: 7px; font-style: normal; white-space: nowrap; }
.social-feedback-summary-body td strong, .social-feedback-summary-body td small { display: block; }
.social-feedback-summary-body td small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.social-feedback-summary-body tr[hidden] { display: none !important; }
.social-feedback-summary-empty td { height: 160px; color: var(--muted); text-align: center; }
.social-feedback-pagination { min-height: 52px; margin-top: 10px; padding: 8px 0 0; border-top: 1px solid var(--line); gap: 12px; }
.social-feedback-pagination .pages { flex-wrap: wrap; justify-content: flex-end; }
.social-feedback-pagination .pages button { flex: 0 0 28px; }
.social-feedback-summary-dialog > footer { min-height: 62px; padding: 11px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; align-items: center; }
.social-feedback-summary-dialog > footer .btn { min-width: 88px; justify-content: center; }
.social-flow-panel { min-width: 0; margin-bottom: 20px; overflow: hidden; }
.social-flow { min-width: 0; padding: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.social-flow-fragment { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; }
.social-flow-fragment:last-child { grid-template-columns: minmax(0, 1fr); }
.social-flow-step { position: relative; min-width: 0; min-height: 76px; padding: 9px 30px 9px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #f7f9f8; display: grid; align-content: center; justify-items: center; text-align: center; }
.social-flow-step.clickable { cursor: pointer; }
.social-flow-step.clickable:hover { border-color: var(--green); background: #eef6f2; }
.social-flow-step.processing { cursor: wait; opacity: .78; box-shadow: inset 0 0 0 1px var(--green); }
.social-flow-step.processing .social-flow-enter { animation: social-flow-processing .8s ease-in-out infinite alternate; }
@keyframes social-flow-processing { to { transform: translate(3px, -50%); } }
.social-flow-step:disabled { cursor: default; }
.social-flow-step.processing:disabled { cursor: wait; }
.social-flow-step > span { width: 24px; height: 24px; margin-bottom: 5px; border: 1px solid #cbd5d0; border-radius: 50%; display: grid; place-items: center; color: #64716b; background: white; font-size: 9px; font-weight: 800; }
.social-flow-step > span svg { width: 14px; }
.social-flow-step strong { color: var(--ink); font-size: 10px; }
.social-flow-step small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.social-flow-step.complete { border-color: var(--green); color: white; background: var(--green); }
.social-flow-step.complete:hover { border-color: var(--green-2); background: var(--green-2); }
.social-flow-step.complete > span { border-color: rgba(255,255,255,.48); color: var(--green); background: white; }
.social-flow-step.complete strong, .social-flow-step.complete small { color: white; }
.social-flow-step.active { border-color: var(--green); color: var(--green); background: #f4faf7; box-shadow: inset 0 0 0 1px var(--green); }
.social-flow-step.error { border-color: var(--red); color: var(--red); background: var(--red-bg); box-shadow: inset 0 0 0 1px var(--red); }
.social-flow-step.error > span { border-color: var(--red); color: var(--red); }
.social-flow-step.error strong, .social-flow-step.error small { color: var(--red); }
.social-flow-enter { position: absolute; top: 50%; right: 12px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor; color: #87958f; transform: translateY(-50%); }
.social-flow-step.complete .social-flow-enter { color: white; }
.social-flow-arrow { width: 15px; height: 15px; justify-self: center; color: #b9c5c0; }
.social-flow-arrow.complete { color: var(--green); }
.social-workbook-bar { min-height: 86px; padding: 14px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 22px; background: #fbfcfb; }
.social-workbook-files { min-width: 0; display: grid; gap: 8px; }
.social-workbook-files > strong { font-size: 10px; }
.social-workbook-actions { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.social-validation-error { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--red); font-size: 9px; font-weight: 700; }
.social-validation-error svg { width: 14px; flex: 0 0 auto; }
.social-validation-warning { margin: 0; display: flex; align-items: center; gap: 6px; color: #8a5c00; font-size: 9px; font-weight: 700; }
.social-validation-warning svg { width: 14px; flex: 0 0 auto; }
.social-task-modal { position: fixed; inset: 0; z-index: 100; display: grid; justify-items: end; background: rgba(12, 31, 24, .45); opacity: 0; transition: opacity .16s ease; }
.social-task-modal.open { opacity: 1; }
.social-task-modal[hidden] { display: none !important; }
.social-task-dialog { width: min(760px, 92vw); height: 100vh; overflow: hidden; background: white; display: grid; grid-template-rows: auto auto minmax(0, 1fr); transform: translateX(22px); transition: transform .16s ease; box-shadow: -18px 0 45px rgba(8, 29, 21, .18); }
.social-task-modal.open .social-task-dialog { transform: translateX(0); }
.social-feedback-only-modal .social-task-dialog { grid-template-rows: auto minmax(0, 1fr); }
.social-feedback-only-modal .social-task-dialog > header > div > span,
.social-feedback-only-modal .social-task-tabs,
.social-feedback-only-modal [data-social-task-section="confirm"],
.social-feedback-only-modal [data-social-task-section="other"] { display: none !important; }
.social-feedback-only-modal [data-social-task-section="feedback"] { display: block !important; }
.social-pending-only-modal .social-task-tabs [data-social-task-tab="feedback"],
.social-pending-only-modal [data-social-task-section="feedback"] { display: none !important; }
.social-task-dialog > header { min-height: 74px; padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.social-task-dialog > header span { color: var(--green); font-size: 9px; font-weight: 800; }
.social-task-dialog > header h2 { margin: 4px 0 0; font-size: 17px; }
.social-send-confirm-modal { position: fixed; inset: 0; z-index: 112; padding: 20px; display: grid; place-items: center; background: rgba(12, 31, 24, .58); opacity: 0; transition: opacity .16s ease; }
.social-send-confirm-modal.open { opacity: 1; }
.social-send-confirm-modal[hidden] { display: none !important; }
.social-send-confirm-dialog { width: min(850px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: hidden; border-radius: 7px; background: white; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; transform: translateY(12px); transition: transform .16s ease; box-shadow: 0 24px 70px rgba(4, 23, 16, .34); }
.social-send-confirm-modal.open .social-send-confirm-dialog { transform: translateY(0); }
.social-send-confirm-dialog > header { min-height: 78px; padding: 14px 20px 14px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.social-send-confirm-dialog > header h2 { margin: 0; font-size: 17px; font-weight: 800; }
.social-send-confirm-dialog > header p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.social-send-confirm-dialog > main { min-height: 0; overflow-y: auto; padding: 20px 24px; }
.social-send-recipient { min-height: 66px; padding: 10px 14px; border: 1px solid var(--line); display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; background: #fbfcfb; }
.social-send-recipient .avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 11px; font-weight: 800; }
.social-send-recipient > div { min-width: 0; display: flex; align-items: baseline; gap: .5cm; flex-wrap: wrap; }
.social-send-recipient strong, .social-send-recipient small { display: block; }
.social-send-recipient strong { font-size: 13px; }
.social-send-recipient small { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.social-send-recipient em, .social-send-feedback-head em { min-height: 28px; padding: 6px 11px; border-radius: 4px; display: grid; place-items: center; color: var(--green); background: var(--mint); font-size: 10px; font-style: normal; font-weight: 800; }
.social-send-confirm-dialog > main > h2 { margin: 20px 0 14px; font-size: 17px; font-weight: 800; }
.social-send-message { display: grid; gap: 7px; }
.social-send-message > span { color: var(--ink); font-size: 11px; font-weight: 800; }
.social-send-message textarea { width: 100%; min-height: 96px; resize: vertical; padding: 12px 13px; border: 1px solid #c9d4cf; border-radius: 5px; color: var(--ink); background: white; font: inherit; font-size: 12px; line-height: 1.7; outline: 0; }
.social-send-message textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(24, 95, 74, .1); }
.social-send-message > small { color: var(--muted); font-size: 9px; text-align: right; }
.social-send-feedback { margin-top: 18px; border: 1px solid var(--line); }
.social-send-feedback-head { min-height: 66px; padding: 11px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.social-send-feedback-head strong, .social-send-feedback-head span { display: block; }
.social-send-feedback-head strong { font-size: 13px; }
.social-send-feedback-head span { margin-top: 5px; color: var(--ink); font-size: 11px; font-weight: 800; }
.social-send-feedback-row { min-height: 78px; padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) 100px 118px; align-items: center; gap: 9px; }
.social-send-feedback-row:last-child { border-bottom: 0; }
.social-send-feedback-row > div strong, .social-send-feedback-row > div small { display: block; }
.social-send-feedback-row > div strong { font-size: 12px; }
.social-send-feedback-row > div small { margin-top: 5px; color: var(--ink); font-size: 10px; font-weight: 800; }
.social-send-choice { min-height: 38px; padding: 7px 9px; border: 1px solid var(--green); border-radius: 5px; display: grid; place-items: center; color: var(--green); background: #f4faf7; font-size: 11px; font-weight: 800; text-align: center; }
.social-send-sync { min-height: 60px; margin-top: 14px; padding: 11px 14px; border: 1px solid #c9ddd4; display: flex; align-items: center; gap: 10px; color: var(--green); background: #f3f9f6; }
.social-send-sync > svg { width: 22px; flex: 0 0 auto; }
.social-send-sync > div { min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.social-send-sync > div > strong, .social-send-sync > div > span { display: inline; color: var(--green); font-size: 11px; font-weight: 800; }
.social-send-sync > div > strong { flex: 0 0 auto; }
.social-send-sync > div > span { min-width: 0; margin: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.social-send-confirm-dialog > footer { min-height: 66px; padding: 12px 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: white; }
.social-send-confirm-dialog > footer > span { color: var(--amber); font-size: 8px; }
.social-send-confirm-dialog > footer > div { display: flex; align-items: center; gap: 8px; }
.social-send-confirm-dialog > footer .btn { min-width: 88px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.social-send-confirm-dialog > footer .btn svg { width: 13px; }
.social-workbook-dialog { position: relative; width: min(1180px, 96vw); grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.social-total-header-actions { display: flex; align-items: center; gap: 8px; }
[data-social-total-modal][data-social-total-view="validation"] [data-social-download-total] { display: none; }
.social-report-switch { min-height: 62px; padding: 8px 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: #f7faf8; }
.social-report-switch button { min-width: 0; min-height: 44px; padding: 7px 11px; border: 1px solid #cbd8d2; border-radius: 6px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--ink); background: white; text-align: left; }
.social-report-switch button > svg { width: 17px; color: var(--muted); }
.social-report-switch button span { overflow: hidden; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.social-report-switch button small { color: var(--muted); font-size: 8px; }
.social-report-switch button.active { border-color: var(--green); background: var(--mint); box-shadow: inset 0 0 0 1px var(--green); }
.social-report-switch button.active > svg, .social-report-switch button.complete > svg { color: var(--green); }
.social-report-switch button.complete small { color: var(--green); font-weight: 800; }
.social-report-switch button:disabled { cursor: not-allowed; opacity: .55; }
.social-report-center-modal { z-index: 110; }
.social-report-center-dialog { width: min(820px, 94vw); grid-template-rows: auto minmax(0, 1fr); }
.social-report-center-dialog > main { min-height: 0; overflow-y: auto; padding: 18px; display: grid; align-content: start; gap: 10px; }
.social-report-item { min-height: 90px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 13px; background: white; }
.social-report-item > span { width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); background: #edf2ef; }
.social-report-item > span svg { width: 19px; }
.social-report-item.complete { border-color: #a9c9bb; background: #f7fbf9; }
.social-report-item.complete > span { color: var(--green); background: var(--mint); }
.social-report-item > div:nth-child(2) { min-width: 0; }
.social-report-item strong, .social-report-item small { display: block; }
.social-report-item strong { font-size: 12px; }
.social-report-item small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.social-report-item > div:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
[data-social-report-page] { position: fixed; inset: 0; z-index: 70; min-width: 0; padding: 16px 20px 18px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; background: #f4f7f5; }
.social-report-page-head { min-height: 54px; margin-bottom: 10px; padding: 0; align-items: center; }
.social-report-page-head > div > span { color: var(--green); font-size: 9px; font-weight: 800; }
.social-report-page-head > div > p { margin-top: 5px; }
.social-report-page-switch { min-height: 58px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 7px; }
.social-report-page-switch button { min-height: 42px; }
.social-report-page-actions { display: flex; align-items: center; gap: 8px; }
.social-report-page-table { min-height: 0; margin: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.social-report-page-table > header { min-height: 64px; padding: 11px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.social-report-page-table > header span { color: var(--muted); font-size: 8px; }
.social-report-page-table > header h2 { margin-top: 3px; font-size: 13px; }
.social-report-page-table .social-total-body { width: 100%; height: 100%; min-height: 0; max-height: none; overflow: auto; scrollbar-gutter: stable both-edges; overscroll-behavior: contain; }
.social-report-page-table .social-total-table th:nth-child(1),
.social-report-page-table .social-total-table td:nth-child(1) { position: sticky; left: 0; z-index: 3; background: white; }
.social-report-page-table .social-total-table th:nth-child(2),
.social-report-page-table .social-total-table td:nth-child(2) { position: sticky; left: 90px; z-index: 3; background: white; }
.social-report-page-table .social-total-table th:nth-child(3),
.social-report-page-table .social-total-table td:nth-child(3) { position: sticky; left: 222px; z-index: 3; background: white; box-shadow: 3px 0 0 rgba(21, 63, 52, .1); }
.social-report-page-table .social-total-table thead th:nth-child(-n+3) { z-index: 5; }
.social-report-page-empty { min-height: 240px; display: grid; align-content: center; justify-items: center; gap: 9px; color: var(--muted); }
.social-report-page-empty svg { width: 24px; }
.social-total-ok, .social-validation-pending, .social-workbook-dialog > .social-validation-error, .social-workbook-dialog > .social-validation-warning { min-height: 42px; margin: 0; padding: 9px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 7px; font-size: 9px; }
.social-total-ok { color: var(--green); background: #f3faf6; }
.social-total-ok svg, .social-validation-pending svg { width: 15px; }
.social-validation-pending { color: var(--amber); background: var(--amber-bg); }
.social-workbook-dialog > .social-validation-error { color: var(--red); background: var(--red-bg); }
.social-workbook-dialog > .social-validation-warning { color: #8a5c00; background: #fff7db; }
.social-total-body { min-width: 0; overflow: auto; background: white; }
.social-uploaded-files article, .social-staged-files article { min-width: 0; min-height: 52px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; background: #fbfcfb; }
.social-uploaded-files article > span, .social-staged-files article > span { width: 30px; height: 30px; border-radius: 5px; display: grid; place-items: center; color: var(--green); background: var(--mint); }
.social-uploaded-files article svg, .social-staged-files article svg { width: 14px; }
.social-uploaded-files article strong, .social-uploaded-files article small, .social-staged-files article strong, .social-staged-files article small { display: block; }
.social-uploaded-files article strong, .social-staged-files article strong { font-size: 9px; }
.social-uploaded-files article small, .social-staged-files article small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.social-uploaded-files article em, .social-staged-files article em { color: var(--red); font-size: 8px; font-style: normal; font-weight: 800; }
.social-uploaded-files article em { color: var(--green); }
.social-staged-files article em { color: var(--amber); }
.social-staged-files article.uploading { border-color: #9fb7ad; background: #f2f8f5; }
.social-staged-files article.success { border-color: #95bbaa; background: #f1f8f5; }
.social-staged-files article.success em { color: var(--green); }
.social-staged-files article.error { border: 2px solid #c74a4a; background: #fff1f1; }
.social-staged-files article.error > span { color: var(--red); background: #ffe0e0; }
.social-staged-files article.error em { color: var(--red); }
.social-staged-files .social-staged-file-error { color: #a52f2f; font-weight: 700; overflow-wrap: anywhere; }
.social-validation-footer { min-height: 58px; padding: 10px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; background: white; }
.social-validation-footer > span { display: inline-flex; align-items: center; gap: 6px; color: var(--amber); font-size: 9px; font-weight: 700; }
.social-validation-footer > span svg { width: 15px; }
.social-validation-footer.complete > span { color: var(--green); }
.social-validation-footer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.social-confirm-calibration { border-color: #8abca9; color: var(--green); background: #e7f3ee; font-weight: 800; }
.social-confirm-calibration:hover { border-color: var(--green); background: #d8ebe3; }
.social-confirm-calibration.confirmed,
.social-confirm-calibration.confirmed:disabled { border-color: var(--green); color: white; background: var(--green); opacity: 1; cursor: default; }
.social-calibration-confirm-modal { z-index: 125; padding: 18px; place-items: center; justify-items: center; background: rgba(12, 31, 24, .58); }
.social-calibration-confirm-dialog { width: min(520px, calc(100vw - 36px)); overflow: hidden; border-radius: 7px; background: white; display: grid; grid-template-rows: auto auto auto; transform: translateY(12px) scale(.98); transition: transform .16s ease; box-shadow: 0 24px 70px rgba(4, 23, 16, .34); }
.social-calibration-confirm-modal.open .social-calibration-confirm-dialog { transform: translateY(0) scale(1); }
.social-calibration-confirm-dialog > header { min-height: 72px; padding: 13px 18px 13px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.social-calibration-confirm-dialog > header span { color: var(--green); font-size: 9px; font-weight: 800; }
.social-calibration-confirm-dialog > header h2 { margin: 4px 0 0; font-size: 17px; }
.social-calibration-confirm-dialog > main { min-height: 126px; padding: 25px 24px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 14px; }
.social-calibration-confirm-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--green); background: var(--mint); }
.social-calibration-confirm-icon svg { width: 22px; }
.social-calibration-confirm-dialog > main p { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.75; }
.social-calibration-confirm-dialog > footer { min-height: 64px; padding: 11px 22px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: #fbfcfb; }
.social-total-table-wrap { min-width: 100%; padding: 10px; background: white; }
.social-total-table { width: max-content; min-width: 100%; table-layout: fixed; border-collapse: collapse; background: white; color: #111; }
.social-total-table th, .social-total-table td { height: 22px; max-width: 220px; padding: 1px 5px; border: 1px solid #d9d9d9; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-family: "微软雅黑", "Microsoft YaHei", sans-serif; font-size: 10px; line-height: 1.2; }
.social-total-table th { position: sticky; top: 0; z-index: 1; color: #111; background: white; font-weight: 700; }
.social-total-table thead tr:first-child th { height: 20px; padding-top: 0; padding-bottom: 0; vertical-align: bottom; }
.social-total-table thead tr:nth-child(2) th { top: 20px; }
.social-total-table thead th[rowspan="2"] { z-index: 2; }
.social-total-table th.social-template-header-blank { background: white; }
.social-total-table th.social-validation-column { color: #c62828; background: white; font-size: 12px; font-weight: 800; }
.social-total-table tbody tr.social-detail-row > td { color: #111; font-weight: 400; }
.social-total-table tbody tr.social-summary-row > td { color: #111; font-size: 10px; font-weight: 400; }
.social-total-table tbody tr.social-summary-row > td:first-child { font-weight: 800; }
.social-total-table tbody tr.social-company-start > td { border-top: 2px solid #000; }
.social-total-table tbody tr.social-company-end > td { border-bottom: 2px solid #000; }
.social-total-table tbody tr > td:first-child { border-left: 2px solid #000; }
.social-total-table tbody tr > td:last-child { border-right: 2px solid #000; }
.social-total-table tbody tr.social-before-summary > td { border-bottom-color: transparent; }
.social-total-table tbody tr.social-summary-row > td { border-top-color: transparent; }
.social-total-table tbody tr[data-social-edit-row] { cursor: pointer; }
.social-total-table tbody tr.has-error { background: #fffafa; }
.social-total-table tbody tr.has-inferred { background: #fffdf5; }
.social-total-table .social-error-cell { position: relative; color: #8f2020 !important; background: #ffe3e3; font-size: 10px; font-weight: 800; box-shadow: inset 0 0 0 2px #c62828; }
.social-total-table .social-error-cell > span, .social-total-table .social-error-cell > small { display: block; }
.social-total-table .social-error-cell > small { margin-top: 4px; color: #c62828; font-size: 8px; white-space: normal; }
.social-total-table .social-inferred-cell { position: relative; color: #795300 !important; background: #fff1bd; font-size: 10px; font-weight: 800; box-shadow: inset 0 0 0 2px #d49313; }
.social-total-table .social-validation-status-cell { font-weight: 800; }
.social-total-table .social-validation-status-cell.has-errors { color: #8f2020; background: #ffe3e3; box-shadow: inset 0 0 0 2px #c62828; }
.social-total-table .social-row-action-cell { min-width: 48px; text-align: center; }
.social-total-table .social-row-action-cell .icon-btn { width: 28px; height: 28px; margin: 0 auto; color: var(--green); }
.social-total-table .social-row-action-cell .icon-btn svg { width: 14px; }
.social-total-table tfoot td { position: sticky; bottom: 0; color: #c62828; background: #fff4f4; font-size: 10px; font-weight: 800; }
.link-btn.danger { color: var(--red); }
.social-row-editor { position: absolute; inset: 74px 0 0; z-index: 3; overflow-y: auto; padding: 18px; background: white; }
.social-row-editor[hidden] { display: none; }
.social-row-editor > header { padding-bottom: 13px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.social-row-editor > header span { color: var(--green); font-size: 9px; font-weight: 800; }
.social-row-editor > header h3 { margin: 4px 0 0; font-size: 16px; }
.social-row-error-list { margin: 13px 0; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--red); background: var(--red-bg); font-size: 9px; }
.social-row-error-list.inferred-only { color: #795300; background: #fff7db; }
.social-row-error-list span { display: inline-flex; align-items: center; gap: 5px; }
.social-row-error-list span.inferred { color: #795300; }
.social-row-error-list svg { width: 13px; }
.social-row-edit-note { margin: 13px 0; padding: 10px 12px; display: flex; align-items: center; gap: 7px; color: var(--green); background: var(--mint); font-size: 9px; font-weight: 700; }
.social-row-edit-note svg { width: 14px; flex: 0 0 auto; }
.social-row-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.social-row-fields label { min-width: 0; display: grid; gap: 5px; }
.social-row-fields label > span { color: var(--muted); font-size: 8px; font-weight: 700; }
.social-row-fields input { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: white; font-size: 9px; }
.social-row-fields label.has-error > span { color: var(--red); }
.social-row-fields label.has-error input { border-color: var(--red); background: #fffafa; }
.social-row-fields label.has-inferred > span { color: #8a5c00; }
.social-row-fields label.has-inferred input { border-color: #d49313; background: #fffdf5; }
.social-row-editor > footer { position: sticky; bottom: -18px; margin: 20px -18px -18px; padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; background: white; }
.social-upload-dialog { width: min(820px, 94vw); grid-template-rows: auto minmax(0, 1fr) auto; }
.social-upload-dialog > header .social-upload-path { font-size: 10px; }
.social-upload-body { min-width: 0; overflow-y: auto; padding: 18px; background: #f5f7f6; }
.social-upload-metrics { margin: -18px -18px 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); background: white; }
.social-upload-metrics > div { min-height: 78px; padding: 14px 18px; border-right: 1px solid var(--line); display: flex; align-items: baseline; gap: 5px; }
.social-upload-metrics > div:last-child { border-right: 0; }
.social-upload-metrics span { margin-right: auto; color: #111; font-size: 10px; font-weight: 800; }
.social-upload-metrics strong { color: var(--green); font-size: 25px; }
.social-upload-metrics small { color: var(--muted); font-size: 9px; }
.social-upload-drop { width: 100%; min-height: 112px; padding: 18px; border: 1px dashed #9bb8ac; border-radius: 6px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--green); background: #f7fbf9; cursor: pointer; }
.social-upload-drop:hover { border-color: var(--green); background: #edf6f2; }
.social-upload-drop svg { width: 23px; }
.social-upload-drop strong { font-size: 11px; }
.social-upload-drop span { color: var(--muted); font-size: 8px; }
.social-staged-section, .social-uploaded-section { margin-top: 16px; }
.social-upload-section-head { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.social-upload-section-head strong { font-size: 10px; }
.social-upload-section-head span { color: var(--muted); font-size: 8px; }
.social-staged-files, .social-uploaded-files { display: grid; gap: 6px; }
.social-staged-files { max-height: 248px; padding-right: 3px; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start; overflow-y: auto; scrollbar-gutter: stable; }
.social-staged-files article { min-height: 84px; padding: 8px; grid-template-columns: 24px minmax(0, 1fr); align-content: center; gap: 5px 7px; }
.social-staged-files article > span { width: 24px; height: 24px; }
.social-staged-files article > div { min-width: 0; }
.social-staged-files article strong { line-height: 1.4; overflow-wrap: anywhere; }
.social-staged-files article em { grid-column: 1 / -1; justify-self: start; }
.social-staged-files > .social-upload-empty { grid-column: 1 / -1; }
.social-upload-duplicate-notice { margin-top: 7px; padding: 8px 10px; border: 1px solid #e3c48f; border-radius: 5px; color: #875817; background: #fff8e9; font-size: 8px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.social-upload-duplicate-notice[hidden] { display: none; }
.social-uploaded-files { max-height: 242px; padding-right: 10px; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-auto-rows: 55px; align-content: start; overflow-y: auto; scrollbar-gutter: stable; }
.social-uploaded-files article { min-height: 55px; padding: 8px 9px; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 7px; }
.social-uploaded-files article strong { min-width: 0; overflow: hidden; font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.social-uploaded-files article em { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: 7px; white-space: nowrap; }
.social-uploaded-files article em::before { width: 5px; height: 5px; border-radius: 50%; background: var(--green-2); content: ""; }
.social-uploaded-files > .social-upload-empty { grid-column: 1 / -1; }
.social-upload-empty { min-height: 72px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); font-size: 8px; }
.social-upload-empty svg { width: 18px; }
.social-upload-footer { min-height: 62px; padding: 11px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: white; }
.social-upload-error { position: sticky; top: 0; z-index: 3; margin: 0 0 12px; padding: 12px; border: 1px solid #d99191; border-radius: 5px; color: #8f3131; background: #fff4f4; font-size: 9px; line-height: 1.55; overflow-wrap: anywhere; box-shadow: 0 4px 12px rgba(143, 49, 49, .12); }
.social-upload-error > strong { display: block; color: #a52f2f; font-size: 11px; }
.social-upload-error ul { max-height: 180px; margin: 9px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow-y: auto; list-style: none; }
.social-upload-error li { min-width: 0; padding: 7px 8px; border: 1px solid #edc8c8; border-radius: 4px; background: white; }
.social-upload-error li b, .social-upload-error li span { display: block; }
.social-upload-error li b { color: #8f2020; font-size: 9px; overflow-wrap: anywhere; }
.social-upload-error li span { margin-top: 3px; color: #a24b4b; font-size: 8px; }
.social-upload-error.processing-error { border-color: #dfb45d; color: #7b5515; background: #fff8e7; box-shadow: 0 4px 12px rgba(123, 85, 21, .12); }
.social-upload-error.processing-error > strong { color: #7b5515; }
.social-upload-error.processing-error p { margin: 7px 0 0; font-size: 9px; font-weight: 700; }
.social-no-data .pay-social-layout,
.social-no-data > .social-actual-details,
.social-no-data > .pay-page-table[data-social-employee-details] { display: none; }
.social-task-tabs { padding: 0 18px; border-bottom: 1px solid var(--line); display: flex; gap: 22px; overflow-x: auto; }
.social-task-tabs button { min-height: 48px; padding: 0; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.social-task-tabs button.active { border-bottom-color: var(--green); color: var(--green); }
.social-task-tabs b { min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; color: inherit; background: #edf2ef; font-size: 8px; }
.social-task-body { overflow-y: auto; padding: 18px; background: #f5f7f6; }
.social-task-intro { min-height: 44px; margin-bottom: 8px; padding: 7px 9px 7px 11px; border: 1px solid #d7e2dd; border-radius: 5px; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 8px; background: #f7faf8; }
.social-task-intro p { margin: 0; color: #53625c; font-size: 9px; line-height: 1.5; }
.social-task-intro .icon-btn { width: 28px; height: 28px; }
.social-person-row, .social-other-row { min-width: 0; min-height: 88px; margin-bottom: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: white; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.social-person-main { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; }
.social-person-main .avatar { width: 36px; height: 36px; }
.social-person-main strong, .social-person-main small, .social-person-main em { display: block; }
.social-person-main strong { font-size: 11px; }
.social-person-main small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.social-person-main em { margin-top: 4px; color: var(--green); font-size: 8px; font-style: normal; }
.social-person-state { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.social-person-actions { display: flex; align-items: center; gap: 6px; }
.social-person-state .btn { min-height: 31px; font-size: 9px; }
.social-feedback-intro { min-height: 54px; margin-bottom: 9px; padding: 10px 12px; border: 1px solid #c9ddd4; display: flex; align-items: center; gap: 9px; color: var(--green); background: #f3f9f6; }
.social-feedback-intro > svg { width: 18px; flex: 0 0 auto; }
.social-feedback-intro strong, .social-feedback-intro small { display: block; }
.social-feedback-intro strong { font-size: 10px; }
.social-feedback-intro small { margin-top: 3px; color: #4e685e; font-size: 8px; }
.social-feedback-row { min-width: 0; min-height: 106px; margin-bottom: 8px; padding: 13px; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 6px; background: white; display: grid; grid-template-columns: minmax(190px, 1fr) minmax(240px, .9fr) auto; align-items: center; gap: 16px; }
.social-feedback-values { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); }
.social-feedback-values > div { min-width: 0; min-height: 56px; padding: 8px 10px; display: grid; align-content: center; gap: 4px; }
.social-feedback-values > div + div { border-left: 1px solid var(--line); }
.social-feedback-values span { color: var(--muted); font-size: 8px; }
.social-feedback-values strong { overflow-wrap: anywhere; color: var(--ink); font-size: 11px; }
.social-feedback-values strong.positive { color: var(--green); }
.social-feedback-values strong.negative { color: var(--red); }
.social-feedback-actions { display: grid; justify-items: end; gap: 9px; }
.social-feedback-actions .btn { min-height: 30px; padding-inline: 10px; font-size: 8px; }
.social-feedback-actions .btn svg { width: 13px; }
.social-confirmation-record-modal { z-index: 114; padding: 20px; place-items: center; }
.social-confirmation-record-dialog { width: min(620px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: hidden; border-radius: 7px; background: white; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; transform: translateY(12px); transition: transform .16s ease; box-shadow: 0 24px 70px rgba(4, 23, 16, .34); }
.social-confirmation-record-modal.open .social-confirmation-record-dialog { transform: translateY(0); }
.social-confirmation-record-dialog > header { min-height: 76px; padding: 14px 18px 14px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.social-confirmation-record-dialog > header span { color: var(--green); font-size: 8px; font-weight: 800; }
.social-confirmation-record-dialog > header h2 { margin: 4px 0 0; font-size: 17px; }
.social-confirmation-record-dialog > main { min-height: 0; overflow-y: auto; padding: 20px 22px; }
.social-record-person { min-height: 66px; padding: 11px 13px; border: 1px solid var(--line); display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; background: #fbfcfb; }
.social-record-person .avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 11px; font-weight: 800; }
.social-record-person strong, .social-record-person small { display: block; }
.social-record-person strong { font-size: 11px; }
.social-record-person small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.social-record-person em { padding: 5px 8px; border-radius: 4px; color: var(--green); background: var(--mint); font-size: 8px; font-style: normal; font-weight: 700; }
.social-record-values { margin: 16px 0; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
.social-record-values div { min-height: 76px; padding: 12px 14px; display: grid; align-content: center; gap: 5px; }
.social-record-values div:nth-child(even) { border-left: 1px solid var(--line); }
.social-record-values div:nth-child(n+3) { border-top: 1px solid var(--line); }
.social-record-values dt { color: var(--muted); font-size: 8px; }
.social-record-values dd { margin: 0; color: var(--ink); font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.social-record-signature { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); background: #fbfcfb; }
.social-record-signature > div { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.social-record-signature > div strong { font-size: 10px; }
.social-record-signature > div span { color: var(--muted); font-size: 8px; }
.social-record-signature img { width: 100%; height: 112px; border: 1px dashed #aab5af; object-fit: contain; background: white; }
.social-record-signature p { min-height: 72px; margin: 0; display: grid; place-items: center; color: var(--muted); background: white; font-size: 9px; }
.social-record-note { margin: 0; padding: 11px 13px; border-left: 3px solid var(--green); display: flex; align-items: center; gap: 9px; color: #476158; background: #f3f9f6; font-size: 9px; }
.social-record-note svg { width: 17px; flex: 0 0 auto; color: var(--green); }
.social-confirmation-record-dialog > footer { min-height: 62px; padding: 11px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; align-items: center; }
.social-confirmation-record-dialog > footer .btn { min-width: 88px; justify-content: center; }
.social-other-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; }
.social-other-row > span:first-child { width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; color: var(--amber); background: var(--amber-bg); }
.social-other-row > span:first-child svg { width: 16px; }
.social-other-row strong, .social-other-row small { display: block; }
.social-other-row strong { font-size: 10px; }
.social-other-row small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.social-task-empty { min-height: 180px; display: grid; align-content: center; justify-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.social-task-empty svg { width: 22px; }
.pay-benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.pay-benefit-item { min-width: 0; padding: 16px; }
.pay-benefit-title { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.pay-benefit-title strong, .pay-benefit-title small { display: block; }
.pay-benefit-title strong { margin-bottom: 4px; font-size: 11px; }
.pay-benefit-title small { color: var(--muted); font-size: 9px; }
.pay-benefit-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 13px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pay-benefit-metrics span { color: var(--muted); font-size: 8px; }
.pay-benefit-metrics strong { display: block; margin-top: 5px; color: var(--ink); font-size: 12px; }
.pay-budget-total { font-size: 11px; }

@media (min-width: 1181px) {
  .pay-processing-departments .pay-dept:nth-child(5n+1):nth-last-child(-n+5),
  .pay-processing-departments .pay-dept:nth-child(5n+1):nth-last-child(-n+5) ~ .pay-dept { border-bottom: 0; }
}

@media (max-width: 1180px) {
  .pay-analytics { grid-template-columns: 1fr; }
  .pay-processing-analytics .pay-chart { min-height: 320px; }
  .pay-dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-processing-departments .pay-dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-processing-departments .pay-dept { border-bottom: 1px solid var(--line); }
  .pay-processing-departments .pay-dept:nth-last-child(-n+2) { border-bottom: 0; }
  .pay-dept { border-bottom: 1px solid var(--line); }
  .pay-dept:nth-last-child(-n+2) { border-bottom: 0; }
  .pay-source-grid, .pay-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-source:nth-child(2) { border-right: 0; }
  .pay-source:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .salary-system-summary { align-items: flex-start; flex-direction: column; gap: 14px; }
  .salary-standard-layout { grid-template-columns: 1fr; }
  .salary-system-meta { flex-wrap: wrap; }
  .commission-brand-policy-layout { grid-template-columns: 1fr; }
  .commission-brand-policy-layout .commission-policy-matrix + .commission-policy-matrix { margin-top: 20px; }
  .social-flow { overflow-x: auto; grid-template-columns: repeat(4, 180px); }
}
@media (max-width: 760px) {
  .main, .content { width: 100%; min-width: 0; overflow-x: hidden; }
  .social-workbook-dialog > header { align-items: flex-start; flex-wrap: wrap; }
  .social-workbook-dialog > header > .social-total-header-actions { width: 100%; justify-content: flex-end; }
  .social-total-header-actions .btn { min-width: 0; flex: 1; padding-inline: 7px; white-space: nowrap; }
  .social-report-switch { padding-inline: 10px; }
  .social-report-switch button { grid-template-columns: 18px minmax(0, 1fr); }
  .social-report-switch button small { grid-column: 2; }
  .social-report-center-modal { padding: 0; place-items: stretch; }
  .social-report-center-dialog { width: 100%; height: 100vh; max-height: none; border-radius: 0; }
  .social-report-item { grid-template-columns: 34px minmax(0, 1fr); }
  .social-report-item > span { width: 34px; height: 34px; }
  .social-report-item > div:last-child { grid-column: 1 / -1; justify-content: stretch; }
  .social-report-item > div:last-child .btn { min-width: 0; flex: 1; padding-inline: 6px; }
  [data-social-report-page] { padding: 10px; }
  .social-report-page-head > div > p { display: none; }
  .social-report-page-table > header { align-items: flex-start; flex-direction: column; }
  .social-report-page-actions { width: 100%; }
  .social-report-page-actions .btn { min-width: 0; flex: 1; }
  .payroll-head { align-items: flex-start; flex-direction: column; }
  .payroll-head .actions { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-head .actions .btn { width: 100%; min-width: 0; padding-inline: 8px; }
  .pay-tabs { overflow-x: auto; gap: 18px; }
  .pay-tabs > button { white-space: nowrap; }
  .pay-period { display: none; }
  .pay-workbench-bar .pay-period { width: 100%; margin-left: 0; display: flex; }
  .pay-workbench-bar .pay-period strong { flex: 1; }
  .pay-workflow-panel .panel-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .pay-workflow-steps { min-width: 1095px; grid-template-columns: 140px 250px repeat(5, 140px); }
  .pay-performance-total-modal { padding: 0; place-items: stretch; }
  .pay-performance-total-dialog { width: 100%; max-height: none; height: 100vh; border-radius: 0; }
  .pay-performance-total-dialog > header { min-height: 62px; padding: 9px 11px; }
  .pay-performance-total-dialog > header h2 { font-size: 13px; }
  .pay-performance-total-dialog > header .btn { padding-inline: 8px; }
  .pay-attendance-report-modal .pay-performance-total-dialog { width: 100%; height: 100vh; }
  .pay-attendance-report-modal .pay-performance-total-dialog > header { flex-wrap: wrap; }
  .pay-attendance-report-modal .pay-performance-total-dialog > header > div:last-child { width: 100%; }
  .pay-attendance-report-modal .pay-performance-total-dialog > header > div:last-child .btn { flex: 1; }
  .pay-performance-total-toolbar { padding: 9px 11px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-performance-total-toolbar label, .pay-performance-total-toolbar select, .pay-performance-total-toolbar input { width: 100%; }
  .pay-performance-total-toolbar > strong { grid-column: 1 / -1; margin: 0; }
  .pay-performance-total-table { min-width: 0; font-size: 9px; }
  .pay-performance-total-table th, .pay-performance-total-table td { padding-inline: 2px; font-size: 9px; }
  .pay-workbook-modal { padding: 0; place-items: stretch; }
  .pay-workbook-dialog { width: 100%; height: 100vh; min-height: 0; border: 0; border-radius: 0; }
  .pay-workbook-dialog > header { min-height: 62px; padding: 9px 11px; grid-template-columns: minmax(0, 1fr) 31px; }
  .pay-workbook-dialog > header h2 { font-size: 13px; }
  .pay-workbook-status { grid-column: 1 / -1; grid-row: 2; width: fit-content; }
  .pay-workbook-dialog > header .icon-btn { grid-column: 2; grid-row: 1; }
  .pay-workbook-tabs { padding-inline: 6px; }
  .pay-workbook-tabs button { min-width: 104px; }
  .pay-workbook-dialog > footer { padding: 8px 10px; align-items: stretch; flex-direction: column; }
  .pay-workbook-dialog > footer > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pay-workbook-dialog > footer > div { width: 100%; }
  .pay-workbook-dialog > footer .btn { min-width: 0; flex: 1; padding-inline: 6px; }
  .pay-workbook-dialog > footer > div { flex-wrap: wrap; }
  .pay-workbook-finance { width: 100%; flex-basis: 100%; }
  .pay-workbook-cell-note { top: 104px; right: 8px; width: calc(100% - 16px); }
  .pay-finance-link-modal { padding: 12px; }
  .pay-finance-link-modal > div { width: 100%; }
  .pay-finance-link-modal main > div { grid-template-columns: 1fr; }
  .pay-finance-link-modal footer .btn { flex: 1; }
  .pay-department-confirm-modal { padding: 0; place-items: stretch; }
  .pay-department-confirm-dialog { width: 100%; height: 100vh; border-radius: 0; }
  .pay-department-confirm-dialog > header { min-height: 62px; padding: 9px 11px; grid-template-columns: minmax(0, 1fr) 31px; }
  .pay-department-confirm-dialog > header h2 { font-size: 13px; }
  .pay-department-confirm-summary { grid-column: 1 / -1; grid-row: 2; width: fit-content; }
  .pay-department-confirm-dialog > header .icon-btn { grid-column: 2; grid-row: 1; }
  .pay-department-confirm-toolbar { padding: 9px 11px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; }
  .pay-department-confirm-toolbar label, .pay-department-confirm-toolbar select { width: 100%; }
  .pay-department-confirm-toolbar .btn { width: 100%; justify-content: center; }
  .pay-department-confirm-toolbar > span { margin: 0; }
  .pay-department-confirm-dialog > footer { padding: 9px 11px; align-items: stretch; flex-direction: column; }
  .pay-department-confirm-dialog > footer > div:last-child { width: 100%; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .pay-department-send-controls { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .pay-department-send-control { width: 100%; }
  .pay-department-confirm-dialog > footer .btn { width: 100%; min-width: 0; padding-inline: 4px; font-size: 10px; }
  .pay-department-confirm-dialog > header .icon-btn { display: grid; }
  .pay-payslip-modal { padding: 0; place-items: stretch; }
  .pay-payslip-dialog { width: 100%; height: 100vh; border-radius: 0; }
  .pay-payslip-modal.detail-mode .pay-payslip-dialog { width: 100%; height: 100vh; }
  .pay-payslip-modal-head { padding: 12px 14px; align-items: flex-start; }
  .pay-payslip-title-row { align-items: flex-start; flex-direction: column; gap: 9px; }
  .pay-payslip-period-query { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; }
  .pay-payslip-period-query select { width: 100% !important; }
  .pay-payslip-preview-filters { padding: 10px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-payslip-preview-filters select { width: 100%; }
  .pay-payslip-download { grid-column: 1 / -1; width: 100%; margin-left: 0; justify-content: center; }
  .pay-payslip-all-table, .pay-payslip-all-table tbody { width: 100%; display: block; }
  .pay-payslip-all-table { min-width: 0; table-layout: auto; }
  .pay-payslip-all-table thead { display: none; }
  .pay-payslip-all-table tr[data-payroll-slip-row] { padding: 9px 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .pay-payslip-all-table tr[hidden] { display: none !important; }
  .pay-payslip-all-table td { height: auto; padding: 7px 8px; display: grid; align-content: start; gap: 4px; border: 0; }
  .pay-payslip-all-table td::before { content: attr(data-label); color: var(--ink); font-size: 8px; font-weight: 800; }
  .pay-payslip-all-table td[colspan] { display: block; }
  .pay-payslip-all-table td[colspan]::before { display: none; }
  .pay-payslip-detail { display: block; }
  .pay-payslip-detail-state { padding-inline: 12px; }
  .pay-payslip-preview { min-height: 0; padding-inline: 14px; grid-template-columns: 1fr; grid-template-rows: none; }
  .pay-payslip-section.earnings, .pay-payslip-section.subsidies, .pay-payslip-section.payable-total, .pay-payslip-section.deductions, .pay-payslip-section.deduction-total, .pay-payslip-section.final-total { grid-column: 1; grid-row: auto; }
  .pay-payslip-section.deductions > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-payslip-actions { padding-inline: 14px; }
  .pay-payslip-actions .btn { min-width: 0; flex: 1; }
  .pay-dept-grid { grid-template-columns: 1fr; padding: 4px 15px 12px; }
  .pay-processing-analytics .pay-bars { grid-template-columns: repeat(var(--pay-chart-mobile-columns, 1), minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(130px, 1fr)); }
  .pay-processing-analytics .pay-bar-pair { gap: 5px; }
  .pay-processing-departments .pay-dept-grid { grid-template-columns: 1fr; }
  .pay-processing-departments .pay-dept:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .pay-processing-departments .pay-dept:last-child { border-bottom: 0; }
  .pay-dept:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .pay-dept:last-child { border-bottom: 0; }
  .pay-department-overview .pay-dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; padding: 4px 15px 12px; column-gap: 16px; }
  .pay-department-overview .pay-dept { border-bottom: 1px solid var(--line); }
  .pay-department-overview .pay-dept:nth-last-child(-n+2) { border-bottom: 0; }
  .pay-department-overview .panel-head { align-items: flex-start; flex-direction: column; }
  .pay-department-head-actions { width: 100%; margin-left: 0; justify-content: flex-end; }
  .pay-department-period { width: 100%; }
  .pay-department-period label { flex: 1; }
  .pay-department-period select { min-width: 0; width: 100%; }
  .pay-table .panel-head { align-items: flex-start; padding-top: 13px; padding-bottom: 13px; flex-direction: column; }
  .payroll-filters { grid-template-columns: 1fr; padding: 0 13px 13px; }
  .payroll-filters.payroll-filters-inline { width: 100%; min-width: 0; padding: 0; grid-template-columns: 1fr; }
  .pay-source-grid, .pay-benefit-grid { grid-template-columns: 1fr; }
  .pay-source { border-right: 0; border-bottom: 1px solid var(--line); }
  .pay-source:last-child { border-bottom: 0; }
  .pay-workbench-bar { align-items: flex-start; flex-direction: column; }
  .pay-workbench-bar > div:first-child { align-items: flex-start; flex-direction: column; }
  .pay-social-filters { width: 100%; flex-direction: column; }
  .pay-social-filters label { min-width: 0; width: 100%; }
  .social-stats { grid-template-columns: 1fr; }
  .social-stats .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .social-stats .stat:last-child { border-bottom: 0; }
  [data-social-employee-details] .panel-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .social-employee-heading h2 { font-size: 16px; }
  .social-employee-filters { width: 100%; margin-left: 0; align-items: stretch; justify-content: flex-start; gap: 8px; }
  .social-employee-filter-select, .social-employee-search { flex: 1; min-width: 0; width: auto; height: 38px; }
  .social-employee-filters select, .social-employee-filters input { min-width: 0; font-size: 12px; }
  .social-period-picker { width: 100%; margin-left: 0; justify-content: space-between; }
  .social-period-picker select { flex: 1; }
  .social-period-notice { margin-top: 0; }
  [data-social-employee-details] th, [data-social-employee-details] td { padding: 8px 3px; font-size: 7px; }
  [data-social-employee-details] th:nth-child(1), [data-social-employee-details] th:nth-child(2), [data-social-employee-details] td { font-size: 9px; }
  [data-social-employee-details] .tag { min-height: 18px; padding-inline: 3px; font-size: 9px; white-space: normal; text-align: center; }
  .social-employee-pagination { padding: 10px; align-items: flex-start; flex-direction: column; }
  .social-employee-pagination .pages { width: 100%; justify-content: flex-start; }
  .social-flow { padding: 14px; grid-template-columns: repeat(4, 150px); }
  .social-flow-step { min-height: 72px; }
  .social-workbook-bar { align-items: stretch; flex-direction: column; }
  .social-workbook-actions { width: 100%; justify-content: stretch; flex-wrap: wrap; }
  .social-workbook-actions .btn { min-width: 0; flex: 1 1 140px; justify-content: center; }
  .social-task-dialog { width: 100%; }
  .social-feedback-summary-toolbar { align-items: stretch; flex-direction: column; }
  .social-feedback-inline-title { gap: 14px; }
  .social-feedback-summary-toolbar > div { width: 100%; display: grid; grid-template-columns: 1fr; }
  .social-feedback-summary-toolbar label { width: 100%; align-items: stretch; flex-direction: column; }
  .social-feedback-summary-toolbar select, .social-feedback-summary-toolbar input { width: 100%; }
  .social-feedback-summary-body { padding: 10px 12px 16px; }
  .social-feedback-summary-body table, .social-feedback-summary-body tbody { width: 100%; display: block; }
  .social-feedback-summary-body thead { display: none; }
  .social-feedback-summary-body tr { margin-bottom: 9px; padding: 8px; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: white; }
  .social-feedback-summary-body td { height: auto; min-height: 54px; padding: 7px 8px; border: 0; display: grid; align-content: start; gap: 4px; }
  .social-feedback-summary-body td::before { content: attr(data-label); color: var(--muted); font-size: 8px; font-weight: 800; }
  .social-feedback-summary-empty { display: block !important; }
  .social-feedback-summary-empty td { min-height: 160px; display: grid; place-items: center; }
  .social-feedback-summary-empty td::before { display: none; }
  .social-feedback-pagination { align-items: flex-start; flex-direction: column; }
  .social-feedback-pagination .pages { width: 100%; justify-content: flex-start; }
  .social-send-confirm-modal { padding: 0; place-items: stretch; }
  .social-send-confirm-dialog { width: 100%; max-height: none; height: 100vh; border-radius: 0; }
  .social-send-confirm-dialog > header { min-height: 68px; padding: 11px 13px; }
  .social-send-confirm-dialog > main { padding: 14px; }
  .social-send-confirm-dialog, .social-send-confirm-dialog > main, .social-send-confirm-dialog > footer { min-width: 0; overflow-x: hidden; }
  .social-send-recipient { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; }
  .social-send-recipient > div { gap: 10px; }
  .social-send-feedback-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 10px; }
  .social-send-feedback-row > div { grid-column: 1 / -1; }
  .social-send-confirm-dialog > footer { padding: 10px 14px; align-items: stretch; flex-direction: column; }
  .social-send-confirm-dialog > footer > div { width: 100%; }
  .social-send-confirm-dialog > footer .btn { min-width: 0; flex: 1; }
  .social-workbook-dialog { width: 100%; }
  .social-upload-dialog { width: 100%; }
  .social-upload-body { padding: 14px; }
  .social-upload-metrics { margin: -14px -14px 14px; }
  .social-upload-metrics > div { min-height: 68px; padding: 11px 13px; }
  .social-staged-files, .social-uploaded-files { max-height: 242px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-upload-error ul { grid-template-columns: 1fr; }
  .social-validation-footer { align-items: stretch; flex-direction: column; }
  .social-validation-footer .btn { width: 100%; }
  .social-row-fields { grid-template-columns: 1fr; }
  .social-task-tabs { gap: 16px; }
  .social-person-row { align-items: stretch; flex-direction: column; }
  .social-person-state { justify-content: space-between; }
  .social-feedback-row { grid-template-columns: 1fr; align-items: stretch; gap: 11px; }
  .social-feedback-actions { justify-items: start; }
  .social-confirmation-record-modal { padding: 0; place-items: stretch; }
  .social-confirmation-record-dialog { width: 100%; max-height: none; height: 100vh; border-radius: 0; }
  .social-record-values { grid-template-columns: 1fr; }
  .social-record-values div:nth-child(even) { border-left: 0; }
  .social-record-values div + div { border-top: 1px solid var(--line); }
  .salary-system-tabs > button { min-height: 44px; padding: 0 16px; }
  .salary-view-tabs > button { min-width: min(260px, 100%); min-height: 52px; padding: 0 16px; }
  .salary-view-tabs > button small { display: none; }
  .salary-system-summary { padding: 14px; }
  .salary-system-meta { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .commission-rule-tabs { padding: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commission-rule-tabs button:last-child { grid-column: 1 / -1; }
  .commission-rule-view { padding: 14px 12px; }
  .commission-rule-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commission-rule-metrics > div:nth-child(2) { border-right: 0; }
  .commission-rule-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .commission-calculator > header { align-items: flex-start; flex-direction: column; }
  .commission-calculator > header > div:last-child { width: 100%; }
  .commission-calculator > header .btn { flex: 1; }
  .commission-calculator-body { grid-template-columns: 1fr; }
  .commission-calculator-fields, .commission-calculator-fields.brand { grid-template-columns: 1fr; }
  .commission-calculator-result { border-top: 1px solid #dce5e1; border-left: 0; }
  .commission-rule-grid { grid-template-columns: 1fr; }
  .commission-policy-title { align-items: flex-start; flex-direction: column; gap: 5px; }
  .commission-team-rule { grid-template-columns: 1fr; }
  .commission-team-rule-title { min-height: 44px; border-right: 0; border-bottom: 1px solid #cdded7; justify-content: flex-start; }
  .commission-team-rule-items { grid-template-columns: 1fr; }
  .commission-team-rule-items > span:first-child { border-right: 0; border-bottom: 1px solid #cdded7; }
  .commission-matrix-table th, .commission-matrix-table td { padding-right: 4px; padding-left: 4px; font-size: 9px; }
  .commission-settlement-strip { grid-template-columns: 1fr; }
  .commission-settlement-strip > span { border-right: 0; border-bottom: 1px solid #ead4d4; }
  .commission-settlement-strip > span:last-child { border-bottom: 0; }
  .pm-review-toolbar { align-items: stretch; flex-direction: column; }
  .pm-review-tabs { width: 100%; }
  .pm-review-tabs > button { min-width: 0; flex: 1; }
  .pm-review-filters { flex-wrap: wrap; }
  .pm-review-panels { grid-template-columns: 1fr; }
  .pm-review-guide { order: -1; }
  .main:has([data-pm-review-root]), .content:has([data-pm-review-root]) { overflow-x: clip; }
  .pm-year-strip { top: 60px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pm-year-strip > div:nth-child(2) { border-right: 1px solid var(--line); }
  .pm-year-strip > div:nth-child(-n+2) { border-bottom: 0; }
  .pm-year-strip > button { min-height: 62px; padding: 6px 4px; flex-direction: column; gap: 2px; }
  .pm-year-strip > button:nth-child(2) { border-right: 1px solid var(--line); }
  .pm-year-strip > button:nth-child(-n+2) { border-bottom: 0; }
  .pm-year-strip > button span { font-size: 14px; }
  .pm-year-strip > button strong { font-size: 11px; line-height: 1.25; text-align: center; }
  .pm-analysis-grid { grid-template-columns: 1fr; }
  .pm-result-columns { padding: 9px 14px 5px; grid-template-columns: 94px minmax(50px, 1fr) 44px 44px; gap: 8px; }
  .pm-result-bars { grid-template-columns: 1fr; grid-template-rows: repeat(3, 72px); }
  .pm-result-bar { padding: 16px 14px; grid-template-columns: 94px minmax(50px, 1fr) 44px 44px; gap: 8px; }
  .pm-review-ledger .pm-review-filters { align-items: stretch; flex-direction: column; }
  .pm-review-ledger .pm-review-filters label, .pm-review-ledger .pm-review-filters select, .pm-review-ledger .pm-review-filters input { width: 100%; }
  .pm-person-entry-tabs { grid-template-columns: 1fr; }
  .pm-person-workspace > .pm-review-filters { align-items: stretch; flex-direction: column; }
  .pm-person-workspace > .pm-review-filters label, .pm-person-workspace > .pm-review-filters select, .pm-person-workspace > .pm-review-filters input { width: 100%; }
  .salary-path { padding-inline: 10px; overflow-x: auto; grid-template-columns: repeat(5, minmax(90px, 1fr)); }
  .salary-path::before { display: none; }
  .salary-range-row { grid-template-columns: 1fr; gap: 10px; padding: 12px 0; }
  .salary-band-panel .panel-head { align-items: flex-start; flex-direction: column; }
  .salary-band-panel .panel-head .btn { width: 100%; margin-left: 0 !important; justify-content: center; }
  .salary-band-table { min-width: 0; }
  .salary-band-table thead { display: none; }
  .salary-band-table, .salary-band-table tbody { display: block; }
  .salary-band-table tr { padding: 7px 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salary-band-table td { padding: 7px 8px; border: 0; display: block; font-size: 9px; }
  .salary-band-table td::before { content: attr(data-label); margin-bottom: 5px; display: block; color: var(--ink); font-size: 8px; font-weight: 800; }
  .salary-band-table td:first-child strong { margin-left: 6px; }
  .salary-band-table.split-stage td:last-child { grid-column: 1 / -1; }
  .salary-standard-layout.promotion-only .panel-head { align-items: flex-start; flex-direction: column; }
  .salary-promotion-head-actions, .salary-promotion-head-actions .btn { width: 100%; }
  .salary-promotion-head-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .salary-promotion-controls { width: 100%; margin-right: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .salary-promotion-controls label { min-width: 0; grid-column: 1 / -1; justify-content: space-between; }
  .salary-promotion-head-actions .btn { justify-content: center; white-space: normal; text-align: center; }
  .salary-band-editor-modal { padding: 0; }
  .salary-band-editor-dialog { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .salary-course-modal { padding: 0; place-items: stretch; }
  .salary-course-dialog { width: 100%; height: 100vh; border-radius: 0; }
  .salary-course-dialog > header { min-height: 70px; padding: 10px 12px; }
  .salary-course-dialog > header h2 { font-size: 15px; }
  .salary-course-dialog > header p { max-width: 270px; line-height: 1.45; }
  .salary-course-toolbar { padding: 10px 12px; }
  .salary-course-level-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .salary-course-level-tabs button { min-width: 0; }
  .salary-course-dialog > main { padding: 12px; }
  .salary-course-level-panel { grid-template-columns: 1fr; }
  .salary-course-platform-panel { grid-template-columns: 1fr; }
  .salary-course-shared > header strong::after { margin: 5px 0 0; width: fit-content; display: block; }
  .salary-dual-path { overflow-x: auto; }
  .salary-dual-path > div { min-width: 690px; }
  .company-career-map { padding: 14px; }
  .company-career-panel .panel-head { align-items: flex-start; flex-direction: column; }
  .company-career-lane { grid-template-columns: 1fr; gap: 10px; }
  .company-career-label { min-height: 62px; }
  .company-career-flow { flex-direction: column; gap: 18px; }
  .company-career-node { min-height: 66px; }
  .company-career-node:not(:last-child)::after { width: 1px; height: 12px; right: auto; left: 22px; top: auto; bottom: -15px; }
  .company-career-node:not(:last-child)::before { right: auto; left: 19px; top: auto; bottom: -17px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid #aebfb8; }
  .company-career-switch { margin-left: 0; }
}
.login-card h1 { margin: 0 0 4px; font-size: 21px; }
.login-card .sub { color: var(--muted); font-size: 12px; margin-bottom: 26px; }
.login-error { background: var(--red-bg); color: var(--red); font-size: 11px; padding: 9px 11px; border-radius: 6px; margin-bottom: 14px; }
.login-card .btn.primary { width: 100%; min-height: 41px; margin-top: 6px; }
.login-foot { margin-top: 22px; color: #9aa5a0; font-size: 10px; text-align: center; line-height: 1.7; }
.tabs { display: flex; gap: 4px; }
.tabs button { border: 0; background: transparent; padding: 7px 11px; border-radius: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.tabs button:focus { outline: 0; }
.tabs button:focus-visible { outline: 2px solid var(--green-2); outline-offset: 2px; }
.tabs button.active { background: var(--mint); color: var(--green); font-weight: 700; }
.training-page-head h1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.training-page-head h1 small { color: var(--muted); font-size: 11px; font-weight: 500; }
.training-tabs { margin-bottom: 18px; padding: 0; width: fit-content; max-width: 100%; gap: 10px; background: transparent; border: 0; overflow-x: auto; }
.training-tabs button { min-height: 36px; padding-inline: 14px; border: 1px solid var(--line); background: white; box-shadow: 0 3px 10px rgba(20,52,41,.05); font-weight: 800; white-space: nowrap; }
.training-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 28px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.training-section-heading h2 { margin: 0 0 5px; font-size: 17px; }
.training-section-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.training-section-heading > span { flex: 0 0 auto; padding: 5px 9px; border-radius: 5px; background: var(--mint); color: var(--green); font-size: 10px; font-weight: 700; }
.training-roster-trigger { width: 100%; border: 0; border-right: 1px solid var(--line); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.training-roster-trigger:hover { background: var(--mint); }
.training-roster-trigger:focus-visible { outline: 2px solid var(--green-2); outline-offset: -3px; }
.training-roster-backdrop { position: fixed; inset: 0; z-index: 120; padding: 24px; display: grid; place-items: center; background: rgba(10,27,21,.46); opacity: 0; transition: opacity 160ms ease; }
.training-roster-backdrop[hidden] { display: none; }
.training-roster-backdrop.open { opacity: 1; }
.training-roster-dialog { width: min(760px, 100%); max-height: min(72vh, 680px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 0 22px 60px rgba(10,27,21,.2); transform: translateY(10px); transition: transform 160ms ease; }
.training-roster-backdrop.open .training-roster-dialog { transform: translateY(0); }
.training-roster-dialog > header { min-height: 68px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.training-roster-dialog > header h2 { margin: 0 0 4px; font-size: 17px; }
.training-roster-dialog > header span { color: var(--muted); font-size: 10px; }
.training-roster-dialog > .table-wrap { overflow: auto; }
.training-roster-dialog table { min-width: 620px; }
.training-roster-dialog th, .training-roster-dialog td { text-align: center; }
.learning-course-settings-dialog { width: min(960px, 100%); max-height: min(82vh, 780px); }
.learning-course-settings-dialog > form { min-height: 0; display: flex; flex-direction: column; }
.learning-course-settings-list { overflow-y: auto; }
.learning-course-setting-row { min-height: 82px; padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(180px, .9fr) 130px minmax(230px, 1.25fr) 112px; gap: 12px; align-items: center; }
.learning-course-setting-row:last-child { border-bottom: 0; }
.learning-course-setting-name { min-width: 0; display: flex; align-items: center; gap: 10px; }
.learning-course-setting-name .todo-icon { flex: 0 0 auto; }
.learning-course-setting-name strong, .learning-course-setting-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learning-course-setting-name strong { font-size: 11px; }
.learning-course-setting-name small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.learning-course-setting-row > label > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.learning-course-setting-row select, .learning-course-setting-row input[type="url"] { width: 100%; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; font-size: 10px; }
.learning-course-setting-row select:focus, .learning-course-setting-row input[type="url"]:focus { border-color: var(--green); outline: 2px solid rgba(36,118,94,.12); outline-offset: 1px; }
.learning-course-publish { min-height: 34px; margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; }
.learning-course-publish input { width: 16px; height: 16px; accent-color: var(--green); }
.learning-course-publish > span { margin: 0 !important; color: var(--ink) !important; white-space: nowrap; }
.learning-course-settings-dialog form > footer { min-height: 64px; padding: 12px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.learning-panel-actions { display: flex; align-items: center; gap: 7px; }
.learning-content-layout .panel-head { flex-wrap: wrap; }
.learning-upload-dialog { width: min(720px, 100%); max-height: min(82vh, 720px); }
.learning-upload-dialog > form { min-height: 0; display: flex; flex-direction: column; }
.learning-upload-form { padding: 18px; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.learning-upload-form label { min-width: 0; }
.learning-upload-form label.full { grid-column: 1 / -1; }
.learning-upload-form label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.learning-upload-form input, .learning-upload-form select, .learning-upload-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; font-size: 10px; outline: 0; }
.learning-upload-form input, .learning-upload-form select { height: 36px; padding: 0 10px; }
.learning-upload-form textarea { padding: 9px 10px; resize: vertical; }
.learning-upload-form input:focus, .learning-upload-form select:focus, .learning-upload-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(36,118,94,.1); }
.learning-upload-number { position: relative; }
.learning-upload-number input { padding-right: 46px; }
.learning-upload-number em { position: absolute; top: 10px; right: 10px; color: var(--muted); font-size: 9px; font-style: normal; }
.learning-upload-file { padding: 13px; border: 1px dashed #b9c9c2; border-radius: 6px; background: #f8faf9; }
.learning-upload-file input[type="file"] { height: auto; padding: 8px; border: 0; background: transparent; }
.learning-upload-file small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.learning-upload-dialog form > footer { min-height: 64px; padding: 12px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.learning-exam-admin { margin-top: 20px; }
.learning-exam-admin .panel-head > div h2,.learning-exam-admin .panel-head > div p { margin: 0; }
.learning-exam-admin .panel-head > div p { margin-top: 5px; color: var(--muted); font-size: 9px; }
.learning-exam-admin-summary { min-height: 44px; padding: 8px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 22px; color: var(--muted); background: #fafcfb; font-size: 9px; }
.learning-exam-admin-summary strong { margin-right: 4px; color: var(--green); font-size: 13px; }
.learning-exam-admin-row { min-height: 74px; padding: 11px 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 38px minmax(0,1fr) 72px 112px; align-items: center; gap: 12px; }
.learning-exam-admin-row:last-child { border-bottom: 0; }
.learning-exam-admin-row:hover { background: #fafcfb; }
.learning-exam-admin-icon { width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; color: var(--green); background: var(--mint); }
.learning-exam-admin-icon svg { width: 18px; height: 18px; }
.learning-exam-admin-copy { min-width: 0; }
.learning-exam-admin-copy > div { display: flex; align-items: center; gap: 7px; }
.learning-exam-admin-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.learning-exam-admin-copy small { display: block; margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.learning-exam-admin-metric { text-align: right; }
.learning-exam-admin-metric strong,.learning-exam-admin-metric span { display: block; }
.learning-exam-admin-metric strong { font-size: 15px; }
.learning-exam-admin-metric span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.learning-exam-admin-actions { display: flex; justify-content: flex-end; gap: 6px; }
.learning-exam-admin-actions .icon-btn { width: 32px; height: 32px; }
.learning-exam-admin-actions .icon-btn:disabled { cursor: not-allowed; opacity: .45; background: var(--soft); }
.learning-exam-admin-actions .icon-btn.danger { color: var(--red); }
.learning-exam-admin-empty { min-height: 154px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; color: var(--muted); }
.learning-exam-admin-empty svg { width: 28px; height: 28px; }
.learning-exam-admin-empty strong { color: var(--ink); font-size: 12px; }
.learning-exam-admin-empty span { font-size: 9px; }
.learning-exam-editor-dialog { width: min(920px,100%); max-height: min(90vh,860px); }
.learning-exam-editor-dialog > form { min-height: 0; display: flex; flex-direction: column; }
.learning-exam-form-scroll { min-height: 0; overflow-y: auto; }
.learning-exam-basic-fields { padding: 18px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.learning-exam-basic-fields label { min-width: 0; }
.learning-exam-basic-fields label.full { grid-column: 1 / -1; }
.learning-exam-basic-fields label > span,.learning-exam-question-fields label > span,.learning-exam-question-side label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 700; }
.learning-exam-basic-fields input,.learning-exam-basic-fields select,.learning-exam-basic-fields textarea,.learning-exam-question-fields input,.learning-exam-question-fields select,.learning-exam-question-fields textarea { width: 100%; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; font-size: 10px; outline: 0; }
.learning-exam-basic-fields input,.learning-exam-basic-fields select,.learning-exam-question-fields input,.learning-exam-question-fields select { height: 36px; padding: 0 9px; }
.learning-exam-basic-fields textarea,.learning-exam-question-fields textarea { padding: 8px 9px; resize: vertical; }
.learning-exam-basic-fields input:focus,.learning-exam-basic-fields select:focus,.learning-exam-basic-fields textarea:focus,.learning-exam-question-fields input:focus,.learning-exam-question-fields select:focus,.learning-exam-question-fields textarea:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(36,118,94,.1); }
.learning-exam-switches { min-height: 48px; padding: 10px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; background: #fafcfb; }
.learning-exam-switches label { display: inline-flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 700; }
.learning-exam-switches input { width: 15px; height: 15px; accent-color: var(--green); }
.learning-exam-question-section > header { min-height: 58px; padding: 11px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.learning-exam-question-section > header > div { display: flex; align-items: baseline; gap: 8px; }
.learning-exam-question-section h3 { margin: 0; font-size: 13px; }
.learning-exam-question-section header span { color: var(--muted); font-size: 9px; }
.learning-exam-question-editor { border-top: 1px solid var(--line); }
.learning-exam-question-editor > header { min-height: 52px; padding: 9px 18px; display: grid; grid-template-columns: minmax(0,1fr) 150px 32px; align-items: center; gap: 10px; background: #f8faf9; }
.learning-exam-question-editor > header > strong { color: var(--green-dark); font-size: 11px; }
.learning-exam-question-editor > header label { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 7px; }
.learning-exam-question-editor > header label span { color: var(--muted); font-size: 9px; }
.learning-exam-question-editor > header select { width: 100%; height: 32px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font: inherit; font-size: 9px; }
.learning-exam-question-fields { padding: 14px 18px 18px; display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 12px; }
.learning-exam-question-fields .full { grid-column: 1 / -1; }
.learning-exam-question-fields label.options small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }
.learning-exam-question-side { display: grid; align-content: start; gap: 11px; }
.learning-exam-editor-dialog form > footer { min-height: 64px; padding: 12px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.learning-exam-results-dialog { width: min(880px,100%); max-height: min(82vh,720px); }
.learning-exam-results-dialog table { min-width: 760px; }
@media (max-width:760px) {
  .learning-exam-admin-row { grid-template-columns: 36px minmax(0,1fr) auto; padding: 11px 12px; }
  .learning-exam-admin-metric { display: none; }
  .learning-exam-admin-actions { grid-column: 2 / -1; padding-top: 8px; border-top: 1px solid var(--line); }
  .learning-exam-basic-fields { grid-template-columns: 1fr; padding: 14px; }
  .learning-exam-basic-fields label.full { grid-column: auto; }
  .learning-exam-switches { align-items: flex-start; flex-direction: column; }
  .learning-exam-question-editor > header { grid-template-columns: minmax(0,1fr) 130px 32px; padding-inline: 14px; }
  .learning-exam-question-fields { grid-template-columns: 1fr; padding: 12px 14px 16px; }
  .learning-exam-question-fields .full { grid-column: auto; }
}
.job-training-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; }
.job-training-layout > .panel { height: 100%; }
.job-training-panel .todo { min-height: 64px; padding-block: 12px; }
.job-training-panel .todo:last-child, .department-learning-row:nth-last-child(-n+2) { border-bottom: 0; }
.department-learning-panel { display: flex; flex-direction: column; }
.department-learning-list { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(64px, 1fr); align-content: stretch; }
.department-learning-row { min-width: 0; min-height: 64px; padding: 9px 11px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 92px minmax(42px, 1fr) 36px; gap: 7px; align-items: center; }
.department-learning-row:nth-child(odd) { border-right: 1px solid var(--line); }
.department-learning-row:hover { background: #fafcfb; }
.department-learning-name { min-width: 0; }
.department-learning-name span, .department-learning-name small { display: block; }
.department-learning-name span { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.department-learning-name small { margin-top: 4px; color: var(--green); font-size: 8px; font-weight: 700; }
.department-learning-row.merged { background: #f7fbf9; }
.department-learning-row .track { height: 6px; overflow: hidden; border-radius: 3px; background: #e7ece9; }
.department-learning-row .fill { height: 100%; border-radius: inherit; }
.department-learning-row > strong { color: var(--ink); font-size: 11px; text-align: right; }
.contract-stat { width: 100%; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.contract-stat:hover { background: var(--mint); }
.contract-stat:focus-visible { outline: 2px solid var(--green-2); outline-offset: -3px; }
.contract-stat-links { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.contract-stat-links strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 800; }
.contract-stat-links span { flex: 0 0 auto; min-width: 24px; padding: 2px 6px; border-radius: 10px; background: var(--mint); color: var(--green); text-align: center; font-size: 11px; }
.spinning { animation: roster-spin .8s linear infinite; }
@keyframes roster-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .roster-contextbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .roster-context-actions { width: 100%; justify-content: space-between; }
  .roster-contract-tabs { flex: 1; overflow-x: auto; }
  .roster-summary-stats { gap: 10px; padding: 10px; }
  .roster-summary-stats button.stat { min-height: 100px; padding: 11px; }
  .roster-summary-stats button.stat.selected { padding: 10px; }
  .roster-summary-stats .trend { position: static; margin-top: 7px; }
  .roster-stat-icon { width: 26px; height: 26px; flex-basis: 26px; }
  .roster-capturebar { align-items: stretch; flex-direction: column; gap: 9px; }
  .roster-capture-title { min-width: 0; }
  .roster-capture-controls { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .roster-capture-controls select { width: 100%; }
  .roster-capture-action { padding-inline: 10px; }
}

@media (max-width: 460px) {
  .roster-capture-controls { grid-template-columns: 1fr; }
  .roster-capture-modes { width: 100%; }
  .roster-capture-modes button { flex: 1; }
  .roster-capture-action { width: 100%; justify-content: center; }
}
.contract-panel { margin: 0 0 10px; }
.contract-panel .tabs { flex-wrap: wrap; }
.contract-panel .tabs button { font-size: 13px; font-weight: 800; }
.contract-panel table { min-width: 680px; }
.learning-ranking { margin-top: 20px; }
.learning-ranking-head > div { min-width: 0; }
.learning-ranking-head h2, .learning-ranking-head p { margin: 0; }
.learning-ranking-head p { margin-top: 5px; color: var(--muted); font-size: 9px; }
.learning-ranking-head .learning-ranking-period { min-height: 34px; margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 10px; font-weight: 700; }
.learning-ranking-period label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.learning-ranking-period label > span { color: var(--muted); }
.learning-ranking-period select { min-width: 82px; height: 34px; padding: 0 26px 0 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background-color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.learning-ranking-period label:last-child select { min-width: 68px; }
.learning-ranking-period select:focus { border-color: var(--green); outline: 2px solid rgba(36, 118, 94, .12); outline-offset: 1px; }
.learning-ranking-empty { min-height: 168px; display: grid; place-items: center; }
.learning-ranking-podium { padding: 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: #fafcfb; }
.learning-ranking-leader { min-width: 0; min-height: 108px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #fff; }
.learning-ranking-leader.first { border-color: #a7c8ba; box-shadow: inset 0 3px 0 var(--green); }
.learning-ranking-badge { width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; color: var(--green); background: var(--mint); font-size: 14px; font-weight: 900; }
.learning-ranking-leader:nth-child(2) .learning-ranking-badge { color: var(--blue); background: var(--blue-bg); }
.learning-ranking-leader:nth-child(3) .learning-ranking-badge { color: var(--amber); background: var(--amber-bg); }
.learning-ranking-person { min-width: 0; }
.learning-ranking-person strong, .learning-ranking-person span, .learning-ranking-person small { display: block; }
.learning-ranking-person strong { margin-bottom: 5px; font-size: 12px; }
.learning-ranking-person span { margin-bottom: 8px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.learning-ranking-person small { color: var(--green); font-size: 8px; font-weight: 700; }
.learning-ranking-hours { text-align: right; }
.learning-ranking-hours > strong { display: block; font-size: 18px; white-space: nowrap; }
.learning-ranking-hours > strong small { margin-left: 3px; color: var(--muted); font-size: 8px; }
.learning-ranking-hours > span { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.learning-ranking-table { min-width: 760px; table-layout: fixed; }
.learning-ranking-table th:nth-child(1) { width: 8%; }
.learning-ranking-table th:nth-child(2) { width: 14%; }
.learning-ranking-table th:nth-child(3) { width: 18%; }
.learning-ranking-table th:nth-child(4) { width: 48%; }
.learning-ranking-table th:nth-child(5) { width: 12%; text-align: right; }
.learning-ranking-table td { height: 51px; }
.learning-ranking-table td:first-child { color: var(--muted); }
.learning-ranking-table td:last-child { text-align: right; }
.learning-ranking-track { width: 100%; height: 6px; overflow: hidden; border-radius: 3px; background: #e9efec; }
.learning-ranking-track i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.learning-ranking-row-hours { color: var(--green); white-space: nowrap; }
.learning-ranking-row-hours small { margin-left: 3px; color: var(--muted); font-size: 8px; }
.training-record-headbar { min-height: 64px; padding: 12px 16px; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--line); }
.training-record-title-inline { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; column-gap: 19px; row-gap: 6px; }
.training-record-title-inline h2 { margin: 0; font-size: 17px; font-weight: 800; white-space: nowrap; }
.training-record-title-inline > strong { color: #b4232f; font-size: 11px; font-weight: 800; }
.training-record-department-filter { width: 170px; }
.training-record-headbar .training-record-search { width: 220px; }
.training-record-department-filter select, .training-record-search input { width: 100%; height: 35px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; outline: 0; color: var(--ink); background: white; font: inherit; font-size: 11px; }
.training-record-department-filter select:focus, .training-record-search input:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(25,105,81,.1); }
.training-record-search > div { position: relative; }
.training-record-search svg { position: absolute; top: 10px; left: 10px; width: 15px; height: 15px; color: var(--muted); }
.training-record-search input { padding-left: 32px; }
.training-record-headbar > [data-training-record-visible] { min-width: 94px; height: 35px; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; color: var(--muted); font-size: 10px; }
.training-record-entry-actions { display: inline-flex; align-items: center; gap: 7px; }
.training-record-entry-actions .btn { min-height: 35px; white-space: nowrap; font-weight: 800; }
.training-record-summary > .table-wrap { overflow-x: visible; }
.training-record-table { width: 100%; min-width: 0; table-layout: fixed; }
.training-record-table th { padding-inline: 6px; color: var(--ink); font-size: 11px; font-weight: 800; text-align: center; white-space: normal; }
.training-record-table th:first-child { width: 5%; }
.training-record-table th:nth-child(2) { width: 9%; }
.training-record-table th:nth-child(3) { width: 12%; }
.training-record-table th:nth-child(4), .training-record-table th:nth-child(5) { width: 9%; }
.training-record-table th:nth-child(6), .training-record-table th:nth-child(7) { width: 12%; }
.training-record-table th:nth-child(8) { width: 9%; }
.training-record-table th:last-child { width: 23%; }
.training-record-table td { height: 55px; padding-inline: 6px; vertical-align: middle; text-align: center; overflow-wrap: anywhere; }
.training-record-table td[data-training-record-sequence] { color: var(--muted); font-size: 11px; font-weight: 700; }
.training-record-department { color: var(--ink); font-size: 11px; font-weight: 700; }
.training-record-name { max-width: 100%; padding: 0; border: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--green); background: transparent; font-size: 12px; font-weight: 800; text-align: center; cursor: pointer; }
.training-record-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-record-name span { text-decoration: underline; text-underline-offset: 3px; }
.training-record-name:hover span { text-decoration-thickness: 2px; }
.training-record-name:focus-visible { outline: 2px solid var(--green-2); outline-offset: 3px; }
.training-record-count { display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; }
.training-record-count strong { color: var(--ink); font-size: 15px; }
.training-record-count small { color: var(--muted); font-size: 10px; font-weight: 700; }
.training-record-none { color: #9aa5a0; font-size: 10px; }
.training-record-note { display: block; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.55; text-align: center; }
.training-record-pagination { min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 10px; }
.training-record-pagination[hidden] { display: none; }
.training-record-page-controls { display: inline-flex; align-items: center; gap: 5px; }
.training-record-page-controls button { width: 29px; height: 29px; padding: 0; border: 1px solid var(--line); border-radius: 5px; display: grid; place-items: center; color: var(--ink); background: #fff; cursor: pointer; }
.training-record-page-controls button:hover:not(:disabled) { border-color: #91afa3; color: var(--green); background: #f7faf8; }
.training-record-page-controls button:disabled { color: #b4beb9; background: #f5f7f6; cursor: not-allowed; }
.training-record-page-controls button svg { width: 14px; height: 14px; }
.training-record-page-controls strong { min-width: 76px; color: var(--ink); font-size: 10px; text-align: center; }
.training-record-empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); }
.training-record-empty[hidden] { display: none; }
.training-record-empty svg { width: 28px; height: 28px; color: #91a39c; }
.training-record-empty strong { color: var(--ink); font-size: 12px; }
.training-record-empty span { font-size: 9px; }
.benefit-drawer.training-record-drawer { width: min(1180px, 100%); }
.training-record-drawer > header { min-height: 76px; }
.training-record-drawer > header > div > span { display: block; margin-bottom: 4px; color: var(--green); font-size: 9px; font-weight: 800; }
.training-record-profile { min-height: 76px; padding: 14px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); background: #fafcfb; }
.training-record-profile .avatar { flex: 0 0 auto; width: 42px; height: 42px; font-size: 12px; }
.training-record-profile strong, .training-record-profile span { display: block; }
.training-record-profile strong { margin-bottom: 5px; font-size: 13px; }
.training-record-profile span { color: var(--muted); font-size: 9px; }
.training-record-person-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.training-record-person-stats > div { min-height: 76px; padding: 14px 18px; border-right: 1px solid var(--line); display: grid; align-content: center; justify-items: center; gap: 7px; text-align: center; }
.training-record-person-stats > div:last-child { border-right: 0; }
.training-record-person-stats span { color: var(--muted); font-size: 11px; }
.training-record-person-stats strong { display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; font-size: 21px; }
.training-record-person-stats strong b { font: inherit; }
.training-record-person-stats strong small { color: var(--muted); font-size: 11px; font-weight: 700; }
.training-record-detail { padding: 20px; }
.training-record-detail-head { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.training-record-detail-head h3 { margin: 0; font-size: 13px; }
.training-record-detail-head > div { display: flex; align-items: center; gap: 10px; }
.training-record-detail-head span { color: var(--muted); font-size: 9px; }
.training-record-detail-head small { color: var(--muted); font-size: 9px; }
.training-record-detail table { min-width: 1050px; border: 1px solid var(--line); }
.training-record-detail th { color: var(--ink); font-size: 12px; font-weight: 800; text-align: center; }
.training-record-detail th:nth-child(1), .training-record-detail th:nth-child(2) { font-size: 13px; }
.training-record-detail td { vertical-align: middle; text-align: center; }
.training-record-detail td:nth-child(3) strong { display: block; min-width: 140px; }
.training-record-type { color: var(--green); font-weight: 700; }
.training-record-unit { white-space: nowrap; }
.training-record-row-actions { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.training-record-row-actions button { width: 27px; height: 27px; padding: 0; border: 1px solid var(--line); border-radius: 5px; display: grid; place-items: center; color: var(--muted); background: #fff; cursor: pointer; }
.training-record-row-actions button:hover { border-color: #91afa3; color: var(--green); }
.training-record-row-actions button:last-child:hover { border-color: #d8a7aa; color: var(--red); background: var(--red-bg); }
.training-record-row-actions svg { width: 13px; height: 13px; }
.training-record-system { color: var(--muted); font-size: 8px; white-space: nowrap; }
.training-record-editor-backdrop { z-index: 110; }
.benefit-drawer.training-record-editor { width: min(920px, 100%); }
.training-record-editor > header > div > span { display: block; margin-bottom: 4px; color: var(--green); font-size: 9px; font-weight: 800; }
.training-record-editor form { min-height: calc(100% - 76px); display: flex; flex-direction: column; }
.training-record-editor-grid { padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.training-record-editor-grid label { min-width: 0; display: grid; gap: 7px; }
.training-record-editor-grid label.full { grid-column: 1 / -1; }
.training-record-editor-grid label > span { color: var(--ink); font-size: 10px; font-weight: 700; }
.training-record-editor-grid input, .training-record-editor-grid select, .training-record-editor-grid textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; font: inherit; font-size: 11px; outline: 0; }
.training-record-editor-grid input, .training-record-editor-grid select { height: 38px; padding: 0 10px; }
.training-record-editor-grid textarea { padding: 10px; resize: vertical; }
.training-record-editor-grid input:focus, .training-record-editor-grid select:focus, .training-record-editor-grid textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(25,105,81,.1); }
.training-record-editor-grid input[readonly] { color: var(--green); background: var(--mint); font-weight: 700; }
.training-record-photo { margin: 18px 20px 0; padding: 14px; border: 1px solid #cfdcd6; border-radius: 6px; background: #f7faf8; }
.training-record-photo[hidden], .training-record-photo-preview[hidden], .training-record-participants[hidden], .training-record-participant-empty[hidden], .training-record-participant[hidden] { display: none; }
.training-record-photo-picker { min-height: 72px; border: 1px dashed #91afa3; border-radius: 6px; display: grid; place-items: center; color: var(--green); background: #fff; cursor: pointer; }
.training-record-photo-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.training-record-photo-picker > span { padding: 10px; display: grid; grid-template-columns: 28px auto; align-items: center; column-gap: 10px; text-align: left; }
.training-record-photo-picker svg { width: 24px; height: 24px; grid-row: 1 / span 2; }
.training-record-photo-picker strong, .training-record-photo-picker small { display: block; }
.training-record-photo-picker strong { color: var(--ink); font-size: 11px; }
.training-record-photo-picker small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.training-record-photo-preview { margin-top: 12px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; background: #fff; }
.training-record-photo-preview img { width: 64px; height: 52px; border-radius: 4px; object-fit: cover; }
.training-record-photo-preview strong, .training-record-photo-preview span { display: block; overflow-wrap: anywhere; }
.training-record-photo-preview strong { margin-bottom: 5px; font-size: 10px; }
.training-record-photo-preview span { color: var(--green); font-size: 9px; }
.training-record-participants { margin: 0 20px 20px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.training-record-participant-head { min-height: 58px; padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fafcfb; }
.training-record-participant-head strong, .training-record-participant-head span { display: block; }
.training-record-participant-head strong { margin-bottom: 4px; font-size: 11px; }
.training-record-participant-head span { color: var(--muted); font-size: 9px; }
.training-record-participant-head b { flex: 0 0 auto; color: var(--green); font-size: 11px; }
.training-record-participant-tools { padding: 10px 12px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 150px minmax(160px, 1fr) auto auto; gap: 8px; align-items: center; }
.training-record-participant-tools select, .training-record-participant-tools input { width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; font-size: 10px; outline: 0; }
.training-record-participant-tools select { padding: 0 8px; }
.training-record-participant-tools label { position: relative; }
.training-record-participant-tools label svg { position: absolute; top: 9px; left: 9px; width: 14px; height: 14px; color: var(--muted); }
.training-record-participant-tools input { padding: 0 8px 0 29px; }
.training-record-participant-list { max-height: 230px; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
.training-record-participant { min-width: 0; min-height: 52px; padding: 8px 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px; cursor: pointer; }
.training-record-participant:nth-child(3n) { border-right: 0; }
.training-record-participant:hover { background: #f7faf8; }
.training-record-participant input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--green); }
.training-record-participant span { min-width: 0; }
.training-record-participant strong, .training-record-participant small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-record-participant strong { font-size: 10px; }
.training-record-participant small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.training-record-participant-empty { min-height: 72px; display: grid; place-items: center; color: var(--muted); font-size: 10px; }
.training-record-editor form > footer { margin-top: auto; min-height: 64px; padding: 12px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
@media (max-width: 900px) {
  .learning-ranking-podium { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .learning-ranking-head { min-height: 110px; padding-top: 12px; padding-bottom: 12px; align-items: flex-start; flex-direction: column; }
  .learning-ranking-head .learning-ranking-period { width: 100%; }
  .learning-ranking-period label { flex: 1; }
  .learning-ranking-period select { width: 100%; }
  .training-roster-backdrop { align-items: end; padding: 0; }
  .training-roster-dialog { width: 100%; max-height: 84vh; border-radius: 8px 8px 0 0; }
  .learning-course-setting-row { grid-template-columns: 1fr; gap: 9px; padding: 15px; }
  .learning-course-setting-name { margin-bottom: 2px; }
  .learning-course-publish { margin-top: 0; }
  .learning-panel-actions { width: 100%; }
  .learning-panel-actions .btn { flex: 1; justify-content: center; }
  .learning-upload-form { grid-template-columns: 1fr; padding: 15px; }
  .learning-upload-form label.full { grid-column: auto; }
  .job-training-layout { grid-template-columns: 1fr; }
  .department-learning-list { grid-template-columns: 1fr; }
  .department-learning-row:nth-child(odd) { border-right: 0; }
  .department-learning-row:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .department-learning-row { grid-template-columns: 104px minmax(50px, 1fr) 38px; }
  .training-record-headbar { align-items: stretch; flex-direction: column; }
  .training-record-department-filter,
  .training-record-headbar .training-record-search { width: 100%; }
  .training-record-headbar > [data-training-record-visible] { height: auto; margin-left: 0; justify-content: flex-start; }
  .training-record-entry-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .training-record-entry-actions .btn { justify-content: center; }
  .training-record-summary > .table-wrap { overflow: visible; }
  .training-record-table, .training-record-table tbody { width: 100%; display: block; }
  .training-record-table thead { display: none; }
  .training-record-table tbody { padding: 10px; background: #f6f8f7; }
  .training-record-table tr { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; background: #fff; }
  .training-record-table tr:last-child { margin-bottom: 0; }
  .training-record-table tr[hidden] { display: none; }
  .training-record-table td { height: auto; min-height: 57px; padding: 8px; border-bottom: 1px solid var(--line); display: grid; align-content: center; gap: 5px; text-align: center; }
  .training-record-table td:nth-child(odd) { border-right: 1px solid var(--line); }
  .training-record-table td:nth-last-child(-n+2) { border-bottom: 0; }
  .training-record-table td::before { content: attr(data-label); color: var(--muted); font-size: 8px; font-weight: 700; }
  .training-record-pagination { align-items: stretch; flex-direction: column; }
  .training-record-page-controls { justify-content: space-between; }
  .benefit-drawer.training-record-drawer { width: 100%; }
  .training-record-person-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-record-person-stats > div:nth-child(even) { border-right: 0; }
  .training-record-person-stats > div:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
  .training-record-person-stats > div:last-child { grid-column: 1 / -1; border-right: 0; }
  .training-record-detail { padding: 14px; }
  .training-record-detail-head { align-items: flex-start; flex-direction: column; }
  .training-record-detail-head > div { width: 100%; justify-content: space-between; }
  .training-record-editor-grid { grid-template-columns: 1fr; padding: 14px; }
  .training-record-editor-grid label.full { grid-column: auto; }
  .training-record-photo { margin: 14px 14px 0; }
  .training-record-participants { margin: 0 14px 14px; }
  .training-record-participant-tools { grid-template-columns: 1fr 1fr; }
  .training-record-participant-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-record-participant:nth-child(3n) { border-right: 1px solid var(--line); }
  .training-record-participant:nth-child(2n) { border-right: 0; }
}
.demo-note { margin-left: 10px; }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* ===== 人才盘点与 IDP ===== */
.talent-page-head { align-items: flex-end; margin-bottom: 12px; }
.talent-cycle { min-width: 158px; display: grid; gap: 5px; }
.talent-cycle span { color: var(--muted); font-size: 9px; font-weight: 700; }
.talent-cycle select { height: 36px; }
.talent-tabs { width: fit-content; display: inline-grid; grid-template-columns: minmax(180px,1fr) minmax(260px,1fr); gap: 5px; margin-bottom: 12px; padding: 4px; border: 1px solid #d4dfda; border-radius: 12px; background: #eef3f1; box-shadow: 0 4px 12px rgba(25,63,50,.05); }
.talent-tabs button { min-width: 180px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid transparent; border-radius: 8px; color: #50615a; font-size: 12px; font-weight: 750; transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.talent-tabs button svg { width: 18px; height: 18px; stroke-width: 2.2; }
.talent-tabs button:hover:not(.active) { color: var(--green); border-color: #c7d8d1; background: rgba(255,255,255,.72); }
.talent-tabs button.active { color: #fff; border-color: var(--green); background: var(--green); box-shadow: 0 5px 13px rgba(18,111,98,.22); }
.talent-tabs button.active svg { color: #fff; }
.talent-stats { margin-bottom: 12px; }
.talent-stats .stat { min-height: 82px; padding: 14px 16px; }
.talent-stats .stat .value { margin-top: 9px; font-size: 24px; }
.talent-stats .stat .trend { right: 14px; bottom: 13px; }
.talent-structure-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
.talent-structure-stats .label { color: var(--ink); font-size: 13px; font-weight: 800; }
.talent-structure-stats .value { margin-left: 38px; }
.talent-structure-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 18px; margin-bottom: 18px; }
.talent-category-table-wrap { width: 100%; overflow-x: hidden; }
.talent-category-table { width: 100%; min-width: 0; table-layout: fixed; }
.talent-category-table th:first-child { width: 30%; }
.talent-category-table th:nth-child(2) { width: 42%; }
.talent-category-table th:nth-child(3), .talent-category-table th:nth-child(4) { width: 14%; }
.talent-category-table th, .talent-category-table td { overflow-wrap: anywhere; }
.talent-category-table td { height: 46px; }
.talent-bar { width: 100%; height: 8px; overflow: hidden; border-radius: 2px; background: #edf1ef; }
.talent-bar i { display: block; height: 100%; border-radius: 2px; background: var(--green); }
.talent-departments { display: grid; gap: 15px; padding: 19px; }
.talent-department-row { display: grid; grid-template-columns: minmax(100px,1.2fr) minmax(100px,1fr) 30px 42px; gap: 9px; align-items: center; font-size: 10px; }
.talent-department-row > span { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.talent-department-row > div { height: 7px; overflow: hidden; border-radius: 2px; background: #edf1ef; }
.talent-department-row > div i { display: block; height: 100%; background: #2e6799; }
.talent-department-row strong { text-align: right; }
.talent-department-row small { color: var(--muted); text-align: right; }
.talent-insight-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 18px; }
.talent-insights { display: grid; grid-template-columns: 1fr 1fr; }
.talent-insights article { min-height: 108px; display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 18px; border-right: 1px solid var(--line); }
.talent-insights article:last-child { border-right: 0; }
.talent-insights svg { width: 20px; height: 20px; padding: 6px; box-sizing: content-box; border-radius: 5px; color: var(--green); background: var(--mint); }
.talent-insights strong { font-size: 11px; }
.talent-insights p { margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.talent-quality { display: grid; grid-template-columns: repeat(3,1fr); min-height: 108px; }
.talent-quality div { display: grid; align-content: center; justify-items: center; gap: 8px; border-right: 1px solid var(--line); }
.talent-quality div:last-child { border-right: 0; }
.talent-quality span { color: var(--muted); font-size: 9px; text-align: center; }
.talent-quality strong { font-size: 22px; }
.talent-model { margin-bottom: 12px; }
.talent-competency-panel { overflow: hidden; }
.talent-competency-head { min-height: 58px; padding: 8px 15px; }
.talent-competency-head h2 { margin: 0; }
.talent-competency-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.talent-competency-head > span { padding: 6px 9px; border-radius: 5px; color: var(--green); background: var(--mint); font-size: 9px; font-weight: 800; white-space: nowrap; }
.talent-competency-scale, .talent-competency-row { display: grid; grid-template-columns: 148px repeat(4,minmax(0,1fr)); }
.talent-competency-scale { border-bottom: 1px solid var(--line); background: #f8faf9; }
.talent-scale-label { display: grid; align-content: center; padding: 10px 14px; color: var(--muted); font-size: 11px; font-weight: 800; }
.talent-competency-level { min-height: 56px; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-left: 1px solid var(--line); }
.talent-competency-level b { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 6px; font-size: 15px; }
.talent-competency-level strong, .talent-competency-level small { display: block; }
.talent-competency-level strong { font-size: 14px; }
.talent-competency-level small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.talent-competency-level.red b { color: #a84b4b; background: #fff0ef; }
.talent-competency-level.amber b { color: var(--amber); background: var(--amber-bg); }
.talent-competency-level.blue b { color: #2f6f9f; background: #edf4f9; }
.talent-competency-level.green b { color: var(--green); background: var(--mint); }
.talent-competency-row { border-bottom: 1px solid var(--line); }
.talent-competency-dimension { min-height: 88px; display: grid; align-content: center; gap: 5px; padding: 10px 14px; background: #fbfcfb; }
.talent-competency-dimension i { width: 29px; height: 4px; border-radius: 3px; background: var(--green); }
.talent-competency-dimension strong { font-size: 14px; }
.talent-competency-dimension small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.talent-competency-anchor { min-height: 88px; display: grid; align-content: center; gap: 6px; padding: 10px 12px; border-left: 1px solid var(--line); }
.talent-competency-anchor p { margin: 0; color: #35423d; font-size: 12px; line-height: 1.45; }
.talent-competency-anchor > small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.talent-competency-anchor.tone-1 { background: #fffafa; }
.talent-competency-anchor.tone-2 { background: #fffcf6; }
.talent-competency-anchor.tone-3 { background: #f8fbfd; }
.talent-competency-anchor.tone-4 { background: #f7fcfa; }
.talent-anchor-level { display: none; font-size: 9px; font-weight: 800; }
.talent-competency-application { min-height: 40px; display: flex; align-items: center; gap: 18px; padding: 8px 14px; background: #f8faf9; }
.talent-competency-application strong { min-width: 128px; color: var(--muted); font-size: 10px; }
.talent-competency-application span { display: inline-flex; align-items: center; gap: 7px; color: #405049; font-size: 10px; }
.talent-competency-application i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.talent-roster-head { min-height: 54px; gap: 18px; }
.talent-roster-search { width: min(320px,42%); max-width: none; flex: 0 1 320px; }
.talent-roster-search input { height: 34px; }
.talent-roster-table { max-height: none; overflow-x: hidden; }
.talent-roster-table table { width: 100%; min-width: 0; table-layout: fixed; }
.talent-roster-table th:nth-child(1) { width: 17%; }
.talent-roster-table th:nth-child(2) { width: 22%; }
.talent-roster-table th:nth-child(3) { width: 12%; }
.talent-roster-table th:nth-child(4) { width: 11%; }
.talent-roster-table th:nth-child(5) { width: 14%; }
.talent-roster-table th:nth-child(6) { width: 11%; }
.talent-roster-table th:nth-child(7) { width: 13%; }
.talent-roster-table thead { position: sticky; top: 0; z-index: 2; background: white; }
.talent-roster-table th { color: #26342f; font-size: 11px; font-weight: 800; }
.talent-roster-table td { height: 58px; }
.talent-roster-table th, .talent-roster-table td { overflow: hidden; text-overflow: ellipsis; }
.talent-roster-table .person span { min-width: 0; }
.talent-roster-table .person small, .talent-cell-note { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 400; }
.talent-roster-table .idp-open-button { width: 100%; max-width: 116px; min-height: 38px; justify-content: center; margin: 0 auto; padding-right: 8px; padding-left: 8px; color: white; border-color: var(--green); background: var(--green); box-shadow: 0 5px 12px rgba(23,111,92,.2); font-size: 10px; font-weight: 800; }
.talent-roster-table .idp-open-button:hover { color: white; border-color: var(--green-2); background: var(--green-2); }
.talent-roster-table .idp-open-button.is-completed { color: var(--green); background: white; box-shadow: none; }
.talent-roster-table .idp-open-button.is-completed:hover { color: var(--green); border-color: var(--green); background: var(--mint); }
.talent-roster-table .idp-open-button svg { width: 15px; height: 15px; }
.talent-pagination { min-height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); background: #fafcfb; font-size: 10px; }
.talent-pagination[hidden] { display: none; }
.talent-pagination nav { display: flex; align-items: center; justify-content: center; gap: 5px; }
.talent-pagination button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 5px; display: grid; place-items: center; color: var(--ink); background: white; font-weight: 800; cursor: pointer; }
.talent-pagination button.active { color: white; border-color: var(--green); background: var(--green); }
.talent-pagination button:disabled { opacity: .35; cursor: default; }
.talent-pagination button svg { width: 14px; height: 14px; }
.talent-pagination > strong { justify-self: end; color: var(--ink); font-size: 10px; }
.talent-page-ellipsis { width: 18px; text-align: center; }
.talent-conclusion { display: inline-flex; min-height: 23px; align-items: center; padding: 0 7px; border-radius: 4px; color: #66736e; background: #eef1ef; font-size: 9px; font-weight: 700; white-space: nowrap; }
.talent-conclusion.core_backbone { color: var(--green); background: var(--mint); }
.talent-conclusion.focus_development { color: #2e6799; background: #edf4f8; }
.talent-conclusion.needs_improvement { color: var(--amber); background: var(--amber-bg); }
.talent-review-mask { z-index: 130; }
.talent-review-drawer { width: min(640px,94vw); }
.talent-review-drawer form { min-height: 100%; }
.talent-score-field { margin: 0; padding: 17px 0; border: 0; border-bottom: 1px solid var(--line); }
.talent-score-field legend { width: 100%; display: flex; justify-content: space-between; gap: 12px; margin-bottom: 11px; font-size: 11px; font-weight: 750; }
.talent-score-field legend small { color: var(--muted); font-size: 9px; font-weight: 400; }
.talent-score-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.talent-score-options label { cursor: pointer; }
.talent-score-options input { position: absolute; opacity: 0; pointer-events: none; }
.talent-score-options span { min-height: 54px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 5px; background: #fafbfa; font-size: 14px; font-weight: 800; }
.talent-score-options span small { color: var(--muted); font-size: 8px; font-weight: 500; }
.talent-score-options input:checked + span { color: var(--green); border-color: var(--green); background: var(--mint); box-shadow: inset 0 2px var(--green); }
.talent-review-drawer textarea { width: 100%; resize: vertical; }
.idp-open-button { white-space: nowrap; }
.talent-idp-drawer { width: min(1180px,96vw); padding: 0; overflow: hidden; }
.talent-idp-drawer form { height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; overflow: hidden; }
.idp-drawer-scroll { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-bottom: 24px; }
.idp-drawer-head { position: sticky; top: 0; z-index: 5; min-height: 78px; margin: 0; padding: 16px 24px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); }
.idp-drawer-kicker { display: block; margin-bottom: 5px; color: var(--green); font-size: 9px; font-weight: 800; }
.idp-profile-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-bottom: 1px solid var(--line); background: #f7faf8; }
.idp-profile-grid > label, .idp-profile-grid > div { min-height: 94px; display: grid; align-content: center; gap: 7px; padding: 14px 16px; border-right: 1px solid var(--line); }
.idp-profile-grid > :last-child { border-right: 0; }
.idp-profile-grid span { color: var(--muted); font-size: 9px; font-weight: 700; }
.idp-profile-grid select { height: 34px; padding-left: 8px; font-size: 10px; }
.idp-profile-grid strong { color: #2e6799; font-size: 18px; }
.idp-profile-grid small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.idp-form-section { padding: 20px 24px 22px; border-bottom: 1px solid var(--line); }
.idp-section-head { min-height: 38px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.idp-section-head h3 { margin: 0; font-size: 13px; }
.idp-section-head p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.idp-ability-section { background: #f8faf9; }
.idp-career-badge { padding: 7px 10px; border-radius: 5px; color: var(--green); background: var(--mint); font-size: 9px; font-weight: 800; white-space: nowrap; }
.idp-score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.idp-ability-card { min-height: 222px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: white; }
.idp-ability-card > header { min-height: 59px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.idp-ability-card > header > b { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; color: white; background: var(--green); font-size: 13px; }
.idp-ability-card h4 { margin: 0; font-size: 12px; }
.idp-ability-card header p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.idp-ability-card header > span { padding: 6px 8px; border-radius: 5px; color: var(--amber); background: var(--amber-bg); font-size: 8px; font-weight: 800; white-space: nowrap; }
.idp-ability-card header > span.complete { color: var(--green); background: var(--mint); }
.idp-ability-body { padding: 12px 13px; }
.idp-ability-score-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font-size: 8px; }
.idp-ability-score-label strong { color: var(--ink); font-size: 9px; }
.idp-ability-options { gap: 6px; }
.idp-ability-options span { min-height: 54px; border-radius: 5px; }
.idp-ability-options input:checked + span { color: white; border-color: var(--green); background: var(--green); box-shadow: none; }
.idp-ability-options input:checked + span small { color: #dcebe5; }
.idp-ability-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.idp-ability-levels > div { min-height: 45px; padding: 8px 10px; border-radius: 5px; color: #2f6f9f; background: #edf4f9; }
.idp-ability-levels > div:last-child { color: var(--green); background: var(--mint); }
.idp-ability-levels span, .idp-ability-levels strong { display: block; }
.idp-ability-levels span { font-size: 8px; font-weight: 700; }
.idp-ability-levels strong { margin-top: 4px; font-size: 10px; }
.idp-business-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 14px; padding: 14px; border-radius: 7px; background: #f5f8f7; }
.idp-business-grid label { display: grid; gap: 6px; }
.idp-business-grid span { color: var(--muted); font-size: 9px; font-weight: 700; }
.idp-business-grid input { height: 34px; }
.idp-action-table { min-width: 950px; }
.idp-action-table th { white-space: nowrap; }
.idp-action-table td { padding: 7px 6px; }
.idp-action-table th:first-child, .idp-action-table td:first-child { padding-left: 12px; width: 65px; }
.idp-action-table th:last-child, .idp-action-table td:last-child { width: 42px; padding-right: 10px; }
.idp-action-table input, .idp-action-table select { width: 100%; min-width: 84px; height: 32px; padding: 0 7px; font-size: 9px; }
.idp-action-table td:nth-child(2) { width: 24%; }
.idp-action-table td:nth-child(5) { width: 21%; }
.idp-action-table .icon-btn { width: 30px; height: 30px; }
.idp-milestone-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.idp-milestone-grid label { display: grid; gap: 7px; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: #fafbfa; }
.idp-milestone-grid span { color: var(--green); font-size: 10px; font-weight: 800; }
.idp-milestone-grid textarea { min-height: 62px; padding: 9px; border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: 10px; }
.idp-status-grid { display: grid; grid-template-columns: 1.1fr 1fr .8fr 1fr 1fr; gap: 10px; }
.idp-drawer-actions { position: relative; z-index: 6; margin: 0; padding: 13px 24px; border-top: 1px solid var(--line); background: rgba(255,255,255,.98); box-shadow: 0 -8px 22px rgba(30,58,48,.06); }

@media (max-width: 980px) {
  .talent-structure-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .talent-structure-grid, .talent-insight-grid { grid-template-columns: 1fr; }
  .talent-competency-scale, .talent-competency-row { grid-template-columns: 1fr 1fr; }
  .talent-scale-label, .talent-competency-dimension { grid-column: 1 / -1; }
  .talent-competency-level:nth-child(2n), .talent-competency-anchor:nth-child(2n) { border-left: 0; }
  .talent-anchor-level { display: block; }
  .talent-competency-application { align-items: flex-start; flex-wrap: wrap; }
  .idp-profile-grid { grid-template-columns: repeat(3,1fr); }
  .idp-profile-grid > :nth-child(3) { border-right: 0; }
  .idp-profile-grid > :nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .idp-score-grid { grid-template-columns: 1fr; }
  .idp-business-grid, .idp-status-grid { grid-template-columns: 1fr 1fr; }
  .talent-roster-table th:nth-child(3), .talent-roster-table td:nth-child(3) { display: none; }
}
@media (max-width: 680px) {
  .talent-structure-stats { grid-template-columns: 1fr; }
  .talent-page-head { align-items: stretch; }
  .talent-cycle { width: 100%; }
  .talent-tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 14px; }
  .talent-tabs button { min-width: 0; min-height: 50px; padding: 5px 8px; border-radius: 10px; font-size: 11px; line-height: 1.3; }
  .talent-insights, .talent-quality { grid-template-columns: 1fr; }
  .talent-insights article, .talent-quality div { border-right: 0; border-bottom: 1px solid var(--line); }
  .talent-insights article:last-child, .talent-quality div:last-child { border-bottom: 0; }
  .talent-quality div { min-height: 75px; }
  .talent-competency-head, .talent-roster-head { align-items: stretch; flex-direction: column; }
  .talent-competency-head > span { align-self: flex-start; }
  .talent-competency-scale, .talent-competency-row { grid-template-columns: 1fr; }
  .talent-scale-label, .talent-competency-dimension { grid-column: auto; }
  .talent-competency-level, .talent-competency-anchor { border-left: 0; border-top: 1px solid var(--line); }
  .talent-competency-application { display: grid; gap: 9px; }
  .talent-roster-search { width: 100%; flex-basis: auto; }
  .talent-roster-table th:nth-child(4), .talent-roster-table td:nth-child(4), .talent-roster-table th:nth-child(6), .talent-roster-table td:nth-child(6) { display: none; }
  .talent-roster-table th:nth-child(1) { width: 25%; }
  .talent-roster-table th:nth-child(2) { width: 29%; }
  .talent-roster-table th:nth-child(5) { width: 22%; }
  .talent-roster-table th:nth-child(7) { width: 24%; }
  .talent-roster-table .avatar { display: none; }
  .talent-pagination { grid-template-columns: 1fr; }
  .talent-pagination nav { justify-content: flex-start; flex-wrap: wrap; }
  .talent-pagination > strong { display: none; }
  .talent-score-field legend { display: grid; }
  .talent-score-options { grid-template-columns: 1fr 1fr; }
  .talent-idp-drawer { width: 100vw; }
  .idp-profile-grid { grid-template-columns: 1fr 1fr; }
  .idp-profile-grid > * { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line); }
  .idp-profile-grid > :nth-child(even) { border-right: 0 !important; }
  .idp-form-section { padding: 17px 15px; }
  .idp-ability-card > header { grid-template-columns: 38px 1fr; }
  .idp-ability-card header > span { grid-column: 2; justify-self: start; }
  .idp-business-grid, .idp-status-grid, .idp-milestone-grid { grid-template-columns: 1fr; }
  .idp-drawer-actions { padding: 11px 15px; }
}

/* ===== AI 智能中心 ===== */
.ai-page-head { align-items: flex-end; }
.ai-kicker { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--green); font-size: 9px; font-weight: 800; }
.ai-kicker svg { width: 14px; height: 14px; }
.ai-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
.ai-overview > button { min-height: 82px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 1fr auto; gap: 3px 10px; padding: 14px; text-align: left; color: var(--ink); background: var(--paper); border: 1px solid var(--line); cursor: pointer; }
.ai-overview > button > svg { grid-row: 1 / 3; width: 21px; color: var(--green); align-self: center; }
.ai-overview > button span strong,.ai-overview > button span small { display: block; }
.ai-overview > button span strong { font-size: 11px; }
.ai-overview > button span small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.ai-overview > button b { color: var(--green); font-size: 9px; font-weight: 700; }
.ai-overview > button.active { border-color: var(--green); background: #f2f8f5; box-shadow: inset 0 2px var(--green); }
.danger-text { color: var(--red) !important; }
.ai-copilot-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.75fr); gap: 20px; }
.ai-chat-only { grid-template-columns: minmax(0, 1fr); }
.ai-chat-panel { min-height: 590px; display: flex; flex-direction: column; }
.ai-live { display: flex; align-items: center; gap: 5px; color: var(--green); font-size: 9px; }
.ai-live i { width: 6px; height: 6px; border-radius: 50%; background: #28a879; box-shadow: 0 0 0 3px #dff4eb; }
.ai-chat-log { flex: 1; max-height: 390px; overflow-y: auto; padding: 20px; }
.ai-message { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; margin-bottom: 18px; }
.ai-message.user { direction: rtl; }
.ai-message.user > * { direction: ltr; }
.ai-message-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; background: var(--mint); color: var(--green); }
.ai-message.user .ai-message-avatar { color: #fff; background: #60736b; }
.ai-message-avatar svg { width: 15px; }
.ai-message span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; }
.ai-message p { display: inline-block; max-width: 88%; margin: 0; padding: 11px 13px; border: 1px solid var(--line); background: #fafcfa; font-size: 11px; line-height: 1.7; }
.ai-message.user > div:last-child { text-align: right; }
.ai-message.user p { color: white; background: var(--green); border-color: var(--green); text-align: left; }
.ai-message.error p { color: var(--red); background: var(--red-bg); border-color: #ecd0d0; }
.ai-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; color: var(--muted); font-size: 8px; }
.ai-sources svg { width: 11px; height: 11px; }
.ai-sources b { font-weight: 600; }
.ai-sources em { padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-style: normal; }
.ai-agent-list { padding: 4px 16px 10px; }
.ai-agent-list > div { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ai-agent-list > div:last-child { border-bottom: 0; }
.ai-agent-list .todo-icon { width: 30px; height: 30px; }
.ai-agent-list strong, .ai-agent-list small { display: block; }
.ai-agent-list strong { margin-bottom: 3px; font-size: 10px; }
.ai-agent-list small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.ai-thinking { display: flex !important; gap: 4px; }
.ai-thinking i { width: 5px; height: 5px; border-radius: 50%; background: #8da39a; animation: aiPulse 1s infinite alternate; }
.ai-thinking i:nth-child(2) { animation-delay: .2s; }.ai-thinking i:nth-child(3) { animation-delay: .4s; }
@keyframes aiPulse { to { opacity: .25; transform: translateY(-2px); } }
.ai-quick-prompts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 0; border-top: 1px solid var(--line); }
.ai-quick-prompts button { padding: 7px 9px; border: 1px solid var(--line); background: white; color: var(--muted); border-radius: 5px; font-size: 9px; cursor: pointer; }
.ai-quick-prompts button:hover { color: var(--green); border-color: #9ab8ac; }
.ai-composer { margin: 10px 18px 18px; display: grid; grid-template-columns: 1fr 34px; align-items: end; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid #aebcb6; background: white; }
.ai-composer textarea { min-height: 32px; max-height: 90px; padding: 8px 0; border: 0; outline: 0; resize: none; font: inherit; font-size: 11px; }
.ai-composer .icon-btn { color: white; background: var(--green); }
.ai-composer .icon-btn:disabled { opacity: .4; }
.ai-brief-item { min-height: 86px; display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: start; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.ai-brief-item:last-child { border-bottom: 0; }.ai-brief-item strong { font-size: 10px; }.ai-brief-item p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.risk-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--green); }.risk-dot.high { background: var(--red); }.risk-dot.medium { background: var(--amber); }
.ai-module-layout { display: grid; gap: 20px; }
.ai-score { min-width: 120px; display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; }.ai-score strong { color: var(--green); font-size: 13px; }.ai-score .track i { display:block;height:100%;background:var(--green); }
.btn.compact { min-height: 29px; padding: 0 9px; font-size: 9px; }
.ai-disclaimer { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); background: #fafbfa; font-size: 9px; }.ai-disclaimer svg { width: 14px; }
.talent-matrix { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 18px; }.talent-matrix div { min-height: 90px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px solid var(--line); background: #fafbfa; }.talent-matrix strong { font-size: 20px; }.talent-matrix span { color: var(--muted); font-size: 9px; }.talent-matrix .star,.talent-matrix .core { background:#edf6f1; }.talent-matrix .expert { background:#eef4f8; }.talent-matrix .warn { background:#fff7ee; }
.talent-cycle-bar { min-height: 58px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.talent-cycle-bar > div { min-width: 0; display: grid; gap: 4px; }
.talent-cycle-bar strong { font-size: 11px; }
.talent-cycle-bar span:not(.tag) { color: var(--muted); font-size: 9px; }
.risk-list article { min-height: 104px; display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }.risk-list article:last-child { border-bottom:0; }.risk-list strong { font-size:11px; }.risk-list p { margin:6px 0; color:var(--muted); font-size:10px; }.risk-list small { color:#89938f; font-size:8px; }.risk-level { padding:5px 6px; text-align:center; color:var(--amber); background:var(--amber-bg); font-size:8px; font-weight:700; }.risk-level.high { color:var(--red); background:var(--red-bg); }

@media (max-width: 980px) {
  .ai-overview { grid-template-columns: 1fr 1fr; }
  .ai-copilot-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ai-overview { grid-template-columns: 1fr; }
  .ai-chat-panel { min-height: 520px; }
  .talent-matrix { grid-template-columns: 1fr 1fr; }
  .risk-list article { grid-template-columns: 55px 1fr; }
  .risk-list article .btn { grid-column: 2; justify-self: start; }
}
.drawer .hint { color: var(--muted); font-size: 10px; margin: -8px 0 14px; }
.link-btn.danger { color: var(--red); }
.empty-line { padding: 26px; text-align: center; color: var(--muted); font-size: 11px; }
.cell-note { display: block; margin-top: 5px; color: var(--green); font-size: 8px; }
.timeline { display: grid; gap: 0; }
.timeline .titem { position: relative; padding: 0 0 18px 22px; font-size: 11px; }
.timeline .titem::before { content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); }
.timeline .titem::after { content: ""; position: absolute; left: 8.5px; top: 16px; bottom: 0; width: 1px; background: var(--line); }
.timeline .titem:last-child::after { display: none; }
.timeline .titem strong { display: block; margin-bottom: 3px; }
.timeline .titem span { color: var(--muted); font-size: 10px; }
.cal-day .event.leave { background: var(--amber-bg); color: var(--amber); border-left-color: var(--amber); }
.kv { display: grid; grid-template-columns: 88px 1fr; gap: 8px 10px; font-size: 11px; padding: 4px 0 14px; }
.kv span { color: var(--muted); }
select.inline { min-width: 96px; height: 29px; font-size: 10px; padding: 0 22px 0 8px; }
.comment-box { margin: 10px 0 0; }
.comment-box textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; min-height: 56px; padding: 8px 10px; font: inherit; font-size: 11px; }
.approval-salary-editor { padding: 12px; border: 1px solid #cfe7dc; background: #f5fbf8; border-radius: 6px; }
.approval-salary-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #176b50; }
.approval-salary-title svg { width: 17px; height: 17px; }
.approval-salary-title span, .approval-salary-title small { display: block; }
.approval-salary-title small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.approval-salary-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.approval-salary-fields label span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.approval-salary-fields input { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 8px; font: inherit; }
.approval-salary-fields .reason { grid-column: 1 / -1; }

/* ===== 人力资源规划 ===== */
.planning-head { align-items: center; }
.planning-filter { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; }
.planning-filter .btn { min-height: 34px; }
.planning-alert { min-height: 36px; flex: 1; display: flex; align-items: center; gap: 8px; margin-left: 4px; padding: 7px 11px; border: 1px solid #cfe1d8; border-radius: 6px; background: #edf6f1; color: #3b6452; font-size: 10px; }
.planning-alert svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--green); }
.planning-alert strong { color: var(--green); }
.planning-stats { box-shadow: none; }
.planning-stats .stat { min-height: 108px; }
.planning-stats .value { font-size: 25px; }
.planning-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr); gap: 20px; margin-bottom: 20px; }
.planning-legend { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: 9px; }
.planning-legend span { display: flex; align-items: center; gap: 5px; margin: 0; }
.planning-legend i { width: 13px; height: 2px; background: var(--green); }
.planning-legend span:nth-child(2) i { background: #2e6799; }
.planning-legend span:nth-child(3) i { background: #aab5ae; }
.planning-chart { height: 255px; padding: 20px 20px 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 1fr 25px; }
.planning-y { display: flex; flex-direction: column; justify-content: space-between; padding: 0 7px 0 0; color: #89938f; font-size: 8px; text-align: right; }
.planning-plot { position: relative; min-width: 0; overflow: hidden; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.planning-plot > i { position: absolute; left: 0; right: 0; border-top: 1px dashed #e6ebe8; }
.planning-plot > i:nth-child(1) { top: 0; }
.planning-plot > i:nth-child(2) { top: 25%; }
.planning-plot > i:nth-child(3) { top: 50%; }
.planning-plot > i:nth-child(4) { top: 75%; }
.planning-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.planning-x { min-width: 0; display: flex; justify-content: space-around; padding-top: 8px; color: #89938f; font-size: 8px; }
.planning-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.planning-summary div { padding: 11px 15px; border-right: 1px solid var(--line); }
.planning-summary div:last-child { border-right: 0; }
.planning-summary span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; }
.planning-summary strong { font-size: 11px; }
.danger { color: var(--red) !important; }
.planning-depts { padding: 3px 16px 8px; }
.planning-dept { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.planning-dept:last-child { border-bottom: 0; }
.planning-dept strong { display: block; font-size: 11px; }
.planning-dept span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.planning-dept > b { align-self: center; font-size: 14px; }
.planning-dept > b small { font-size: 9px; font-weight: 500; }
.planning-dept .track { grid-column: 1 / -1; height: 4px; }
.planning-dept .track i { display: block; height: 100%; border-radius: inherit; }
.planning-roles table { min-width: 820px; }
.planning-roles { margin-bottom: 20px; }

@media (max-width: 1180px) {
  .planning-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .planning-head { align-items: flex-start; }
  .planning-head .actions { width: 100%; }
  .planning-head .actions .btn { flex: 1; }
  .planning-filter { display: grid; grid-template-columns: 1fr 1fr; }
  .planning-filter .btn { width: 100%; }
  .planning-alert { grid-column: 1 / -1; margin: 0; }
  .planning-legend { display: none; }
  .planning-chart { height: 225px; padding-left: 10px; padding-right: 10px; }
  .planning-summary div { padding: 10px; }
  .planning-roles .panel-head { align-items: flex-start; }
}

/* ===== 招聘模块 ===== */
.recruit-head { align-items: center; }
.recruit-stats { box-shadow: none; }
.recruit-stats .stat { min-height: 108px; }
.recruit-stats .value { font-size: 25px; }
.recruit-stats .blue-dot { background: #2e6799; }
.recruit-stats .amber-dot { background: #b87018; }
.recruit-stats .violet-dot { background: #855f91; }
.recruit-process-overview { margin-bottom: 16px; display: grid; border: 1px solid var(--line); background: white; }
.recruit-process-overview { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.recruit-process-overview > div { min-width: 0; min-height: 76px; padding: 14px; display: flex; align-items: center; gap: 10px; border: 0; border-right: 1px solid var(--line); color: inherit; background: white; text-align: left; }
.recruit-process-overview > div:last-child { border-right: 0; }
.recruit-process-overview i { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; color: #63736d; background: #edf1ef; font-size: 10px; font-style: normal; font-weight: 900; }
.recruit-process-overview span, .recruit-process-overview small { min-width: 0; display: block; }
.recruit-process-overview span { color: #263c35; font-size: 10px; font-weight: 800; }
.recruit-process-overview small { margin-top: 5px; color: var(--muted); font-size: 8px; font-weight: 600; }
.recruit-process-overview .current { background: #eff7f4; }
.recruit-process-overview .current i { color: white; background: var(--green); }
.recruit-workbench-tabs { min-height: 46px; margin-bottom: 12px; padding: 4px; display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: white; }
.recruit-workbench-tabs button { min-height: 36px; padding: 0 14px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 4px; color: #60716b; background: transparent; font-size: 10px; font-weight: 800; }
.recruit-workbench-tabs button svg { width: 15px; }
.recruit-workbench-tabs button span { min-width: 19px; height: 19px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 10px; color: #94601d; background: #fff0d8; font-size: 8px; }
.recruit-workbench-tabs button.active { color: var(--green); background: #e8f2ee; }
.recruit-task-panel { margin-bottom: 20px; }
.recruit-task-list article { min-height: 74px; padding: 12px 16px; display: grid; grid-template-columns: 38px minmax(190px, .8fr) minmax(240px, 1.2fr) auto; align-items: center; gap: 14px; border-top: 1px solid var(--line); }
.recruit-task-list article:first-child { border-top: 0; }
.task-index { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 5px; color: var(--green); background: #e7f1ed; font-size: 9px; font-weight: 900; }
.task-index.warn { color: #9b3b32; background: #fae8e6; }
.task-state strong, .task-state span { display: block; }
.task-state strong { color: #263c35; font-size: 10px; }
.task-state span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.recruitment-summary-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.recruitment-summary-stats .stat { min-width: 0; padding: 16px 13px; }
.recruitment-summary-stats .stat:nth-child(4) { border-right: 1px solid var(--line); }
.recruit-view-switch { padding: 3px; display: flex; gap: 2px; border-radius: 6px; background: #edf2ef; }
.recruit-view-switch button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 700; }
.recruit-view-switch button.active { color: var(--green); background: white; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.recruit-request-panel, .recruit-progress-panel { margin-bottom: 20px; }
.recruit-toolbar { min-height: 63px; }
.recruit-toolbar select { width: 130px; padding: 0 28px 0 10px; }
.recruit-toolbar .search { max-width: 330px; }
.result-count { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.recruit-job-table { min-width: 1310px; }
.recruit-summary-table { min-width: 1020px; }
.recruit-candidate-table { min-width: 1080px; }
.recruit-candidate-table th:last-child, .recruit-candidate-table td:last-child { position: sticky; right: 0; min-width: 188px; border-left: 1px solid var(--line); background: white; z-index: 2; }
.recruit-candidate-table th:last-child { background: #f5f8f6; z-index: 3; }
.summary-total-row td { color: #245547; background: #eff6f3; font-weight: 800; }
.recruit-number { font-size: 12px; font-weight: 800; }
.recruit-number.good { color: var(--green); }
.recruit-number.gap { color: var(--red); }
.serial-col { width: 58px; text-align: center; }
.job-demand-cell { min-width: 200px; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.job-demand-cell strong { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.job-headcount { min-width: 38px; padding: 4px 7px; border-radius: 4px; background: var(--blue-bg); color: var(--blue); font-size: 10px; font-weight: 800; text-align: center; white-space: nowrap; }
.job-symbol { width: 31px; height: 31px; flex: 0 0 31px; border-radius: 6px; background: var(--mint); color: var(--green); display: grid; place-items: center; }
.job-symbol svg { width: 14px; height: 14px; }
.source-tag { min-width: 62px; justify-content: center; }
.table-action { width: 30px; height: 30px; border-radius: 5px; }
.table-action svg { width: 14px; height: 14px; }
.job-delete-col { width: 82px; text-align: center; }
.job-delete-btn { min-width: 60px; justify-content: center; }
.recruit-job-table th.job-delete-col, .recruit-job-table td.job-delete-col { position: sticky; right: 0; min-width: 82px; border-left: 1px solid var(--line); background: white; z-index: 2; }
.recruit-job-table th.job-delete-col { background: #f5f8f6; z-index: 3; }
.recruit-overview-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr); gap: 20px; margin-bottom: 20px; align-items: start; }
.recruit-overview-grid.single-view { grid-template-columns: 1fr; }
.recruit-side.full-view { margin-bottom: 20px; display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 20px; }
.recruit-candidate-panel { min-width: 0; }
.offer-ready-strip { min-height: 66px; padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #cfe0d8; background: #edf6f2; }
.offer-ready-copy { min-width: 0; display: flex; align-items: center; gap: 10px; }
.offer-ready-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 6px; color: white; background: var(--green); }
.offer-ready-icon svg { width: 17px; height: 17px; }
.offer-ready-copy p, .offer-ready-copy strong, .offer-ready-copy p span { margin: 0; display: block; }
.offer-ready-copy strong { color: #173d31; font-size: 11px; }
.offer-ready-copy p span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.offer-ready-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cell-sub { margin-top: 4px; display: block; color: var(--muted); font-size: 9px; }
.payment-delivery-detail { max-width: 220px; overflow-wrap: anywhere; line-height: 1.45; }
.payment-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.payment-simulation-drawer { width: min(900px, 100vw); }
.payment-simulation-notice { margin: 0 18px 14px; padding: 12px 14px; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 10px; align-items: center; color: #744b12; background: #fff7e8; border-left: 3px solid #c8872e; }
.payment-simulation-notice svg { width: 19px; }
.payment-simulation-notice strong, .payment-simulation-notice span { display: block; }
.payment-simulation-notice strong { font-size: 10px; }
.payment-simulation-notice span { margin-top: 3px; font-size: 8px; line-height: 1.55; }
.payment-simulation-steps { margin: 0 18px 16px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); }
.payment-simulation-steps > div { min-height: 70px; padding: 12px 14px; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; align-items: center; color: #78857f; border-right: 1px solid var(--line); background: #fafcfb; }
.payment-simulation-steps > div:last-child { border-right: 0; }
.payment-simulation-steps b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #65756e; background: #e9efec; font-size: 10px; }
.payment-simulation-steps strong, .payment-simulation-steps small { display: block; }
.payment-simulation-steps strong { font-size: 10px; }
.payment-simulation-steps small { margin-top: 3px; font-size: 8px; font-weight: 400; }
.payment-simulation-steps > div.active { color: var(--green); background: #eff7f3; box-shadow: inset 0 -3px var(--green); }
.payment-simulation-steps > div.active b, .payment-simulation-steps > div.done b { color: white; background: var(--green); }
.payment-simulation-steps > div.done { color: #3b6557; }
.payment-simulation-stage { min-height: 430px; margin: 0 18px 14px; }
.payment-employee-preview { width: min(660px,100%); margin: auto; border: 1px solid #d5e0db; background: #fff; box-shadow: 0 10px 30px rgba(23,51,42,.08); }
.payment-employee-preview > header { min-height: 52px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: #104a3d; }
.payment-demo-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; }
.payment-demo-brand svg { width: 18px; }
.payment-employee-preview > header em { font-size: 8px; font-style: normal; opacity: .8; }
.payment-demo-title { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.payment-demo-title h3 { margin: 0 0 5px; font-size: 16px; }
.payment-demo-title p { margin: 0; color: var(--muted); font-size: 9px; }
.payment-demo-person { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); background: #f7faf8; border-bottom: 1px solid var(--line); }
.payment-demo-person div { min-width: 0; padding: 10px 14px; border-right: 1px solid var(--line); }
.payment-demo-person div:last-child { border-right: 0; }
.payment-demo-person span, .payment-demo-person strong { display: block; }
.payment-demo-person span { color: var(--muted); font-size: 7px; }
.payment-demo-person strong { margin-top: 4px; overflow-wrap: anywhere; font-size: 9px; }
.payment-demo-form { padding: 16px 20px 20px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 14px; }
.payment-demo-form h4 { grid-column: 1/-1; margin: 5px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; }
.payment-demo-form h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.payment-demo-form label { min-width: 0; display: grid; gap: 6px; }
.payment-demo-form label > span { font-size: 8px; font-weight: 700; }
.payment-demo-form input, .payment-demo-form select, .payment-demo-upload button { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #cdd9d3; border-radius: 3px; color: var(--ink); background: #fff; font: inherit; font-size: 9px; }
.payment-demo-form input:focus, .payment-demo-form select:focus { outline: 2px solid rgba(20,91,73,.12); border-color: var(--green); }
.payment-demo-upload button { display: flex; align-items: center; gap: 7px; color: var(--green); cursor: pointer; }
.payment-demo-upload button svg { width: 16px; }
.payment-simulation-result { min-height: 72px; padding: 14px 16px; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 11px; align-items: center; color: #245f4d; background: #eaf5f0; border-left: 3px solid var(--green); }
.payment-simulation-result.finance { color: #234f6d; background: #eef5fa; border-color: #4d7ea0; }
.payment-simulation-result svg { width: 23px; }
.payment-simulation-result strong, .payment-simulation-result span { display: block; }
.payment-simulation-result strong { font-size: 11px; }
.payment-simulation-result span { margin-top: 4px; color: #526b62; font-size: 8px; line-height: 1.55; }
.payment-simulation-review-head, .payment-finance-preview-head { margin-top: 14px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); }
.payment-simulation-review-head div > span, .payment-simulation-review-head strong, .payment-simulation-review-head small { display: block; }
.payment-simulation-review-head div > span { color: var(--muted); font-size: 8px; }
.payment-simulation-review-head strong { margin-top: 4px; font-size: 11px; }
.payment-simulation-review-head small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.payment-simulation-stage > .form-section { margin-left: 0; margin-right: 0; }
.payment-simulation-stage > .payment-review-grid { margin-left: 0; margin-right: 0; }
.payment-simulation-stage > .payment-qr-review { margin-left: 0; margin-right: 0; }
.payment-demo-qr > div { min-height: 58px; display: flex; align-items: center; gap: 10px; color: var(--green); }
.payment-demo-qr svg { width: 28px; }
.payment-finance-preview-head h3 { margin: 0; font-size: 12px; }
.payment-finance-preview-head p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.payment-finance-preview { border: 1px solid var(--line); border-top: 0; }
.payment-finance-preview table { min-width: 1500px; }
.payment-finance-preview th, .payment-finance-preview td { white-space: nowrap; font-size: 8px; }
.payment-finance-note { margin-top: 12px; padding: 11px 13px; display: flex; align-items: flex-start; gap: 8px; color: #536a62; background: #f3f7f5; font-size: 8px; line-height: 1.55; }
.payment-finance-note svg { width: 16px; flex: 0 0 auto; }
.payment-simulation-actions { position: sticky; }
.cell-link { display: inline-flex; margin: 5px 0; color: var(--green); font-size: 8px; font-weight: 800; text-decoration: none; }
.cell-link:hover { text-decoration: underline; }
.payment-delivery-drawer { width: min(680px, 100vw); }
.payment-delivery-state { margin: 0 18px 14px; padding: 13px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; color: #874f18; background: #fff6e7; border-left: 3px solid #b87018; }
.payment-delivery-state.ready { color: #315b4c; background: #edf6f2; border-color: var(--green); }
.payment-delivery-state.confirmed { color: #245f4d; background: #e5f4ed; }
.payment-delivery-state svg { width: 20px; }
.payment-delivery-state strong, .payment-delivery-state span, .payment-delivery-state small { display: block; }
.payment-delivery-state strong { font-size: 11px; }
.payment-delivery-state span { margin-top: 3px; font-size: 9px; line-height: 1.5; }
.payment-delivery-state small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.payment-delivery-meta { margin: 0 18px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.payment-delivery-meta > div { min-width: 0; min-height: 62px; padding: 10px 12px; border-right: 1px solid var(--line); }
.payment-delivery-meta > div:last-child { border-right: 0; }
.payment-delivery-meta span, .payment-delivery-meta strong { display: block; }
.payment-delivery-meta span { color: var(--muted); font-size: 8px; }
.payment-delivery-meta strong { margin-top: 6px; overflow-wrap: anywhere; font-size: 9px; }
.payment-message-preview, .payment-fields-preview { margin: 0 18px 14px; }
.payment-message-preview > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 8px; }
.payment-message-preview article { padding: 16px; color: #14382e; background: #f4f7f5; border: 1px solid #d4e0da; }
.payment-message-preview h3 { margin: 0 0 7px; font-size: 12px; }
.payment-message-preview p { margin: 0 0 13px; color: #536a62; font-size: 9px; line-height: 1.6; }
.payment-message-preview button { min-height: 34px; padding: 0 14px; border: 0; color: #fff; background: var(--green); font: inherit; font-weight: 800; }
.payment-fields-preview { border: 1px solid var(--line); }
.payment-delivery-drawer .sticky-actions { position: static; margin-bottom: 0; }
.payment-fields-preview h3 { margin: 0; padding: 11px 13px; font-size: 10px; border-bottom: 1px solid var(--line); }
.payment-fields-preview ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; counter-reset: payment-fields; }
.payment-fields-preview li { min-height: 44px; padding: 9px 12px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); counter-increment: payment-fields; font-size: 9px; }
.payment-fields-preview li:nth-child(2n) { border-right: 0; }
.payment-fields-preview li::before { content: counter(payment-fields); width: 20px; height: 20px; display: grid; place-items: center; color: var(--green); background: var(--mint); border-radius: 50%; font-size: 8px; font-weight: 800; }
.payment-review-drawer { width: min(720px, 100vw); }
.payment-security-note { min-height: 62px; margin: 0 18px 16px; padding: 11px 13px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 10px; color: #35564b; background: #edf6f2; }
.payment-security-note svg { width: 19px; color: var(--green); }
.payment-security-note strong, .payment-security-note span { display: block; }
.payment-security-note strong { margin-bottom: 3px; font-size: 10px; }
.payment-security-note span { font-size: 8px; line-height: 1.5; }
.payment-review-drawer > .form-section { margin-left: 18px; margin-right: 18px; }
.payment-review-grid { margin: 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.payment-review-grid.bank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payment-review-grid > div { min-width: 0; min-height: 66px; padding: 11px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.payment-review-grid span, .payment-review-grid strong { display: block; }
.payment-review-grid span { color: var(--muted); font-size: 8px; }
.payment-review-grid strong { margin-top: 6px; overflow-wrap: anywhere; font-size: 10px; }
.payment-qr-review { margin: 14px 18px 0; padding: 12px; border: 1px solid var(--line); }
.payment-qr-review > span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 8px; }
.payment-qr-review img { width: min(240px, 100%); aspect-ratio: 1; object-fit: contain; border: 1px solid var(--line); }
.payment-qr-review > strong { font-size: 10px; }
.stage-select { min-width: 108px; }
.recruit-side { min-width: 0; }
.recruit-pipeline { gap: 15px; padding: 18px; }
.recruit-pipeline .pipe-row { grid-template-columns: 64px 1fr 24px; }
.interview-item { padding: 12px 14px; }
.todo-icon.red { background: var(--red-bg); color: var(--red); }
.interview-actions { display: flex; gap: 4px; }
.job-progress { min-width: 180px; display: flex; align-items: center; gap: 9px; }
.job-progress .track { width: 90px; height: 5px; overflow: hidden; border-radius: 3px; background: #edf0ee; }
.job-progress .track i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.job-progress span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.recruit-progress-panel table { min-width: 1180px; }
.cell-note { max-width: 180px; margin-top: 4px; display: block; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.offer-candidate-summary { min-height: 76px; margin: 0 18px 8px; padding: 13px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); background: #f7faf8; }
.offer-candidate-summary > div:nth-child(2) { min-width: 0; flex: 1; }
.offer-candidate-summary strong, .offer-candidate-summary span { display: block; }
.offer-candidate-summary span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.offer-candidate-summary > .tag { margin: 0; }
.offer-section-head { margin: 16px 18px 8px; padding-top: 14px; display: flex; align-items: flex-start; gap: 10px; border-top: 1px solid var(--line); }
.offer-section-head i { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 9px; font-style: normal; font-weight: 900; }
.offer-section-head h3, .offer-section-head p { margin: 0; }
.offer-section-head h3 { color: #1d332c; font-size: 11px; }
.offer-section-head p { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.form-grid3 { padding: 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mail-config-bar { min-height: 60px; margin: 0 18px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #ead9bd; background: #fff8eb; }
.mail-config-bar.ready { border-color: #c8ddd4; background: #eff7f4; }
.mail-config-bar > svg { width: 18px; flex: 0 0 18px; color: #a16b20; }
.mail-config-bar.ready > svg { color: var(--green); }
.mail-config-bar > div { min-width: 0; flex: 1; }
.mail-config-bar strong, .mail-config-bar span { display: block; }
.mail-config-bar strong { font-size: 10px; }
.mail-config-bar span { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.mail-settings-panel { margin: 8px 18px 0; padding: 12px 0; border: 1px solid var(--line); background: #f8faf9; }
.mail-settings-panel .form-grid2, .mail-settings-panel .form-grid3 { padding: 0 12px; }
.mail-settings-actions { padding: 4px 12px 0; display: flex; justify-content: flex-end; }
.input-action { display: flex; gap: 6px; }
.input-action input { min-width: 0; flex: 1; }
.mail-send-result { min-height: 48px; margin: 8px 18px 0; padding: 9px 12px; display: flex; align-items: center; gap: 8px; }
.mail-send-result.failed { color: #913b32; background: #fae9e7; }
.mail-send-result svg { width: 17px; flex: 0 0 17px; }
.mail-send-result span, .mail-send-result strong { display: block; }
.mail-send-result span { font-size: 8px; }
.mail-send-result strong { margin-bottom: 3px; font-size: 9px; }
.mail-settings-drawer { width: min(620px, 100vw); }
.mail-config-intro { min-height: 66px; margin: 0 18px 12px; padding: 11px 13px; display: flex; align-items: center; gap: 10px; color: #39574d; background: #edf6f2; }
.mail-config-intro > svg { width: 20px; flex: 0 0 20px; color: var(--green); }
.mail-config-intro p, .mail-config-intro strong, .mail-config-intro span { margin: 0; display: block; }
.mail-config-intro strong { font-size: 10px; }
.mail-config-intro span { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.mail-test-box { margin: 12px 18px 80px; padding: 10px 0 2px; border-top: 1px solid var(--line); }
.offer-materials { padding: 0 18px 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.offer-materials label { min-height: 42px; padding: 9px 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 5px; color: #4e5c56; font-size: 10px; }
.offer-materials label.selected { color: var(--green); border-color: #bdd8cc; background: #f0f7f4; }
.offer-materials input { accent-color: var(--green); }
.offer-link-placeholder, .offer-link-result { min-height: 62px; margin: 0 18px; padding: 11px 13px; display: flex; align-items: center; gap: 10px; border: 1px dashed #b9d3c8; color: var(--green); background: #f3f8f6; }
.offer-link-placeholder > svg { width: 20px; }
.offer-link-placeholder p, .offer-link-placeholder strong, .offer-link-placeholder span { display: block; margin: 0; }
.offer-link-placeholder strong { font-size: 10px; }
.offer-link-placeholder span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.offer-link-result > div { min-width: 0; flex: 1; }
.offer-link-result span, .offer-link-result a { display: block; }
.offer-link-result span { font-size: 9px; font-weight: 800; }
.offer-link-result a { margin-top: 5px; overflow: hidden; color: var(--blue); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.offer-flow-note { margin: 12px 18px 80px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; color: #5f6e68; background: var(--soft); font-size: 9px; line-height: 1.6; }
.offer-flow-note svg { width: 17px; flex: 0 0 17px; color: var(--green); }
.onboarding-review-tabs { margin: 0 18px 12px; padding: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: #edf2ef; }
.onboarding-review-tabs button { min-height: 37px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 800; }
.onboarding-review-tabs button svg { width: 15px; }
.onboarding-review-tabs button.active { color: var(--green); background: white; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.review-scope-note { min-height: 54px; margin: 0 18px 8px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; color: #53655e; background: #edf6f2; font-size: 9px; line-height: 1.55; }
.review-scope-note.employee { background: #edf4f8; }
.review-scope-note svg { width: 18px; flex: 0 0 18px; color: var(--green); }
.review-scope-note strong { margin-right: 7px; color: #1f493c; }
.checklist-review-head { min-height: 54px; margin: 0 18px; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.checklist-review-head > div { min-width: 0; }
.checklist-review-head strong, .checklist-review-head span { display: block; }
.checklist-review-head strong { font-size: 11px; }
.checklist-review-head span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.review-checklist-large { margin-top: 0; padding: 10px 18px 90px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.review-checklist-large label { min-width: 0; min-height: 62px; padding: 10px 12px; display: grid; grid-template-columns: 19px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid #d9e1dd; border-radius: 5px; color: var(--ink); background: white; cursor: pointer; }
.review-checklist-large label:hover { border-color: #9bb8ac; background: #fafcfb; }
.review-checklist-large label.complete { border-color: #b8d7ca; background: #eef7f3; }
.review-checklist-large input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.review-checklist.review-checklist-large label > span { min-height: 0; padding: 0; display: block; border: 0; border-radius: 0; color: inherit; background: transparent; }
.review-checklist-large label strong, .review-checklist-large label small { display: block; }
.review-checklist-large label strong { overflow-wrap: anywhere; font-size: 10px; line-height: 1.4; }
.review-checklist-large label small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.review-checklist-large label em { color: #9b6a22; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.review-checklist-large label.complete em { color: var(--green); }
.combined-archive-intro { min-height: 64px; margin: 0 18px 10px; padding: 11px 13px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: #31594b; background: #edf6f2; border-left: 3px solid var(--green); }
.combined-archive-intro > svg { width: 19px; color: var(--green); }
.combined-archive-intro strong, .combined-archive-intro span { display: block; }
.combined-archive-intro strong { font-size: 10px; }
.combined-archive-intro span { margin-top: 3px; color: #60736b; font-size: 8px; line-height: 1.5; }
.combined-archive-intro > em { padding: 5px 8px; color: var(--green); background: white; border: 1px solid #c9ddd4; border-radius: 4px; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.combined-archive-legend { margin: 0 18px 10px; display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 8px; }
.combined-archive-legend span { display: inline-flex; align-items: center; gap: 5px; }
.combined-archive-legend i { width: 8px; height: 8px; background: var(--blue); border-radius: 50%; }
.combined-archive-legend .hr i { background: var(--green); }
.combined-archive-legend .checklist i { background: #b87018; }
.combined-archive-document { margin: 0 18px; padding-bottom: 92px; border: 1px solid #cfdad5; background: white; }
.combined-archive-document > header { min-height: 72px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--green); }
.combined-archive-document > header strong, .combined-archive-document > header span { display: block; }
.combined-archive-document > header strong { font-size: 15px; }
.combined-archive-document > header span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.combined-archive-document > header em { color: var(--green); font-size: 8px; font-style: normal; font-weight: 800; }
.combined-archive-section { padding: 14px 15px 0; }
.combined-archive-section h3 { margin: 0 0 7px; padding: 0 0 6px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 10px; }
.combined-archive-section h3 em { padding: 3px 6px; color: #2e6799; background: #edf4f8; border-radius: 3px; font-size: 7px; font-style: normal; }
.combined-archive-section.hr h3 em { color: var(--green); background: var(--mint); }
.combined-archive-section.checklist h3 em { color: #9b651b; background: var(--amber-bg); }
.combined-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.combined-archive-grid > div { min-width: 0; min-height: 55px; padding: 9px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.combined-archive-grid span, .combined-archive-grid strong { display: block; }
.combined-archive-grid span { color: var(--muted); font-size: 8px; }
.combined-archive-grid strong { margin-top: 6px; overflow-wrap: anywhere; font-size: 9px; }
.combined-archive-grid .missing { background: #fffbf4; }
.combined-archive-grid .missing strong { color: #a3681b; }
.checklist-settings-drawer { width: min(680px, 100vw); }
.checklist-settings-intro { min-height: 58px; margin: 0 18px 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; color: #39574d; background: #edf6f2; font-size: 9px; line-height: 1.5; }
.checklist-settings-intro svg { width: 18px; flex: 0 0 18px; color: var(--green); }
.checklist-settings-list { margin: 0 18px; display: grid; gap: 8px; }
.checklist-settings-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 72px 36px; gap: 8px; align-items: center; }
.checklist-settings-row > input[type="text"] { min-width: 0; height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--ink); font: inherit; font-size: 10px; }
.checklist-settings-row > input[type="text"]:focus { outline: 2px solid rgba(20, 100, 74, .15); border-color: var(--green); }
.checklist-required-toggle { height: 40px; padding: 0 9px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 9px; cursor: pointer; }
.checklist-required-toggle input { accent-color: var(--green); }
.checklist-add-btn { margin: 12px 18px 90px; }
.collection-settings-drawer { width: min(820px, 100vw); }
.collection-settings-summary { min-height: 54px; margin: 0 18px 12px; padding: 9px 12px; display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid var(--line); background: #fafbfa; }
.collection-settings-summary > div { display: flex; align-items: baseline; gap: 5px; }
.collection-settings-summary strong { color: var(--green); font-size: 18px; }
.collection-settings-summary span { color: var(--muted); font-size: 8px; font-weight: 800; }
.collection-settings-summary p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.collection-settings-labels, .collection-settings-row { margin: 0 18px; display: grid; grid-template-columns: 34px minmax(260px, 1fr) 88px 92px 36px; align-items: center; gap: 8px; }
.collection-settings-labels { min-height: 30px; color: var(--muted); font-size: 8px; font-weight: 800; }
.collection-settings-list { display: grid; gap: 8px; }
.collection-settings-row { min-height: 46px; }
.collection-settings-row > strong { color: #74827c; font-size: 9px; text-align: center; }
.collection-settings-row > input, .collection-settings-row > select { min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: white; font: inherit; font-size: 9px; }
.collection-settings-row > input:focus, .collection-settings-row > select:focus { outline: 2px solid rgba(20, 100, 74, .14); border-color: var(--green); }
.collection-settings-row.disabled > input, .collection-settings-row.disabled > select { color: #86928d; background: #f4f6f5; }
.collection-enabled-toggle { height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 5px; color: #53635c; background: white; font-size: 8px; font-weight: 800; cursor: pointer; }
.collection-enabled-toggle input { accent-color: var(--green); }
.collection-settings-loading { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 9px; }
.collection-settings-loading svg { width: 18px; animation: contract-spin 1s linear infinite; }
.collection-settings-add { margin: 12px 18px 90px; }
.packet-panel-head { min-height: 70px; }
.packet-panel-title { min-width: 0; display: flex; align-items: center; gap: 18px; }
.packet-panel-title > h2 { flex: 0 0 auto; }
.packet-status-detail { min-width: 0; display: flex; align-items: center; gap: 6px; }
.packet-status-detail > span { min-height: 28px; margin: 0; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 4px; color: #5f7069; background: #f8faf9; font-size: 9px; font-weight: 800; white-space: nowrap; }
.packet-status-detail > span > i { width: 6px; height: 6px; border-radius: 50%; background: #8c9893; }
.packet-status-detail > span > strong { min-width: 14px; color: var(--ink); font-size: 11px; text-align: center; }
.packet-status-detail > .pending > i { background: #b87018; }
.packet-status-detail > .unread > i { background: #2e6799; }
.packet-status-detail > .unsigned > i { background: #8b6b9d; }
.packet-status-detail > .signed { border-color: #bdd8cc; color: var(--green); background: #edf7f2; }
.packet-status-detail > .signed > i { background: var(--green); }
.onboarding-packet-catalog { padding: 15px 18px 18px; border-bottom: 1px solid var(--line); background: #f8faf9; }
.onboarding-packet-catalog-head { min-height: 36px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onboarding-packet-catalog-head > div strong, .onboarding-packet-catalog-head > div span { display: block; }
.onboarding-packet-catalog-head > div strong { font-size: 11px; }
.onboarding-packet-catalog-head > div span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.onboarding-packet-catalog-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.onboarding-packet-item { min-width: 0; min-height: 66px; padding: 10px 11px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid #dbe4e0; border-radius: 6px; color: var(--ink); background: white; font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.onboarding-packet-item:hover, .onboarding-packet-item:focus-visible { border-color: #88aa9c; box-shadow: 0 5px 14px rgba(25, 67, 52, .08); outline: 0; transform: translateY(-1px); }
.onboarding-packet-item-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--green); background: #e7f2ed; border-radius: 6px; }
.onboarding-packet-item-icon svg { width: 17px; height: 17px; }
.onboarding-packet-item-copy { min-width: 0; }
.onboarding-packet-item-copy strong, .onboarding-packet-item-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-packet-item-copy strong { font-size: 10px; }
.onboarding-packet-item-copy small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.onboarding-packet-item-action { display: inline-flex; align-items: center; gap: 3px; color: var(--green); font-size: 8px; font-weight: 800; white-space: nowrap; }
.onboarding-packet-item-action.pending { color: #a66b15; }
.onboarding-packet-item-action svg { width: 12px; height: 12px; }
.onboarding-packet-item.job-description-entry { border-color: #9dc9b7; background: #f2f8f5; }
.onboarding-packet-item.job-description-entry:hover { border-color: var(--green); background: #e9f4ef; }
.onboarding-packet-empty { width: 100%; min-height: 76px; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-content: center; column-gap: 9px; padding: 12px; border: 1px dashed #c7d5cf; border-radius: 6px; color: var(--muted); background: white; text-align: left; cursor: pointer; }
.onboarding-packet-empty svg { grid-row: 1 / 3; width: 22px; color: var(--green); }
.onboarding-packet-empty strong, .onboarding-packet-empty span { display: block; }
.onboarding-packet-empty strong { color: var(--ink); font-size: 10px; }
.onboarding-packet-empty span { margin-top: 4px; font-size: 8px; }
.packet-dispatch-table { min-width: 1120px; }
.job-description-cell { min-width: 190px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3px 7px; }
.job-description-cell > strong, .job-description-cell > small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-description-cell > strong { font-size: 9px; }
.job-description-cell > small { grid-column: 2; color: var(--muted); font-size: 7px; }
.job-description-cell > .link-btn { grid-column: 2; width: max-content; padding: 2px 0; font-size: 8px; }
.job-description-cell > .job-description-select-trigger { grid-column: 1 / -1; width: max-content; margin-top: 3px; }
.drawer.wide.job-description-picker { width: min(920px, 100vw); display: flex; flex-direction: column; overflow: hidden; }
.job-description-review-state { min-height: 68px; margin: 0 18px 12px; padding: 11px 12px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid #dfc996; color: #76511d; background: #fff8e9; }
.job-description-review-state.matched { border-color: #b8d4c8; color: #245b49; background: #edf7f2; }
.job-description-review-state > svg { width: 20px; }
.job-description-review-state strong, .job-description-review-state span { display: block; }
.job-description-review-state strong { font-size: 10px; }
.job-description-review-state span { margin-top: 4px; font-size: 8px; }
.job-description-search { height: 42px; margin: 0 18px 10px; padding: 0 11px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid var(--line); background: white; }
.job-description-search svg { width: 15px; color: var(--muted); }
.job-description-search input { min-width: 0; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: 9px; }
.job-description-search span { color: var(--muted); font-size: 8px; }
.job-description-list { min-height: 210px; max-height: 46vh; margin: 0 18px; overflow-y: auto; border: 1px solid var(--line); background: #f7f9f8; }
.job-description-option { min-height: 62px; padding: 7px 8px 7px 11px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); background: white; }
.job-description-option:last-child { border-bottom: 0; }
.job-description-option.selected { box-shadow: inset 3px 0 var(--green); background: #edf6f2; }
.job-description-option > button:first-child { min-width: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 9px; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.job-description-radio { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #9db2a9; border-radius: 50%; color: white; background: white; }
.job-description-option.selected .job-description-radio { border-color: var(--green); background: var(--green); }
.job-description-radio svg { width: 12px; }
.job-description-option strong, .job-description-option small, .job-description-option em { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-description-option strong { font-size: 10px; }
.job-description-option small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.job-description-option em { margin-top: 3px; color: #87928d; font-size: 7px; font-style: normal; }
.job-description-selected { min-height: 54px; margin: 10px 18px 0; padding: 8px 10px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 9px; color: #245b49; background: #edf6f2; }
.job-description-selected > svg { width: 17px; }
.job-description-selected strong, .job-description-selected small { display: block; }
.job-description-selected strong { font-size: 9px; }
.job-description-selected small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.drawer.wide.packet-items-settings-drawer { width: min(1180px, 100vw); }
.drawer.wide.job-description-library-drawer { width: min(1120px, 100vw); display: flex; flex-direction: column; overflow: hidden; }
.job-description-assignee { margin: 0 18px 12px; display: grid; grid-template-columns: minmax(280px, .75fr) minmax(360px, 1.25fr); gap: 12px; }
.job-description-assignee > label { min-width: 0; display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 8px; }
.job-description-assignee > label > span { color: var(--ink); font-size: 9px; font-weight: 800; }
.job-description-assignee select { width: 100%; min-width: 0; height: 44px; padding: 0 34px 0 11px; border: 1px solid #a9c9bc; border-radius: 5px; color: var(--ink); background: white; font: inherit; font-size: 9px; }
.job-description-assignee select:focus { outline: 2px solid rgba(20, 100, 74, .15); border-color: var(--green); }
.job-description-current { min-width: 0; min-height: 54px; padding: 8px 11px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 9px; color: var(--green); border-left: 3px solid var(--green); background: #eef7f3; }
.job-description-current.empty { color: #80602b; border-left-color: #c49955; background: #fff8ec; }
.job-description-current > svg { width: 18px; }
.job-description-current strong, .job-description-current small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-description-current strong { font-size: 9px; }
.job-description-current small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.job-description-workspace { min-height: 0; flex: 1; margin: 0 18px 12px; display: grid; grid-template-columns: 190px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); background: white; }
.job-description-departments { min-width: 0; padding: 12px 8px; overflow-y: auto; border-right: 1px solid var(--line); background: #f4f7f5; }
.job-description-departments > strong { display: block; padding: 0 8px 8px; color: var(--muted); font-size: 8px; }
.job-description-departments button { width: 100%; min-height: 38px; padding: 7px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; border-left: 3px solid transparent; color: #3f5049; background: transparent; text-align: left; cursor: pointer; }
.job-description-departments button:hover { background: #e9f1ed; }
.job-description-departments button.active { border-left-color: var(--green); color: var(--green); background: #e2efe9; font-weight: 800; }
.job-description-departments button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.job-description-departments button b { min-width: 24px; color: var(--muted); font-size: 8px; text-align: right; }
.job-description-library-content { min-width: 0; min-height: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.job-description-library-content .job-description-search { flex: 0 0 42px; width: 100%; margin: 0; }
.job-description-library-content .job-description-list { min-height: 0; max-height: none; flex: 1; margin: 0; }
.job-description-library-row { min-width: 0; min-height: 72px; padding: 9px 10px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); background: white; }
.job-description-library-row:last-child { border-bottom: 0; }
.job-description-library-row.selected { box-shadow: inset 3px 0 var(--green); background: #eef7f3; }
.job-description-file-icon { width: 28px; height: 34px; display: grid; place-items: center; color: var(--green); background: #e7f2ed; }
.job-description-file-icon svg { width: 16px; }
.job-description-file-copy { min-width: 0; }
.job-description-file-copy small, .job-description-file-copy strong, .job-description-file-copy em { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-description-file-copy small { color: var(--green); font-size: 8px; }
.job-description-file-copy strong { margin-top: 3px; color: var(--ink); font-size: 10px; }
.job-description-file-copy em { margin-top: 3px; color: var(--muted); font-size: 7px; font-style: normal; }
.job-description-file-actions { display: flex; align-items: center; gap: 7px; }
.job-description-file-actions .btn { min-width: 88px; white-space: nowrap; }
.job-description-file-actions .btn.primary { min-width: 118px; }
.job-description-file-actions .lucide-loader-circle { animation: spin .8s linear infinite; }
.job-description-delivery-note { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 8px; }
.job-description-delivery-note svg { width: 15px; }
.job-description-preview-mask { position: fixed; inset: 0; z-index: 75; padding: 16px; display: grid; place-items: center; background: rgba(10, 22, 17, .62); }
.job-description-preview-dialog { width: min(1120px, 100%); height: min(920px, calc(100vh - 32px)); min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 6px; background: white; box-shadow: 0 22px 60px rgba(0, 0, 0, .28); }
.job-description-preview-dialog > header { min-height: 72px; padding: 12px 16px 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.job-description-preview-dialog > header div { min-width: 0; }
.job-description-preview-dialog > header span, .job-description-preview-dialog > header h2, .job-description-preview-dialog > header small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-description-preview-dialog > header span { color: var(--green); font-size: 8px; font-weight: 800; }
.job-description-preview-dialog > header h2 { margin: 4px 0 0; color: var(--ink); font-size: 14px; }
.job-description-preview-dialog > header small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.job-description-preview-dialog > main { min-height: 0; overflow: hidden; background: #dfe5e2; }
.job-description-preview-frame { width: 100%; height: 100%; display: block; border: 0; background: #dfe5e2; }
.job-description-preview-dialog > footer { min-height: 60px; padding: 10px 16px 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.job-description-preview-dialog > footer > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; }
.job-description-preview-dialog > footer > span svg { width: 14px; color: var(--green); }
.job-description-preview-dialog > footer > div { display: flex; gap: 8px; }
.packet-items-settings-labels, .packet-items-settings-row { margin: 0 18px; display: grid; grid-template-columns: minmax(140px, .9fr) 104px minmax(170px, 1fr) minmax(260px, 1.5fr) 92px 36px; gap: 8px; align-items: center; }
.packet-items-settings-labels { min-height: 28px; color: var(--muted); font-size: 8px; font-weight: 700; }
.packet-items-settings-list { display: grid; gap: 8px; }
.packet-items-settings-row { min-width: 0; }
.packet-items-settings-row > input, .packet-items-settings-row > select { min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--ink); font: inherit; font-size: 9px; }
.packet-items-settings-row > input:focus, .packet-items-settings-row > select:focus { outline: 2px solid rgba(20, 100, 74, .15); border-color: var(--green); }
.packet-items-settings-row .icon-btn { width: 36px; height: 36px; }
.packet-position-scope { position: relative; min-width: 0; }
.packet-position-all, .packet-position-button { width: 100%; height: 40px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: #f8faf9; font-size: 9px; }
.packet-position-all svg, .packet-position-button svg { width: 14px; flex: 0 0 auto; }
.packet-position-button { color: var(--green); background: white; cursor: pointer; }
.packet-position-button.pending { color: #9b6619; border-color: #dfc38f; background: #fff9ee; }
.packet-position-button span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.packet-position-picker { position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; width: min(340px, calc(100vw - 36px)); padding: 10px; border: 1px solid #bdcbc5; border-radius: 6px; background: white; box-shadow: 0 12px 28px rgba(27, 52, 42, .16); }
.packet-position-search { height: 36px; display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; }
.packet-position-search svg { width: 14px; color: var(--muted); }
.packet-position-search input { min-width: 0; border: 0; outline: 0; font: inherit; font-size: 9px; }
.packet-position-options { max-height: 250px; margin: 8px 0; overflow: auto; border-top: 1px solid var(--line); }
.packet-position-options label { min-height: 44px; padding: 7px 5px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 7px; border-bottom: 1px solid var(--line); cursor: pointer; }
.packet-position-options input { accent-color: var(--green); }
.packet-position-options strong, .packet-position-options small { display: block; }
.packet-position-options strong { font-size: 9px; }
.packet-position-options small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.packet-item-requirements { display: grid; grid-template-columns: 1fr; gap: 4px; }
.packet-item-requirements .checklist-required-toggle { height: 30px; }
.packet-material-source { min-width: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px; }
.packet-material-source > input[type="url"] { min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: white; font: inherit; font-size: 9px; }
.packet-material-source > input[type="url"]:focus { outline: 2px solid rgba(20, 100, 74, .15); border-color: var(--green); }
.packet-material-upload { position: relative; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; border: 1px solid #a9c9bc; border-radius: 5px; color: var(--green); background: #edf6f2; font-size: 9px; font-weight: 800; cursor: pointer; }
.packet-material-upload:hover { border-color: var(--green); background: #e3f1eb; }
.packet-material-upload.wide { grid-column: 1 / -1; }
.packet-material-upload.disabled { opacity: .58; cursor: wait; }
.packet-material-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.packet-material-upload svg { width: 15px; }
.packet-material-upload svg.lucide-loader-circle { animation: spin .8s linear infinite; }
.packet-material-ready { grid-column: 1 / -1; min-width: 0; min-height: 42px; padding: 6px 7px 6px 9px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 30px 30px; align-items: center; gap: 6px; border: 1px solid #bed8cd; border-radius: 5px; color: var(--green); background: #f0f7f4; }
.packet-material-ready > svg { width: 16px; }
.packet-material-ready span, .packet-material-ready strong, .packet-material-ready small { min-width: 0; display: block; }
.packet-material-ready strong { overflow: hidden; color: #244b3e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.packet-material-ready small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.packet-material-ready a, .packet-material-ready button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 4px; color: var(--green); background: white; cursor: pointer; }
.packet-material-ready button { color: var(--red); }
.packet-material-ready a svg, .packet-material-ready button svg { width: 14px; }
@media (max-width: 820px) {
  .packet-panel-head { align-items: stretch; padding-top: 12px; padding-bottom: 12px; flex-direction: column; }
  .packet-panel-title { align-items: flex-start; flex-direction: column; gap: 9px; }
  .packet-status-detail { width: 100%; overflow-x: auto; }
  .packet-status-detail > span { flex: 0 0 auto; }
  .packet-panel-head > .btn { width: 100%; justify-content: center; }
  .onboarding-packet-catalog-list { grid-template-columns: 1fr; }
  .packet-items-settings-labels { display: none; }
  .packet-items-settings-list { margin: 0 14px; }
  .packet-items-settings-row { margin: 0; padding: 12px; grid-template-columns: minmax(0, 1fr) 96px 36px; border: 1px solid var(--line); border-radius: 6px; }
  .packet-items-settings-row .checklist-required-toggle { padding: 0 5px; gap: 4px; white-space: nowrap; }
  .packet-items-settings-row > .icon-btn { grid-column: 3; grid-row: 1; }
  .packet-position-scope { grid-column: 1 / -1; grid-row: 2; }
  .packet-material-source { grid-column: 1 / -1; grid-row: 3; }
  .packet-item-requirements { grid-column: 1 / -1; grid-row: 4; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-description-review-state { grid-template-columns: 22px minmax(0, 1fr); }
  .job-description-review-state > .btn { grid-column: 2; width: max-content; }
  .job-description-selected { grid-template-columns: 20px minmax(0, 1fr); }
  .job-description-selected > .btn { grid-column: 2; width: max-content; }
  .job-description-assignee { margin: 0 14px 10px; grid-template-columns: 1fr; }
  .job-description-assignee > label { grid-template-columns: 64px minmax(0, 1fr); }
  .job-description-workspace { margin: 0 14px 10px; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .job-description-departments { display: flex; gap: 5px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); }
  .job-description-departments > strong { display: none; }
  .job-description-departments button { width: auto; min-width: max-content; grid-template-columns: auto auto; border-left: 0; border-bottom: 3px solid transparent; }
  .job-description-departments button.active { border-bottom-color: var(--green); }
  .job-description-library-content { padding: 9px; }
  .job-description-library-row { grid-template-columns: 26px minmax(0, 1fr); }
  .job-description-file-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .job-description-file-actions .btn { min-width: 0; }
  .job-description-delivery-note { width: 100%; margin: 0 0 8px; }
  .job-description-preview-mask { padding: 0; }
  .job-description-preview-dialog { width: 100%; height: 100%; border-radius: 0; }
  .job-description-preview-dialog > footer { align-items: stretch; flex-direction: column; }
  .job-description-preview-dialog > footer > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contract-drawer { width: min(980px, 100vw); display: flex; flex-direction: column; overflow: hidden; }
.contract-workflow-steps { margin: 0 18px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.contract-workflow-steps > div { min-height: 62px; padding: 10px 12px; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 9px; border-right: 1px solid var(--line); color: var(--muted); background: #fafbfa; }
.contract-workflow-steps > div:last-child { border-right: 0; }
.contract-workflow-steps > div.active { color: #8f621e; background: #fff7e9; }
.contract-workflow-steps > div.done { color: var(--green); background: #eff7f4; }
.contract-workflow-steps svg { width: 18px; }
.contract-workflow-steps strong, .contract-workflow-steps small { display: block; }
.contract-workflow-steps strong { font-size: 10px; }
.contract-workflow-steps small { margin-top: 4px; font-size: 8px; font-weight: 400; }
.contract-check-result { min-height: 58px; margin: 0 18px 12px; padding: 10px 12px; display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 10px; }
.contract-check-result.failed { color: #8e3f35; background: #fae9e7; }
.contract-check-result.passed { color: var(--green); background: #eaf5f0; }
.contract-check-result svg { width: 19px; }
.contract-check-result strong, .contract-check-result span { display: block; }
.contract-check-result strong { font-size: 10px; }
.contract-check-result span { margin-top: 4px; font-size: 8px; line-height: 1.5; }
.contract-template-bar { min-height: 58px; margin: 0 18px 12px; padding: 10px 12px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px dashed #bdcdc6; background: #f7faf8; }
.contract-template-bar > svg { width: 19px; color: var(--green); }
.contract-template-bar strong, .contract-template-bar span { display: block; }
.contract-template-bar strong { font-size: 10px; }
.contract-template-bar span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.contract-template-actions { display: flex; align-items: center; gap: 7px; }
.contract-template-actions .btn { margin: 0; text-decoration: none; }
.contract-original-toolbar { min-height: 46px; margin: 0 18px; padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-bottom: 0; background: white; }
.contract-original-toolbar > div:first-child { min-width: 0; display: flex; align-items: center; gap: 8px; }
.contract-original-toolbar > div:first-child > svg { width: 17px; color: var(--green); }
.contract-original-toolbar strong, .contract-original-toolbar small { display: block; }
.contract-original-toolbar strong { font-size: 9px; }
.contract-original-toolbar small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.contract-zoom-controls { display: flex; align-items: center; gap: 5px; }
.contract-zoom-controls .icon-btn { width: 30px; height: 30px; }
.contract-zoom-controls .icon-btn svg { width: 14px; }
.contract-zoom-controls > span { width: 38px; color: var(--muted); font-size: 8px; font-weight: 800; text-align: center; }
.contract-word-viewport { position: relative; min-height: 0; margin: 0 18px; flex: 1 1 0; overflow: auto; border: 1px solid var(--line); background: #dfe5e2; }
.contract-template-loading { position: absolute; inset: 0; z-index: 4; min-height: 520px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #496159; background: rgba(244,248,246,.92); font-size: 9px; font-weight: 800; }
.contract-template-loading svg { width: 18px; animation: contract-spin 1s linear infinite; }
@keyframes contract-spin { to { transform: rotate(360deg); } }
.contract-template-error { min-height: 50px; margin: 0 18px 10px; padding: 9px 11px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 9px; color: #8e3f35; background: #fae9e7; }
.contract-template-error svg { width: 17px; }
.contract-template-error span { font-size: 8px; line-height: 1.5; }
.contract-template-pages { min-width: 850px; transform-origin: top left; }
.contract-template-pages.loading { visibility: hidden; }
.contract-template-pages .docx-wrapper { padding: 24px 22px 1px !important; background: #dfe5e2 !important; }
.contract-template-pages .docx-wrapper > section.docx { margin-bottom: 22px !important; box-shadow: 0 2px 10px rgba(20,42,33,.16) !important; }
.contract-template-edit-line { display: flex !important; align-items: baseline; flex-wrap: wrap; gap: 2pt; min-height: 22pt !important; text-align: left !important; }
.contract-template-edit-line > span { flex: 0 0 auto; white-space: pre-wrap; }
.contract-inline-field { min-width: 70pt; height: 18pt; padding: 0 3pt; flex: 1 1 90pt; border: 0; border-bottom: 1.25pt solid #167158; border-radius: 0; outline: 0; color: #123e32; background: rgba(225,244,236,.74); font: inherit; line-height: 17pt; }
.contract-inline-field:hover { background: rgba(210,239,227,.9); }
.contract-inline-field:focus { border-bottom-width: 2pt; background: #e5f5ee; box-shadow: 0 2px 0 rgba(24,95,74,.12); }
.contract-inline-field.invalid { border-bottom-color: #b94b42; background: #fff0ee; }
.contract-inline-field:disabled { color: #203c33; background: rgba(237,242,239,.8); cursor: not-allowed; }
.contract-inline-field.housing { border-bottom-color: #356886; color: #244e66; background: rgba(231,241,246,.78); }
.contract-inline-field.housing:hover, .contract-inline-field.housing:focus { background: #e7f1f6; }
.contract-inline-field.housing.invalid { border-bottom-color: #b94b42; background: #fff0ee; }
.contract-inline-field.wide { flex-basis: 300pt; }
.contract-inline-field.medium { flex-basis: 150pt; }
.contract-inline-field.date { width: 105pt; min-width: 105pt; flex: 0 0 105pt; font-size: 8.5pt; }
.contract-inline-field.term { width: 54pt; min-width: 54pt; flex: 0 0 54pt; text-align: center; }
.contract-inline-field.auto-date { color: #185f4a; background: #f1f7f4; cursor: default; }
.contract-inline-field.auto-date:hover, .contract-inline-field.auto-date:focus { background: #f1f7f4; box-shadow: none; }
.contract-inline-field.salary { width: 72pt; min-width: 72pt; flex: 0 0 72pt; text-align: center; }
.contract-template-auto-value { min-width: 42pt; padding: 0 3pt; color: #185f4a; border-bottom: 1pt solid #9bbdb0; font-weight: 700; text-align: center; }
.contract-template-edit-line.layout-double .contract-inline-field { min-width: 85pt; }
.contract-template-edit-line.layout-salary { line-height: 1.75; }
.contract-drawer .sticky-actions { position: sticky; z-index: 8; bottom: max(12px, env(safe-area-inset-bottom)); margin: 10px 0 0; padding: 12px 18px; flex: 0 0 auto; background: rgba(255,255,255,.98); border: 1px solid var(--line); box-shadow: 0 -8px 22px rgba(30,58,48,.08); }
.contract-entry-fields { min-width: 0; margin: 0; padding: 0 18px 90px; border: 0; }
.contract-entry-fields[disabled] { opacity: .82; }
.contract-entry-fields .form-row.autofilled label::after { content: "已自动带入"; margin-left: 6px; color: var(--green); font-size: 8px; font-weight: 700; }
.form-row.invalid input, .form-row.invalid select, .form-row.invalid textarea { border-color: #bf5b51; background: #fff8f7; }
.form-error { display: block; margin-top: 5px; color: #a8443a; font-size: 8px; }
.housing-contract-preview-mask { position: fixed; inset: 0; z-index: 90; padding: 12px; display: grid; place-items: center; overflow: hidden; background: rgba(9,22,17,.72); }
.housing-contract-preview-dialog { width: min(1500px, 100%); height: calc(100vh - 24px); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid #cbd7d2; border-radius: 6px; background: #fff; box-shadow: 0 20px 60px rgba(5,20,14,.28); }
.housing-contract-preview-dialog > header { min-height: 76px; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.housing-contract-preview-dialog > header > div { min-width: 0; }
.housing-contract-preview-dialog > header span { display: block; color: #477367; font-size: 8px; font-weight: 800; }
.housing-contract-preview-dialog > header h2 { margin: 4px 0 0; font-size: 15px; }
.housing-contract-preview-dialog > header p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.housing-contract-preview-toolbar { min-height: 50px; padding: 7px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); background: #f8faf9; }
.housing-contract-preview-toolbar > span { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 800; }
.housing-contract-preview-toolbar > span svg { width: 14px; height: 14px; }
.housing-contract-preview-modes { min-height: 34px; padding: 3px; display: inline-grid; grid-template-columns: repeat(2, minmax(104px, 1fr)); border: 1px solid #c6d3ce; border-radius: 5px; background: #edf2f0; }
.housing-contract-preview-modes button { min-height: 28px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 3px; color: #617169; background: transparent; font: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }
.housing-contract-preview-modes button svg { width: 14px; height: 14px; }
.housing-contract-preview-modes button.active { color: #fff; background: var(--green); }
.housing-contract-preview-viewport { min-width: 0; min-height: 0; padding: 12px; overflow: auto; background: #d9e0dd; }
.housing-contract-overall-preview-pages { width: max-content; min-width: 0; transform-origin: top left; }
.housing-contract-overall-preview-pages .docx-wrapper { width: max-content !important; min-height: 0 !important; background: transparent !important; }
.housing-contract-overall-preview-pages .docx-wrapper > section.docx { position: relative !important; box-shadow: 0 3px 16px rgba(13,35,26,.2) !important; }
.housing-contract-preview-viewport.overview .docx-wrapper { padding: 22px !important; display: grid !important; grid-template-columns: repeat(3, 794px) !important; align-items: start; gap: 24px; }
.housing-contract-preview-viewport.overview .docx-wrapper > section.docx { margin: 0 !important; }
.housing-contract-preview-viewport.reading .docx-wrapper { padding: 20px 24px !important; display: block !important; }
.housing-contract-preview-viewport.reading .docx-wrapper { width: 842px !important; }
.housing-contract-preview-viewport.reading .docx-wrapper > section.docx { margin: 0 auto 22px !important; display: block !important; float: none !important; clear: both !important; }
.housing-contract-preview-page-badge { position: absolute; z-index: 3; top: 9px; right: 11px; padding: 4px 7px; border-radius: 3px; color: #4e665d; background: rgba(238,244,241,.92); font-family: "Microsoft YaHei", sans-serif; font-size: 8px; font-weight: 800; line-height: 1; }
.housing-contract-preview-dialog > footer { min-height: 64px; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); background: #fff; }
.housing-contract-preview-dialog > footer > span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; }
.housing-contract-preview-dialog > footer > span svg { width: 16px; height: 16px; color: var(--green); }
.housing-contract-preview-dialog > footer > div { display: flex; align-items: center; gap: 8px; }

.recruit-registration-drawer { width: min(680px, 96vw); padding-bottom: 0; }
.registration-section { margin-bottom: 20px; }
.registration-section + .registration-section { padding-top: 18px; border-top: 1px solid var(--line); }
.registration-section h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.registration-section h3 > i { width: 22px; height: 22px; border-radius: 50%; background: var(--mint); color: var(--green); display: grid; place-items: center; font-size: 10px; font-style: normal; }
.registration-select { margin: 0; }
.registration-select select { min-height: 44px; background: white; cursor: pointer; }
.interview-schedule-fields { margin-bottom: 12px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.resume-upload { min-height: 48px; padding: 0 12px; border: 1px dashed #aec3ba; border-radius: 6px; background: #f8fbf9; color: var(--ink); display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 9px; cursor: pointer; }
.resume-upload:hover { border-color: var(--green); background: var(--mint); }
.resume-upload svg { width: 17px; color: var(--green); }
.resume-upload span { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.resume-upload b { color: var(--green); font-size: 10px; }
.choice-grid { display: grid; gap: 8px; }
.choice-grid > button, .choice-row > button, .quick-choice > button { border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); cursor: pointer; }
.choice-grid > button:hover, .choice-row > button:hover, .quick-choice > button:hover { border-color: #8eac9f; background: #f7faf8; }
.choice-grid > button.active, .choice-row > button.active, .quick-choice > button.active { border-color: var(--green); background: var(--mint); color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.job-choice-grid { max-height: 184px; overflow-y: auto; grid-template-columns: repeat(2, minmax(0,1fr)); }
.job-choice-grid > button { min-width: 0; min-height: 58px; padding: 10px; display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 8px; align-items: center; text-align: left; }
.job-choice-grid > button > svg { width: 17px; color: var(--green); }
.job-choice-grid span strong, .job-choice-grid span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-choice-grid span strong { font-size: 11px; }
.job-choice-grid span small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 7px; }
.choice-row > button { min-height: 34px; padding: 0 12px; font-size: 10px; }
.choice-row > button svg { width: 14px; height: 14px; margin-right: 5px; vertical-align: middle; }
.choice-row-spaced { margin-top: 10px; }
.custom-person-input { max-width: 360px; margin-top: 10px; }
.interviewer-entry { margin-top: 10px; }
.interviewer-entry-trigger { width: 100%; min-height: 48px; padding: 8px 12px; display: grid; grid-template-columns: 22px minmax(0,1fr) 18px; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: white; cursor: pointer; text-align: left; }
.interviewer-entry-trigger:hover { border-color: #8eac9f; background: #f7faf8; }
.interviewer-entry-trigger.active { border-color: #8eac9f; background: #f8fbf9; }
.interviewer-entry-trigger > svg { width: 17px; height: 17px; color: var(--green); }
.interviewer-entry-trigger > svg:last-child { width: 14px; color: var(--muted); }
.interviewer-entry-trigger small, .interviewer-entry-trigger strong { display: block; }
.interviewer-entry-trigger small { color: var(--muted); font-size: 9px; }
.interviewer-entry-trigger strong { margin-top: 2px; font-size: 11px; }
.interviewer-entry-editor { margin-top: 7px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.interviewer-entry-editor input { min-width: 0; height: 38px; }
.interviewer-entry-editor .btn { min-width: 58px; height: 38px; }
.compact-fields { margin-top: 12px; }
.quick-choice { min-height: 36px; display: flex; align-items: center; gap: 7px; }
.quick-choice > span { width: 34px; flex: 0 0 34px; color: var(--muted); font-size: 10px; }
.quick-choice > button { min-width: 58px; height: 30px; font-size: 10px; }
.compact-date { margin: 8px 0 12px; }
.mode-choice-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mode-choice-grid > button { min-height: 46px; padding: 7px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; }
.mode-choice-grid svg, .feedback-choice-grid svg { width: 15px; }
.feedback-choice-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.feedback-choice-grid > button { min-height: 42px; padding: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; }
.registration-table { min-width: 1050px; }
.excel-reference-table { min-width: 1120px; }
.excel-reference-table th:nth-child(1) { min-width: 175px; }
.excel-reference-table th:nth-child(2), .excel-reference-table th:nth-child(3) { min-width: 125px; }
.excel-reference-table th:nth-child(4), .excel-reference-table th:nth-child(5) { min-width: 195px; }
.excel-reference-table th:nth-child(6) { min-width: 105px; }
.candidate-resume-cell { min-width: 170px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.candidate-resume-cell .link-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; }
.candidate-resume-cell .link-btn svg { width: 12px; height: 12px; }
.interview-round-cell { min-width: 185px; }
.interview-round-cell > strong, .interview-round-cell > span { display: block; }
.interview-round-cell > strong { font-size: 10px; }
.interview-round-cell > span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.interview-round-cell > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.round-actions { display: flex; align-items: center; gap: 6px; }
.round-actions .icon-btn { flex: 0 0 30px; width: 30px; height: 30px; }
.round-actions .icon-btn svg { width: 14px; height: 14px; }
.registration-panel { margin-bottom: 20px; }
.recruitment-view-tabs { margin: -2px 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.recruitment-view-tabs button { min-height: 58px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 9px; cursor: pointer; text-align: left; }
.recruitment-view-tabs button:hover { border-color: #8eac9f; }
.recruitment-view-tabs button.active { border-color: var(--green); background: var(--mint); color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.recruitment-view-tabs svg { width: 18px; height: 18px; }
.recruitment-view-tabs strong, .recruitment-view-tabs small { display: block; }
.recruitment-view-tabs strong { font-size: 11px; }
.recruitment-view-tabs small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.recruitment-stage-overview { margin: -2px 0 20px; border: 1px solid #d6e0dc; background: white; box-shadow: 0 8px 22px rgba(30, 54, 46, .05); }
.recruitment-stage-head { min-height: 62px; padding: 0 18px; border-bottom: 1px solid #dce5e1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.recruitment-stage-head > div { display: flex; align-items: baseline; gap: 12px; }
.recruitment-stage-head h2 { margin: 0; font-size: 13px; }
.recruitment-stage-head span { color: var(--muted); font-size: 9px; }
.recruitment-stage-head > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.recruitment-stage-head > span svg { width: 16px; height: 16px; color: var(--green); }
.recruitment-flow-steps { padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 12px; overflow-x: auto; }
.recruitment-flow-steps button { min-width: 0; min-height: 104px; padding: 14px 16px; border: 1px solid var(--stage-border); border-radius: 7px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; color: var(--ink); background: var(--stage-bg); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.recruitment-flow-steps .stage-interviews { --stage-bg: #f8fbfe; --stage-icon-bg: #eef5fc; --stage-border: #dce8f3; --stage-accent: #487fb1; }
.recruitment-flow-steps .stage-offers { --stage-bg: #fffcf7; --stage-icon-bg: #fff5e5; --stage-border: #f1e4d1; --stage-accent: #a66f26; }
.recruitment-flow-steps .stage-employee { --stage-bg: #f8fbfb; --stage-icon-bg: #edf5f3; --stage-border: #dce8e5; --stage-accent: #5c8179; }
.recruitment-flow-steps button:hover { border-color: var(--stage-accent); background: var(--stage-bg); box-shadow: 0 6px 16px rgba(30, 54, 46, .07); }
.recruitment-flow-steps button.active { border-color: var(--stage-accent); background: var(--stage-bg); box-shadow: 0 0 0 1px var(--stage-accent) inset; }
.recruitment-flow-steps .stage-icon { width: 44px; height: 44px; padding: 11px; border-radius: 8px; color: var(--stage-accent); background: var(--stage-icon-bg); }
.recruitment-flow-steps strong, .recruitment-flow-steps small { display: block; }
.recruitment-flow-steps strong { font-size: 11px; line-height: 1.35; }
.recruitment-flow-steps small { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.recruitment-flow-steps b { min-width: 26px; color: var(--stage-accent); font-size: 22px; line-height: 1; text-align: center; }
.recruitment-flow-steps .stage-arrow { width: 16px; height: 16px; color: #9fb0aa; }
.recruitment-onboarding-panel, .recruitment-analysis-panel { margin-bottom: 20px; }
.onboarding-progress-table { min-width: 1120px; }
.recruitment-offer-head > div { min-width: 0; }
.recruitment-offer-head p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.recruitment-offer-overview { padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fffcf7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.recruitment-offer-overview button { min-width: 0; min-height: 62px; padding: 10px 12px; border: 1px solid #f0e4d2; border-radius: 7px; background: #fff; color: var(--ink); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 5px; text-align: left; cursor: pointer; }
.recruitment-offer-overview button:hover, .recruitment-offer-overview button.active { border-color: #b77a27; background: #fffaf2; box-shadow: inset 0 -3px 0 #b77a27; }
.recruitment-offer-overview span { min-width: 0; color: #765621; display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.recruitment-offer-overview span svg { width: 14px; height: 14px; }
.recruitment-offer-overview strong { color: #9b6419; font-size: 21px; line-height: 1; }
.recruitment-offer-overview small { color: var(--muted); font-size: 8px; }
.recruitment-offer-people-table { min-width: 1360px; table-layout: fixed; }
.recruitment-offer-people-table th:nth-child(1) { width: 170px; }
.recruitment-offer-people-table th:nth-child(2) { width: 150px; }
.recruitment-offer-people-table th:nth-child(3) { width: 145px; }
.recruitment-offer-people-table th:nth-child(4) { width: 230px; }
.recruitment-offer-people-table th:nth-child(5), .recruitment-offer-people-table th:nth-child(6), .recruitment-offer-people-table th:nth-child(7) { width: 120px; }
.recruitment-offer-people-table th:nth-child(8) { width: 170px; }
.recruitment-salary-cell { min-width: 210px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.recruitment-salary-cell > span { min-width: 0; padding: 7px 8px; border: 1px solid #efe3d2; border-radius: 6px; background: #fffaf2; }
.recruitment-salary-cell em, .recruitment-salary-cell strong { display: block; }
.recruitment-salary-cell em { color: #8a7658; font-size: 7px; font-style: normal; }
.recruitment-salary-cell strong { margin-top: 4px; overflow-wrap: anywhere; color: #62471e; font-size: 9px; line-height: 1.4; }
.recruitment-salary-cell > small { grid-column: 1 / -1; color: #8a7658; font-size: 8px; }
.recruitment-hire-status { min-width: 58px; justify-content: center; }
.recruitment-salary-status { min-width: 94px; justify-content: center; white-space: nowrap; }
.offer-workflow-steps { margin: 0 0 16px; padding: 10px 12px; border: 1px solid #eadfce; background: #fffcf7; display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr; align-items: center; gap: 7px; }
.offer-workflow-steps > span { min-width: 0; display: flex; align-items: center; gap: 7px; color: #8a7658; }
.offer-workflow-steps > span > i { width: 21px; height: 21px; flex: 0 0 21px; border-radius: 50%; display: grid; place-items: center; background: #efe7db; font-size: 8px; font-style: normal; font-weight: 850; }
.offer-workflow-steps > span strong { overflow-wrap: anywhere; font-size: 9px; }
.offer-workflow-steps > span.active { color: #8f5a16; }
.offer-workflow-steps > span.active > i { color: white; background: #b87018; }
.offer-workflow-steps > svg { width: 13px; height: 13px; color: #b9aa94; }
.offer-salary-reference { margin-bottom: 14px; padding: 10px 12px; border-left: 3px solid #b87018; background: #fff8eb; display: flex; align-items: flex-start; gap: 9px; color: #735427; }
.offer-salary-reference > svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }
.offer-salary-reference strong, .offer-salary-reference span { display: block; }
.offer-salary-reference strong { font-size: 9px; }
.offer-salary-reference span { margin-top: 3px; color: #887052; font-size: 8px; }
.onboarding-detail-inputs { min-width: 160px; display: grid; gap: 6px; }
.onboarding-detail-inputs input { min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: white; font-size: 9px; }
.onboarding-stage-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.onboarding-stage-buttons button { min-height: 29px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--muted); cursor: pointer; font-size: 9px; }
.onboarding-stage-buttons button:hover { border-color: #8eac9f; color: var(--green); }
.onboarding-stage-buttons button.active { border-color: var(--green); background: var(--green); color: white; }
.onboarding-stage-buttons button:disabled { cursor: wait; opacity: .65; }
.recruit-analysis-stats { box-shadow: none; }
.recruit-analysis-stats .stat { min-height: 104px; }
.recruitment-analysis-toolbar { margin-bottom: 14px; padding: 14px 16px; border: 1px solid #d5e0db; border-radius: 7px; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 18px; box-shadow: 0 6px 18px rgba(29, 56, 47, .045); }
.recruitment-analysis-heading { display: flex; align-items: center; gap: 10px; }
.analysis-heading-icon { width: 32px; height: 32px; border-radius: 6px; background: #e4f0eb; color: var(--recruit-accent); display: grid; place-items: center; }
.analysis-heading-icon svg { width: 17px; height: 17px; }
.recruitment-analysis-heading strong, .recruitment-analysis-heading small { display: block; }
.recruitment-analysis-heading strong { font-size: 12px; }
.recruitment-analysis-heading small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.recruitment-analysis-controls { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.recruitment-analysis-toolbar .range-buttons { flex: 0 0 auto; }
.recruitment-custom-range { display: flex; align-items: flex-end; gap: 7px; }
.recruitment-custom-range label span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; font-weight: 800; }
.recruitment-custom-range input { width: 132px; height: 32px; padding: 0 8px; border: 1px solid #d6e0dc; border-radius: 5px; color: var(--ink); background: white; font: inherit; font-size: 9px; }
.recruitment-custom-range input:focus { outline: 2px solid rgba(20,100,74,.12); border-color: var(--green); }
.recruitment-custom-range > svg { width: 14px; height: 32px; color: var(--muted); }
.recruitment-analysis-panel table { min-width: 1080px; table-layout: fixed; }
.interview-analysis-table th { white-space: normal; line-height: 1.35; text-align: center; }
.interview-analysis-table th:nth-child(1) { width: 50px; }
.interview-analysis-table th:nth-child(2) { width: 150px; }
.interview-analysis-table th:nth-child(n+3) { width: 110px; }
.interview-analysis-table td { text-align: center; }
.interview-analysis-table td:nth-child(2) { text-align: left; }
.interview-analysis-table td strong { color: var(--green); }
.interview-analysis-table tfoot td { padding-top: 13px; padding-bottom: 13px; border-top: 2px solid #9bbcaf; background: #e8f3ee; color: #173f33; font-size: 11px; font-weight: 900; text-align: center; }
.interview-analysis-table tfoot td:first-child { letter-spacing: 0; }
.analysis-rate { min-width: 150px; display: flex; align-items: center; gap: 9px; }
.analysis-rate .track { width: 92px; height: 6px; overflow: hidden; border-radius: 3px; background: #e8eeeb; }
.analysis-rate .track i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.analysis-rate strong { min-width: 34px; font-size: 10px; }
.registration-filter-tabs { min-height: 50px; padding: 9px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 7px; overflow-x: auto; }
.registration-filter-tabs button { min-width: 64px; height: 31px; padding: 0 12px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--muted); cursor: pointer; font-size: 10px; white-space: nowrap; }
.registration-filter-tabs button:hover { border-color: #8eac9f; color: var(--green); }
.registration-filter-tabs button.active { border-color: var(--green); background: var(--green); color: white; }
.registration-toolbar { border-top: 0; }

@media (max-width: 760px) {
  .contract-panel-head { align-items: stretch; flex-direction: column; }
  .contract-create-controls { min-width: 0; width: 100%; grid-template-columns: 1fr; }
  .contract-create-controls .btn { width: 100%; }
  .contract-workflow-steps { grid-template-columns: 1fr; }
  .contract-template-bar { grid-template-columns: 22px minmax(0, 1fr); }
  .contract-template-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; }
  .contract-workflow-steps > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .contract-workflow-steps > div:last-child { border-bottom: 0; }
  .contract-row-actions { grid-template-columns: minmax(92px, 1fr) repeat(2, minmax(64px, 1fr)); }
  .contract-page-head { align-items: flex-start; margin-bottom: 12px; padding-bottom: 10px; }
  .contract-management-tabs { margin-bottom: 8px; }
  .contract-management-tabs > button { min-height: 60px; padding: 8px; grid-template-columns: 31px minmax(0, 1fr); gap: 7px; }
  .contract-management-tab-icon { width: 31px; height: 31px; }
  .contract-management-tab-icon svg { width: 16px; height: 16px; }
  .contract-management-tabs strong { font-size: 9px; line-height: 1.35; }
  .contract-management-tabs small, .contract-management-tabs > button > svg { display: none; }
  .contract-management-board { gap: 8px; }
  .housing-contract-head { padding: 9px 11px; grid-template-columns: 31px minmax(0, 1fr); }
  .housing-contract-head p { display: none; }
  .housing-contract-head-actions { width: 100%; grid-column: 1 / -1; gap: 5px; }
  .housing-contract-head-actions .btn { min-height: 32px; padding: 0 8px; flex: 1; font-size: 8px; }
  .housing-agreement-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .housing-agreement-summary > div:nth-child(2) { border-right: 0; }
  .housing-agreement-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .housing-agreement-tools { padding: 9px 11px; grid-template-columns: 1fr; }
  .housing-agreement-tools > span { justify-self: start; }
  .housing-contract-action-grid { grid-template-columns: 1fr; }
  .housing-contract-trigger-summary, .housing-contract-history-entry, .housing-contract-management-entry { min-height: 65px; padding: 9px 11px; }
  .housing-contract-trigger-summary { border-right: 0; border-bottom: 1px solid var(--line); }
  .housing-contract-history-entry, .housing-contract-management-entry { border-left: 0; border-bottom: 1px solid var(--line); }
  .housing-contract-management-entry { border-bottom: 0; }
  .housing-dormitory-inline { padding: 8px; }
  .housing-contract-alert { padding: 9px 11px; grid-template-columns: 20px minmax(0, 1fr); }
  .housing-contract-alert .btn { grid-column: 1 / -1; width: 100%; }
  .housing-contract-note { padding: 8px 11px; }
  .housing-contract-meta { padding: 9px 11px; grid-template-columns: 1fr 1fr; }
  .housing-contract-room-entry { grid-template-columns: 1fr; }
  .housing-room-overview-mask { padding: 0; }
  .housing-room-overview-dialog { width: 100%; max-height: 100vh; height: 100vh; border: 0; border-radius: 0; }
  .housing-room-overview-dialog > header { min-height: 84px; padding: 13px 12px; }
  .housing-room-overview-summary { grid-template-columns: repeat(3, 1fr); }
  .housing-room-overview-summary > div { padding: 9px; flex-direction: column; justify-content: center; text-align: center; }
  .housing-room-overview-summary > label { grid-column: 1 / -1; margin: 8px 11px; }
  .housing-room-overview-grid { grid-template-columns: 1fr; }
  .housing-room-overview-dialog > footer { padding: 9px 11px; }
  .housing-room-overview-dialog > footer > span { display: none; }
  .housing-contract-picker-search { margin: 11px 11px 7px; }
  .housing-contract-picker-list { padding: 0 11px 14px; }
  .housing-contract-picker-list > button { grid-template-columns: 32px minmax(0, 1fr) 14px; }
  .housing-contract-picker-list > button em { display: none; }
  .contract-risk-head { align-items: flex-start; padding: 10px 11px; }
  .contract-risk-head small { max-width: 240px; }
  .contract-risk-reset { min-height: 29px; padding: 0 7px; }
  .contract-risk-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); overflow-x: auto; }
  .contract-risk-card { min-height: 72px; padding: 9px; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; }
  .contract-risk-icon { width: 30px; height: 30px; }
  .contract-risk-icon svg { width: 16px; height: 16px; }
  .contract-risk-copy strong { font-size: 9px; line-height: 1.35; }
  .contract-risk-copy small, .contract-risk-count small, .contract-risk-arrow { display: none; }
  .contract-risk-count { min-width: 18px; }
  .contract-risk-count b { font-size: 18px; }
  .contract-priority-head { min-height: 58px; padding: 9px 11px; }
  .contract-priority-head p { max-width: 220px; line-height: 1.45; }
  .contract-priority-rule { padding: 8px 11px; }
}

@media (max-width: 1180px) {
  .recruitment-summary-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recruitment-summary-stats .stat:nth-child(3) { border-right: 0; }
  .recruitment-summary-stats .stat:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .recruit-overview-grid { grid-template-columns: 1fr; }
  .recruit-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recruit-process-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recruit-process-overview > div:nth-child(3) { border-right: 0; }
  .recruit-process-overview > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .recruit-head { align-items: flex-start; }
  .recruit-head .actions { width: 100%; }
  .recruit-head .actions .btn { flex: 1; }
  .recruit-toolbar { align-items: stretch; flex-direction: column; }
  .recruit-toolbar .filters { width: 100%; }
  .recruit-toolbar .search { max-width: none; }
  .recruit-toolbar select { width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); }
  .result-count { align-self: flex-start; }
  .recruitment-summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recruitment-summary-stats .stat, .recruitment-summary-stats .stat:nth-child(3), .recruitment-summary-stats .stat:nth-child(4) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .recruitment-summary-stats .stat:nth-child(2n) { border-right: 0; }
  .recruitment-summary-stats .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .recruit-view-switch { align-self: flex-start; }
  .recruit-side { grid-template-columns: 1fr; }
  .job-progress { min-width: 155px; }
  .offer-ready-strip { align-items: flex-start; flex-direction: column; }
  .offer-ready-actions { width: 100%; justify-content: flex-start; }
  .offer-materials { grid-template-columns: 1fr; }
  .recruit-process-overview { grid-template-columns: 1fr; }
  .recruit-process-overview > div { min-height: 58px; border-right: 0; border-bottom: 1px solid var(--line); }
  .recruit-process-overview > div:last-child { border-bottom: 0; }
  .recruit-workbench-tabs { overflow-x: auto; }
  .recruit-workbench-tabs button { flex: 0 0 auto; }
  .recruit-task-list article { grid-template-columns: 32px minmax(0, 1fr); }
  .recruit-task-list .task-state, .recruit-task-list article > .btn { grid-column: 2; }
  .recruit-side.full-view { grid-template-columns: 1fr; }
  .form-grid3 { grid-template-columns: 1fr; }
  .mail-config-bar { align-items: flex-start; flex-wrap: wrap; }
  .mail-config-bar > .btn { margin-left: 28px; }
  .onboarding-review-tabs { grid-template-columns: 1fr; }
  .contract-template-bar { grid-template-columns: 22px minmax(0, 1fr); }
  .contract-template-actions { grid-column: 2; justify-content: flex-start; }
  .contract-original-toolbar { align-items: flex-start; flex-direction: column; }
  .contract-word-viewport { margin-left: 10px; margin-right: 10px; }
  .housing-contract-preview-mask { padding: 0; }
  .housing-contract-preview-dialog { width: 100%; max-width: 100vw; min-width: 0; height: 100%; border: 0; border-radius: 0; }
  .housing-contract-preview-dialog > header, .housing-contract-preview-toolbar, .housing-contract-preview-viewport, .housing-contract-preview-dialog > footer { width: 100%; max-width: 100%; min-width: 0; }
  .housing-contract-preview-dialog > header { min-height: 68px; padding: 9px 11px; }
  .housing-contract-preview-dialog > header h2 { font-size: 12px; }
  .housing-contract-preview-toolbar { padding: 7px 9px; flex-wrap: wrap; gap: 7px; }
  .housing-contract-preview-modes { width: 100%; grid-template-columns: 1fr 1fr; }
  .housing-contract-preview-toolbar > span { display: none; }
  .housing-contract-preview-toolbar .contract-zoom-controls { margin-left: auto; }
  .housing-contract-preview-viewport { padding: 6px; }
  .housing-contract-preview-viewport.overview .docx-wrapper { padding: 12px !important; gap: 14px; }
  .housing-contract-preview-viewport.reading .docx-wrapper { padding: 12px !important; }
  .housing-contract-preview-dialog > footer { min-height: 72px; padding: 8px 10px; align-items: stretch; flex-direction: column; }
  .housing-contract-preview-dialog > footer > span { display: none; }
  .housing-contract-preview-dialog > footer > div { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .housing-contract-preview-dialog > footer .btn { min-width: 0; padding-left: 7px; padding-right: 7px; }
  .review-checklist-large { grid-template-columns: 1fr; }
  .combined-archive-grid { grid-template-columns: 1fr; }
  .combined-archive-intro { grid-template-columns: 22px minmax(0, 1fr); }
  .combined-archive-intro > em { grid-column: 2; justify-self: start; }
  .checklist-review-head { align-items: flex-start; flex-direction: column; }
  .checklist-settings-row { grid-template-columns: minmax(0, 1fr) 64px 36px; }
  .collection-settings-summary { grid-template-columns: 1fr; }
  .collection-settings-labels { display: none; }
  .collection-settings-list { gap: 12px; }
  .collection-settings-row { padding: 10px 12px; grid-template-columns: 24px minmax(0, 1fr) 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafbfa; }
  .collection-settings-row > input { grid-column: 2 / 4; }
  .collection-settings-row > select { grid-column: 2; }
  .collection-enabled-toggle { grid-column: 2; justify-content: flex-start; padding: 0 10px; }
  .collection-settings-row > .icon-btn { grid-column: 3; grid-row: 1; }
  .registration-toolbar select { width: 100%; flex-basis: 100%; }
  .recruitment-view-tabs { grid-template-columns: 1fr; }
  .recruitment-view-tabs button { min-height: 48px; }
  .recruitment-stage-head { min-height: 56px; padding: 0 13px; }
  .recruitment-stage-head > div { align-items: flex-start; flex-direction: column; gap: 2px; }
  .recruitment-flow-steps { padding: 12px; grid-template-columns: repeat(3, 230px); }
  .job-choice-grid, .mode-choice-grid { grid-template-columns: 1fr; }
}

/* ===== Protected performance workspace ===== */
.performance-workspace {
  width: 100%;
  height: calc(100vh - 94px);
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f5f7f6;
}
.performance-workspace iframe { width: 100%; height: 100%; display: block; border: 0; background: #f5f7f6; }

@media (max-width: 760px) {
  .performance-workspace { height: calc(100vh - 80px); min-height: 680px; border-radius: 5px; }
}

/* 2026 福利预算管理 */
.benefit-year-tag { margin-left: 7px; color: var(--green); background: var(--mint); vertical-align: 3px; }
.benefit-tabs { display: flex; gap: 2px; margin: -6px 0 18px; border-bottom: 1px solid var(--line); }
.benefit-tabs button { min-width: 92px; height: 40px; padding: 0 15px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.benefit-tabs button:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.benefit-tabs button.active { border-bottom-color: var(--green); color: var(--green); }
.benefit-notice { min-height: 48px; margin-bottom: 16px; padding: 10px 13px; border: 1px solid #efd5ac; border-left: 3px solid var(--amber); display: flex; align-items: flex-start; gap: 10px; background: #fffaf2; }
.benefit-notice > svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; color: var(--amber); }
.benefit-notice > div { min-width: 0; flex: 1; display: flex; flex-wrap: wrap; gap: 4px 11px; font-size: 10px; }
.benefit-notice > div strong { font-size: 11px; }
.benefit-notice > div span { color: #6f6251; }
.benefit-notice > button { margin-left: auto; padding: 2px 0; border: 0; color: #8e520d; background: transparent; font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.benefit-notice.info { border-color: #cddeda; border-left-color: var(--green); background: #f6faf8; }
.benefit-notice.info > svg { color: var(--green); }
.benefit-notice.info > div span { color: var(--muted); }
.benefit-stats { margin-bottom: 18px; }
.benefit-overview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr); gap: 16px; margin-bottom: 18px; }
.benefit-category-list { padding: 5px 16px 12px; }
.benefit-category-row { min-height: 52px; border-bottom: 1px solid #edf1ef; display: grid; grid-template-columns: minmax(135px, 1fr) 2.8fr 72px 48px; align-items: center; gap: 12px; }
.benefit-category-row:last-child { border-bottom: 0; }
.benefit-category-row > div:first-child { min-width: 0; display: flex; align-items: center; gap: 9px; }
.benefit-category-row strong { font-size: 10px; }
.benefit-category-icon { width: 29px; height: 29px; flex: 0 0 auto; border-radius: 6px; display: grid; place-items: center; color: var(--green); background: var(--mint); }
.benefit-category-icon.blue { color: var(--blue); background: var(--blue-bg); }
.benefit-category-icon.amber { color: var(--amber); background: var(--amber-bg); }
.benefit-category-icon.violet { color: #765a91; background: #eee7f4; }
.benefit-category-icon svg { width: 15px; height: 15px; }
.benefit-category-row .track { height: 7px; border-radius: 4px; overflow: hidden; background: #e7ece9; }
.benefit-category-row .track i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.benefit-category-row .track i.blue { background: var(--blue); }
.benefit-category-row .track i.amber { background: var(--amber); }
.benefit-category-row .track i.violet { background: #765a91; }
.benefit-category-row > b { font-family: Georgia, serif; font-size: 13px; text-align: right; white-space: nowrap; }
.benefit-category-row > small { color: var(--ink); font-family: Georgia, serif; font-size: 13px; font-weight: 700; text-align: right; }
.benefit-source-note { min-height: 38px; padding: 9px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 7px; color: #b34949; background: #fafcfb; font-size: 9px; font-weight: 800; }
.benefit-source-note svg { width: 14px; height: 14px; flex: 0 0 auto; }
.benefit-issue-list { padding: 2px 16px 9px; }
.benefit-issue-list > div { min-height: 58px; border-bottom: 1px solid #edf1ef; display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.benefit-subtitle-emphasis, .benefit-expense-analysis-panel .panel-head h2 > span { color: var(--ink); }
.benefit-subtitle-emphasis { font-weight: 700; }
.benefit-expense-analysis-panel { display: flex; flex-direction: column; }
.benefit-expense-analysis-panel .benefit-issue-list { flex: 1; display: grid; grid-template-rows: minmax(44px, .45fr) minmax(44px, .45fr) minmax(124px, 2.1fr); }
.benefit-expense-analysis-panel .benefit-issue-list > div { min-height: 0; }
.benefit-expense-analysis-panel .benefit-issue-list > div:nth-child(-n+2) { min-height: 44px; }
.benefit-expense-analysis-panel .benefit-issue-list > .benefit-issue-anomaly { min-height: 124px; padding: 18px 0 12px; align-items: start; }
.benefit-issue-list > div:last-child { border-bottom: 0; }
.benefit-issue-list > div > span { width: 29px; height: 29px; border-radius: 6px; display: grid; place-items: center; color: var(--amber); background: var(--amber-bg); }
.benefit-issue-list svg { width: 15px; height: 15px; }
.benefit-issue-list p { min-width: 0; margin: 0; }
.benefit-issue-list p strong, .benefit-issue-list p small { display: block; }
.benefit-issue-list p strong { margin-bottom: 2px; font-size: 10px; }
.benefit-issue-list p small { color: var(--muted); font-size: 9px; }
.benefit-issue-list b, .benefit-issue-list em { min-width: 26px; padding: 3px 6px; border-radius: 4px; color: #985808; background: var(--amber-bg); font-size: 9px; font-style: normal; text-align: center; white-space: nowrap; }
.benefit-issue-list em { color: var(--muted); background: #edf1ef; }
.benefit-issue-list > .benefit-issue-anomaly > span { color: #b34949; background: #fff0f0; }
.benefit-issue-list .benefit-issue-anomaly p small { color: #a53f3f; }
.benefit-issue-list .benefit-issue-anomaly em { color: #a53f3f; background: #fff0f0; font-weight: 800; }
.benefit-anomaly-link { color: #a53f3f; font-weight: 700; line-height: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.benefit-anomaly-word { font-size: 11px; font-weight: 800; line-height: 1; }
.benefit-anomaly-link:hover { color: #7f2828; }
.benefit-anomaly-link:focus-visible { border-radius: 2px; outline: 2px solid #b34949; outline-offset: 2px; }
.benefit-rhythm { margin-bottom: 2px; }
.benefit-rhythm > div:last-child { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.benefit-rhythm article { min-width: 0; padding: 14px 16px 16px; border-right: 1px solid var(--line); }
.benefit-rhythm article:last-child { border-right: 0; }
.benefit-rhythm article > small, .benefit-rhythm article > strong { display: block; }
.benefit-rhythm article > small { color: var(--muted); font-size: 9px; }
.benefit-rhythm article > strong { margin-top: 4px; font-size: 11px; }
.benefit-rhythm article p { margin: 8px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; }
.benefit-rhythm .tag { flex: 0 0 auto; }
.benefit-toolbar { min-height: 61px; padding: 12px 14px; border: 1px solid var(--line); border-bottom: 0; display: flex; align-items: center; gap: 9px; background: white; }
.benefit-toolbar label { position: relative; width: min(330px, 34%); min-width: 210px; }
.benefit-toolbar label svg { position: absolute; top: 9px; left: 10px; width: 15px; height: 15px; color: #87928d; }
.benefit-toolbar input, .benefit-toolbar select { height: 34px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: white; outline: 0; font-size: 10px; }
.benefit-toolbar input { width: 100%; padding: 0 10px 0 33px; }
.benefit-toolbar select { min-width: 130px; padding: 0 28px 0 10px; }
.benefit-toolbar input:focus, .benefit-toolbar select:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(25,105,81,.1); }
.benefit-toolbar > span { margin-left: auto; color: var(--muted); font-size: 9px; white-space: nowrap; }
.benefit-toolbar .btn { min-height: 34px; }
.benefit-table { border-radius: 0; }
.benefit-table table { min-width: 1120px; }
.benefit-table th, .benefit-table td { padding-left: 13px; padding-right: 13px; }
.benefit-project-line { display: flex; align-items: center; gap: 7px; }
.benefit-project-name { font-size: 10px; font-weight: 800; }
.benefit-project-note { max-width: 230px; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.benefit-money { font-family: Georgia, serif; font-size: 11px; font-weight: 800; white-space: nowrap; }
.benefit-money.missing { color: var(--red); font-family: inherit; font-size: 9px; }
.benefit-money.saving { color: var(--green); }
.benefit-money.overspent { color: var(--red); }
.benefit-actual-cell { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.benefit-actual-cell strong { font-family: Georgia, serif; font-size: 11px; }
.benefit-actual-cell .icon-btn { width: 25px; height: 25px; border: 0; color: var(--green); background: #edf6f2; }
.benefit-actual-cell .icon-btn:hover { background: var(--mint); }
.benefit-actual-cell svg { width: 12px; height: 12px; }
.benefit-actual-source { display: block; max-width: 145px; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.benefit-actual-source.corrected { color: var(--amber); }
.benefit-edit { width: 28px; height: 28px; border: 0; color: var(--green); background: transparent; }
.benefit-edit:hover { background: #edf6f2; }
.benefit-edit svg { width: 14px; height: 14px; }
.benefit-table tfoot th, .benefit-table tfoot td { min-height: 42px; border-top: 1px solid var(--line); border-bottom: 0; background: #f8faf9; font-size: 9px; }
.benefit-table tfoot th { color: var(--ink); text-align: right; }
.benefit-table tfoot td { font-weight: 700; }
.benefit-table tfoot .benefit-unallocated-row th, .benefit-table tfoot .benefit-unallocated-row td { color: var(--amber); background: #fffaf2; }
.benefit-table tfoot .benefit-year-total th, .benefit-table tfoot .benefit-year-total td { color: #fff; background: var(--green); font-size: 10px; }
.benefit-plan-section { margin-top: 18px; }
.benefit-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.benefit-section-head h2 { margin: 0; font-size: 14px; }
.benefit-section-head p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.benefit-calendar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.benefit-calendar-grid > .panel > .panel-head h2 { font-size: 15px; }
.benefit-calendar-grid .panel-head .tag { font-weight: 800; }
.benefit-classification-table { overflow-x: auto; border-top: 1px solid #edf1ef; }
.benefit-classification-table table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
.benefit-classification-table col:nth-child(1) { width: 29%; }
.benefit-classification-table col:nth-child(2) { width: 43%; }
.benefit-classification-table col:nth-child(3) { width: 28%; }
.benefit-classification-table th, .benefit-classification-table td { padding: 10px 9px; border-bottom: 1px solid #edf1ef; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.benefit-classification-table thead th { color: var(--ink); background: #f7faf8; font-size: 15px; font-weight: 800; }
.benefit-classification-table tbody th { color: var(--ink); font-size: 10px; font-weight: 700; }
.benefit-classification-table tbody td { color: var(--muted); font-size: 11px; line-height: 1.55; }
.benefit-calendar-grid > .panel:first-child .benefit-classification-table thead th { font-size: 15px; text-align: center; }
.benefit-calendar-grid > .panel:first-child .benefit-classification-table tbody th { font-size: 11px; }
.benefit-calendar-grid > .panel:first-child .benefit-classification-table tbody td { font-size: 11px; }
.benefit-classification-table tbody td:nth-child(2) { color: var(--ink); font-weight: 800; }
.benefit-classification-table tbody td:last-child { color: #b34949; font-weight: 800; font-variant-numeric: tabular-nums; }
.benefit-classification-table tbody tr:last-child th, .benefit-classification-table tbody tr:last-child td { border-bottom: 0; }
.benefit-drawer-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(10,27,21,.42); }
.benefit-drawer { position: absolute; top: 0; right: 0; width: min(460px, 100%); height: 100%; overflow-y: auto; background: white; box-shadow: -16px 0 36px rgba(10,34,27,.14); }
.benefit-drawer > header { min-height: 64px; padding: 0 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.benefit-drawer > header h2 { margin: 0; font-size: 16px; }
.benefit-drawer > header .icon-btn { width: 31px; height: 31px; }
.benefit-drawer form { padding: 19px 20px 28px; }
.benefit-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.benefit-form-grid label { min-width: 0; display: grid; gap: 5px; color: var(--ink); font-size: 10px; font-weight: 700; }
.benefit-form-grid label.full { grid-column: 1 / -1; }
.benefit-form-grid input, .benefit-form-grid select, .benefit-form-grid textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: white; outline: 0; font: inherit; font-weight: 400; }
.benefit-form-grid input, .benefit-form-grid select { height: 37px; padding: 0 10px; }
.benefit-form-grid textarea { min-height: 76px; padding: 9px 10px; resize: vertical; }
.benefit-form-grid input:focus, .benefit-form-grid select:focus, .benefit-form-grid textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(25,105,81,.1); }
.benefit-form-grid label small { color: var(--muted); font-size: 8px; font-weight: 400; }
.benefit-drawer form > footer { margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.benefit-actual-backdrop { z-index: 110; }

/* ===== 行政费用 ===== */
.admin-expense-module-tabs { margin-bottom: 0; }
.admin-expense-module-tabs button { min-width: 132px; }
.admin-expense-module-panel { padding-top: 18px; }
.admin-expense-module-head { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-expense-module-head h2 { margin: 0 0 5px; font-size: 16px; }
.admin-expense-module-head p { margin: 0; color: var(--muted); font-size: 10px; }
.admin-expense-module-head .actions { display: flex; align-items: center; gap: 8px; }
.admin-expense-head { align-items: center; }
.admin-expense-head .actions { align-items: center; }
.admin-expense-stats { box-shadow: none; }
.admin-expense-registration-stats { grid-template-columns: 1.06fr 1.06fr .88fr; }
.admin-expense-stats .stat { min-width: 0; min-height: 108px; }
.admin-expense-stats .label { color: var(--ink); font-weight: 800; }
.admin-expense-stats .value { margin-top: 21px; overflow: hidden; color: #b4232f; font-size: 22px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.admin-expense-stats .value small { color: #b4232f; font-weight: 800; }
.admin-expense-registration-stats .stat:nth-child(3) .value { transform: translateX(1cm); }
.admin-expense-registration-stats .stat:nth-child(3) .trend { display: none; }
.admin-expense-toolbar { min-height: 62px; padding: 12px 14px; display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; border: 1px solid var(--line); border-bottom: 0; background: white; }
.admin-expense-toolbar label { position: relative; width: 180px; min-width: 140px; flex: 1 1 180px; }
.admin-expense-toolbar label svg { position: absolute; top: 9px; left: 10px; width: 15px; height: 15px; color: #87928d; }
.admin-expense-toolbar input, .admin-expense-toolbar select, .admin-budget-year { height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: white; outline: 0; font-size: 11px; }
.admin-expense-toolbar select:disabled { color: #98a19d; background: #f4f6f4; cursor: not-allowed; }
.admin-expense-toolbar label input { width: 100%; padding-left: 33px; }
.admin-expense-toolbar select { min-width: 90px; padding-right: 24px; }
.admin-expense-department-filter { width: 120px; min-width: 105px !important; flex: 0 1 130px; }
.admin-expense-filter-group { min-width: 150px; flex: 1 1 180px; display: flex; align-items: center; gap: 4px; }
.admin-expense-filter-group:nth-of-type(2) { min-width: 160px; flex-basis: 190px; }
.admin-expense-filter-group select { min-width: 0; flex: 1; }
.admin-expense-filter-action { width: 30px; height: 34px; flex: 0 0 30px; color: var(--green); border-color: #c8d9d3; }
.admin-expense-filter-action:hover { background: var(--mint); }
.admin-expense-filter-action.danger { color: var(--red); }
.admin-expense-filter-action.danger:hover { background: var(--red-bg); }
.admin-expense-filter-action:disabled { color: #aab3af; background: #f5f7f6; border-color: var(--line); }
.admin-expense-toolbar [data-admin-expense-month-filter] { width: 96px; flex: 0 1 105px; }
.admin-expense-toolbar [data-admin-expense-payer-filter] { width: 108px; min-width: 100px; flex: 0 1 118px; }
.admin-expense-date-filter { display: flex; align-items: center; gap: 6px; }
.admin-expense-date-filter > span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.admin-expense-date-filter select { min-width: 112px; }
.admin-expense-toolbar input:focus, .admin-expense-toolbar select:focus, .admin-budget-year:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(25,105,81,.1); }
.admin-expense-toolbar > span { margin-left: auto; color: var(--muted); font-size: 9px; white-space: nowrap; }
.admin-expense-table { overflow: hidden; border-radius: 0; }
.admin-expense-table .table-wrap { overflow-x: hidden; }
.admin-expense-table table { width: 100%; min-width: 0; table-layout: fixed; }
.admin-expense-table th, .admin-expense-table td { min-width: 0; padding-right: 6px; padding-left: 6px; overflow: hidden; overflow-wrap: anywhere; }
.admin-expense-table th:nth-child(1), .admin-expense-table th:nth-child(2) { color: var(--ink); font-size: 12px; font-weight: 850; }
.admin-expense-table th:nth-child(1) { width: 8%; }
.admin-expense-table th:nth-child(2) { width: 9%; }
.admin-expense-table th:nth-child(3) { width: 13%; }
.admin-expense-table th:nth-child(4) { width: 15%; }
.admin-expense-table th:nth-child(5) { width: 8%; }
.admin-expense-table th:nth-child(6) { width: 9%; }
.admin-expense-table th:nth-child(7) { width: 11%; }
.admin-expense-table th:nth-child(8) { width: 23%; }
.admin-expense-table th:nth-child(9) { width: 4%; }
.admin-expense-table td:nth-child(1), .admin-expense-table td:nth-child(5), .admin-expense-table td:nth-child(6) { white-space: nowrap; }
.admin-expense-table tbody td:nth-child(2), .admin-expense-table tbody td:nth-child(5), .admin-expense-table tbody td:nth-child(7) { color: var(--ink); font-weight: 800; }
.admin-expense-table td:nth-child(8) > strong { display: -webkit-box; overflow: hidden; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.admin-expense-source { display: block; max-width: 240px; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.admin-expense-type { display: inline-flex; padding: 5px 7px; border-radius: 4px; color: var(--green); background: var(--mint); font-size: 9px; font-weight: 700; white-space: nowrap; }
.admin-expense-category { display: inline-flex; padding: 5px 7px; border-radius: 4px; color: var(--blue); background: var(--blue-bg); font-size: 9px; font-weight: 700; }
.admin-expense-row-select { width: 100%; min-width: 0; height: 32px; padding: 0 20px 0 6px; border: 1px solid #c8d9d3; border-radius: 5px; color: var(--ink); background-color: white; outline: 0; font-size: 10px; font-weight: 700; }
.admin-expense-row-select:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(25,105,81,.1); }
.admin-expense-row-type { color: var(--green); background-color: var(--mint); }
.admin-expense-row-subtype { color: var(--blue); background-color: var(--blue-bg); }
.admin-expense-money { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-expense-delete { color: var(--red); }
.admin-expense-delete:hover { background: var(--red-bg); }
.admin-expense-pagination { min-height: 58px; padding: 11px 14px; border: 1px solid var(--line); border-top: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: white; }
.admin-expense-page-summary { color: var(--muted); font-size: 9px; }
.admin-expense-pagination nav { display: flex; align-items: center; gap: 5px; }
.admin-expense-pagination nav button { width: 31px; height: 31px; padding: 0; border: 1px solid var(--line); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: white; cursor: pointer; font-size: 9px; font-weight: 700; }
.admin-expense-pagination nav button:hover:not(:disabled) { border-color: #a9c8bc; background: var(--mint); }
.admin-expense-pagination nav button.active { color: white; border-color: var(--green); background: var(--green); }
.admin-expense-pagination nav button:disabled { opacity: .4; cursor: not-allowed; }
.admin-expense-pagination nav svg { width: 14px; height: 14px; }
.admin-expense-page-gap { width: 18px; color: var(--muted); font-size: 9px; text-align: center; }
.admin-expense-row-focus > td { border-top-color: #dc8f95; border-bottom-color: #dc8f95; background: #fff0f1 !important; }
.admin-expense-row-focus > td:first-child { box-shadow: inset 4px 0 0 #b4232f; }
.admin-expense-row-focus > td:last-child { box-shadow: inset -1px 0 0 #dc8f95; }
.admin-expense-row-focus .admin-expense-row-select { border-color: #dca4a8; background-color: #fffafa; }
[data-admin-expense-drawer] .benefit-drawer { width: min(540px, 100%); }
.admin-expense-payer-field { position: relative; }
.admin-expense-payer-suggestions { position: absolute; z-index: 8; top: calc(100% + 4px); left: 0; right: 0; max-height: 190px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: white; box-shadow: 0 10px 24px rgba(21, 55, 43, .14); }
.admin-expense-payer-suggestions button { width: 100%; min-height: 32px; padding: 0 9px; border: 0; border-radius: 4px; display: block; color: var(--ink); background: transparent; text-align: left; font: inherit; cursor: pointer; }
.admin-expense-payer-suggestions button:hover, .admin-expense-payer-suggestions button:focus { background: var(--mint); outline: 0; }
.admin-expense-category-drawer { width: min(420px, 100%); }
.admin-expense-category-drawer > header small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.admin-expense-manager-fields { padding: 20px; }
.admin-expense-manager-fields select, .admin-expense-manager-fields input { font-size: 11px; }
.admin-expense-manager-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.admin-expense-manager-actions .btn { width: 128px; }
.admin-expense-manager-add-wrap { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.admin-expense-manager-add-wrap .btn { width: 128px; min-height: 34px; color: var(--green); border-color: #b8d9c9; background: #e7f4ed; }
.admin-expense-manager-add-wrap .btn:hover { background: #d8eee2; }
.admin-expense-category-drawer > footer { margin: 0 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; }
.admin-budget-year { min-width: 112px; padding-right: 28px; }
.admin-budget-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-budget-stats .stat { min-height: 126px; padding: 16px; }
.admin-budget-stats .value { margin-top: 15px; font-size: 20px; }
.admin-budget-stats .trend { position: static; max-width: 100%; margin-top: 12px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-budget-comparison-panel, .admin-budget-table, .admin-budget-actual-panel { margin-bottom: 18px; overflow: hidden; }
.admin-budget-comparison-panel .panel-head h2, .admin-budget-table .panel-head h2, .admin-budget-actual-panel .panel-head h2 { display: flex; align-items: baseline; gap: 9px; }
.admin-budget-comparison-panel .panel-head h2 span, .admin-budget-table .panel-head h2 span, .admin-budget-actual-panel .panel-head h2 span { color: var(--muted); font-size: 9px; font-weight: 500; }
.admin-budget-comparison-wrap { overflow-x: auto; }
.admin-budget-comparison { width: 100%; min-width: 920px; table-layout: fixed; }
.admin-budget-comparison th:first-child, .admin-budget-comparison td:first-child { width: 190px; text-align: left; }
.admin-budget-comparison th, .admin-budget-comparison td { height: 42px; padding: 7px 8px; text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-budget-comparison thead th { color: #52635d; background: #f4f7f5; }
.admin-budget-comparison thead th small { margin-top: 2px; display: block; color: var(--muted); font-size: 7px; font-weight: 500; }
.admin-budget-comparison .selected { background: #edf7f2; }
.admin-budget-comparison thead .selected { color: var(--green); background: #dcefe6; }
.admin-budget-comparison tfoot th, .admin-budget-comparison tfoot td { color: var(--ink); background: #f4f7f5; font-weight: 800; }
.admin-budget-pending { color: var(--amber); font-weight: 700; }
.admin-budget-table table { width: 100%; min-width: 0; table-layout: fixed; }
.admin-budget-table th:nth-child(1) { width: 24%; }
.admin-budget-table th:nth-child(2) { width: 18%; }
.admin-budget-table th:nth-child(3) { width: 15%; }
.admin-budget-table th:nth-child(4) { width: 33%; }
.admin-budget-table th:nth-child(5) { width: 10%; }
.admin-budget-table td { overflow-wrap: anywhere; }
.admin-budget-panel-actions { margin-left: auto; }
.admin-budget-panel-actions .btn { min-height: 32px; }
.admin-budget-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.admin-budget-row-actions .danger { color: var(--red); }
.admin-budget-locked { color: var(--muted); font-size: 9px; }
.admin-budget-actual-panel table { width: 100%; table-layout: fixed; }
.admin-budget-actual-panel th, .admin-budget-actual-panel td { width: 25%; }
.admin-budget-actual-panel tfoot th, .admin-budget-actual-panel tfoot td { background: #f4f7f5; font-weight: 800; }
.admin-budget-generate-drawer { width: min(420px, 100%); }
.admin-summary-total-band { margin-bottom: 16px; overflow: hidden; border: 1px solid #d7e2dd; box-shadow: none; }
.admin-summary-total-band > header { min-height: 54px; padding: 0 16px; border-bottom: 1px solid #dce6e2; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-summary-total-band > header > div { display: grid; gap: 4px; }
.admin-summary-total-band h2 { margin: 0; font-size: 14px; }
.admin-summary-total-band p { margin: 0; color: var(--muted); font-size: 8px; }
.admin-summary-total-band > header > span { color: var(--muted); font-size: 8px; white-space: nowrap; }
.admin-summary-total-grid { display: grid; grid-template-columns: repeat(12, minmax(78px, 1fr)); overflow-x: auto; }
.admin-summary-total-grid article { min-width: 0; padding: 11px 5px; border-right: 1px solid #e1e9e5; display: grid; gap: 6px; text-align: center; }
.admin-summary-total-grid article:last-child { border-right: 0; }
.admin-summary-total-grid span { color: #71817b; font-size: 11px; font-weight: 850; }
.admin-summary-total-grid strong { overflow: hidden; color: #24483d; font-size: 9px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.admin-summary-panel { margin-bottom: 18px; overflow: hidden; }
.admin-summary-panel > .panel-head { min-height: 58px; background: #f7faf8; }
.admin-summary-panel .panel-head h2 { display: flex; align-items: baseline; gap: 9px; }
.admin-summary-panel .panel-head h2 span { color: var(--muted); font-size: 9px; font-weight: 500; }
.admin-summary-sync { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 9px; font-weight: 700; }
.admin-summary-sync svg { width: 13px; height: 13px; }
.admin-summary-group-tabs { width: min(680px, calc(100% - 32px)); margin: 12px 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; background: transparent; }
.admin-summary-group-tabs button { position: relative; height: 44px; padding: 0 10px; border: 1px solid #d8e2de; border-radius: 3px; display: flex; align-items: center; gap: 7px; color: #556760; background: #eef4f1; cursor: pointer; }
.admin-summary-group-tabs button:last-child { border-right: 1px solid #d8e2de; }
.admin-summary-group-tabs button:hover { color: var(--green); background: rgba(255,255,255,.55); }
.admin-summary-group-tabs button.active { color: #185f49; background: white; }
.admin-summary-group-tabs button.active::after { content: ''; position: absolute; right: 18px; bottom: 0; left: 18px; height: 3px; background: #258263; }
.admin-summary-group-tabs button > span { font-size: 9px; font-weight: 800; }
.admin-summary-group-tabs button > strong { font-size: 11px; letter-spacing: 0; }
.admin-summary-group-tabs button > small { margin-left: auto; font-size: 7px; font-weight: 800; }
.admin-summary-table-wrap { max-width: 100%; overflow: auto; }
.admin-summary-table { width: max-content; min-width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.admin-summary-table th, .admin-summary-table td { height: 54px; padding: 5px 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 9px; text-align: right; vertical-align: middle; }
.admin-summary-table thead th { position: sticky; top: 0; z-index: 4; height: 42px; color: #3e5049; background: #f2f6f4; text-align: center; white-space: nowrap; }
.admin-summary-table thead th:first-child, .admin-summary-table thead th:nth-child(2) { font-size: 11px; font-weight: 850; }
.admin-summary-table th:first-child { left: 0; width: 96px; min-width: 96px; }
.admin-summary-table th:nth-child(2), .admin-summary-table td.admin-summary-item { left: 96px; width: 152px; min-width: 152px; }
.admin-summary-table thead th:first-child, .admin-summary-table thead th:nth-child(2) { z-index: 6; }
.admin-summary-table td:not(.admin-summary-item), .admin-summary-table thead th:nth-child(n+3), .admin-summary-table tfoot td { width: 104px; min-width: 104px; }
.admin-summary-table .admin-summary-group { position: sticky; left: 0; z-index: 3; color: #24483d; background: #e4f1eb; font-size: 11px; text-align: center; white-space: normal; }
.admin-summary-table .admin-summary-group.administrative { color: #31546d; background: #e8f0f5; }
.admin-summary-table .admin-summary-group.recruitment { color: #76521f; background: #f6eedf; }
.admin-summary-table .admin-summary-group.salary { color: #69415a; background: #f2e9ef; }
.admin-summary-item { position: sticky; left: 96px; z-index: 2; color: var(--ink); background: white; text-align: center !important; white-space: normal; }
.admin-summary-item > strong { font-size: 11px; }
.admin-summary-item strong > span, .admin-summary-item strong > small { display: block; }
.admin-summary-item strong > small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 600; }
.admin-summary-cell { min-height: 42px; display: grid; align-content: center; gap: 3px; }
.admin-summary-cell > div:first-child { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.admin-summary-cell strong { color: var(--ink); font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-summary-cell button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; display: inline-grid; flex: 0 0 22px; place-items: center; color: #71827b; background: transparent; cursor: pointer; }
.admin-summary-cell button:hover { color: var(--green); background: var(--mint); }
.admin-summary-cell button svg { width: 12px; height: 12px; }
.admin-summary-cell > div.editing { width: 100%; display: grid; grid-template-columns: minmax(40px,1fr) 22px 22px; justify-content: stretch; gap: 3px; }
.admin-budget-inline-input { width: 100%; min-width: 0; height: 30px; padding: 0 4px; border: 1px solid #4c8d75; border-radius: 3px; outline: 2px solid rgba(37,130,99,.13); color: var(--ink); background: #fff; font: 800 9px/1 "Microsoft YaHei", sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
.admin-budget-inline-input:focus { border-color: #187357; outline-color: rgba(37,130,99,.22); }
.admin-summary-cell.is-saving .admin-budget-inline-input { color: var(--muted); background: #f3f7f5; cursor: wait; }
.admin-summary-cell button.admin-budget-inline-confirm { width: 22px; height: 30px; border: 1px solid #2f8568; color: white; background: #2f8568; }
.admin-summary-cell button.admin-budget-inline-confirm:hover { color: white; background: #1d7157; }
.admin-summary-cell button.admin-budget-inline-confirm:disabled { opacity: .55; cursor: wait; }
.admin-summary-cell button.admin-budget-inline-delete { width: 22px; height: 30px; border: 1px solid #d7a6a6; color: #b93636; background: #fff5f5; }
.admin-summary-cell button.admin-budget-inline-delete:hover { color: white; background: #b93636; }
.admin-summary-cell button.admin-budget-inline-delete:disabled { opacity: .55; cursor: wait; }
.admin-summary-pending { color: var(--amber); font-weight: 700; }
.admin-summary-subtotal th, .admin-summary-subtotal td { height: 50px; color: #173f32; background: #d5e1dc; font-size: 10px; font-weight: 850; }
.admin-summary-subtotal th { position: sticky; left: 0; z-index: 3; font-size: 12px; text-align: left; }
.admin-summary-table tfoot th, .admin-summary-table tfoot td { height: 48px; color: white; background: #205c49; font-size: 10px; font-weight: 800; }
.admin-summary-table tfoot th { position: sticky; left: 0; z-index: 3; text-align: left; }
.admin-summary-chart { overflow: hidden; }
.admin-summary-chart .panel-head h2 { display: flex; align-items: baseline; gap: 8px; }
.admin-summary-chart .panel-head h2 span { color: var(--muted); font-size: 9px; font-weight: 500; }
.admin-summary-chart-scope { padding: 7px 10px; border: 1px solid #c9d9d3; border-radius: 4px; color: #24664f; background: #f1f7f4; font-size: 9px; font-weight: 750; }
.admin-summary-chart-canvas { width: 100%; padding: 14px 18px 8px; overflow-x: auto; }
.admin-summary-chart svg { width: 100%; min-width: 760px; height: 290px; }
.admin-summary-chart .grid line { stroke: #e3eae7; stroke-width: 1; }
.admin-summary-chart polyline { fill: none; stroke: #23755b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.admin-summary-chart .points circle { fill: white; stroke: #23755b; stroke-width: 3; }
.admin-summary-chart .points text { fill: #65756f; font-size: 10px; }
.admin-summary-chart .points text:not(.value) { font-size: 11px; font-weight: 750; }
.admin-summary-chart .points text.value { fill: #263c34; font-size: 9px; font-weight: 700; }
[data-admin-budget-cell-drawer] .benefit-drawer > header small { margin-top: 4px; display: block; color: var(--muted); font-size: 9px; }
.admin-budget-linked-actual { grid-column: 1 / -1; padding: 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; color: var(--green); background: var(--mint); font-size: 9px; }
.admin-budget-linked-actual[hidden] { display: none; }
.admin-budget-linked-actual svg { width: 14px; height: 14px; }
.admin-budget-linked-actual strong { color: var(--green); font-size: 11px; }

@media (max-width: 980px) {
  .admin-budget-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-expense-toolbar { align-items: stretch; flex-wrap: wrap; }
  .admin-expense-toolbar label { width: 100%; min-width: 0; flex-basis: 100%; }
  .admin-expense-toolbar select, .admin-expense-toolbar > input { min-width: 0; flex: 1; }
  .admin-expense-filter-group { flex: 1 1 calc(50% - 5px); }
  .admin-expense-date-filter { flex: 1 1 100%; }
  .admin-expense-date-filter select { flex: 1; }
  .admin-expense-toolbar > span { flex-basis: 100%; margin-left: 0; }
}

@media (max-width: 1180px) {
  .admin-expense-toolbar label { min-width: 0; }
  .admin-expense-toolbar select { min-width: 0; }
  .admin-expense-department-filter { min-width: 0 !important; }
  .admin-expense-filter-group, .admin-expense-filter-group:nth-of-type(2) { min-width: 0; }
  .admin-expense-toolbar [data-admin-expense-payer-filter] { min-width: 0; }
  .admin-expense-toolbar > span { display: none; }
  .admin-expense-table { overflow: visible; border: 0; background: transparent; }
  .admin-expense-table .table-wrap { overflow: visible; }
  .admin-expense-table table, .admin-expense-table tbody { width: 100%; display: block; }
  .admin-expense-table thead { display: none; }
  .admin-expense-table tbody { display: grid; gap: 10px; }
  .admin-expense-table tbody tr { padding: 12px; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; background: white; box-shadow: var(--shadow); }
  .admin-expense-table tbody td { width: auto; min-width: 0; padding: 0; border: 0; display: block; overflow: visible; white-space: normal; }
  .admin-expense-table tbody td::before { content: attr(data-label); margin-bottom: 4px; display: block; color: var(--muted); font-size: 8px; font-weight: 600; }
  .admin-expense-table tbody td:nth-child(3), .admin-expense-table tbody td:nth-child(4) { grid-column: span 2; }
  .admin-expense-table tbody td:nth-child(8) { grid-column: span 3; }
  .admin-expense-table tbody td.empty-line { grid-column: 1 / -1; text-align: center; }
  .admin-expense-table tbody td:nth-child(9) { text-align: right; }
  .admin-expense-table tbody td:nth-child(9)::before { text-align: right; }
  .admin-expense-row-select { height: 34px; font-size: 10px; }
}

@media (max-width: 600px) {
  .admin-budget-stats { grid-template-columns: 1fr; }
  .admin-expense-registration-stats { grid-template-columns: 1fr; }
  .admin-expense-module-tabs button { min-width: 0; }
  .admin-summary-group-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-expense-module-head { align-items: stretch; flex-direction: column; }
  .admin-expense-module-head .actions { width: 100%; }
  .admin-expense-module-head .actions { flex-wrap: wrap; }
  .admin-expense-module-head .actions .btn { flex: 1; }
  .admin-expense-module-head .actions .admin-budget-year { width: 100%; }
  .admin-expense-head { align-items: stretch; }
  .admin-expense-head .actions { width: 100%; }
  .admin-expense-head .actions .btn { flex: 1; }
  .admin-expense-head .actions .admin-budget-year { width: 100%; }
  .admin-expense-toolbar select, .admin-expense-toolbar > input, .admin-expense-toolbar .btn { width: 100%; flex: 1 1 100%; }
  .admin-expense-filter-group { width: 100%; flex-basis: 100%; }
  .admin-expense-filter-group select { width: auto; }
  .admin-expense-date-filter { align-items: stretch; flex-wrap: wrap; }
  .admin-expense-date-filter > span { width: 100%; }
  .admin-expense-table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-expense-table tbody td:nth-child(3), .admin-expense-table tbody td:nth-child(4), .admin-expense-table tbody td:nth-child(8) { grid-column: span 2; }
  .admin-expense-pagination { align-items: stretch; flex-direction: column; }
  .admin-expense-pagination nav { justify-content: center; }
}
.benefit-actual-drawer { width: min(420px, 100%); }
.benefit-actual-summary { margin-bottom: 17px; padding: 13px; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; background: #f8faf9; }
.benefit-actual-summary span { color: var(--muted); font-size: 9px; }
.benefit-actual-summary strong { font-size: 10px; text-align: right; }

@media (max-width: 1080px) {
  .benefit-overview-grid { grid-template-columns: 1fr; }
  .benefit-calendar-grid { grid-template-columns: 1fr 1fr; }
  .benefit-calendar-grid > section:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .benefit-tabs { margin-top: 0; }
  .benefit-tabs button { min-width: 0; flex: 1; padding: 0 6px; }
  .benefit-notice > button { display: none; }
  .benefit-overview-grid { gap: 12px; }
  .benefit-category-row { grid-template-columns: minmax(120px, 1fr) 68px 45px; gap: 8px; }
  .benefit-category-row .track { display: none; }
  .benefit-rhythm > div:last-child { grid-template-columns: 1fr 1fr; }
  .benefit-rhythm article:nth-child(2) { border-right: 0; }
  .benefit-rhythm article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .benefit-toolbar { align-items: stretch; flex-wrap: wrap; }
  .benefit-toolbar label { width: 100%; min-width: 0; flex-basis: 100%; }
  .benefit-toolbar select { min-width: 0; flex: 1; }
  .benefit-toolbar > span { flex-basis: 100%; margin-left: 0; }
  .benefit-calendar-grid { grid-template-columns: 1fr; }
  .benefit-calendar-grid > section:last-child { grid-column: auto; }
}

@media (max-width: 520px) {
  .benefit-rhythm > div:last-child { grid-template-columns: 1fr; }
  .benefit-rhythm article { border-right: 0; border-bottom: 1px solid var(--line); }
  .benefit-rhythm article:last-child { border-bottom: 0; }
  .benefit-form-grid { grid-template-columns: 1fr; }
  .benefit-form-grid label.full { grid-column: auto; }
}

/* ===== 员工档案、异动与面谈 ===== */
.employee-record-table { min-width: 1180px; }
.employee-record-table th:nth-child(2) { min-width: 170px; }
.employee-record-table th:nth-child(5) { min-width: 145px; }
.employee-record-table th:nth-child(6) { min-width: 170px; }
.archive-progress { width: 118px; }
.archive-progress > span { margin-bottom: 7px; display: flex; justify-content: space-between; }
.archive-progress strong { color: var(--green); font-size: 10px; }
.archive-progress > div { height: 5px; overflow: hidden; border-radius: 5px; background: #e7eeeb; }
.archive-progress i { display: block; height: 100%; border-radius: inherit; background: var(--green-2); }
.archive-progress i.warn { background: var(--amber); }
.archive-missing { color: var(--amber); font-weight: 700; }
.archive-complete { color: var(--green); font-weight: 700; }
.relation-stats button.stat { min-width: 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; text-align: left; cursor: pointer; }
.relation-stats button.stat:last-child { border-right: 0; }
.relation-stats button.stat:hover { background: #f8fbf9; }
.relation-stats button.stat.selected { box-shadow: inset 0 -3px 0 var(--green-2); background: #f3f8f5; }
.employee-change-mode-panel { margin-bottom: 14px; overflow: hidden; }
.employee-change-mode-head { min-height: 48px; padding: 0 15px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 8px; }
.employee-change-mode-head strong { font-size: 11px; }
.employee-change-mode-head span { color: var(--muted); font-size: 8px; }
.employee-change-switcher { min-height: 92px; padding: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.employee-change-switcher button { position: relative; min-width: 0; min-height: 66px; padding: 10px 25px 10px 10px; border: 1px solid #e0e7e4; border-radius: 6px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; color: var(--ink); background: #f9fbfa; text-align: left; cursor: pointer; }
.employee-change-switcher button:hover { border-color: #91afa3; background: #f3f8f6; }
.employee-change-switcher button.active { border-color: #7da596; background: #f3f8f6; box-shadow: 0 0 0 1px rgba(24, 95, 74, .12) inset; }
.employee-change-switcher button > svg:first-child { width: 34px; height: 34px; padding: 8px; border-radius: 6px; color: #287c64; background: #eef7f3; }
.employee-change-switcher button:nth-child(2) > svg:first-child { color: #2e6799; background: #e5eef7; }
.employee-change-switcher button:nth-child(3) > svg:first-child { color: #a66513; background: #fff0d9; }
.employee-change-switcher button:nth-child(4) > svg:first-child { color: #765482; background: #f1e9f4; }
.employee-change-switcher button span, .employee-change-switcher button strong { min-width: 0; display: block; }
.employee-change-switcher button strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.employee-change-switcher button > b { min-width: 22px; color: #173d31; font-size: 17px; text-align: center; }
.employee-change-switcher button > svg:last-child { position: absolute; right: 6px; width: 12px; height: 12px; color: #a3b2ac; }
.employee-change-workspace { display: block; }
.employee-change-status-panel { min-width: 0; margin-top: 14px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; }
.employee-change-status-panel.focused { border-color: #d4aa65; box-shadow: 0 0 0 2px rgba(184, 112, 24, .12); }
.employee-change-status-head { min-height: 62px; padding: 9px 13px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.employee-change-status-entry { min-width: 170px; min-height: 42px; padding: 6px 10px; border: 1px solid #dbe5e1; border-radius: 6px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; color: var(--ink); background: #f7faf8; text-align: left; cursor: pointer; }
.employee-change-status-entry:hover { border-color: #91afa3; background: #f1f7f4; }
.employee-change-status-entry > svg { width: 28px; height: 28px; padding: 6px; border-radius: 5px; color: #486d60; background: #e8f0ec; }
.employee-change-status-entry span, .employee-change-status-entry strong, .employee-change-status-entry small { min-width: 0; display: block; }
.employee-change-status-entry strong { font-size: 10px; }
.employee-change-status-entry small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.employee-change-status-entry b { color: #173d31; font-size: 16px; }
.employee-change-status-hint { color: var(--muted); font-size: 8px; }
.employee-change-status-clear { margin-left: auto; padding: 5px 7px; border: 0; color: var(--green); background: transparent; font-size: 8px; cursor: pointer; }
.employee-change-status-grid { padding: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.employee-change-status-grid button { min-width: 0; min-height: 78px; padding: 10px; border: 1px solid #e2e8e5; border-radius: 5px; display: grid; grid-template-columns: 7px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 7px; align-items: start; color: var(--ink); background: #fafcfb; text-align: left; cursor: pointer; }
.employee-change-status-grid button:hover, .employee-change-status-grid button.active { border-color: #86a899; background: #f0f7f4; }
.employee-change-status-grid button > span:nth-child(2) { min-width: 0; }
.employee-change-status-grid button strong, .employee-change-status-grid button small { min-width: 0; display: block; }
.employee-change-status-grid button strong { font-size: 9px; }
.employee-change-status-grid button small { margin-top: 3px; color: var(--muted); font-size: 7px; line-height: 1.35; }
.employee-change-status-grid button b { grid-column: 1 / -1; color: #173d31; font-size: 18px; line-height: 1; text-align: right; }
.employee-change-status-attention { margin: 0 10px 10px; padding: 10px; border-radius: 5px; display: flex; align-items: center; gap: 9px; color: #806226; background: #fff8e9; }
.employee-change-status-attention > svg { width: 17px; height: 17px; flex: none; color: #a76b15; }
.employee-change-status-attention span, .employee-change-status-attention strong, .employee-change-status-attention small { min-width: 0; display: block; }
.employee-change-status-attention strong { font-size: 9px; }
.employee-change-status-attention small { margin-top: 3px; font-size: 7px; line-height: 1.45; }
.attention-dot { width: 7px; height: 7px; border-radius: 50%; }
.attention-dot.urgent { background: #b34949; }
.attention-dot.upcoming { background: #b87018; }
.attention-dot.effective { background: var(--green-2); }
.attention-dot.exception { background: #855f91; }
.relation-list-panel .toolbar { border-bottom: 1px solid var(--line); }
.relation-table { min-width: 1420px; }
.relation-table th:nth-child(4) { min-width: 290px; }
.relation-table th:nth-child(6) { min-width: 150px; }
.employee-change-month { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; gap: 8px; background: #fff; }
.employee-change-month span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.employee-change-month input { width: 128px; min-height: 30px; padding: 0; border: 0; background: transparent; }
.employee-change-detail-table { min-width: 1630px; table-layout: fixed; }
.employee-change-detail-table th, .employee-change-detail-table td { padding: 10px 8px; border-right: 1px solid #d8e6dc; text-align: center; vertical-align: middle; }
.employee-change-detail-table thead th { color: #234d3e; background: #e8f3ea; font-size: 10px; font-weight: 700; }
.employee-change-detail-table thead tr:first-child th { border-bottom-color: #aac6b1; }
.employee-change-detail-table tbody tr:hover { background: #f8fbf9; }
.employee-change-detail-table .change-col-sequence { width: 50px; }
.employee-change-detail-table .change-col-name { width: 112px; }
.employee-change-detail-table .change-col-department { width: 176px; }
.employee-change-detail-table .change-col-position { width: 118px; }
.employee-change-detail-table .change-col-date { width: 116px; }
.employee-change-detail-table .change-col-type { width: 88px; }
.employee-change-detail-table .change-col-salary-flow { width: 162px; }
.employee-change-detail-table .change-col-process { width: 126px; }
.employee-change-detail-table .change-col-sync { width: 120px; }
.employee-change-detail-table .change-col-action { width: 276px; }
.employee-change-detail-table td > small { margin-top: 3px; display: block; color: var(--muted); font-size: 8px; }
.employee-change-detail-table .salary-flow-cell { color: #365c4f; font-variant-numeric: tabular-nums; line-height: 1.35; }
.employee-change-detail-table .salary-flow-cell strong { display: block; color: #1b4d3e; }
.employee-change-detail-table .salary-flow-cell small { margin-top: 4px; line-height: 1.4; }
.employee-change-detail-table .change-process-cell, .employee-change-detail-table .change-sync-cell { line-height: 1.35; }
.employee-change-detail-table .change-process-cell small, .employee-change-detail-table .change-sync-cell small { margin-top: 4px; line-height: 1.35; }
.employee-change-detail-table .change-note-preview { display: block; margin-top: 7px; color: var(--muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.employee-change-detail-table .employee-change-row-actions { min-width: 0; justify-content: center; flex-wrap: wrap; }
.employee-change-detail-table .change-action-cell .relation-status { white-space: nowrap; }
.relation-reason { max-width: 150px; margin-top: 4px; display: block; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.relation-source { width: max-content; margin-top: 5px; padding: 2px 5px; border-radius: 3px; display: block; color: #5d7069; background: #edf1ef; font-size: 7px; font-weight: 700; }
.relation-source.dingtalk { color: #276394; background: #e8f1f8; }
.relation-source.manual { color: #6d563a; background: #f3eadf; }
.relation-dingtalk-lock { color: #276394; font-size: 8px; font-weight: 700; white-space: nowrap; }
.relation-type { display: inline-flex; padding: 5px 7px; border-radius: 4px; color: var(--blue); background: var(--blue-bg); font-size: 9px; font-weight: 700; white-space: nowrap; }
.change-compare { display: grid; grid-template-columns: minmax(95px, 1fr) 16px minmax(95px, 1fr); align-items: center; gap: 7px; }
.change-compare span { color: var(--muted); }
.change-compare svg { width: 14px; color: #9aa8a2; }
.change-compare strong { color: var(--green); }
.relation-status.pending_approval, .relation-status.pending_record { color: #956110; background: #fff4db; }
.relation-status.scheduled, .relation-status.planned { color: var(--blue); background: var(--blue-bg); }
.relation-status.effective, .relation-status.completed { color: var(--green); background: var(--mint); }
.relation-status.rejected { color: var(--red); background: var(--red-bg); }
.relation-status.following { color: #765482; background: #f2eaf5; }
.relation-status.recording { color: var(--red); background: var(--red-bg); }
.tag.blue { color: #276394; background: #e8f1f8; }
.tag.warn { color: #956110; background: #fff4db; }
.tag.red { color: #9e3d31; background: #fbe8e6; }
.relation-actions { min-width: 104px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.relation-actions .icon-btn { width: 30px; height: 30px; color: var(--red); }
.interview-view-bar { width: max-content; margin: 0 0 10px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; display: flex; gap: 3px; background: #f4f7f5; }
.interview-view-bar button { min-width: 132px; height: 36px; padding: 0 10px; border: 0; border-radius: 4px; display: flex; align-items: center; gap: 7px; color: var(--muted); background: transparent; font: inherit; cursor: pointer; }
.interview-view-bar button:hover { color: var(--ink); background: #edf3f0; }
.interview-view-bar button.active { color: #145d49; background: #fff; box-shadow: 0 1px 4px rgba(25, 63, 51, .12); }
.interview-view-bar svg { width: 15px; height: 15px; }
.interview-view-bar span { font-size: 9px; font-weight: 700; }
.interview-view-bar b { min-width: 20px; margin-left: auto; padding: 2px 5px; border-radius: 9px; color: inherit; background: #e5efeb; font-size: 8px; text-align: center; }
.interview-stats { margin-bottom: 10px; }
.interview-stats .stat { min-height: 94px; padding: 14px 18px; }
.interview-stats .stat .value { margin: 6px 0 3px; font-size: 24px; }
.interview-workspace { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.interview-workspace > .relation-list-panel { width: 100%; }
.interview-month-filter { width: 140px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; }
.interview-list { display: grid; }
.interview-list article { min-width: 0; padding: 15px 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 70px minmax(0, 1fr) 105px; gap: 14px; }
.interview-list article:last-of-type { border-bottom: 0; }
.interview-date { min-height: 54px; padding-right: 14px; border-right: 1px solid var(--line); display: grid; align-content: center; gap: 4px; }
.interview-date strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.interview-date span { color: var(--muted); font-size: 9px; }
.interview-main { min-width: 0; }
.interview-main > header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.interview-main > header .person { margin-right: auto; }
.interview-main > p { margin: 10px 0 8px; color: var(--ink); font-size: 10px; line-height: 1.55; }
.privacy-mark { display: inline-flex; align-items: center; gap: 4px; color: #765482; font-size: 8px; font-weight: 700; }
.privacy-mark svg { width: 12px; height: 12px; }
.interview-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 8px; }
.interview-meta span { display: inline-flex; align-items: center; gap: 4px; }
.interview-meta svg { width: 12px; height: 12px; }
.interview-note { margin-top: 11px; padding: 10px 11px; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 6px 10px; background: #f6f9f7; }
.interview-note strong { color: var(--green); font-size: 8px; }
.interview-note span { font-size: 9px; line-height: 1.5; }
.interview-side { display: flex; align-items: flex-end; flex-direction: column; gap: 10px; }
.interview-side > .btn { margin-top: auto; }
.interview-side-actions { margin-top: auto; display: flex; align-items: center; gap: 7px; }
.interview-side-actions .btn { margin-top: 0; }
.interview-side > .btn + .interview-side-actions { margin-top: 0; }
.interview-guide { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 5px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, 1.25fr); gap: 6px; background: #fff; }
.interview-guide .panel-head { padding: 0 14px; }
.interview-trigger { min-width: 0; padding: 8px 10px; border: 0; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.interview-trigger > svg { width: 26px; height: 26px; padding: 6px; border-radius: 5px; color: var(--green); background: var(--mint); }
.interview-trigger > div { min-width: 0; display: grid; gap: 3px; }
.interview-trigger strong { font-size: 9px; }
.interview-trigger span { color: var(--muted); font-size: 8px; line-height: 1.45; }
.interview-privacy-note { min-width: 0; margin: 0; padding: 8px 10px; display: flex; align-items: center; gap: 8px; background: #f6f2f8; }
.interview-privacy-note > svg { width: 18px; flex: 0 0 18px; color: #765482; }
.interview-privacy-note p { margin: 0; display: grid; gap: 4px; }
.interview-privacy-note strong { font-size: 9px; }
.interview-privacy-note span { color: var(--muted); font-size: 8px; line-height: 1.5; }
.relation-drawer > .drawer-head { position: sticky; z-index: 2; top: 0; margin: -22px -22px 22px; padding: 22px 22px 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.relation-drawer > .sticky-actions { z-index: 1; }
.relation-drawer .drawer-head > div { min-width: 0; display: grid; gap: 4px; }
.relation-drawer .drawer-head span { color: var(--muted); font-size: 9px; }
.relation-impact { margin: 4px 0 16px; padding: 10px 11px; display: flex; align-items: flex-start; gap: 8px; color: var(--muted); background: #f4f8f6; font-size: 9px; line-height: 1.5; }
.relation-impact svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--green); }
.regularization-salary-panel { margin: 2px 0 15px; padding: 12px; border: 1px solid #cfe0d9; border-radius: 6px; background: #f7faf8; }
.regularization-salary-panel.adjusting { border-color: #d9b778; background: #fffaf0; }
.regularization-salary-panel > header { margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.regularization-salary-panel > header > div { min-width: 0; display: flex; align-items: center; gap: 9px; }
.regularization-salary-panel > header > div > svg { width: 30px; height: 30px; padding: 7px; flex: 0 0 30px; border-radius: 5px; color: var(--green); background: #e3f0eb; }
.regularization-salary-panel > header span, .regularization-salary-panel > header strong, .regularization-salary-panel > header small { min-width: 0; display: block; }
.regularization-salary-panel > header strong { font-size: 10px; }
.regularization-salary-panel > header small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.regularization-salary-panel > header .btn { flex: 0 0 auto; }
.regularization-salary-panel .form-row { margin-bottom: 0; }
.regularization-salary-panel input[readonly] { color: #285e50; background: #f5f9f7; font-weight: 700; cursor: default; }
.regularization-salary-loading { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-size: 9px; }
.regularization-salary-loading svg { width: 16px; animation: spin 1s linear infinite; }
.regularization-salary-source { margin-top: 8px; padding: 7px 9px; display: flex; align-items: center; gap: 6px; color: #426a5c; background: #edf5f1; font-size: 8px; }
.regularization-salary-source svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--green); }
.regularization-salary-source strong { color: #173d31; }
.regularization-salary-source em { margin-left: auto; color: var(--muted); font-style: normal; }
.regularization-salary-panel .salary-adjustment-reason { margin-top: 10px; }
.employee-change-drawer { width: min(940px, 92vw); }
.employee-change-export-drawer { width: min(1320px, 96vw); }
.employee-change-export-preview-note { margin-bottom: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 7px; border: 1px solid #d8e5df; border-radius: 6px; color: #4f6a60; background: #f6faf8; font-size: 9px; }
.employee-change-export-preview-note svg { width: 15px; height: 15px; flex: none; color: #287c64; }
.employee-change-export-preview-table-wrap { max-height: min(62vh, 620px); overflow: auto; border: 1px solid #d8e5df; border-radius: 6px; }
.employee-change-export-preview-table { min-width: 1120px; }
.employee-change-export-preview-table th, .employee-change-export-preview-table td { white-space: nowrap; }
.employee-change-export-preview-table td:last-child { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.employee-change-person-entry { margin-bottom: 14px; }
.employee-change-person-modes { width: fit-content; margin-bottom: 9px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #cbdad4; border-radius: 5px; overflow: hidden; background: #f5f8f7; }
.employee-change-person-modes button { min-width: 142px; min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-right: 1px solid #cbdad4; color: #557068; background: transparent; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.employee-change-person-modes button:last-child { border-right: 0; }
.employee-change-person-modes button.active { color: #fff; background: #176b54; }
.employee-change-person-modes svg { width: 16px; height: 16px; }
.employee-change-manual-person { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.employee-change-manual-person > div { min-width: 0; }
.employee-change-manual-person label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; }
.employee-change-manual-person input { width: 100%; }
.employee-change-manual-hint { margin-top: 7px; display: flex; align-items: center; gap: 5px; color: #557068; font-size: 8px; }
.employee-change-manual-hint svg { width: 13px; height: 13px; flex: none; color: #287c64; }
.employee-change-profile-panel { margin: 2px 0 15px; padding: 12px; border: 1px solid #d7e3de; border-radius: 6px; background: #f8faf9; }
.employee-change-profile-panel.editing { border-color: #d9b778; background: #fffaf0; }
.employee-change-profile-panel > header { margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.employee-change-profile-panel > header > div { min-width: 0; display: flex; align-items: center; gap: 9px; }
.employee-change-profile-panel > header > div > svg { width: 30px; height: 30px; padding: 7px; flex: none; border-radius: 5px; color: #287c64; background: #eef7f3; }
.employee-change-profile-panel > header span, .employee-change-profile-panel > header strong, .employee-change-profile-panel > header small { min-width: 0; display: block; }
.employee-change-profile-panel > header strong { font-size: 11px; }
.employee-change-profile-panel > header small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.employee-change-profile-panel .form-row:last-child { margin-bottom: 0; }
.employee-change-profile-panel select:disabled, .employee-change-profile-panel input[readonly] { color: #285e50; background: #f5f9f7; opacity: 1; font-weight: 600; cursor: default; }
.employee-change-salary-panel > header { margin-bottom: 12px; }
.employee-change-salary-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.employee-change-salary-sides > section { padding: 11px; border: 1px solid #dbe6e1; border-radius: 5px; background: #fff; }
.employee-change-salary-sides > section.editing { border-color: #d9b778; background: #fffdf8; }
.employee-change-salary-sides > section > header { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.employee-change-salary-sides > section > header strong, .employee-change-salary-sides > section > header small { display: block; }
.employee-change-salary-sides > section > header strong { font-size: 10px; }
.employee-change-salary-sides > section > header small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.employee-change-salary-sides .salary-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.employee-change-salary-sides .form-row { margin: 0; }
.employee-change-salary-sides input { min-width: 0; font-variant-numeric: tabular-nums; }
.employee-change-salary-sides input[readonly] { color: #285e50; background: #f5f9f7; font-weight: 700; cursor: default; }
.employee-change-salary-inline { margin-top: 6px; display: flex; align-items: center; gap: 4px; color: #287c64; font-size: 8px; line-height: 1.4; }
.employee-change-salary-inline svg { width: 12px; height: 12px; flex: 0 0 auto; }
.employee-change-detail-drawer { width: min(1020px, 94vw); }
.employee-change-detail-hero { margin-bottom: 14px; padding: 12px; border: 1px solid #d7e3de; border-radius: 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: #f8faf9; }
.employee-change-detail-hero > div, .employee-change-detail-grid article, .employee-change-detail-salary, .employee-change-detail-flow { min-width: 0; }
.employee-change-detail-hero span, .employee-change-detail-hero strong, .employee-change-detail-hero small { display: block; }
.employee-change-detail-hero span { color: var(--muted); font-size: 8px; }
.employee-change-detail-hero strong { margin-top: 4px; font-size: 12px; }
.employee-change-detail-hero small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.employee-change-detail-grid { margin-bottom: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.employee-change-detail-grid article { padding: 12px; border: 1px solid #dde7e2; border-radius: 6px; background: #fff; }
.employee-change-detail-grid h3 { margin: 0 0 8px; color: #1c4f40; font-size: 11px; }
.employee-change-detail-grid p { margin: 0 0 8px; display: grid; gap: 3px; }
.employee-change-detail-grid p:last-child { margin-bottom: 0; }
.employee-change-detail-grid b { color: var(--muted); font-size: 8px; }
.employee-change-detail-grid span { font-size: 10px; line-height: 1.45; }
.employee-change-detail-salary { margin-bottom: 14px; padding: 12px; border: 1px solid #dbe6e1; border-radius: 6px; background: #fff; }
.employee-change-detail-salary > header { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.employee-change-detail-salary > header > div { display: flex; align-items: center; gap: 8px; }
.employee-change-detail-salary > header svg { width: 18px; height: 18px; color: var(--green); }
.employee-change-detail-salary > header strong, .employee-change-detail-salary > header small { display: block; }
.employee-change-detail-salary > header strong { font-size: 11px; }
.employee-change-detail-salary > header small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.employee-change-detail-salary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.employee-change-detail-salary-grid > div { min-width: 0; padding: 10px; border: 1px solid #e0e8e4; border-radius: 5px; background: #f9fbfa; }
.employee-change-detail-salary-grid span, .employee-change-detail-salary-grid strong, .employee-change-detail-salary-grid small { display: block; }
.employee-change-detail-salary-grid span { color: var(--muted); font-size: 8px; }
.employee-change-detail-salary-grid strong { margin-top: 4px; font-size: 12px; }
.employee-change-detail-salary-grid small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.employee-change-detail-flow { margin-bottom: 14px; padding: 12px; border: 1px solid #dbe6e1; border-radius: 6px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; background: #fff; }
.employee-change-detail-flow > div { min-width: 0; padding: 10px; border: 1px solid #e0e8e4; border-radius: 5px; background: #f9fbfa; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.employee-change-detail-flow > div.active { border-color: #8fb0a2; background: #f0f7f4; }
.employee-change-detail-flow svg { width: 16px; height: 16px; color: var(--green); }
.employee-change-detail-flow strong, .employee-change-detail-flow small { display: block; }
.employee-change-detail-flow strong { font-size: 9px; }
.employee-change-detail-flow small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.employee-change-detail-drawer textarea[readonly] { background: #f7faf8; color: #334d45; }
@media (max-width: 640px) {
  .employee-change-person-modes { width: 100%; }
  .employee-change-person-modes button { min-width: 0; padding: 0 8px; }
  .employee-change-manual-person { grid-template-columns: 1fr; }
  .employee-change-detail-hero, .employee-change-detail-grid, .employee-change-detail-salary-grid, .employee-change-detail-flow { grid-template-columns: 1fr; }
}
.interview-voice-box { margin: 0 0 16px; padding: 14px; border: 1px solid #d6e2dc; border-radius: 6px; background: #f7faf8; }
.interview-delegation-box { margin: 4px 0 18px; padding: 15px; border: 1px solid #cbdcd4; border-left: 3px solid var(--green); border-radius: 4px; background: #f7faf8; }
.interview-delegation-box > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.interview-delegation-box > header > div { min-width: 0; display: flex; align-items: flex-start; gap: 9px; }
.interview-delegation-box > header svg { width: 17px; height: 17px; margin-top: 1px; color: var(--green); }
.interview-delegation-box > header span, .interview-delegation-box > header strong, .interview-delegation-box > header small { display: block; }
.interview-delegation-box > header strong { font-size: 11px; }
.interview-delegation-box > header small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.interview-delegation-box > header > .tag { flex: 0 0 auto; padding: 4px 8px; color: #285f49; background: #e5f1eb; font-size: 8px; }
.interview-delegation-box > header > .tag.submitted { color: #385f8a; background: #eaf1f8; }
.interview-delegation-box > header > .tag.revoked, .interview-delegation-box > header > .tag.expired { color: #776b62; background: #eeeae7; }
.interview-delegation-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.interview-delegation-controls select { min-width: 0; }
.interview-delegation-controls .btn { white-space: nowrap; }
.interview-delegation-ready { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; color: #285f49; background: #e5f1eb; white-space: nowrap; font-size: 8px; font-weight: 700; }
.interview-delegation-ready svg { width: 13px; height: 13px; }
.interview-delegation-state { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 11px; border: 1px solid #dce6e1; background: white; }
.interview-delegation-state > div { min-width: 0; }
.interview-delegation-state strong, .interview-delegation-state span, .interview-delegation-state small { display: block; overflow-wrap: anywhere; }
.interview-delegation-state strong { font-size: 10px; }
.interview-delegation-state span, .interview-delegation-state small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.interview-delegation-state small { color: #8a5d28; }
.interview-delegation-link { display: grid; grid-template-columns: minmax(0, 1fr) 30px 30px; gap: 6px; margin-top: 9px; }
.interview-delegation-link input { min-width: 0; height: 30px; color: #4e6259; background: white; font-size: 8px; }
.interview-delegation-hint { margin: 9px 0 0; color: var(--muted); font-size: 8px; }
@media (max-width: 640px) {
  .interview-delegation-controls { grid-template-columns: minmax(0, 1fr); }
  .interview-delegation-controls .btn, .interview-delegation-ready { width: 100%; justify-content: center; }
}
.interview-voice-box.recording { border-color: #dca9a9; background: #fffafa; }
.interview-voice-head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.interview-voice-head > svg { width: 19px; color: var(--green); }
.interview-voice-head > div { min-width: 0; flex: 1; }
.interview-voice-head strong, .interview-voice-head span { display: block; }
.interview-voice-head strong { font-size: 10px; }
.interview-voice-head span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.interview-recording-dot { display: flex !important; align-items: center; gap: 6px; color: var(--red) !important; font-weight: 700; }
.interview-recording-dot > i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(179,73,73,.12); animation: interview-recording-pulse 1.3s infinite; }
@keyframes interview-recording-pulse { 50% { box-shadow: 0 0 0 8px rgba(179,73,73,0); } }
.interview-consent { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; cursor: pointer; }
.interview-consent input { width: 15px; height: 15px; margin-top: 1px; accent-color: var(--green); }
.interview-consent span, .interview-consent strong, .interview-consent small { display: block; }
.interview-consent strong { font-size: 9px; }
.interview-consent small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.interview-voice-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.interview-voice-actions .voice-start { color: white; border-color: var(--green); background: var(--green); }
.interview-voice-actions .voice-stop { color: white; border-color: var(--red); background: var(--red); }
.interview-microphone-state { min-height: 40px; margin: -2px 0 11px; padding: 7px 9px; border: 1px solid #d8e3de; border-radius: 5px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 96px; align-items: center; gap: 8px; background: white; }
.interview-microphone-state > svg { width: 16px; height: 16px; color: var(--green); }
.interview-microphone-state strong, .interview-microphone-state small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.interview-microphone-state strong { font-size: 8px; }.interview-microphone-state small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.interview-microphone-state > div { height: 6px; overflow: hidden; border-radius: 4px; background: #e4ece8; }.interview-microphone-state > div i { min-width: 4px; height: 100%; display: block; border-radius: inherit; background: var(--green); transition: width .1s linear; }
.interview-voice-notice { min-height: 34px; margin: -2px 0 11px; padding: 7px 9px; border: 1px solid #d8e3de; border-radius: 5px; display: flex; align-items: center; gap: 7px; color: #3e6658; background: #f1f7f4; font-size: 8px; line-height: 1.45; }
.interview-voice-notice.error { border-color: #edcccc; color: #a04343; background: #fff4f4; }
.interview-voice-notice svg { width: 15px; height: 15px; flex: 0 0 auto; }
.interview-recording-archive { margin: 0 0 12px; border-top: 1px solid #d8e3de; border-bottom: 1px solid #d8e3de; background: white; }
.interview-recording-archive > header { min-height: 38px; padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #e3ebe7; }
.interview-recording-archive > header > div { display: flex; align-items: baseline; gap: 7px; }
.interview-recording-archive > header strong { font-size: 9px; }
.interview-recording-archive > header span { color: var(--muted); font-size: 8px; }
.interview-recording-row { min-width: 0; min-height: 58px; padding: 8px 9px; display: grid; grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.35fr) 32px 32px; align-items: center; gap: 8px; border-bottom: 1px solid #edf2ef; }
.interview-recording-row:last-child { border-bottom: 0; }
.interview-recording-info { min-width: 0; }
.interview-recording-info strong, .interview-recording-info span, .interview-recording-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.interview-recording-info strong { color: #203c32; font-size: 9px; }
.interview-recording-info span { margin-top: 3px; color: var(--muted); font-size: 7px; }
.interview-recording-info small { margin-top: 3px; color: #976318; font-size: 7px; }
.interview-recording-info small.completed { color: var(--green); }
.interview-recording-info small.failed { color: var(--red); }
.interview-recording-row audio { width: 100%; min-width: 0; height: 34px; }
.interview-recording-row .icon-btn { width: 32px; height: 32px; }
.interview-recording-row .icon-btn.danger { color: var(--red); }
.interview-recording-empty { min-height: 44px; padding: 13px 9px; color: var(--muted); font-size: 8px; text-align: center; }
.interview-voice-box textarea { min-height: 124px; line-height: 1.6; background: white; }

.form-hint { margin-top: 4px; display: block; color: var(--muted); font-size: 8px; line-height: 1.4; }
.offer-material-toolbar { min-height: 32px; padding: 0 18px 7px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.offer-material-toolbar > span { color: var(--muted); font-size: 8px; }
.offer-preview-view { padding-bottom: 76px; }
.offer-preview-toolbar { min-height: 48px; margin: 0 18px 12px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #cbded6; background: #eff7f4; }
.offer-preview-toolbar div, .offer-preview-toolbar span { display: block; }
.offer-preview-toolbar div span { color: var(--muted); font-size: 8px; }
.offer-preview-toolbar strong { margin-top: 3px; display: block; color: var(--green); font-size: 11px; }
.offer-preview-card { margin: 0 18px; padding: 22px 24px; border: 1px solid #dfe7e3; background: white; box-shadow: 0 5px 16px rgba(30, 54, 46, .06); }
.offer-preview-brand { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 13px; border-bottom: 2px solid #1b6953; }
.offer-preview-brand strong { color: #287c64; font-size: 13px; }
.offer-preview-brand span { color: var(--muted); font-size: 9px; }
.offer-preview-card > h3 { margin: 21px 0 8px; font-size: 14px; }
.offer-preview-card > p { margin: 0; color: #4b5c55; font-size: 9px; line-height: 1.7; }
.offer-preview-info { margin-top: 17px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.offer-preview-info > div { min-width: 0; padding: 10px 11px; border-left: 1px solid var(--line); }
.offer-preview-info > div:first-child { border-left: 0; }
.offer-preview-info span, .offer-preview-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-preview-info span { color: var(--muted); font-size: 8px; }
.offer-preview-info strong { margin-top: 6px; color: #233b31; font-size: 10px; }
.offer-preview-section { margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--line); }
.offer-preview-section h4 { margin: 0 0 8px; color: #315b4b; font-size: 9px; }
.offer-preview-section p { margin: 0; color: #52615b; font-size: 9px; line-height: 1.6; }
.offer-preview-salary { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #d6e3dd; background: #f4faf7; }
.offer-preview-salary > div { min-height: 62px; padding: 12px; display: grid; align-content: center; border-left: 1px solid #d6e3dd; }
.offer-preview-salary > div:first-child { border-left: 0; }
.offer-preview-salary span, .offer-preview-salary strong { display: block; }
.offer-preview-salary span { color: #73847d; font-size: 8px; }
.offer-preview-salary strong { margin-top: 5px; color: #184b3b; font-size: 11px; }
.offer-preview-section ul { margin: 0; padding-left: 18px; color: #52615b; font-size: 9px; line-height: 1.8; }
.offer-preview-notice { margin-top: 18px; padding: 10px 11px; display: flex; align-items: center; gap: 8px; color: #4f6b60; background: #f0f7f4; font-size: 8px; }
.offer-preview-notice svg { width: 15px; flex: 0 0 15px; color: var(--green); }
.offer-template-preview { padding: 0; overflow: hidden; background: #f7f3f0; }
.offer-letter-page { position: relative; width: 100%; aspect-ratio: 1326 / 1888; overflow: hidden; container-type: inline-size; background: #f04b16; }
.offer-letter-page > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.offer-letter-overlay { position: absolute; left: 11%; right: 10%; color: #282522; font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif; font-size: 1.35cqw; line-height: 1.6; }
.offer-letter-overlay p { margin: 0 0 1.15em; }
.offer-letter-overlay strong { font-weight: 800; }
.offer-letter-overlay-one { top: 17.2%; }
.offer-letter-salutation { margin-bottom: 2em !important; font-size: 1.55cqw; }
.offer-letter-material-intro { margin-top: 2em !important; margin-bottom: .45em !important; font-weight: 700; }
.offer-letter-overlay ol { margin: 0 0 1.35em; padding-left: 1.5em; }
.offer-letter-overlay-one ol { max-height: 32%; overflow: hidden; }
.offer-letter-overlay-two { top: 13%; bottom: 14%; font-size: 1.28cqw; }
.offer-letter-overlay-two h4 { margin: 0 0 1em; font-size: 1.48cqw; }
.offer-letter-overlay-two p { margin-bottom: 1.05em; }
.offer-letter-company { margin-top: 5em !important; text-align: right; }
.offer-letter-date { text-align: right; }
.offer-section-head > .btn { margin-left: auto; flex: 0 0 auto; }
.offer-material-settings-drawer { max-width: 560px; }
.offer-department-cascade { margin-bottom: 4px; }
.offer-position-section { margin-bottom: 10px; }
.offer-position-section .offer-section-head { margin: 0 0 10px; padding-top: 0; border-top: 0; }
.offer-position-section .offer-section-head i { width: 34px; flex-basis: 34px; border-radius: 6px; font-size: 8px; }
.offer-salary-fields { margin: 2px 18px 10px; padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 1px solid #d9e5df; border-radius: 6px; background: #f7fbf9; }
.offer-salary-fields .form-row { margin: 0; }
.offer-money-input { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: white; }
.offer-money-input span { color: #28634f; font-size: 11px; font-weight: 800; text-align: center; }
.offer-money-input input { min-width: 0; border: 0; border-left: 1px solid #e2ebe7; border-radius: 0; }
.offer-salary-fields > p { grid-column: 1 / -1; margin: 0; padding-top: 9px; display: flex; align-items: center; gap: 7px; border-top: 1px solid #e1ebe6; color: #6c7d76; font-size: 8px; }
.offer-salary-fields > p svg { width: 14px; color: #397b65; }
.offer-salary-fields > p strong { margin-left: auto; color: #174b3a; font-size: 10px; }
@media (max-width: 640px) {
  .offer-salary-fields { grid-template-columns: 1fr; }
}
.offer-notice-config { margin: 10px 18px 0; padding: 10px 12px; border: 1px solid #d5e2dc; border-radius: 6px; background: #f7fbf9; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offer-notice-config > div { min-width: 0; }
.offer-notice-config strong, .offer-notice-config span { display: block; }
.offer-notice-config strong { color: #1d4c3e; font-size: 9px; }
.offer-notice-config span { margin-top: 4px; overflow: hidden; color: #64766f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.offer-template-settings-section { margin: 12px 18px 0; padding: 12px; border: 1px solid #d6e2dc; border-radius: 6px; background: #f8fbf9; }
.offer-template-settings-title { margin-bottom: 10px; }
.offer-template-settings-title strong, .offer-template-settings-title span { display: block; }
.offer-template-settings-title strong { color: #1d4c3e; font-size: 10px; }
.offer-template-settings-title span { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.offer-template-settings-section + .offer-template-settings-section { margin-top: 10px; }
@media (max-width: 640px) {
  .offer-notice-config { align-items: flex-start; flex-direction: column; }
}
.settings-list-head { min-height: 42px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.settings-list-head strong { font-size: 10px; }
.offer-material-settings-list { padding: 10px 18px 4px; }
.offer-material-setting-row { min-height: 42px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 32px; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.offer-material-setting-row > span { color: var(--muted); font-size: 9px; text-align: center; }
.offer-material-setting-row input { min-width: 0; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: white; font-size: 9px; }
.offer-material-setting-row .danger { color: var(--red); }
.settings-note { margin: 14px 18px 80px; padding: 10px 11px; display: flex; align-items: center; gap: 7px; color: var(--muted); background: var(--soft); font-size: 8px; }
.settings-note svg { width: 15px; flex: 0 0 15px; color: var(--green); }

@media (max-width: 760px) {
  .offer-preview-card { padding: 17px 14px; }
  .offer-preview-info { grid-template-columns: 1fr 1fr; }
  .offer-preview-info > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .offer-preview-info > div:nth-child(4) { border-top: 1px solid var(--line); }
  .offer-material-toolbar { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 1100px) {
  .recruitment-offer-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interview-workspace { grid-template-columns: 1fr; }
  .interview-guide { display: grid; grid-template-columns: repeat(2, 1fr); }
  .interview-guide .panel-head, .interview-privacy-note { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .recruitment-offer-overview { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .employee-change-switcher { grid-template-columns: repeat(4, 180px); overflow-x: auto; }
  .employee-change-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interview-list article { grid-template-columns: 58px minmax(0, 1fr); }
  .interview-side { grid-column: 2; align-items: flex-start; flex-direction: row; }
  .interview-side > .btn, .interview-side-actions { margin-top: 0; }
  .interview-recording-row { grid-template-columns: minmax(0, 1fr) 32px 32px; }
  .interview-recording-row audio { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 600px) {
  .employee-change-mode-head { padding: 0 12px; }
  .employee-change-switcher { padding: 10px; grid-template-columns: repeat(4, 164px); }
  .employee-change-switcher button { min-height: 62px; }
  .employee-change-status-head { align-items: stretch; flex-direction: column; }
  .employee-change-status-entry { width: 100%; }
  .employee-change-status-hint { padding-left: 2px; }
  .employee-change-status-clear { margin-left: 0; align-self: flex-start; }
  .interview-guide { grid-template-columns: 1fr; }
  .interview-guide .panel-head, .interview-privacy-note { grid-column: auto; }
  .interview-list article { grid-template-columns: 1fr; }
  .interview-date { min-height: 0; padding: 0 0 9px; border-right: 0; border-bottom: 1px solid var(--line); grid-template-columns: auto 1fr; align-items: baseline; }
  .interview-side { grid-column: auto; }
  .interview-note { grid-template-columns: 1fr; }
}

/* Recruitment demand and flow workspace */
.recruit-command-head { margin-bottom: 15px; }
.recruit-command-head > div:first-child { min-width: 0; }
.page-kicker { margin-bottom: 5px; display: block; color: #24715b; font-size: 8px; font-weight: 900; letter-spacing: 0; }
.recruit-management-tabs { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.recruit-management-tabs > button { --module-accent: #287c64; --module-soft: #eef7f3; --module-panel: #f8fcfa; --module-border: #dcebe5; --module-ink: #285e50; position: relative; min-width: 0; min-height: 78px; padding: 12px 13px; border: 1px solid var(--module-border); border-radius: 7px; background: var(--module-panel); color: var(--ink); display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.recruit-management-tabs > button.module-interviews { --module-accent: #487fb1; --module-soft: #eef5fc; --module-panel: #f8fbfe; --module-border: #dce8f3; --module-ink: #3f6e97; }
.recruit-management-tabs > button.module-offers { --module-accent: #a66f26; --module-soft: #fff5e5; --module-panel: #fffcf7; --module-border: #f1e4d1; --module-ink: #885a1d; }
.recruit-management-tabs > button.module-employee { --module-accent: #5c8179; --module-soft: #edf5f3; --module-panel: #f8fbfb; --module-border: #dce8e5; --module-ink: #526f68; }
.recruit-management-tabs > button:hover { transform: translateY(-1px); border-color: var(--module-accent); box-shadow: 0 5px 14px rgba(31, 63, 52, .06); }
.recruit-management-tabs > button.active { border-color: var(--module-accent); box-shadow: inset 0 -3px 0 var(--module-accent), 0 5px 14px rgba(31, 63, 52, .05); }
.recruit-management-tabs .module-icon { width: 40px; height: 40px; border-radius: 7px; background: var(--module-soft); color: var(--module-accent); display: grid; place-items: center; }
.recruit-management-tabs .module-icon svg { width: 18px; height: 18px; }
.recruit-management-tabs button > span:nth-child(2) { min-width: 0; }
.recruit-management-tabs strong, .recruit-management-tabs small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recruit-management-tabs strong { color: var(--module-ink); font-size: 10px; }
.recruit-management-tabs small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.recruit-management-tabs button > b { color: var(--module-accent); font-size: 20px; }
.recruit-interview-subnav { min-height: 50px; margin-bottom: 12px; padding: 7px 9px 7px 14px; border: 1px solid #dce8f3; border-radius: 7px; background: #f8fbfe; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.recruit-interview-subnav > div:first-child strong, .recruit-interview-subnav > div:first-child span { display: block; }
.recruit-interview-subnav > div:first-child strong { color: #3f6e97; font-size: 10px; }
.recruit-interview-subnav > div:first-child span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.recruit-interview-subnav [role="tablist"] { padding: 3px; border: 1px solid #dce8f3; border-radius: 6px; background: #fff; display: flex; gap: 3px; }
.recruit-interview-subnav button { min-height: 29px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: #657b8d; display: inline-flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 800; cursor: pointer; }
.recruit-interview-subnav button svg { width: 12px; height: 12px; }
.recruit-interview-subnav button.active { color: #3f6e97; background: #eef5fc; }
.recruit-flow-band { margin-bottom: 14px; border: 1px solid #cfddd8; background: white; box-shadow: 0 9px 22px rgba(30, 54, 46, .055); }
.recruit-flow-steps { min-height: 112px; padding: 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.recruit-flow-step { position: relative; min-width: 0; min-height: 80px; padding: 13px 27px 13px 13px; border: 1px solid var(--flow-border); border-radius: 7px; background: var(--flow-bg); color: var(--ink); display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.recruit-flow-step:nth-child(1) { --flow-bg: #f8fcfa; --flow-icon-bg: #eef7f3; --flow-border: #dcebe5; --flow-accent: #287c64; }
.recruit-flow-step:nth-child(2) { --flow-bg: #f8fbfe; --flow-icon-bg: #eef5fc; --flow-border: #dce8f3; --flow-accent: #487fb1; }
.recruit-flow-step:nth-child(3) { --flow-bg: #fffcf7; --flow-icon-bg: #fff5e5; --flow-border: #f1e4d1; --flow-accent: #a66f26; }
.recruit-flow-step:nth-child(4) { --flow-bg: #fdfbfe; --flow-icon-bg: #f7f0f9; --flow-border: #eadfec; --flow-accent: #8c6a9a; }
.recruit-flow-step:nth-child(5) { --flow-bg: #f8fbfb; --flow-icon-bg: #edf5f3; --flow-border: #dce8e5; --flow-accent: #5c8179; }
.recruit-flow-step:hover { transform: translateY(-1px); border-color: var(--flow-accent); box-shadow: 0 5px 13px rgba(34, 65, 55, .07); }
.recruit-flow-step.current { border-color: var(--flow-accent); background: var(--flow-bg); box-shadow: 0 0 0 1px var(--flow-accent) inset; }
.flow-step-index { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 7px; background: var(--flow-icon-bg); color: var(--flow-accent); }
.flow-step-index svg { width: 19px; height: 19px; }
.flow-step-copy { min-width: 0; }
.flow-step-copy strong, .flow-step-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-step-copy strong { font-size: 10px; }
.flow-step-copy small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.recruit-flow-step > b { color: var(--flow-accent); font-size: 20px; }
.flow-step-arrow { position: absolute; right: 8px; width: 13px; height: 13px; color: #9baca6; }
.recruit-command-grid { margin-bottom: 14px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 14px; align-items: stretch; }
.recruit-priority-panel, .recruit-health-panel { min-width: 0; }
.recruit-priority-panel .panel-head, .recruit-health-panel .panel-head, .recruit-flow-jobs-panel > .panel-head { min-height: 54px; padding: 0 14px; }
.recruit-priority-panel .panel-head > div, .recruit-health-panel .panel-head > div, .recruit-jobs-head > div:first-child { min-width: 0; }
.recruit-priority-panel .panel-head h2, .recruit-health-panel .panel-head h2, .recruit-jobs-head h2 { margin: 0; font-size: 11px; }
.recruit-priority-panel .panel-head h2 span { margin-left: 6px; color: var(--red); }
.recruit-priority-panel .panel-head p, .recruit-health-panel .panel-head p, .recruit-jobs-head p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.priority-badge { height: 24px; padding: 0 8px; border-radius: 4px; background: #fff1da; color: #9a620f; display: inline-flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 800; }
.priority-badge svg { width: 12px; height: 12px; }
.recruit-priority-list { min-height: 184px; }
.recruit-priority-item { min-height: 56px; padding: 8px 13px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.recruit-priority-item:first-child { border-top: 0; }
.priority-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: #e5eef7; color: #2e6799; }
.recruit-priority-item.amber .priority-icon { background: #fff0d9; color: #a66513; }
.recruit-priority-item.green .priority-icon { background: #eef7f3; color: #287c64; }
.recruit-priority-item.violet .priority-icon { background: #f1e9f4; color: #765482; }
.priority-icon svg { width: 15px; height: 15px; }
.priority-copy { min-width: 0; }
.priority-copy strong, .priority-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.priority-copy strong { font-size: 9px; }
.priority-copy span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.recruit-priority-item .link-btn { padding: 5px 0 5px 8px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.recruit-priority-item .link-btn svg { width: 12px; height: 12px; }
.recruit-empty { min-height: 184px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--muted); text-align: center; }
.recruit-empty svg { width: 24px; height: 24px; margin-bottom: 8px; color: var(--green); }
.recruit-empty strong { color: var(--ink); font-size: 10px; }
.recruit-empty span { margin-top: 5px; font-size: 8px; }
.health-mark { width: 28px; height: 28px; padding: 6px; border-radius: 6px; background: #e5eef7; color: #2e6799; }
.recruit-health-grid { padding: 10px 13px 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recruit-health-grid > div { min-width: 0; min-height: 67px; padding: 9px 10px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.recruit-health-grid > div:nth-child(odd) { border-left: 0; }
.recruit-health-grid > div:nth-child(-n+2) { border-top: 0; }
.recruit-health-grid span, .recruit-health-grid em { display: block; color: var(--muted); font-size: 8px; font-style: normal; }
.recruit-health-grid strong { margin: 5px 0 4px; display: block; color: #173d31; font-size: 19px; line-height: 1; }
.recruit-health-grid strong small { margin-left: 2px; font-size: 9px; }
.recruit-health-grid strong.health-warn { color: var(--red); }
.health-link { width: calc(100% - 26px); margin: 7px 13px 13px; justify-content: center; }
.recruit-flow-jobs-panel { margin-bottom: 20px; }
.recruit-jobs-head { min-height: 64px !important; gap: 15px; }
.recruit-jobs-tools { display: flex; align-items: center; gap: 8px; }
.recruit-flow-search { width: 240px; }
.recruit-jobs-tools select { width: 118px; height: 32px; }
.recruit-job-flow-list { border-top: 1px solid var(--line); }
.recruit-job-flow-row { min-height: 78px; padding: 10px 13px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(210px, 1.15fr) minmax(270px, 1.1fr) minmax(120px, .55fr) auto; align-items: center; gap: 15px; scroll-margin-top: 90px; }
.recruit-job-flow-row:first-child { border-top: 0; }
.recruit-job-flow-row:target, .recruit-job-flow-row:hover { background: #fbfcfc; }
.recruit-job-flow-main { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.recruit-job-flow-main .job-symbol { width: 34px; height: 34px; }
.recruit-job-flow-main > div { min-width: 0; }
.recruit-job-flow-main strong, .recruit-job-flow-main > div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recruit-job-flow-main strong { font-size: 10px; }
.recruit-job-flow-main > div > span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.recruit-job-flow-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.recruit-job-flow-stages > div { min-width: 0; padding: 2px 9px; border-left: 1px solid var(--line); text-align: center; }
.recruit-job-flow-stages > div:first-child { border-left: 0; }
.recruit-job-flow-stages span, .recruit-job-flow-stages strong { display: block; }
.recruit-job-flow-stages span { color: var(--muted); font-size: 7px; white-space: nowrap; }
.recruit-job-flow-stages strong { margin-top: 4px; font-size: 12px; }
.recruit-job-flow-stages .good { color: var(--green); }
.recruit-job-flow-stages .gap { color: var(--red); }
.recruit-job-flow-progress { min-width: 0; }
.recruit-job-flow-progress .job-progress { min-width: 100px; }
.recruit-job-flow-progress > small { margin-top: 5px; display: block; color: var(--muted); font-size: 7px; text-align: right; }
.recruit-job-flow-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.recruit-job-flow-actions .danger { color: var(--red); }
.recruit-secondary-views { min-height: 43px; padding: 7px 13px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 5px; background: #fafcfa; }
.recruit-secondary-views button { min-height: 27px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; font-size: 8px; cursor: pointer; }
.recruit-secondary-views button:hover, .recruit-secondary-views button.active { color: var(--green); background: #e6f0ec; }
.recruit-secondary-views button:last-child { margin-left: auto; }
.recruit-secondary-views svg { width: 12px; height: 12px; }
.recruit-secondary-table { border-top: 1px solid var(--line); }

@media (max-width: 1180px) {
  .recruit-management-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recruit-flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recruit-command-grid { grid-template-columns: 1fr; }
  .recruit-health-panel { display: grid; grid-template-columns: 220px minmax(0, 1fr) 160px; align-items: center; }
  .recruit-health-panel .panel-head { border-right: 1px solid var(--line); border-bottom: 0; }
  .recruit-health-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px 10px; }
  .recruit-health-grid > div, .recruit-health-grid > div:nth-child(-n+2) { border-top: 0; }
  .recruit-health-grid > div:nth-child(odd) { border-left: 1px solid var(--line); }
  .recruit-health-grid > div:first-child { border-left: 0; }
  .health-link { width: auto; margin: 0 12px 0 0; }
  .recruit-job-flow-row { grid-template-columns: minmax(210px, 1fr) minmax(260px, 1fr) auto; }
  .recruit-job-flow-progress { display: none; }
}

@media (max-width: 820px) {
  .recruit-command-head { align-items: flex-start; }
  .recruit-command-head .actions { width: 100%; overflow-x: auto; justify-content: flex-start; }
  .recruit-flow-steps { grid-template-columns: 1fr 1fr; }
  .recruit-health-panel { display: block; }
  .recruit-health-panel .panel-head { border-right: 0; border-bottom: 1px solid var(--line); }
  .recruit-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 13px 6px; }
  .recruit-health-grid > div { border-top: 1px solid var(--line); }
  .recruit-health-grid > div:nth-child(odd) { border-left: 0; }
  .recruit-health-grid > div:nth-child(-n+2) { border-top: 0; }
  .health-link { width: calc(100% - 26px); margin: 7px 13px 13px; }
  .recruit-jobs-head { align-items: flex-start; flex-direction: column; padding: 12px 13px !important; }
  .recruit-jobs-tools { width: 100%; }
  .recruit-flow-search { width: auto; flex: 1; }
  .recruit-job-flow-row { grid-template-columns: 1fr auto; gap: 10px; }
  .recruit-job-flow-main { grid-column: 1 / -1; }
  .recruit-job-flow-stages { min-width: 0; }
  .recruit-job-flow-actions { align-self: stretch; }
}

@media (max-width: 560px) {
  .recruit-management-tabs { grid-template-columns: 1fr; }
  .recruit-interview-subnav { align-items: stretch; flex-direction: column; }
  .recruit-interview-subnav [role="tablist"] { display: grid; grid-template-columns: 1fr 1fr; }
  .recruit-interview-subnav button { justify-content: center; }
}

@media (max-width: 560px) {
  .recruit-flow-steps { grid-template-columns: 1fr; }
  .recruit-priority-item { grid-template-columns: 30px minmax(0, 1fr); }
  .recruit-priority-item .link-btn { grid-column: 2; justify-self: start; padding-left: 0; }
  .recruit-jobs-tools { align-items: stretch; flex-direction: column; }
  .recruit-jobs-tools select { width: 100%; }
  .recruit-job-flow-row { grid-template-columns: 1fr; }
  .recruit-job-flow-main { grid-column: auto; }
  .recruit-job-flow-stages { grid-template-columns: repeat(4, minmax(54px, 1fr)); overflow-x: auto; }
  .recruit-job-flow-actions { justify-content: flex-start; flex-wrap: wrap; }
  .recruit-secondary-views { justify-content: flex-start; overflow-x: auto; }
  .recruit-secondary-views button:last-child { margin-left: 0; }
}

/* Unified recruitment workflow */
.recruit-workspace { --recruit-accent: #287c64; }
.recruit-workspace-head { margin-bottom: 14px; }
.recruit-workspace-flow { margin-bottom: 16px; border: 1px solid #d2ddd8; border-radius: 7px; background: #fff; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); box-shadow: 0 8px 22px rgba(24, 58, 47, .055); overflow: hidden; }
.recruit-workspace-flow button { position: relative; min-width: 0; min-height: 78px; padding: 12px 23px 12px 13px; border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 9px; text-align: left; cursor: pointer; }
.recruit-workspace-flow button:last-child { border-right: 0; }
.recruit-workspace-flow button::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: transparent; }
.recruit-workspace-flow button:hover { background: #f8fbf9; }
.recruit-workspace-flow button.active { background: #edf6f2; color: var(--recruit-accent); }
.recruit-workspace-flow button.active::after { background: var(--recruit-accent); }
.recruit-workspace-flow button > i { width: 27px; height: 27px; border: 1px solid #bccbc5; border-radius: 50%; display: grid; place-items: center; color: #65766f; font-size: 9px; font-style: normal; font-weight: 900; }
.recruit-workspace-flow button.active > i { border-color: var(--recruit-accent); background: var(--recruit-accent); color: #fff; }
.recruit-workspace-flow button span { min-width: 0; }
.recruit-workspace-flow button strong, .recruit-workspace-flow button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recruit-workspace-flow button strong { font-size: 10px; }
.recruit-workspace-flow button small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.recruit-workspace-flow button b { min-width: 18px; color: #66766f; font-size: 13px; text-align: center; }
.recruit-workspace-flow button.active b { color: var(--recruit-accent); }
.recruit-workspace-flow button > em { position: absolute; right: 5px; width: 12px; height: 12px; color: #a8b6b0; }
.recruit-workspace-flow button:last-child > em { display: none; }
.recruit-workspace-body { scroll-margin-top: 90px; }
.recruit-overview-strip { margin-bottom: 14px; min-height: 78px; border: 1px solid #d5e0db; border-radius: 7px; background: #fff; display: grid; grid-template-columns: 1.15fr repeat(5, minmax(0, 1fr)); overflow: hidden; box-shadow: 0 5px 15px rgba(29, 56, 47, .035); }
.recruit-overview-title, .recruit-overview-strip article { min-width: 0; padding: 13px 14px; border-left: 1px solid var(--line); }
.recruit-overview-title { border-left: 0; background: #f5f9f7; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-content: center; column-gap: 7px; }
.recruit-overview-title svg { grid-row: 1 / 3; width: 18px; height: 18px; color: var(--green); }
.recruit-overview-title strong, .recruit-overview-title small { display: block; }
.recruit-overview-title strong { font-size: 10px; }
.recruit-overview-title small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.recruit-overview-strip article span, .recruit-overview-strip article strong, .recruit-overview-strip article small { display: block; }
.recruit-overview-strip article span { color: var(--muted); font-size: 8px; white-space: nowrap; }
.recruit-overview-strip article strong { margin: 7px 0 3px; color: #173d31; font-size: 19px; line-height: 1; }
.recruit-overview-strip article small { color: var(--muted); font-size: 7px; }
.recruit-overview-strip article .warn-number { color: var(--red); }
.recruit-overview-strip article .good-number { color: var(--green); }

.recruit-source-path, .recruit-month-head, .recruit-progress-toolbar, .candidate-input-panel, .offer-status-path { margin-bottom: 14px; padding: 14px 16px; border: 1px solid #d5e0db; border-radius: 7px; background: #fff; box-shadow: 0 6px 18px rgba(29, 56, 47, .045); }
.recruit-path-title, .recruit-month-head > div:first-child, .recruit-progress-toolbar > div:first-child, .candidate-input-panel > div:first-child, .offer-status-path > div:first-child { display: flex; align-items: center; gap: 10px; }
.recruit-path-title > span, .recruit-month-head > div:first-child > span, .recruit-progress-toolbar > div:first-child > span, .candidate-input-panel > div:first-child > span, .offer-status-path > div:first-child > span { width: 32px; height: 32px; border-radius: 6px; background: #e4f0eb; color: var(--recruit-accent); display: grid; place-items: center; font-size: 9px; font-weight: 900; }
.recruit-path-title strong, .recruit-path-title small, .recruit-month-head > div:first-child strong, .recruit-month-head > div:first-child small, .recruit-progress-toolbar > div:first-child strong, .recruit-progress-toolbar > div:first-child small, .candidate-input-panel > div:first-child strong, .candidate-input-panel > div:first-child small, .offer-status-path > div:first-child strong, .offer-status-path > div:first-child small { display: block; }
.recruit-path-title strong, .recruit-month-head > div:first-child strong, .recruit-progress-toolbar > div:first-child strong, .candidate-input-panel > div:first-child strong, .offer-status-path > div:first-child strong { font-size: 11px; }
.recruit-path-title small, .recruit-month-head > div:first-child small, .recruit-progress-toolbar > div:first-child small, .candidate-input-panel > div:first-child small, .offer-status-path > div:first-child small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.recruit-path-line { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr) 20px); align-items: center; }
.recruit-path-line > div { min-height: 68px; padding: 10px 12px; border: 1px solid #e0e8e4; border-radius: 6px; background: #fafcfa; display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; column-gap: 9px; }
.recruit-path-line > div svg { grid-row: 1 / 3; width: 27px; height: 27px; padding: 6px; border-radius: 6px; background: #e7f1ed; color: var(--green); }
.recruit-path-line > div strong, .recruit-path-line > div span { display: block; }
.recruit-path-line > div strong { font-size: 9px; }
.recruit-path-line > div span { margin-top: 3px; color: var(--muted); font-size: 7px; }
.recruit-path-line > em { width: 14px; justify-self: center; color: #9aaba4; }
.recruit-path-line > div:last-child { grid-column: 5; }
.recruit-path-actions { margin-top: 12px; display: flex; justify-content: flex-end; gap: 7px; }

.recruit-stage-panel { margin-bottom: 14px; overflow: hidden; }
.recruit-stage-panel .panel-head { min-height: 58px; padding: 9px 14px; }
.recruit-stage-panel .panel-head h2 { margin: 0; font-size: 11px; }
.recruit-stage-panel .panel-head h2 span { margin-left: 5px; color: var(--green); }
.recruit-stage-panel .panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.recruit-stage-panel table { min-width: 980px; }
.recruit-workflow-table { min-width: 1540px !important; }
.recruit-workflow-table th, .recruit-workflow-table td { white-space: nowrap; }
.recruit-workflow-table .recruit-remark-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.recruit-workflow-table tfoot td { background: #f4f8f6; border-top: 2px solid #b8c9c1; font-weight: 900; }
.recruit-total-label { text-align: center; }
.recruit-demand-sheet { overflow-x: auto; }
.recruit-demand-sheet .recruit-job-table { min-width: 1540px !important; }
.recruit-demand-sheet .recruit-job-table th, .recruit-demand-sheet .recruit-job-table td { white-space: nowrap; }
.recruit-demand-sheet .recruit-remark-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.recruit-demand-sheet .recruit-job-table tfoot td { background: #f4f8f6; border-top: 2px solid #b8c9c1; font-weight: 900; }
.recruit-demand-ledger-panel { margin-bottom: 20px; overflow: hidden; border-color: #bfcfc8; box-shadow: 0 10px 28px rgba(24, 58, 47, .08); }
.recruit-demand-ledger-panel .recruit-demand-ledger-head { min-height: 104px; padding: 16px 18px; background: linear-gradient(90deg, #f4f9f6 0%, #fff 55%); display: grid; grid-template-columns: minmax(390px, 1fr) auto; align-items: center; gap: 18px; }
.recruit-demand-ledger-title { text-align: center; }
.recruit-demand-ledger-title > span { display: inline-flex; height: 22px; padding: 0 8px; border-radius: 4px; background: #eef7f3; color: #287c64; align-items: center; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.recruit-demand-ledger-panel .recruit-demand-ledger-title h2 { margin: 7px 0 0; color: #143d31; font-size: 17px; line-height: 1.25; }
.recruit-demand-ledger-panel .recruit-demand-ledger-title p { margin: 6px 0 0; color: #63766f; font-size: 8px; }
.recruit-demand-ledger-wrap { border-top: 1px solid #cbd9d3; }
.recruit-demand-ledger-table { width: 100%; min-width: 1240px !important; table-layout: fixed; }
.recruit-demand-ledger-table th { height: 62px; padding: 10px 8px; border-right: 1px solid #d7e2dd; background: #edf5f1; color: #294e41; font-size: 9px; font-weight: 900; line-height: 1.35; text-align: center; white-space: normal; }
.recruit-demand-ledger-table th:nth-child(1) { width: 76px; }
.recruit-demand-ledger-table th:nth-child(2), .recruit-demand-ledger-table th:nth-child(3) { width: 104px; }
.recruit-demand-ledger-table th:nth-child(4) { width: 120px; }
.recruit-demand-ledger-table th:nth-child(5), .recruit-demand-ledger-table th:nth-child(6), .recruit-demand-ledger-table th:nth-child(7) { width: 74px; }
.recruit-demand-ledger-table th:nth-child(8), .recruit-demand-ledger-table th:nth-child(9) { width: 94px; }
.recruit-demand-ledger-table th:nth-child(10) { width: 132px; }
.recruit-demand-ledger-table th:nth-child(11) { width: 94px; }
.recruit-demand-ledger-table th:nth-child(12) { width: 140px; }
.recruit-demand-ledger-table td { min-height: 68px; padding: 12px 9px; border-right: 1px solid #e4ebe8; color: #334b43; font-size: 9px; line-height: 1.5; text-align: center; vertical-align: middle; }
.recruit-demand-ledger-table tbody tr:nth-child(even) td { background: #fbfcfb; }
.recruit-demand-ledger-table tbody tr:hover td { background: #f5faf7; }
.recruit-demand-ledger-table .demand-ledger-job { color: #143d31; font-size: 10px; }
.recruit-demand-ledger-table .recruit-number { font-size: 14px; }
.demand-ledger-status { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.demand-ledger-actions { display: flex; align-items: center; justify-content: center; gap: 4px; }
.demand-ledger-actions .icon-btn { width: 25px; height: 25px; }
.demand-ledger-actions .icon-btn svg { width: 12px; height: 12px; }
.demand-ledger-actions .btn.compact { min-height: 25px; padding: 0 7px; font-size: 7px; }
.demand-ledger-owner { display: inline-flex; min-height: 24px; padding: 3px 8px; border-radius: 12px; background: #f0f4f2; color: #496159; align-items: center; font-weight: 800; }
.demand-ledger-remark { display: -webkit-box; overflow: hidden; color: #667b73; text-align: left; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.recruit-demand-ledger-table tfoot td { height: 54px; border-top: 1px solid #b8cec4; border-right: 1px solid #cedbd5; background: #e8f3ee; color: #143d31; font-size: 12px; font-weight: 900; text-align: center; }
.recruit-demand-ledger-table tfoot td:last-child { color: #5e746b; font-size: 8px; font-weight: 700; text-align: left; }
@media (max-width: 1100px) {
  .recruit-demand-ledger-panel .recruit-demand-ledger-head { grid-template-columns: 1fr; }
  .recruit-demand-ledger-title { text-align: left; }
  .recruit-demand-ledger-panel .recruit-jobs-tools { width: 100%; }
  .recruit-demand-ledger-panel .recruit-flow-search { flex: 1; }
}
.recruit-demand-ledger-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.recruit-demand-month-picker { display: flex; align-items: center; gap: 8px; }
.recruit-demand-month-picker label { color: #577067; font-size: 9px; font-weight: 800; }
.recruit-demand-month-picker select { width: 136px; height: 32px; border: 1px solid #c8d8d1; border-radius: 5px; background: #fff; color: #254d40; font-size: 10px; font-weight: 800; }
.recruit-demand-month-picker .btn { height: 32px; }
.recruit-demand-ledger-panel .recruit-demand-ledger-title h2 { font-size: 20px; font-weight: 900; letter-spacing: .01em; }
.recruit-demand-ledger-table th { height: 70px; padding: 12px 9px; color: #214b3d; font-size: 11px; font-weight: 900; }
.recruit-demand-ledger-table td { min-height: 76px; padding: 15px 10px; color: #324d43; font-size: 10px; }
.recruit-demand-ledger-table .demand-ledger-job { font-size: 12px; font-weight: 900; }
.recruit-demand-ledger-table .recruit-number { font-size: 16px; }
.recruit-demand-ledger-table .source-pill { font-size: 9px; }
.recruit-demand-ledger-table .demand-ledger-owner { font-size: 9px; }
.recruit-demand-ledger-table .demand-ledger-remark { font-size: 9px; line-height: 1.6; }
.recruit-demand-ledger-table tfoot td { font-size: 14px; }
.recruit-demand-ledger-table tfoot td:last-child { font-size: 9px; }
@media (max-width: 1100px) {
  .recruit-demand-ledger-tools { width: 100%; align-items: stretch; }
  .recruit-demand-month-picker { justify-content: flex-start; flex-wrap: wrap; }
}
.recruit-demand-combined-panel { padding: 26px; border-color: #ccd9d3; background: #f9fbfa; box-shadow: 0 12px 34px rgba(28,63,51,.08); }
.recruit-demand-combined-head { min-height: 64px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.recruit-demand-combined-title > span { display: block; margin-bottom: 7px; color: #2a7b61; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.recruit-demand-combined-title h2 { margin: 0; color: #173d32; font-size: 21px; line-height: 1.25; letter-spacing: 0; }
.recruit-demand-combined-title p { margin: 7px 0 0; color: #71827b; font-size: 11px; }
.recruit-demand-combined-head .recruit-demand-ledger-tools { flex-direction: column; align-items: flex-end; gap: 9px; }
.recruit-demand-combined-head .recruit-demand-month-picker { align-items: center; }
.recruit-demand-combined-head .recruit-jobs-tools { display: flex; align-items: center; gap: 9px; }
.recruit-demand-combined-head .recruit-flow-search { width: 300px; }
.recruit-demand-combined-head .recruit-jobs-tools > select { min-width: 122px; }
.recruit-demand-combined-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 12px; }
.recruit-demand-combined-metrics article { min-height: 52px; padding: 9px 12px; border: 1px solid #d4e0db; border-radius: 7px; background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; }
.recruit-demand-combined-metrics article span, .recruit-demand-combined-metrics article strong, .recruit-demand-combined-metrics article small { display: block; }
.recruit-demand-combined-metrics article span { color: #62766e; font-size: 9px; }
.recruit-demand-combined-metrics article strong { margin: 4px 0 2px; color: #164737; font-size: 18px; line-height: 1; }
.recruit-demand-combined-metrics article small { color: #84938d; font-size: 8px; }
.recruit-demand-combined-metrics article > i { width: 28px; height: 28px; border-radius: 7px; background: #e3f0eb; color: #177054; display: grid; place-items: center; font-style: normal; }
.recruit-demand-combined-metrics article > i svg { width: 14px; height: 14px; }
.recruit-demand-combined-metrics article.gap strong { color: #b64644; }
.recruit-demand-combined-metrics article.gap > i { background: #f7e8e6; color: #b64644; }
.recruit-demand-combined-table { border: 1px solid #d3ded9; border-radius: 10px; background: #fff; overflow: hidden; }
.recruit-demand-combined-table-head { height: 44px; padding: 0 16px; border-bottom: 1px solid #dfe7e3; display: flex; align-items: center; justify-content: space-between; }
.recruit-demand-combined-table-head strong { font-size: 13px; }
.recruit-demand-combined-table-head span { color: #7a8b84; font-size: 10px; }
.recruit-demand-combined-table-head em { margin-right: 5px; color: #176149; font-style: normal; font-weight: 800; }
.recruit-demand-ledger-wrap { overflow-x: auto; }
.recruit-demand-combined-table-grid { width: 100%; min-width: 860px !important; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.recruit-demand-combined-table-grid th { height: 44px; padding: 0 12px; border-right: 1px solid rgba(48,103,84,.10); border-bottom: 1px solid #dce7e2; background: #f5f9f7; color: #183f34; font-size: 12px; font-weight: 900; text-align: center; white-space: nowrap; }
.recruit-demand-combined-table-grid td { height: 64px; padding: 7px 12px; border-top: 1px solid #dbe5e1; border-right: 1px solid #e0e8e4; color: #365148; font-size: 10px; font-weight: 700; line-height: 1.3; text-align: center; vertical-align: middle; }
.recruit-demand-combined-table-grid th:last-child, .recruit-demand-combined-table-grid td:last-child { border-right: 0; }
.recruit-demand-combined-table-grid tbody tr:nth-child(even) td { background: #fbfcfb; }
.recruit-demand-combined-table-grid tbody tr:hover td { background: #f4f8f6; }
.recruit-demand-combined-table-grid th:nth-child(1) { width: 118px; }
.recruit-demand-combined-table-grid th:nth-child(2) { width: 90px; }
.recruit-demand-combined-table-grid th:nth-child(3) { width: 150px; }
.recruit-demand-combined-table-grid th:nth-child(4), .recruit-demand-combined-table-grid th:nth-child(5) { width: 65px; }
.recruit-demand-combined-table-grid th:nth-child(6) { width: 70px; }
.recruit-demand-combined-table-grid th:nth-child(7) { width: 302px; }
.recruit-demand-combined-table-grid th:nth-child(4), .recruit-demand-combined-table-grid th:nth-child(5), .recruit-demand-combined-table-grid th:nth-child(6) { background: #f5f9f7; text-align: center; }
.recruit-demand-combined-table-grid td:nth-child(4), .recruit-demand-combined-table-grid td:nth-child(5), .recruit-demand-combined-table-grid td:nth-child(6) { background: #f2faf6; text-align: center; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.recruit-demand-combined-table-grid td:nth-child(4) { color: #274c40; }
.recruit-demand-combined-table-grid td:nth-child(5) { color: #176149; }
.recruit-demand-combined-table-grid td:nth-child(6) { color: #b64644; }
.recruit-demand-combined-table-grid td:nth-child(7) { color: #6f8179; font-size: 9px; }
.combined-job strong, .combined-job small { display: block; }
.combined-job strong { color: #123f32; font-size: 12px; }
.combined-job small { margin-top: 4px; color: #7c8c85; font-size: 8px; }
.combined-job-meta { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.combined-job-meta small { margin-top: 0; }
.combined-job-meta .source-pill { height: 17px; font-size: 6px; }
.combined-timeline { width: fit-content; margin: 0 auto; text-align: left; }
.combined-timeline::before, .combined-timeline > div::before { display: none; }
.combined-timeline > div { margin-bottom: 6px; }
.combined-timeline > div:last-child { margin-bottom: 0; }
.combined-timeline span, .combined-timeline strong { display: block; }
.combined-timeline span { color: #84938d; font-size: 8px; }
.combined-timeline strong { margin-top: 1px; color: #536b62; font-size: 9px; font-variant-numeric: tabular-nums; }
.combined-status { display: grid; justify-items: center; gap: 6px; }
.combined-status-actions, .combined-actions { display: flex; align-items: center; gap: 5px; }
.combined-actions { justify-content: center; }
.combined-status-actions .icon-btn, .combined-actions .icon-btn { width: 25px; height: 25px; }
.combined-status-actions .icon-btn svg, .combined-actions .icon-btn svg { width: 13px; height: 13px; }
.combined-plan { width: min(310px, 100%); margin: 0 auto; padding-left: 14px; border-left: 1px solid #cfdcd6; display: grid; grid-template-columns: minmax(112px, 1fr) 132px; align-items: center; gap: 12px; text-align: center; }
.combined-plan-dates { padding-right: 10px; border-right: 1px solid #d4dfda; display: grid; gap: 4px; text-align: center; }
.combined-plan-dates span, .combined-plan-dates em, .combined-plan-dates strong { display: block; }
.combined-plan-dates em { color: #8a9993; font-size: 7px; font-style: normal; font-weight: 700; }
.combined-plan-dates strong { margin-top: 2px; color: #536b62; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.combined-plan-tools { display: grid; justify-items: center; gap: 4px; }
.combined-plan-state, .combined-plan-commands { display: flex; align-items: center; justify-content: center; gap: 5px; }
.combined-plan-state .tag { min-width: 49px; justify-content: center; }
.combined-plan-state .btn.compact { min-height: 23px; padding: 0 6px; font-size: 7px; }
.combined-plan-commands .icon-btn { width: 22px; height: 22px; }
.combined-plan-commands .icon-btn svg { width: 12px; height: 12px; }
.recruit-onboarded-total strong, .recruit-onboarded-total small { display: block; }
.recruit-onboarded-total strong { color: #176149; font-size: inherit; font-weight: inherit; }
.recruit-onboarded-total small { margin-top: 4px; color: #74867e; font-size: 8px; font-weight: 600; white-space: nowrap; }
.recruit-demand-combined-table-grid tfoot td { height: 42px; padding-top: 6px; padding-bottom: 6px; border-top: 2px solid #afc1b9; border-right: 1px solid #d1dcd7; background: #edf5f1; color: #173d32; font-size: 12px; font-weight: 800; text-align: center; }
.recruit-demand-combined-table-grid tfoot td:last-child { color: #70827a; font-size: 9px; font-weight: 500; text-align: center; }
.job-placement-drawer { width: min(560px, 96vw); padding-bottom: 0; }
.placement-notice { min-height: 54px; margin-bottom: 18px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border-left: 3px solid var(--green); color: #45635a; background: #edf6f2; font-size: 9px; line-height: 1.55; }
.placement-notice svg { width: 17px; flex: 0 0 17px; color: var(--green); }
.placement-source-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.placement-source-grid button { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.placement-source-grid svg { width: 15px; height: 15px; }
.placement-history > div { border: 1px solid var(--line); }
.placement-history article { min-height: 52px; padding: 8px 10px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.placement-history article:first-child { border-top: 0; }
.placement-history article strong, .placement-history article small { display: block; }
.placement-history article strong { font-size: 10px; }
.placement-history article small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.placement-history .icon-btn { width: 29px; height: 29px; }
.recruit-multi-month-drawer { width: min(820px, 96vw) !important; }
.recruit-multi-month-filter { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: end; gap: 12px; padding: 15px 16px; border: 1px solid #d4e0db; border-radius: 7px; background: #f5f9f7; }
.recruit-multi-month-filter label { display: grid; gap: 7px; }
.recruit-multi-month-filter label span { color: #61756d; font-size: 10px; font-weight: 800; }
.recruit-multi-month-filter select { width: 100%; height: 39px; padding: 0 10px; border: 1px solid #c8d8d1; border-radius: 6px; background: #fff; color: #173d32; font: inherit; font-size: 11px; font-weight: 800; }
.recruit-multi-month-filter > svg { align-self: center; width: 17px; height: 17px; margin-top: 19px; color: #7a8e85; }
.recruit-multi-month-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0; border-block: 1px solid #d8e3de; }
.recruit-multi-month-metrics > div { min-height: 82px; padding: 14px 16px; border-right: 1px solid #d8e3de; display: flex; flex-direction: column; justify-content: center; }
.recruit-multi-month-metrics > div:last-child { border-right: 0; }
.recruit-multi-month-metrics span, .recruit-multi-month-metrics small { color: #71847c; font-size: 10px; }
.recruit-multi-month-metrics strong { margin: 5px 0 3px; color: #164737; font-size: 23px; line-height: 1; }
.recruit-multi-month-metrics .gap strong { color: #b64644; }
.recruit-multi-month-table { border: 1px solid #d4e0db; border-radius: 7px; }
.recruit-multi-month-table table { min-width: 680px !important; table-layout: fixed; }
.recruit-multi-month-table th { height: 43px; padding: 0 10px; background: #f2f7f4; color: #5d736a; font-size: 11px; font-weight: 800; text-align: center; }
.recruit-multi-month-table td { height: 58px; padding: 10px; border-top: 1px solid #e1e9e5; color: #314f45; font-size: 11px; font-weight: 700; text-align: center; }
.recruit-multi-month-table th:first-child, .recruit-multi-month-table td:first-child { width: 170px; text-align: left; }
.recruit-multi-month-table td:nth-child(2) { width: 180px; }
.recruit-multi-month-table td span, .recruit-multi-month-table td small { display: block; }
.recruit-multi-month-table td small { margin-top: 3px; color: #809088; font-size: 9px; font-weight: 500; }
.recruit-multi-month-table td.good { color: #176149; }
.recruit-multi-month-table td.gap { color: #b64644; }
.recruit-multi-month-table tfoot td { height: 46px; background: #edf5f1; color: #173d32; font-weight: 900; }
.recruit-monthly-preview-drawer { width: min(1180px, 98vw) !important; height: 100%; box-sizing: border-box; padding-bottom: 0; display: flex; flex-direction: column; overflow: hidden; }
.recruit-monthly-preview-tabs { display: flex; gap: 8px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #d8e3de; overflow-x: auto; }
.recruit-monthly-preview-tabs button { min-width: 120px; padding: 9px 13px; border: 1px solid #cbdad3; border-radius: 6px; background: #f5f9f7; color: #4d665c; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.recruit-monthly-preview-tabs button.active { border-color: #2e8063; background: #e6f3ed; color: #176149; box-shadow: inset 0 -2px 0 #2e8063; }
.recruit-monthly-preview-tabs button span { margin-left: 6px; color: #809088; font-size: 9px; font-weight: 600; }
.recruit-monthly-preview-drawer .drawer-head, .recruit-monthly-preview-drawer .recruit-monthly-preview-tabs, .recruit-monthly-preview-drawer .sticky-actions { flex: 0 0 auto; }
.recruit-monthly-preview-table-wrap { flex: 1 1 auto; min-height: 220px; max-height: none; border: 1px solid #d4e0db; border-radius: 7px; background: #fff; overflow: auto; }
.recruit-monthly-preview-table { min-width: 1080px; border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 1900px !important; }
.recruit-monthly-preview-table.preview-sheet-1 { width: 2800px !important; min-width: 2800px; }
.recruit-monthly-preview-table.preview-sheet-2 { width: 1700px !important; min-width: 1700px; }
.recruit-monthly-preview-table.preview-sheet-3 { width: 1500px !important; min-width: 1500px; }
.recruit-monthly-preview-table td { width: 105px; min-width: 105px; max-width: 260px; height: 48px; padding: 8px 10px; border-right: 1px solid #e3ebe7; border-bottom: 1px solid #e3ebe7; color: #314f45; font-size: 10px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center !important; vertical-align: middle !important; }
.recruit-monthly-preview-table td:first-child { width: 70px; min-width: 70px; }
.recruit-monthly-preview-table tr.preview-title-row td, .recruit-monthly-preview-table tr.preview-subtitle-row td { width: auto; max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }
.recruit-monthly-preview-table tr.preview-title-row td { height: 46px; padding: 10px 16px; background: #eaf4ef; color: #164737; font-size: 14px; font-weight: 900; text-align: center !important; vertical-align: middle !important; }
.recruit-monthly-preview-table tr.preview-subtitle-row td { height: 34px; padding: 7px 16px; background: #f5f9f7; color: #476257; font-weight: 800; text-align: center !important; vertical-align: middle !important; }
.recruit-monthly-preview-table tr.preview-header-row td { position: sticky; top: 0; z-index: 1; height: 58px; background: #edf5f1; color: #36584b; font-weight: 900; white-space: normal; overflow: hidden; text-overflow: clip; text-align: center; vertical-align: middle; }
.recruit-monthly-preview-table.preview-sheet-3 tr.preview-header-row td { white-space: nowrap; }
.recruit-monthly-preview-table.preview-sheet-3 tr.preview-header-row td:nth-child(7), .recruit-monthly-preview-table.preview-sheet-3 tr.preview-header-row td:nth-child(10) { width: 180px; min-width: 180px; }
.recruit-monthly-preview-table tr:last-child td { border-bottom: 1px solid #d4e0db; }
.recruit-monthly-preview-table tbody tr:not(.preview-title-row):not(.preview-subtitle-row) td { text-align: center !important; vertical-align: middle !important; }
.recruit-monthly-preview-table td:last-child { border-right: 0; }
.recruit-monthly-preview-drawer .sticky-actions { margin-left: -22px; margin-right: -22px; }
@media (max-width: 1100px) {
  .recruit-demand-combined-panel { padding: 18px; }
  .recruit-demand-combined-head { flex-direction: column; }
  .recruit-demand-combined-head .recruit-demand-ledger-tools { width: 100%; align-items: stretch; }
  .recruit-demand-combined-head .recruit-demand-month-picker, .recruit-demand-combined-head .recruit-jobs-tools { width: 100%; flex-wrap: wrap; }
  .recruit-demand-combined-head .recruit-flow-search { flex: 1; width: auto; }
}
@media (max-width: 680px) {
  .recruit-demand-combined-metrics { grid-template-columns: 1fr; }
  .recruit-demand-combined-head .recruit-demand-month-picker label { width: 100%; }
  .recruit-demand-combined-head .recruit-jobs-tools > select { flex: 0 0 120px; }
  .recruit-multi-month-filter { grid-template-columns: 1fr; }
  .recruit-multi-month-filter > svg { display: none; }
  .recruit-multi-month-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recruit-multi-month-metrics > div:nth-child(2) { border-right: 0; }
  .recruit-multi-month-metrics > div:nth-child(-n+2) { border-bottom: 1px solid #d8e3de; }
}

.source-pill { height: 19px; padding: 0 5px; border-radius: 3px; background: #edf1ef; color: #5e6d67; display: inline-flex; align-items: center; font-size: 7px; font-weight: 800; white-space: nowrap; }
.source-pill.dingtalk { background: #e5eff8; color: #2a6492; }
.source-pill.system { background: #eef7f3; color: #287c64; }
.recruit-number { font-weight: 900; }
.recruit-number.good { color: var(--green); }
.recruit-number.gap { color: var(--red); }

.recruit-month-head, .recruit-progress-toolbar, .candidate-input-panel, .offer-status-path { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.recruit-month-metrics { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); }
.recruit-month-metrics article { min-width: 96px; padding: 3px 16px; border-left: 1px solid var(--line); }
.recruit-month-metrics span, .recruit-month-metrics strong, .recruit-month-metrics small { display: block; }
.recruit-month-metrics span { color: var(--muted); font-size: 8px; }
.recruit-month-metrics strong { margin: 4px 0 2px; color: #173d31; font-size: 21px; line-height: 1; }
.recruit-month-metrics small { color: var(--muted); font-size: 7px; }
.recruit-month-metrics .remaining strong { color: var(--red); }
.recruit-month-table { min-width: 1030px !important; }

.range-buttons, .candidate-input-options, .offer-status-steps { display: flex; align-items: center; gap: 6px; }
.range-buttons button { height: 30px; padding: 0 11px; border: 1px solid #d6e0dc; border-radius: 5px; background: #fff; color: #586a63; font-size: 8px; cursor: pointer; }
.range-buttons button.active { border-color: var(--green); background: #e9f3ef; color: var(--green); font-weight: 900; }
.recruit-period-summary { margin-bottom: 14px; border: 1px solid #d7e1dc; border-radius: 7px; background: #fff; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; }
.recruit-period-summary article { min-height: 80px; padding: 13px 15px; border-left: 1px solid var(--line); }
.recruit-period-summary article:first-child { border-left: 0; }
.recruit-period-summary span, .recruit-period-summary strong, .recruit-period-summary small { display: block; }
.recruit-period-summary span { color: var(--muted); font-size: 8px; }
.recruit-period-summary strong { margin: 7px 0 4px; font-size: 20px; line-height: 1; }
.recruit-period-summary small { color: var(--muted); font-size: 7px; }
.recruit-period-summary .arrived { background: #edf7f2; }
.recruit-period-summary .arrived strong { color: var(--green); }

.candidate-input-options button { min-width: 180px; min-height: 52px; padding: 8px 12px; border: 1px solid #d6e0dc; border-radius: 6px; background: #fff; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; color: var(--ink); text-align: left; cursor: pointer; }
.candidate-input-options button:hover, .candidate-input-options .primary-option { border-color: #86aa9c; background: #eef6f2; }
.candidate-input-options svg { width: 28px; height: 28px; padding: 6px; border-radius: 6px; background: #e7f0ed; color: var(--green); }
.candidate-input-options strong, .candidate-input-options small { display: block; }
.candidate-input-options strong { font-size: 9px; }
.candidate-input-options small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.interview-register-table { min-width: 1080px !important; }
.offer-status-steps { color: var(--muted); font-size: 8px; }
.offer-status-steps span { padding: 7px 9px; border-radius: 4px; background: #f5f8f7; color: #496059; font-weight: 800; }
.offer-status-steps svg { width: 12px; }
.offer-status-table, .pending-arrival-table { min-width: 1080px !important; }

.resume-extract-zone { margin: 0 0 14px; padding: 12px; border: 1px solid #dcebe5; border-radius: 7px; background: #f8fcfa; }
.resume-extract-zone > label { min-height: 62px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; cursor: pointer; }
.resume-extract-zone > label > svg { width: 34px; height: 34px; padding: 8px; border-radius: 7px; background: #dcece5; color: var(--green); }
.resume-extract-zone > label strong, .resume-extract-zone > label small { display: block; }
.resume-extract-zone > label strong { font-size: 10px; }
.resume-extract-zone > label small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.resume-extract-zone > label b { color: var(--green); font-size: 8px; }
.resume-extract-result { margin-top: 8px; padding: 8px 10px; border-top: 1px solid #ccdbd4; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 8px; color: var(--green); }
.resume-extract-result.warn { color: #9a620f; }
.resume-extract-result svg { width: 16px; height: 16px; }
.resume-extract-result .lucide-loader-circle { animation: spin 1s linear infinite; }
.resume-extract-result strong, .resume-extract-result small { display: block; }
.resume-extract-result strong { font-size: 8px; }
.resume-extract-result small { max-height: 34px; margin-top: 4px; overflow: hidden; overflow-wrap: anywhere; color: var(--muted); font-size: 7px; line-height: 1.6; }

@media (max-width: 1100px) {
  .recruit-workspace-flow { grid-template-columns: repeat(6, 180px); overflow-x: auto; }
  .recruit-path-line { grid-template-columns: 1fr; gap: 7px; }
  .recruit-path-line > em { transform: rotate(90deg); }
  .recruit-path-line > div:last-child { grid-column: auto; }
  .recruit-month-head, .recruit-progress-toolbar, .candidate-input-panel, .offer-status-path { align-items: flex-start; flex-direction: column; }
  .recruit-overview-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recruit-overview-title { grid-column: 1 / -1; border-left: 0; }
  .recruit-overview-strip article:nth-child(4) { border-left: 0; }
  .candidate-input-options { width: 100%; }
  .candidate-input-options button { flex: 1; }
}

@media (max-width: 680px) {
  .recruit-workspace-head { align-items: flex-start; }
  .recruit-workspace-head .actions { width: 100%; }
  .recruitment-analysis-toolbar { align-items: flex-start; flex-direction: column; }
  .recruitment-analysis-controls, .recruitment-analysis-toolbar .range-buttons { width: 100%; justify-content: flex-start; }
  .recruitment-custom-range { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) 14px minmax(0,1fr); }
  .recruitment-custom-range input { width: 100%; }
  .recruit-month-metrics, .recruit-period-summary { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recruit-period-summary article:nth-child(4) { border-left: 0; border-top: 1px solid var(--line); }
  .recruit-period-summary article:nth-child(5) { border-top: 1px solid var(--line); }
  .range-buttons, .candidate-input-options, .offer-status-steps { width: 100%; overflow-x: auto; }
  .candidate-input-options button { min-width: 165px; }
  .offer-status-steps span { white-space: nowrap; }
}
/* 宿舍管理 */
.dorm-page-head .actions { align-items: center; }
.dorm-period { height: 38px; display: grid; grid-template-columns: 36px minmax(112px,auto) 36px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.dorm-period button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.dorm-period button:hover { color: var(--green); background: #eef6f2; }
.dorm-period button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.dorm-period button:first-child { border-right: 1px solid var(--line); }
.dorm-period button:last-child { border-left: 1px solid var(--line); }
.dorm-period svg { width: 17px; height: 17px; }
.dorm-period strong { padding: 0 12px; color: var(--ink); font-size: 14px; font-weight: 800; text-align: center; white-space: nowrap; }
.dorm-stats .stat { min-height: 132px; }
.dorm-stats .value { width: 100%; text-align: center; }
.dorm-stats .label { font-weight: 800; }
.dorm-stats .dorm-stat-value-left { transform: translateX(-.5cm); }
.dorm-gender-value { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 0; }
.dorm-gender-value span { min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 3px; font-size: 28px; text-align: center; }
.dorm-gender-value span + span { border-left: 1px solid var(--line); }
.dorm-gender-value small { font-size: 12px; color: var(--muted); }
.dorm-month-count-value span { font-size: 24px; }
.dorm-month-count-value small { font-size: 12px; }
.dorm-tabs { display: flex; align-items: center; gap: 2px; margin: 20px 0; border-bottom: 1px solid var(--line); }
.dorm-tabs button { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-weight: 600; }
.dorm-tabs button svg { width: 17px; height: 17px; }
.dorm-tabs button:hover { color: var(--ink); background: #f7f9f8; }
.dorm-tabs button.active { color: var(--green); border-bottom-color: var(--green); }
.dorm-pending-trigger { width: max-content; max-width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dorm-pending-trigger:hover { color: var(--green); }
.dorm-pending-trigger.warn:hover { color: #8d5412; }
.dorm-overview-toolbar { min-height: 38px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; margin-bottom: 9px; padding: 0 4px 5px; border-bottom: 1px solid var(--line); }
.dorm-overview-toolbar p, .dorm-overview-toolbar time { margin: 0; color: var(--ink); font-size: 12px; font-weight: 800; line-height: 1.35; }
.dorm-overview-toolbar time { margin-left: auto; white-space: nowrap; }
.dorm-resident-search { width: min(310px,100%); height: 32px; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; margin-left: auto; border: 1px solid #cbd9d3; border-radius: 5px; background: #fff; overflow: hidden; }
.dorm-resident-search > svg { width: 15px; height: 15px; justify-self: center; color: #71857d; }
.dorm-resident-search input { width: 100%; min-width: 0; height: 30px; padding: 0 5px 0 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 700; }
.dorm-resident-search input::placeholder { color: #87978f; font-weight: 500; }
.dorm-resident-search button { height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-left: 1px solid #d5dfdb; background: #edf5f1; color: var(--green); font-size: 10px; font-weight: 800; cursor: pointer; }
.dorm-resident-search button:hover { background: #e3f0ea; }
.dorm-resident-search button svg { width: 14px; height: 14px; }
.dorm-task-category { border-top: 1px solid var(--line); }
.dorm-task-category:first-child { border-top: 0; }
.dorm-task-category > header { min-height: 58px; display: flex; align-items: center; gap: 11px; padding: 9px 18px; background: #f5f8f7; }
.dorm-task-category > header > span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--green); background: #e3efea; border-radius: 6px; }
.dorm-task-category[data-task-category="utility"] > header > span { color: #8a5a12; background: #f6ead4; }
.dorm-task-category[data-task-category="occupancy"] > header > span { color: #2e6799; background: #deebf3; }
.dorm-task-category > header svg { width: 17px; height: 17px; }
.dorm-task-category h3, .dorm-task-category p { margin: 0; }
.dorm-task-category h3 { font-size: 14px; }
.dorm-task-category header small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 700; }
.dorm-task-row { min-height: 64px; display: grid; grid-template-columns: 50px minmax(0,1fr) 92px; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line-soft); }
.dorm-task-row.completed { background: #fbfcfc; }
.dorm-task-sequence { color: var(--muted); font-size: 10px; font-weight: 800; }
.dorm-task-copy strong, .dorm-task-copy small { display: block; }
.dorm-task-copy strong { font-size: 12px; }
.dorm-task-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.dorm-task-row.completed .dorm-task-copy strong { color: #587068; }
.dorm-task-status { min-width: 86px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid; border-radius: 5px; background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.dorm-task-status svg { width: 15px; height: 15px; }
.dorm-task-status.pending { border-color: #d5a34d; color: #8b5810; background: #fff8ec; }
.dorm-task-status.completed { border-color: #76a894; color: var(--green); background: #edf7f2; }
.dorm-task-status:hover { filter: brightness(.97); }
.dorm-task-status:disabled { opacity: .55; cursor: wait; }
.dorm-task-category-empty { min-height: 54px; display: flex; align-items: center; gap: 8px; padding: 10px 68px; color: var(--muted); font-size: 10px; }
.dorm-task-category-empty svg { width: 15px; height: 15px; color: #7b9e90; }
.dorm-gender-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.dorm-zone { min-width: 0; padding-top: 10px; border-top: 3px solid #3c7296; }
.dorm-zone.female { border-top-color: #9a5e70; }
.dorm-zone > header { min-height: 44px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dorm-zone > header > div { display: flex; align-items: center; gap: 10px; }
.dorm-zone > header > span { padding: 4px 8px; color: var(--muted); background: #edf2f3; border-radius: 4px; font-size: 11px; font-weight: 700; }
.dorm-zone-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.dorm-zone-head-actions .btn { min-height: 27px; padding: 4px 8px; font-size: 9px; }
.dorm-zone-head-actions .dorm-zone-management-button { color: #2e6799; border-color: #a9cde3; background: #eaf3f9; }
.dorm-zone-head-actions .dorm-zone-management-button:hover { color: #fff; border-color: #2e6799; background: #2e6799; }
.dorm-zone-head-actions .dorm-zone-delete { color: #9a4a4a; border-color: #ebcaca; background: #fff7f7; }
.dorm-zone-head-actions .dorm-zone-delete:hover { color: #fff; border-color: #b93636; background: #b93636; }
.dorm-zone h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 17px; }
.dorm-zone h2 strong { color: var(--muted); font-size: 12px; font-weight: 800; }
.dorm-zone-icon { width: 34px; height: 30px; display: grid; place-items: center; color: #2e6799; background: #dcecf6; border: 1px solid #bdd8e8; border-radius: 6px; }
.dorm-zone.female .dorm-zone-icon, .dorm-room-management-group.female .dorm-zone-icon { color: #9a5e70; background: #f5e3e9; border-color: #e8cbd5; }
.dorm-zone-icon svg { width: 18px; height: 18px; }
.dorm-room-grid { display: grid; gap: 10px; }
.dorm-gender-layout.cards .dorm-room-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dorm-room-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.dorm-room-card.dorm-room-located { border-color: #d48b18; box-shadow: 0 0 0 3px rgba(212,139,24,.24), 0 8px 22px rgba(99,68,18,.16); animation: dorm-room-locate-pulse 1.05s ease-in-out 2; scroll-margin-top: 100px; }
@keyframes dorm-room-locate-pulse { 0%,100% { background: #fff; } 50% { background: #fff4dc; } }
.dorm-room-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px 11px 8px; }
.dorm-room-card > header > div { display: flex; align-items: baseline; gap: 9px; }
.dorm-room-card > header small { color: var(--muted); font-size: 11px; }
.dorm-room-card > header .dorm-room-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.dorm-room-gender-actions { display: flex; align-items: center; gap: 5px; }
.dorm-room-title-line { display: flex; align-items: baseline; gap: 7px; }
.dorm-room-title-line .dorm-room-add-resident { min-height: 25px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; color: #2e6799; background: #eaf3f9; border: 1px solid #c7dce9; border-radius: 4px; font-size: 9px; font-weight: 800; cursor: pointer; }
.dorm-room-title-line .dorm-room-add-resident:hover { color: #fff; background: #2e6799; border-color: #2e6799; }
.dorm-room-title-line .dorm-room-add-resident:disabled { color: #929b98; background: #eef1f0; border-color: #e0e5e3; cursor: not-allowed; }
.dorm-room-title-line .dorm-room-add-resident svg { width: 12px; height: 12px; }
.dorm-room-card > header .dorm-room-heading-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dorm-gender-change { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--green); background: #fff; border: 1px solid #cad9d3; border-radius: 4px; cursor: pointer; }
.dorm-gender-change:hover { background: #edf6f2; }
.dorm-gender-change svg { width: 11px; height: 11px; }
.dorm-room-leader-control { min-height: 27px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; color: var(--muted); background: #fff; border: 1px solid #e0e6e3; border-radius: 4px; font-size: 9px; white-space: nowrap; cursor: pointer; }
.dorm-room-leader-control:hover { color: var(--green); background: #edf6f2; border-color: #c8d9d2; }
.dorm-room-leader-control:disabled { color: #a2aaa7; background: #f3f5f4; cursor: not-allowed; }
.dorm-room-leader-control svg { width: 11px; height: 11px; }
.dorm-room-leader-control svg:first-child { color: #b27620; }
.dorm-room-leader-control strong { color: var(--ink); }
.dorm-room-number { font-size: 18px; font-weight: 800; }
.dorm-gender-tag { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 4px; color: #2e6799; background: #eaf2f7; font-size: 11px; font-weight: 700; white-space: nowrap; }
.dorm-gender-tag.female { color: #8d5365; background: #f5eaee; }
.dorm-room-capacity { display: flex; justify-content: space-between; gap: 8px; padding: 0 11px 6px; color: var(--muted); font-size: 10px; }
.dorm-room-capacity strong { color: var(--ink); font-weight: 600; }
.dorm-capacity-track { height: 3px; margin: 0 11px 8px; overflow: hidden; background: #edf1f0; border-radius: 2px; }
.dorm-capacity-track i { display: block; height: 100%; background: #3c7296; }
.dorm-zone.female .dorm-capacity-track i { background: #9a5e70; }
.dorm-room-residents { border-top: 1px solid var(--line-soft); }
.dorm-resident-row { min-height: 48px; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 7px 10px; border-top: 1px solid var(--line-soft); }
.dorm-resident-row:first-child { border-top: 0; }
.dorm-resident-row .avatar { width: 25px; height: 25px; font-size: 9px; }
.dorm-resident-row strong, .dorm-resident-row small { display: block; }
.dorm-resident-row strong { font-size: 11px; }
.dorm-resident-row strong em { margin-left: 5px; color: #a66b15; font-size: 9px; font-style: normal; }
.dorm-resident-row small { margin-top: 1px; color: var(--muted); font-size: 9px; }
.dorm-resident-dates { display: flex; flex-wrap: wrap; gap: 2px 7px; margin-top: 2px; color: var(--muted); font-size: 9px; }
.dorm-resident-dates em { font-size: 8px; font-style: normal; }
.dorm-resident-dates .dorm-checkout-date { color: #c33f3f; font-weight: 700; }
.dorm-resident-dates .dorm-transfer-date { color: #c33f3f; font-weight: 700; }
.dorm-resident-row.checked-out { background: #fff7f7; }
.dorm-resident-row.transferred { background: #fff8d9; }
.dorm-resident-row.new-checkin { background: #edf6ff; }
.dorm-checkout-tag { color: #b93636; background: #fde8e8; border-color: #f3caca; }
.dorm-transfer-tag { color: #7b5a00; background: #fff0b8; border-color: #ead58a; }
.dorm-resident-row .tag { font-size: 9px; }
.dorm-resident-actions { display: flex; align-items: center; gap: 6px; }
.dorm-resident-actions .icon-btn { width: 28px; height: 28px; color: var(--muted); }
.dorm-resident-actions .icon-btn:hover { color: var(--green); background: var(--mint); }
.dorm-resident-actions .icon-btn svg { width: 14px; height: 14px; }
.dorm-person-action-trigger { min-height: 29px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 7px; border: 1px solid #9fc7df; border-radius: 4px; color: #2e6799; background: #eaf3f9; font-size: 9px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.dorm-person-action-trigger:hover { color: #fff; border-color: #2e6799; background: #2e6799; }
.dorm-person-action-trigger svg { width: 13px; height: 13px; }
.dorm-transfer-modal, .dorm-room-modal { width: min(560px,100%); }
.dorm-person-modal { width: min(760px,100%); overflow: hidden; }
.dorm-person-workspace { min-height: 390px; display: grid; grid-template-columns: 190px minmax(0,1fr); }
.dorm-person-menu { padding: 13px 9px; border-right: 1px solid var(--line); background: #f7faf8; }
.dorm-person-summary { min-height: 62px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; padding: 4px 8px 13px; }
.dorm-person-summary .avatar { width: 34px; height: 34px; }
.dorm-person-summary strong, .dorm-person-summary small { display: block; }
.dorm-person-summary strong { font-size: 13px; }
.dorm-person-summary small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.dorm-person-menu > button { width: 100%; min-height: 48px; display: grid; grid-template-columns: 18px minmax(0,1fr) 13px; align-items: center; gap: 8px; padding: 7px 9px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; text-align: left; cursor: pointer; }
.dorm-person-menu > button:hover { color: var(--ink); background: #eef4f1; }
.dorm-person-menu > button.active { color: var(--green); background: #e7f1ed; }
.dorm-person-menu > button.danger { margin-top: 10px; color: #a63a3a; }
.dorm-person-menu > button.danger.active { background: #faeaea; }
.dorm-person-menu > button.warning { margin-top: 10px; color: #8a6500; }
.dorm-person-menu > button.warning.active { background: #fff3c9; }
.dorm-person-menu > button:disabled { color: #a3aaa7; background: transparent; cursor: not-allowed; }
.dorm-person-menu > button > svg { width: 16px; height: 16px; }
.dorm-person-menu > button > svg:last-child { width: 12px; height: 12px; }
.dorm-person-menu > button strong, .dorm-person-menu > button small { display: block; }
.dorm-person-menu > button strong { color: inherit; font-size: 11px; }
.dorm-person-menu > button small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.dorm-person-content { min-width: 0; background: #fff; }
.dorm-person-content > section[hidden] { display: none; }
.dorm-person-panel-title { padding: 18px 20px 0; }
.dorm-person-panel-title strong, .dorm-person-panel-title span { display: block; }
.dorm-person-panel-title strong { font-size: 14px; }
.dorm-person-panel-title span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.dorm-person-panel-title.danger strong { color: #a63a3a; }
.dorm-person-panel-title.warning strong { color: #8a6500; }
.dorm-person-checkout-save { color: #fff; border-color: #b43f3f; background: #b43f3f; }
.dorm-person-checkout-save:hover { background: #983434; }
.dorm-transfer-undo-summary { display: grid; grid-template-columns: minmax(0,1fr) 26px minmax(0,1fr); align-items: center; gap: 12px; margin: 26px 20px 14px; padding: 16px; border: 1px solid #ead58a; background: #fff9df; }
.dorm-transfer-undo-summary > div { text-align: center; }
.dorm-transfer-undo-summary span, .dorm-transfer-undo-summary strong { display: block; }
.dorm-transfer-undo-summary span { color: var(--muted); font-size: 9px; }
.dorm-transfer-undo-summary strong { margin-top: 5px; color: var(--ink); font-size: 15px; }
.dorm-transfer-undo-summary > svg { width: 22px; height: 22px; color: #a67800; }
.dorm-transfer-undo-note { display: flex; align-items: flex-start; gap: 9px; margin: 0 20px; padding: 11px 12px; color: #6d5411; background: #fff3c9; border-radius: 4px; }
.dorm-transfer-undo-note svg { width: 16px; height: 16px; flex: 0 0 auto; }
.dorm-transfer-undo-note strong, .dorm-transfer-undo-note small { display: block; }
.dorm-transfer-undo-note strong { font-size: 11px; }
.dorm-transfer-undo-note small { margin-top: 3px; font-size: 9px; line-height: 1.45; }
.dorm-transfer-undo-save { color: #fff; border-color: #a67800; background: #a67800; }
.dorm-transfer-undo-save:hover { background: #876000; }
@media (max-width: 760px) {
  .dorm-person-workspace { grid-template-columns: 1fr; }
  .dorm-person-menu { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .dorm-person-summary { grid-column: 1 / -1; min-height: 50px; padding-bottom: 7px; }
  .dorm-person-menu > button { min-height: 42px; grid-template-columns: 16px minmax(0,1fr); }
  .dorm-person-menu > button > svg:last-child, .dorm-person-menu > button small { display: none; }
  .dorm-person-menu > button.danger, .dorm-person-menu > button.warning { margin-top: 0; }
}
.dorm-transfer-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; color: var(--muted); background: #f4f8f6; border-radius: 4px; font-size: 10px; line-height: 1.5; }
.dorm-transfer-note svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--green); }
.dorm-room-empty { min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 11px; }
.dorm-room-empty svg { width: 20px; height: 20px; }
.dorm-room-card > footer { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; background: #fafbfb; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 9px; }
.dorm-room-footer-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 8px; }
.dorm-room-card > footer button { min-height: 24px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid transparent; border-radius: 4px; color: #8d3d3d; background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }
.dorm-room-card > footer button:hover { color: #6e2f2f; background: #faeeee; border-color: #f0d5d5; }
.dorm-room-card > footer button:disabled { color: #929b98; background: #eef1f0; border-color: #e0e5e3; cursor: not-allowed; }
.dorm-room-card > footer button svg { width: 12px; height: 12px; }
.dorm-room-delete-modal { width: min(480px,100%); }
.dorm-room-delete-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; color: #8a5b13; background: #fff8e8; border: 1px solid #efdcae; border-radius: 5px; }
.dorm-room-delete-note > svg { width: 18px; height: 18px; flex: 0 0 auto; }
.dorm-room-delete-note strong, .dorm-room-delete-note small { display: block; }
.dorm-room-delete-note strong { font-size: 11px; }
.dorm-room-delete-note small { margin-top: 3px; color: #806f53; font-size: 9px; line-height: 1.45; }
.dorm-room-delete-save { color: #fff; border-color: #b93636; background: #b93636; }
.dorm-room-delete-save:hover { color: #fff; border-color: #983434; background: #983434; }
.dorm-room-management-modal { width: min(860px,100%); }
.dorm-room-management-note { display: flex; align-items: center; gap: 9px; margin: 16px 20px 0; padding: 10px 12px; color: var(--green); background: #edf6f2; border: 1px solid #cfe0d9; border-radius: 5px; font-size: 10px; }
.dorm-room-management-note svg { width: 16px; height: 16px; flex: 0 0 auto; }
.dorm-room-management-layout-switch { display: flex; gap: 0; margin: 14px 20px 0; }
.dorm-room-management-layout-switch button { min-height: 28px; padding: 4px 13px; border: 1px solid #c9d9d3; color: var(--muted); background: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.dorm-room-management-layout-switch button:first-child { border-radius: 4px 0 0 4px; }
.dorm-room-management-layout-switch button:last-child { margin-left: -1px; border-radius: 0 4px 4px 0; }
.dorm-room-management-layout-switch button.active { position: relative; z-index: 1; color: var(--green); border-color: #87b2a2; background: #edf6f2; }
.dorm-room-management-list { max-height: min(56vh, 480px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 12px; overflow: auto; margin: 14px 20px 20px; }
.dorm-room-management-group { min-width: 0; overflow: hidden; border: 1px solid #c9dfea; border-radius: 6px; background: #eef7fc; }
.dorm-room-management-group.female { border-color: #ead2da; background: #fcf1f5; }
.dorm-room-management-group > header { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #c9dfea; background: #e2f0f8; }
.dorm-room-management-group.female > header { border-bottom-color: #ead2da; background: #f7e6ec; }
.dorm-room-management-group > header .dorm-zone-icon { width: 25px; height: 23px; border-radius: 4px; }
.dorm-room-management-group > header .dorm-zone-icon span { font-size: 10px; }
.dorm-room-management-group > header strong { font-size: 11px; }
.dorm-room-management-group > header small { margin-left: auto; color: var(--muted); font-size: 9px; font-weight: 700; }
.dorm-room-management-group > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 8px; background: #eef7fc; }
.dorm-room-management-group.female > div { background: #fcf1f5; }
.dorm-room-management-row { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; text-align: left; cursor: pointer; }
.dorm-room-management-group .dorm-room-management-row { min-height: 56px; padding: 7px 8px; }
.dorm-room-management-group.male .dorm-room-management-row { border-color: #c9dfea; background: #f8fcfe; }
.dorm-room-management-group.female .dorm-room-management-row { border-color: #ead2da; background: #fff9fb; }
.dorm-room-management-group.male .dorm-room-management-row:hover, .dorm-room-management-group.male .dorm-room-management-row.selected { border-color: #7fb2cf; background: #dceef8; }
.dorm-room-management-group.female .dorm-room-management-row:hover, .dorm-room-management-group.female .dorm-room-management-row.selected { border-color: #c991a3; background: #f5dfe7; }
.dorm-room-management-row.card { flex-direction: column; align-items: stretch; justify-content: space-between; }
.dorm-room-management-row:first-child { border-top: 0; }
.dorm-room-management-row:hover, .dorm-room-management-row.selected { background: #eef6f2; }
.dorm-room-management-main { min-width: 0; display: flex; align-items: center; gap: 9px; }
.dorm-room-management-main > strong { min-width: 48px; color: var(--ink); font-size: 14px; }
.dorm-room-management-main > strong em { margin-right: 5px; color: #2e6799; font-size: 9px; font-style: normal; font-weight: 850; }
.dorm-room-management-main > strong em.female { color: #9a5e70; }
.dorm-room-management-main > small { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 8px; }
.dorm-room-management-main > small b { font-weight: 650; }
.dorm-room-management-main > small span { color: var(--ink); font-size: 10px; font-weight: 850; }
.dorm-room-management-row.card .dorm-room-management-main { flex-wrap: wrap; }
.dorm-room-management-row.card .dorm-room-management-main > strong { width: 100%; font-size: 15px; }
.dorm-room-management-actions { display: flex; align-items: center; gap: 7px; }
.dorm-room-management-actions button { min-height: 27px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #c7dce9; border-radius: 4px; color: #2e6799; background: #eaf3f9; font-size: 9px; font-weight: 800; cursor: pointer; }
.dorm-room-management-actions button:hover { color: #fff; border-color: #2e6799; background: #2e6799; }
.dorm-room-management-actions .dorm-room-management-delete { color: #9a4a4a; border-color: #ebcaca; background: #fff7f7; }
.dorm-room-management-actions .dorm-room-management-delete:hover { color: #fff; border-color: #b93636; background: #b93636; }
.dorm-room-management-actions svg { width: 13px; height: 13px; }
.dorm-room-management-empty { padding: 30px 16px; color: var(--muted); font-size: 11px; text-align: center; }
.dorm-room-management-row > svg { width: 15px; height: 15px; color: #a6b7b0; }
.dorm-room-management-row.selected > svg { color: var(--green); fill: var(--green); }
.dorm-room-management-footer-actions { display: flex; align-items: center; gap: 7px; }
.dorm-room-management-footer-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.dorm-room-management-modal > footer { min-height: 62px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 11px 20px; border-top: 1px solid var(--line); background: #f7f9f8; }
.dorm-transfer-history-modal { width: min(590px,100%); }
.dorm-transfer-history-heading h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin: 0; }
.dorm-modal > header .dorm-transfer-history-heading h2 > span,
.dorm-transfer-history-heading h2 > b { color: var(--ink); font-size: 19px; font-weight: 800; }
.dorm-transfer-history-heading h2 > small { margin-left: 6px; color: var(--muted); font-size: 9px; font-weight: 500; }
.dorm-transfer-history-list { max-height: min(440px,60vh); overflow-y: auto; padding: 10px 20px 18px; }
.dorm-transfer-history-item { min-height: 58px; display: grid; grid-template-columns: 30px minmax(92px,.7fr) minmax(0,1.8fr); align-items: start; gap: 9px; margin-top: 6px; padding: 10px; border: 1px solid #f0dfa4; border-radius: 4px; background: #fff8d9; }
.dorm-transfer-history-item .avatar { width: 28px; height: 28px; font-size: 9px; }
.dorm-transfer-history-person strong, .dorm-transfer-history-person small { display: block; }
.dorm-transfer-history-item strong { font-size: 11px; }
.dorm-transfer-history-item small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.dorm-transfer-history-events { display: grid; gap: 5px; }
.dorm-transfer-history-events p { display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 8px; margin: 0; }
.dorm-transfer-history-events time { color: #c33f3f; font-size: 10px; font-weight: 700; }
.dorm-transfer-history-events em { color: #c33f3f; font-size: 10px; font-style: normal; font-weight: 700; }
.dorm-transfer-history-empty { padding: 36px; color: var(--muted); text-align: center; }
.dorm-billing-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 18px; background: #fff; border: 1px solid var(--line); }
.dorm-billing-summary > div { min-height: 86px; display: flex; flex-direction: column; justify-content: center; padding: 15px 20px; border-left: 1px solid var(--line); }
.dorm-billing-summary > div:first-child { border-left: 0; }
.dorm-billing-summary span { color: var(--ink); font-size: 12px; font-weight: 800; }
.dorm-billing-summary strong { margin-top: 7px; font-size: 22px; }
.dorm-billing-panel .panel-head h2 { color: var(--ink); font-size: 14px; font-weight: 800; }
.dorm-billing-panel .panel-head h2 > span { color: var(--ink); font-weight: 600; }
.dorm-batch-billing-open { min-width: 150px; justify-content: center; }
.dorm-bill-table-wrap { overflow-x: hidden; }
.dorm-bill-table { width: 100%; min-width: 0; table-layout: fixed; }
.dorm-bill-table th, .dorm-bill-table td { padding-right: 5px; padding-left: 5px; text-align: center; vertical-align: middle; overflow-wrap: anywhere; }
.dorm-bill-table th { color: var(--ink); font-size: 12px; font-weight: 800; }
.dorm-bill-table td { font-size: 11px; }
.dorm-bill-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.dorm-bill-table .dorm-gender-tag { justify-content: center; padding-right: 5px; padding-left: 5px; }
.dorm-bill-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dorm-bill-actions .btn, .dorm-view-costs { width: 100%; max-width: 104px; min-height: 29px; justify-content: center; margin: 0 auto; padding: 0 6px; }
.dorm-view-costs:disabled { color: #9aa4a0; background: #f1f3f2; border-color: #e0e4e2; cursor: not-allowed; }
.dorm-utility-summary-panel { margin-top: 18px; }
.dorm-utility-summary-table { min-width: 1080px; }
.dorm-utility-summary-table th { white-space: nowrap; }
.dorm-utility-summary-table td:nth-child(5) strong { color: #b34949; }
.dorm-expense-panel { overflow: hidden; }
.dorm-expense-panel-head { min-height: 78px; gap: 16px; }
.dorm-expense-panel-head > div:first-child { min-width: 0; }
.dorm-expense-panel-head h2 { color: #111814; font-size: 17px; font-weight: 850; }
.dorm-expense-panel-head h2 span { color: #111814; font-size: 12px; font-weight: 850; }
.dorm-expense-panel-actions { display: flex; align-items: center; gap: 14px; }
.dorm-expense-total { min-width: 215px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; text-align: right; }
.dorm-expense-total span, .dorm-expense-total strong { display: block; color: #111814; font-weight: 850; }
.dorm-expense-total > div { text-align: center; }
.dorm-expense-total span { margin-bottom: 2px; font-size: 10px; text-align: center; }
.dorm-expense-total em { color: #111814; font-size: 11px; font-style: normal; font-weight: 850; transform: translateX(-0.5cm); }
.dorm-expense-total strong { font-size: 21px; }
.dorm-expense-title { padding: 18px 20px 15px; text-align: center; border-top: 1px solid var(--line-soft); }
.dorm-expense-title strong { display: block; }
.dorm-expense-title strong { color: #111814; font-size: 24px; font-weight: 900; }
.dorm-expense-title-notes { margin-top: 6px; text-align: center; }
.dorm-expense-title-notes span { color: #c93636; font-size: 11px; font-weight: 800; }
.dorm-expense-table-wrap { overflow: hidden; margin: 0 12px; border: 1px solid #89938e; }
.dorm-expense-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.dorm-expense-table th, .dorm-expense-table td { height: 11.5mm; min-height: 11.5mm; padding: 2px 3px; color: #111814; text-align: center; vertical-align: middle; overflow-wrap: anywhere; border: 1px solid #9ba39f; font-size: 11px; font-weight: 750; line-height: 1.1; }
.dorm-expense-table th { position: sticky; top: 0; z-index: 2; color: #111814; background: #c8cecb; font-size: 11px; font-weight: 900; white-space: normal; }
.dorm-expense-table th:nth-child(1) { width: 1cm; }
.dorm-expense-table th:nth-child(2) { width: 7%; }
.dorm-expense-table th:nth-child(3) { width: 7%; }
.dorm-expense-table th:nth-child(4) { width: 8%; }
.dorm-expense-table th:nth-child(5) { width: 12%; }
.dorm-expense-table th:nth-child(6), .dorm-expense-table th:nth-child(7), .dorm-expense-table th:nth-child(8) { width: 8%; }
.dorm-expense-table th:nth-child(9) { width: 8%; }
.dorm-expense-table th:nth-child(10) { width: 7%; }
.dorm-expense-table th:nth-child(11) { width: 10%; }
.dorm-expense-table th:nth-child(12) { width: 13%; }
.dorm-expense-table tbody tr.room-start td { border-top-width: 2px; border-top-color: #52615a; }
.dorm-expense-table tbody tr.male + tr.female td { border-top: 3px solid #243830; }
.dorm-expense-table tbody tr:hover td { background: #f7faf8; }
.dorm-expense-table td > strong { font-weight: 850; }
.dorm-expense-table .dorm-expense-leader { color: #d92f2f; }
.dorm-expense-table td.dorm-expense-room-total strong,
.dorm-expense-table td.dorm-expense-allocation strong { color: #a13c3c; }
.dorm-expense-table td.dorm-expense-days strong { color: #111814; }
.dorm-expense-approval { min-height: 68px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); background: #f7faf8; }
.dorm-expense-approval > span { margin-right: auto; color: #34433c; font-size: 11px; font-weight: 750; }
.dorm-expense-approval .btn { min-width: 210px; justify-content: center; }
.dorm-expense-approval .btn.approved { background: #104a3d; border-color: #104a3d; opacity: 1; }
.pay-dormitory-expense-dialog { width: min(1420px, calc(100vw - 36px)); grid-template-rows: auto minmax(0, 1fr); }
.pay-dormitory-expense-dialog > main { display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.pay-dormitory-expense-table-wrap { min-height: 0; max-height: none; margin: 14px 12px 0; overflow-x: hidden; overflow-y: auto; }
.pay-dormitory-expense-dialog .dorm-expense-table { min-width: 0; }
.pay-dormitory-expense-dialog .dorm-expense-table tr.dorm-expense-total-row td,
.dorm-expense-panel .dorm-expense-table tr.dorm-expense-total-row td { color: #111814; background: #eef6f1; font-weight: 850; border-top: 2px solid #104a3d; }
.dorm-leader-summary { display: flex; gap: 1px; margin-bottom: 18px; background: var(--line); border: 1px solid var(--line); }
.dorm-leader-summary > div { min-height: 78px; flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #fff; }
.dorm-leader-summary svg { width: 24px; height: 24px; color: var(--green); }
.dorm-leader-summary .warn svg { color: #b87018; }
.dorm-leader-summary strong, .dorm-leader-summary small { display: block; }
.dorm-leader-summary small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.dorm-leader-list { padding: 0 18px; }
.dorm-leader-row { min-height: 86px; display: grid; grid-template-columns: 120px 220px minmax(0,1fr); align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.dorm-leader-row:first-child { border-top: 0; }
.dorm-leader-row.missing { background: #fffaf3; }
.dorm-leader-room span, .dorm-leader-room small, .dorm-leader-person strong, .dorm-leader-person small, .dorm-leader-roster span, .dorm-leader-roster strong { display: block; }
.dorm-leader-room span { font-size: 18px; font-weight: 800; }
.dorm-leader-room small, .dorm-leader-person small, .dorm-leader-roster span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.dorm-leader-person { display: flex; align-items: center; gap: 9px; }
.dorm-leader-roster strong { margin-top: 5px; font-size: 12px; line-height: 1.7; }
.dorm-missing-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #b87018; background: #fff0d8; border-radius: 50%; }
.dorm-missing-icon svg { width: 17px; height: 17px; }
.dorm-modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(13,24,29,.52); opacity: 0; transition: opacity 160ms ease; }
.dorm-modal-backdrop[hidden] { display: none; }
.dorm-modal-backdrop.open { opacity: 1; }
.dorm-modal { width: min(620px,100%); max-height: calc(100vh - 48px); overflow: auto; background: #fff; border-radius: 7px; box-shadow: 0 24px 70px rgba(0,0,0,.24); transform: translateY(8px); transition: transform 160ms ease; }
.dorm-modal-backdrop.open .dorm-modal { transform: translateY(0); }
.dorm-modal > header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.dorm-modal > header span { color: var(--green); font-size: 10px; font-weight: 700; }
.dorm-modal > header h2 { margin: 4px 0 0; font-size: 18px; }
.dorm-modal form > footer { min-height: 66px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.dorm-pending-modal { width: min(860px,100%); }
.dorm-pending-list { min-height: 220px; max-height: min(620px,70vh); overflow-y: auto; }
.dorm-pending-modal > footer { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--line); }
.dorm-pending-modal > footer span { color: var(--muted); font-size: 11px; }
.dorm-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; padding: 20px; }
.dorm-form-grid label > span, .dorm-bill-inputs label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.dorm-form-grid input, .dorm-form-grid select, .dorm-form-grid textarea, .dorm-bill-inputs input, .dorm-bill-inputs textarea { width: 100%; min-height: 38px; padding: 8px 10px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.dorm-form-grid textarea, .dorm-bill-inputs textarea { resize: vertical; }
.dorm-form-grid .full, .dorm-bill-inputs .full { grid-column: 1 / -1; }
.dorm-form-grid .dorm-check { min-height: 38px; display: flex; align-items: center; gap: 8px; }
.dorm-form-grid .dorm-check input { width: 16px; min-height: 16px; }
.dorm-form-grid .dorm-check span { margin: 0; color: var(--ink); }
.dorm-bill-modal { width: min(760px,100%); }
.dorm-batch-modal { width: min(1280px,100%); }
.dorm-meter-upload { min-height: 92px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 12px 20px; background: #eef5f2; border-bottom: 1px solid #d8e6e0; }
.dorm-meter-upload .btn { flex: 0 0 auto; color: #fff; background: var(--green); border-color: var(--green); }
.dorm-meter-upload-entry { min-width: 280px; display: flex; flex: 1 1 320px; align-items: center; gap: 14px; padding-bottom: 1px; }
.dorm-meter-upload-entry > div { min-width: 0; }
.dorm-meter-upload strong, .dorm-meter-upload small { display: block; }
.dorm-meter-upload strong { font-size: 11px; }
.dorm-meter-upload small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.dorm-batch-rates { display: grid; grid-template-columns: 190px 190px 130px; flex: 0 1 auto; align-items: end; gap: 12px; }
.dorm-batch-rates label > span { display: block; margin-bottom: 6px; color: var(--ink); font-size: 11px; font-weight: 750; }
.dorm-batch-rates label > div { position: relative; }
.dorm-batch-rates input { width: 100%; min-height: 38px; padding: 8px 54px 8px 10px; border: 1px solid var(--line); border-radius: 4px; }
.dorm-batch-rates em { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--ink); font-size: 10px; font-style: normal; font-weight: 800; }
.dorm-batch-rates > div:last-child { min-height: 38px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.dorm-batch-rates > div:last-child strong, .dorm-batch-rates > div:last-child small { display: block; }
.dorm-batch-rates > div:last-child strong { font-size: 15px; }
.dorm-batch-rates > div:last-child small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.dorm-batch-table { max-height: 52vh; overflow-x: hidden; overflow-y: auto; margin: 16px 20px; border: 1px solid var(--line); }
.dorm-batch-table table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.dorm-batch-table th, .dorm-batch-table td { padding: 8px 7px; text-align: center; border-bottom: 1px solid var(--line-soft); font-size: 10px; }
.dorm-batch-table th { position: sticky; top: 0; z-index: 1; color: var(--muted); background: #f6f8f7; font-size: 10px; font-weight: 800; }
.dorm-batch-table td:first-child strong, .dorm-batch-table td:first-child small { display: block; }
.dorm-batch-table td:first-child small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.dorm-batch-table input { width: 78px; max-width: 100%; min-height: 32px; padding: 5px 7px; text-align: right; border: 1px solid var(--line); border-radius: 4px; }
.dorm-batch-table input:disabled { color: var(--muted); background: #f2f4f3; }
.dorm-batch-table td:nth-child(2) strong { display: block; }
.dorm-batch-table [data-dormitory-batch-total] { color: #b34949; }
.dorm-batch-modal form > footer > span { margin-right: auto; color: var(--muted); font-size: 9px; }
.dorm-costs-modal { width: min(1160px,100%); }
.dorm-costs-modal [data-dormitory-costs-period] { color: var(--green); font-size: 12px; font-weight: 800; }
.dorm-costs-title { display: flex; align-items: baseline; gap: 10mm; margin-left: -1mm !important; }
.dorm-costs-title-label { color: var(--ink) !important; font-size: 18px !important; font-weight: 800; }
.dorm-costs-title [data-dormitory-costs-room] { color: #c33f3f; font-size: 19px; font-weight: 850; }
.dorm-gender-modal { width: min(470px,100%); }
.dorm-gender-modal [data-dormitory-gender-room] { color: #c33f3f; font-size: 20px; font-weight: 850; }
.dorm-leader-modal { width: min(560px,100%); }
.dorm-leader-picker { display: grid; gap: 8px; padding: 18px 20px; }
.dorm-leader-option { min-height: 58px; display: grid; grid-template-columns: 16px 30px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.dorm-leader-option:hover, .dorm-leader-option:has(input:checked) { background: #edf6f2; border-color: #9ebfb2; }
.dorm-leader-option input { width: 15px; height: 15px; accent-color: var(--green); }
.dorm-leader-option .avatar { width: 28px; height: 28px; font-size: 9px; }
.dorm-leader-option strong, .dorm-leader-option small { display: block; }
.dorm-leader-option strong { font-size: 11px; }
.dorm-leader-option small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.dorm-leader-option > svg { width: 16px; height: 16px; color: #a9b5b0; }
.dorm-leader-option:has(input:checked) > svg { color: var(--green); }
.dorm-gender-change-summary { min-height: 116px; display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; gap: 12px; margin: 20px; }
.dorm-gender-change-summary > div { min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #f5f8f7; border: 1px solid var(--line); }
.dorm-gender-change-summary > svg { width: 22px; height: 22px; color: var(--muted); }
.dorm-gender-change-summary span { color: var(--muted); font-size: 10px; }
.dorm-gender-change-summary strong { font-size: 20px; }
.dorm-gender-change-note { display: flex; align-items: center; gap: 10px; margin: 0 20px 20px; padding: 12px 14px; color: var(--green); background: #edf6f2; border: 1px solid #cfe0d9; }
.dorm-gender-change-note > svg { width: 19px; height: 19px; flex: 0 0 19px; }
.dorm-gender-change-note strong, .dorm-gender-change-note small { display: block; }
.dorm-gender-change-note strong { font-size: 10px; }
.dorm-gender-change-note small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.dorm-costs-total { min-height: 66px; display: flex; align-items: center; justify-content: space-between; margin: 18px 20px 14px; padding: 12px 16px; background: #f1f6f4; border: 1px solid #dce9e4; }
.dorm-costs-total span { color: var(--muted); font-size: 11px; }
.dorm-costs-total strong { font-size: 22px; }
.dorm-costs-table { overflow-x: hidden; margin: 0 20px 20px; border: 1px solid var(--line); }
.dorm-costs-table table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.dorm-costs-table th, .dorm-costs-table td { padding: 11px 6px; text-align: center; border-bottom: 1px solid var(--line-soft); }
.dorm-costs-table th { color: var(--ink); background: #f6f8f7; font-size: 9px; font-weight: 800; }
.dorm-costs-table td { font-size: 10px; }
.dorm-costs-table th:first-child, .dorm-costs-table td:first-child { text-align: center; }
.dorm-costs-table td:nth-child(5) { color: #9a651d; }
.dorm-costs-table td:nth-child(6) { color: #2e6799; }
.dorm-costs-table td:last-child strong { color: #b34949; }
.dorm-costs-prepaid { color: #76531e; font-weight: 750; }
.dorm-costs-adjustment { font-weight: 800; }
.dorm-costs-adjustment.increase { color: #b34949; }
.dorm-costs-adjustment.decrease { color: #16704d; }
.dorm-bill-participants { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dorm-costs-modal > footer { min-height: 64px; display: flex; align-items: center; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--line); }
.dorm-checkout-modal { width: min(560px,100%); }
.dorm-note-modal { width: min(520px,100%); }
.dorm-money-field { position: relative; }
.dorm-money-field input { padding-right: 34px; }
.dorm-money-field em { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); color: var(--ink); font-size: 10px; font-style: normal; font-weight: 800; pointer-events: none; }
.dorm-checkout-note, .dorm-bill-auto-note { display: flex; align-items: center; gap: 11px; padding: 12px 14px; color: var(--green); background: #edf6f2; border: 1px solid #cfe0d9; border-radius: 5px; }
.dorm-checkout-note > svg, .dorm-bill-auto-note > svg { width: 20px; height: 20px; flex: 0 0 20px; }
.dorm-checkout-note strong, .dorm-checkout-note small, .dorm-bill-auto-note strong, .dorm-bill-auto-note small { display: block; }
.dorm-checkout-note strong, .dorm-bill-auto-note strong { font-size: 11px; }
.dorm-checkout-note small, .dorm-bill-auto-note small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.dorm-bill-auto-note { margin: 18px 20px 0; }
.dorm-bill-inputs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 20px; }
.dorm-bill-inputs label > div { position: relative; }
.dorm-bill-inputs label > div input { padding-right: 52px; }
.dorm-bill-inputs label > div em { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 10px; font-style: normal; }
.dorm-bill-inputs label > strong { min-height: 38px; display: flex; align-items: center; font-size: 18px; }
.dorm-bill-inputs input:disabled, .dorm-bill-inputs textarea:disabled { color: var(--muted); background: #f4f6f5; }
.dorm-bill-result { display: grid; grid-template-columns: repeat(2,1fr); margin: 0 20px 14px; background: #f1f6f4; border: 1px solid #dce9e4; }
.dorm-bill-result > div { min-height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-left: 1px solid #dce9e4; }
.dorm-bill-result > div:first-child { border-left: 0; }
.dorm-bill-result span { color: var(--muted); font-size: 11px; }
.dorm-bill-result strong { font-size: 20px; }
.dorm-allocation-table { max-height: 260px; overflow: auto; margin: 0 20px 20px; border: 1px solid var(--line); }
.dorm-allocation-table table { width: 100%; border-collapse: collapse; }
.dorm-allocation-table th, .dorm-allocation-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.dorm-allocation-table th { position: sticky; top: 0; background: #f6f8f7; color: var(--muted); font-size: 10px; }
.dorm-allocation-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }

@media (max-width: 1100px) {
  .dorm-gender-layout { grid-template-columns: 1fr; }
  .dorm-gender-layout.cards .dorm-room-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dorm-billing-summary { grid-template-columns: repeat(2,1fr); }
  .dorm-billing-summary > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .dorm-billing-summary > div:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .dorm-page-head .actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .dorm-page-head .actions .btn { width: 100%; }
  .dorm-period { min-width: 0; }
  .dorm-tabs { overflow-x: auto; }
  .dorm-tabs button { flex: 0 0 auto; padding: 0 12px; }
  .dorm-expense-panel-head { align-items: stretch; flex-direction: column; }
  .dorm-expense-panel-actions { width: 100%; justify-content: space-between; }
  .dorm-expense-total { min-width: 0; text-align: left; }
  .dorm-expense-approval { align-items: stretch; flex-direction: column; }
  .dorm-expense-approval .btn { width: 100%; }
  .dorm-overview-toolbar { min-height: 38px; gap: 7px; }
  .dorm-resident-search { order: 3; width: 100%; margin-left: 0; }
  .dorm-gender-layout.cards .dorm-room-grid { grid-template-columns: 1fr; }
  .dorm-room-management-list { grid-template-columns: 1fr; }
  .dorm-room-management-group > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dorm-room-management-modal > footer { align-items: stretch; flex-direction: column; }
  .dorm-room-management-footer-actions { justify-content: stretch; }
  .dorm-room-management-footer-actions .btn { flex: 1; justify-content: center; }
  .dorm-task-row { grid-template-columns: 42px minmax(0,1fr); }
  .dorm-task-status { grid-column: 2; justify-self: start; }
  .dorm-billing-summary { grid-template-columns: 1fr 1fr; }
  .dorm-billing-summary > div { padding: 12px; }
  .dorm-billing-summary strong { font-size: 17px; }
  .dorm-bill-table colgroup, .dorm-bill-table thead { display: none; }
  .dorm-bill-table, .dorm-bill-table tbody { display: block; }
  .dorm-bill-table tr { display: grid; grid-template-columns: 1fr 1fr; margin: 10px; border: 1px solid var(--line); }
  .dorm-bill-table td { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; text-align: right; border: 0; border-bottom: 1px solid var(--line-soft); }
  .dorm-bill-table td:nth-child(odd) { border-right: 1px solid var(--line-soft); }
  .dorm-bill-table td::before { content: attr(data-label); color: var(--muted); font-size: 9px; font-weight: 700; text-align: left; }
  .dorm-bill-table td:nth-last-child(-n+3) { grid-column: 1 / -1; border-right: 0; }
  .dorm-bill-actions { width: min(220px, 65%); }
  .dorm-bill-actions .btn, .dorm-view-costs { width: min(220px, 65%); max-width: none; margin: 0; }
  .dorm-billing-panel .panel-head { align-items: stretch; flex-direction: column; }
  .dorm-batch-billing-open { width: 100%; }
  .dorm-batch-rates { width: 100%; grid-template-columns: 1fr; }
  .dorm-meter-upload { align-items: stretch; flex-direction: column; padding: 14px; }
  .dorm-meter-upload-entry { min-width: 0; align-items: stretch; flex-direction: column; }
  .dorm-meter-upload .btn { width: 100%; }
  .dorm-batch-rates > div:last-child { align-items: flex-start; }
  .dorm-batch-table { max-height: none; margin: 14px; border: 0; }
  .dorm-batch-table thead { display: none; }
  .dorm-batch-table table, .dorm-batch-table tbody { display: block; }
  .dorm-batch-table tr { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 10px; border: 1px solid var(--line); }
  .dorm-batch-table td { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; text-align: right; border: 0; border-bottom: 1px solid var(--line-soft); }
  .dorm-batch-table td::before { content: attr(data-label); color: var(--muted); font-size: 9px; font-weight: 700; text-align: left; }
  .dorm-batch-table input { width: 64%; }
  .dorm-batch-modal form > footer > span { display: none; }
  .dorm-costs-total { margin: 14px; }
  .dorm-costs-table { margin: 0 14px 14px; border: 0; }
  .dorm-costs-table thead { display: none; }
  .dorm-costs-table table, .dorm-costs-table tbody { display: block; }
  .dorm-costs-table tr { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 10px; border: 1px solid var(--line); }
  .dorm-costs-table td { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; text-align: right; border: 0; border-bottom: 1px solid var(--line-soft); }
  .dorm-costs-table td::before { content: attr(data-label); color: var(--muted); font-size: 9px; font-weight: 700; text-align: left; }
  .dorm-costs-table td:last-child { grid-column: 1 / -1; }
  .dorm-leader-summary { display: grid; grid-template-columns: 1fr; }
  .dorm-leader-row { grid-template-columns: 76px minmax(0,1fr); gap: 12px; }
  .dorm-leader-roster { grid-column: 1 / -1; padding-top: 10px; border-top: 1px dashed var(--line); }
  .dorm-modal-backdrop { align-items: end; padding: 0; }
  .dorm-modal { width: min(390px, 100vw); max-width: 100vw; min-width: 0; max-height: 92vh; border-radius: 7px 7px 0 0; }
  .dorm-modal form { min-width: 0; }
  .dorm-modal form > footer { position: sticky; bottom: 0; z-index: 2; background: #fff; }
  .dorm-checkout-modal form > footer .btn { flex: 1; }
  .dorm-form-grid, .dorm-bill-inputs { grid-template-columns: 1fr; }
  .dorm-form-grid .full, .dorm-bill-inputs .full { grid-column: auto; }
  .dorm-bill-result { grid-template-columns: 1fr; }
  .dorm-bill-result > div { border-left: 0; border-top: 1px solid #dce9e4; }
  .dorm-bill-result > div:first-child { border-top: 0; }
}

/* 食堂费用分析 */
.canteen-expense-head .actions { align-items: center; }
.canteen-expense-head select { min-width: 132px; }
.canteen-expense-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.canteen-expense-stats .stat { min-width: 0; }
.canteen-expense-stats .value { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.canteen-expense-panel, .canteen-trend-panel { margin-top: 16px; }
.canteen-expense-status { padding: 4px 8px; color: #2e6799; background: #e9f1f7; border-radius: 4px; font-size: 9px; font-weight: 800; }
.canteen-cost-table { width: 100%; table-layout: fixed; }
.canteen-cost-table th:nth-child(1) { width: 8%; }
.canteen-cost-table th:nth-child(2) { width: 28%; }
.canteen-cost-table th:nth-child(3) { width: 24%; }
.canteen-cost-table th:nth-child(4), .canteen-cost-table th:nth-child(5) { width: 20%; }
.canteen-cost-table td, .canteen-cost-table th { vertical-align: middle; }
.canteen-cost-table td:first-child, .canteen-cost-table td:nth-child(3), .canteen-cost-table td:last-child { text-align: center; }
.canteen-cost-table td:nth-child(2) strong, .canteen-cost-table td:nth-child(2) small { display: block; }
.canteen-cost-table td:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.canteen-cost-table tbody td:last-child strong, .canteen-cost-table tfoot strong { color: #b4232f; font-size: 12px; }
.canteen-cost-table tfoot { background: #edf5f1; }
.canteen-cost-table tfoot th { text-align: right; }
.canteen-money-input { width: 100%; height: 34px; display: flex; align-items: center; overflow: hidden; background: #fffdf2; border: 1px solid #d8c98f; border-radius: 4px; }
.canteen-money-input:focus-within { border-color: #2f8568; box-shadow: 0 0 0 3px rgba(47, 133, 104, .12); }
.canteen-money-input span { padding-left: 9px; color: var(--muted); }
.canteen-money-input input { width: 100%; height: 32px; padding: 0 9px 0 5px; text-align: right; background: transparent; border: 0; outline: 0; }
.canteen-expense-note { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); }
.canteen-expense-note span { color: var(--muted); font-size: 10px; font-weight: 700; }
.canteen-expense-note input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; }
.canteen-trend-panel .panel-head { min-height: 66px; }
.canteen-trend-year-select { display: flex; align-items: center; gap: 8px; }
.canteen-trend-year-select > span { color: var(--muted); font-size: 9px; font-weight: 700; }
.canteen-trend-year-select select { width: 128px; height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: white; font-weight: 700; }
.canteen-trend-dual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.canteen-trend-chart-block { min-width: 0; }
.canteen-trend-chart-block + .canteen-trend-chart-block { border-left: 1px solid var(--line); }
.canteen-trend-chart-block > header { min-height: 56px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.canteen-trend-chart-block > header h3 { margin: 0; font-size: 12px; }
.canteen-trend-chart-block > header span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.canteen-trend-chart-block > header i { width: 28px; height: 3px; flex: 0 0 auto; background: #176c52; }
.canteen-trend-chart-block.per-capita > header i { background: #2e6799; }
.canteen-trend-chart-scroll { width: 100%; overflow-x: auto; padding: 12px 10px 2px; }
.canteen-trend-chart { width: 100%; min-width: 540px; height: auto; display: block; }
.canteen-trend-grid line { stroke: #dfe7e3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.canteen-trend-grid text, .canteen-trend-months text { fill: #748079; font-size: 10px; letter-spacing: 0; }
.canteen-trend-area { fill: #e5f0ec; stroke: none; }
.canteen-trend-area.per-capita { fill: #e7eff6; }
.canteen-trend-line { fill: none; stroke: #176c52; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.canteen-trend-line.per-capita { stroke: #2e6799; }
.canteen-trend-point circle { fill: white; stroke: #176c52; stroke-width: 3; vector-effect: non-scaling-stroke; }
.canteen-trend-point text { fill: #176c52; font-size: 9px; font-weight: 800; letter-spacing: 0; }
.canteen-trend-point.per-capita circle { stroke: #2e6799; }
.canteen-trend-point.per-capita text { fill: #2e6799; }
.canteen-trend-summary { min-height: 72px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); background: #f7f9f8; }
.canteen-trend-summary > div { min-width: 0; padding: 13px 16px; border-right: 1px solid var(--line); }
.canteen-trend-summary > div:last-child { border-right: 0; }
.canteen-trend-summary span, .canteen-trend-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canteen-trend-summary span { color: var(--muted); font-size: 9px; }
.canteen-trend-summary strong { margin-top: 5px; font-size: 13px; }
.canteen-trend-empty { min-height: 270px; padding: 30px; display: grid; place-content: center; justify-items: center; gap: 8px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; }
.canteen-trend-empty svg { width: 32px; height: 32px; color: #789188; }
.canteen-trend-empty strong { color: var(--ink); font-size: 13px; }
.canteen-trend-empty span { font-size: 9px; }
.canteen-module-tabs { gap: 12px; margin-bottom: 16px; border-bottom: 0; }
.canteen-module-tabs button { min-width: 126px; height: 44px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 13px; font-weight: 800; box-shadow: 0 2px 7px rgba(24, 58, 47, .05); transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease; }
.canteen-module-tabs button:hover { border-color: #9ab4aa; color: var(--green); background: #f5faf7; }
.canteen-module-tabs button.active { border-color: var(--green); color: white; background: var(--green); box-shadow: 0 5px 12px rgba(23, 108, 82, .18); }
.canteen-module-tabs svg { width: 16px; height: 16px; }
.canteen-module-toolbar { min-height: 60px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); background: white; }
.canteen-module-toolbar > div:first-child strong, .canteen-module-toolbar > div:first-child span { display: block; }
.canteen-module-toolbar > div:first-child strong { font-size: 14px; }
.canteen-module-toolbar > div:first-child span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.canteen-module-toolbar .actions { display: flex; align-items: center; gap: 8px; }
.canteen-module-toolbar select { min-width: 132px; }
.canteen-meal-period-filter { display: flex; align-items: center; gap: 8px; }
.canteen-module-toolbar .canteen-meal-period-filter select { min-width: 0; }
.canteen-meal-period-filter [data-canteen-meal-year] { width: 98px; }
.canteen-meal-period-filter [data-canteen-meal-month] { width: 72px; }
.canteen-module-toolbar .btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.canteen-module-toolbar .btn svg { width: 13px; height: 13px; }
.canteen-satisfaction-period-filter { display: flex; align-items: center; gap: 8px; }
.canteen-module-toolbar .canteen-satisfaction-period-filter select { min-width: 0; }
.canteen-satisfaction-period-filter [data-canteen-satisfaction-year] { width: 98px; }
.canteen-satisfaction-period-filter [data-canteen-satisfaction-month] { width: 96px; padding-left: 14px; padding-right: 34px; }
.canteen-satisfaction-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.canteen-satisfaction-stats .value { font-size: 20px; }
.canteen-satisfaction-layout { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 16px; }
.canteen-satisfaction-layout > .panel { min-width: 0; }
.canteen-satisfaction-dimension-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding: 4px 18px 18px; }
.canteen-satisfaction-dimension { min-height: 66px; display: grid; grid-template-columns: minmax(0, 1fr) 62px; align-items: center; gap: 7px 12px; border-top: 1px solid var(--line-soft); }
.canteen-satisfaction-dimension:nth-child(-n+2) { border-top: 0; }
.canteen-satisfaction-dimension > div strong, .canteen-satisfaction-dimension > div span { display: block; }
.canteen-satisfaction-dimension > div strong { font-size: 12px; }
.canteen-satisfaction-dimension > div span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.canteen-satisfaction-dimension > i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 4px; background: #e4eae7; }
.canteen-satisfaction-dimension > i b { height: 100%; display: block; background: var(--green); }
.canteen-satisfaction-dimension > em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 700; text-align: right; }
.canteen-satisfaction-empty { min-height: 236px; padding: 28px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; border-top: 1px solid var(--line-soft); }
.canteen-satisfaction-empty svg { width: 30px; height: 30px; color: #789188; }
.canteen-satisfaction-empty strong { color: var(--ink); font-size: 13px; }
.canteen-satisfaction-empty span { max-width: 280px; font-size: 9px; line-height: 1.7; }
.canteen-satisfaction-feedback-list { max-height: 270px; overflow-y: auto; border-top: 1px solid var(--line-soft); }
.canteen-satisfaction-feedback-list article { padding: 13px 16px; border-top: 1px solid var(--line-soft); }
.canteen-satisfaction-feedback-list article:first-child { border-top: 0; }
.canteen-satisfaction-feedback-list header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.canteen-satisfaction-feedback-list header strong { font-size: 11px; }
.canteen-satisfaction-feedback-list header span, .canteen-satisfaction-feedback-list small { color: var(--muted); font-size: 9px; }
.canteen-satisfaction-feedback-list p { margin: 8px 0 3px; font-size: 10px; line-height: 1.6; }
.canteen-satisfaction-feedback-list small { display: block; line-height: 1.6; }
.canteen-satisfaction-response-panel { margin-top: 16px; }
.canteen-satisfaction-table-wrap { max-height: 480px; overflow-x: hidden; overflow-y: auto; }
.canteen-satisfaction-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.canteen-satisfaction-table th, .canteen-satisfaction-table td { min-height: 38px; padding: 6px 3px; text-align: center; vertical-align: middle; overflow-wrap: anywhere; }
.canteen-satisfaction-table thead th { position: sticky; z-index: 2; color: var(--ink); font-weight: 900; line-height: 1.35; white-space: normal; }
.canteen-satisfaction-col-serial { width: 4%; }.canteen-satisfaction-col-score { width: 8%; }.canteen-satisfaction-col-total { width: 5%; }.canteen-satisfaction-col-feedback { width: 11%; }
.canteen-satisfaction-group-row th { top: 0; height: 38px; color: #fff; background: #356b5b; font-size: 11px; font-weight: 900; }.canteen-satisfaction-group-row th[data-group="hygiene"] { background: #5f8f80; }.canteen-satisfaction-group-row th[data-group="quality"] { background: #82956f; }.canteen-satisfaction-group-row th[data-group="service"] { background: #688b97; }
.canteen-satisfaction-label-row th { top: 38px; height: 66px; color: #234138; background: #f1f6f4; font-size: 10px; font-weight: 900; }
.canteen-satisfaction-table tbody td { font-size: 9px; }.canteen-satisfaction-table td:nth-child(12) strong { color: var(--green); font-size: 12px; }.canteen-satisfaction-feedback-cell { color: var(--muted); text-align: left !important; white-space: pre-line; line-height: 1.6; }
.canteen-satisfaction-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(19, 31, 27, .46); }
.canteen-satisfaction-modal-backdrop[hidden] { display: none; }
.canteen-satisfaction-modal { width: min(720px, 100%); max-height: min(780px, calc(100vh - 44px)); display: flex; flex-direction: column; overflow: hidden; background: white; border-radius: 8px; box-shadow: 0 22px 60px rgba(10, 28, 21, .28); }
.canteen-satisfaction-modal > header { min-height: 76px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.canteen-satisfaction-modal > header span { color: var(--green); font-size: 9px; font-weight: 800; }
.canteen-satisfaction-modal > header h2 { margin: 4px 0 0; font-size: 17px; }
.canteen-satisfaction-send-tabs { min-height: 46px; display: flex; align-items: stretch; gap: 24px; padding: 0 20px; border-bottom: 1px solid var(--line); background: #f8faf9; }
.canteen-satisfaction-send-tabs button { position: relative; border: 0; padding: 0; color: var(--muted); background: transparent; font-weight: 800; cursor: pointer; }
.canteen-satisfaction-send-tabs button.active { color: var(--ink); }
.canteen-satisfaction-send-tabs button.active::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--green); }
.canteen-satisfaction-send-tabs button span { display: inline-grid; min-width: 20px; height: 20px; place-items: center; margin-left: 5px; border-radius: 10px; color: var(--green); background: var(--mint); font-size: 9px; }
.canteen-satisfaction-send-body { min-height: 0; overflow-y: auto; padding: 18px 20px; }
.canteen-satisfaction-message { padding: 13px 14px; background: #f5f8f7; border-left: 3px solid var(--green); }
.canteen-satisfaction-message strong { font-size: 10px; }
.canteen-satisfaction-message p { margin: 6px 0 0; font-size: 12px; line-height: 1.7; }
.canteen-satisfaction-source { display: flex; gap: 11px; margin-top: 14px; padding: 12px 14px; color: #275c8a; background: #edf4f9; border: 1px solid #d6e5f0; }
.canteen-satisfaction-source svg { width: 17px; height: 17px; flex: 0 0 auto; }
.canteen-satisfaction-source strong, .canteen-satisfaction-source span { display: block; }
.canteen-satisfaction-source strong { font-size: 11px; }
.canteen-satisfaction-source span { margin-top: 4px; font-size: 9px; line-height: 1.6; }
.canteen-satisfaction-recipient-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 14px; }
.canteen-satisfaction-recipient-tools input { min-width: 0; height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 5px; }
.canteen-satisfaction-recipient-list { max-height: 280px; margin-top: 14px; overflow-y: auto; border: 1px solid var(--line); }
.canteen-satisfaction-recipient-list > header { position: sticky; top: 0; z-index: 1; min-height: 38px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); background: #f6f8f7; }.canteen-satisfaction-recipient-list > header strong { font-size: 10px; }.canteen-satisfaction-recipient-list > header span { color: var(--muted); font-size: 9px; }
.canteen-satisfaction-recipient-group { border-top: 1px solid var(--line-soft); background: white; }
.canteen-satisfaction-recipient-group:first-of-type { border-top: 0; }
.canteen-satisfaction-recipient-group summary { min-height: 39px; padding: 8px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto 15px; align-items: center; gap: 10px; cursor: pointer; list-style: none; }.canteen-satisfaction-recipient-group summary::-webkit-details-marker { display: none; }.canteen-satisfaction-recipient-group summary strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.canteen-satisfaction-recipient-group summary span { color: var(--muted); font-size: 9px; white-space: nowrap; }.canteen-satisfaction-recipient-group summary svg { width: 14px; transition: transform .15s ease; }.canteen-satisfaction-recipient-group[open] summary svg { transform: rotate(180deg); }
.canteen-satisfaction-recipient-people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 2px 12px 12px; }
.canteen-satisfaction-recipient-people label { min-width: 0; min-height: 34px; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: 5px; cursor: pointer; background: #fbfcfc; }
.canteen-satisfaction-recipient-people label[hidden] { display: none; }
.canteen-satisfaction-recipient-people input { width: 14px; height: 14px; flex: 0 0 auto; accent-color: var(--green); }
.canteen-satisfaction-recipient-people span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.canteen-satisfaction-followup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.canteen-satisfaction-followup-head strong { font-size: 12px; }
.canteen-satisfaction-followup-head span { color: var(--muted); font-size: 9px; }
.canteen-satisfaction-followup-table { max-height: 380px; overflow: auto; border: 1px solid var(--line); scrollbar-gutter: stable; }
.canteen-satisfaction-followup-table table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.canteen-satisfaction-followup-table col.followup-name { width: 22%; }
.canteen-satisfaction-followup-table col.followup-department { width: 30%; }
.canteen-satisfaction-followup-table col.followup-status { width: 25%; }
.canteen-satisfaction-followup-table col.followup-action { width: 128px; }
.canteen-satisfaction-followup-table th, .canteen-satisfaction-followup-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 9px; }
.canteen-satisfaction-followup-table th { position: sticky; top: 0; z-index: 1; background: #f6f8f7; font-weight: 900; }
.canteen-satisfaction-followup-table td:first-child strong { display: block; }
.canteen-satisfaction-followup-table td:first-child strong { font-size: 10px; }
.canteen-satisfaction-followup-table th:last-child, .canteen-satisfaction-followup-table td:last-child { position: sticky; right: 0; z-index: 2; min-width: 128px; text-align: right; background: #fff; box-shadow: -8px 0 12px -12px rgba(34, 61, 52, .6); }
.canteen-satisfaction-followup-table th:last-child { z-index: 3; background: #f6f8f7; }
.canteen-satisfaction-followup-table td:last-child .btn { min-width: 82px; justify-content: center; white-space: nowrap; }
.canteen-satisfaction-followup-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.canteen-satisfaction-followup-state i { width: 7px; height: 7px; border-radius: 50%; background: #b87018; }
.canteen-satisfaction-followup-state.done i { background: var(--green); }.canteen-satisfaction-followup-state.returned i { background: #2e6799; }.canteen-satisfaction-followup-state.failed i { background: #b4232f; }
.canteen-satisfaction-modal > footer { min-height: 66px; padding: 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); }.canteen-satisfaction-modal > footer > div { display: flex; gap: 8px; }.canteen-satisfaction-modal > footer .btn { display: inline-flex; align-items: center; gap: 5px; }.canteen-satisfaction-modal > footer .btn svg { width: 13px; }
.canteen-satisfaction-no-recipient { padding: 28px; color: var(--muted); text-align: center; font-size: 10px; }
.canteen-meal-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.canteen-meal-stats .stat { min-width: 0; }
.canteen-meal-stats .value { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.canteen-meal-config, .canteen-meal-table-panel { margin-top: 16px; }
.canteen-meal-config > summary { min-height: 62px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.canteen-meal-config > summary::-webkit-details-marker { display: none; }
.canteen-meal-config > summary span strong, .canteen-meal-config > summary span small { display: block; }
.canteen-meal-config > summary span strong { font-size: 13px; }
.canteen-meal-config > summary span small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.canteen-meal-config > summary svg { width: 16px; transition: transform .16s ease; }
.canteen-meal-config[open] > summary svg { transform: rotate(180deg); }
.canteen-meal-config-body { padding: 16px; border-top: 1px solid var(--line); }
.canteen-meal-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.canteen-meal-fields label > span, .canteen-service-days label span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.canteen-meal-fields input, .canteen-service-days input { width: 100%; height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; background: white; }
.canteen-meal-fields .message { grid-column: 1 / -1; }
.canteen-fixed-price { height: 36px; padding: 0 10px; display: flex; align-items: center; border: 1px solid #b9d4ca; border-radius: 4px; color: var(--green); background: #edf5f1; font-weight: 800; }
.canteen-service-days { margin-top: 14px; padding: 13px; border: 1px solid var(--line); background: #f7f9f8; }
.canteen-service-days > strong { display: block; margin-bottom: 9px; font-size: 10px; }
.canteen-service-days > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.canteen-meal-employee-head { min-height: 54px; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.canteen-meal-employee-head strong, .canteen-meal-employee-head small { display: block; }
.canteen-meal-employee-head small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.canteen-meal-employees { max-height: 280px; overflow: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.canteen-meal-employee { min-width: 0; min-height: 58px; padding: 9px 10px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.canteen-meal-employee input { width: 16px; height: 16px; accent-color: var(--green); }
.canteen-meal-employee span strong, .canteen-meal-employee span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canteen-meal-employee span small { color: var(--muted); font-size: 8px; }
.canteen-meal-employee i { color: #a33b45; font-size: 8px; font-style: normal; white-space: nowrap; }
.canteen-meal-employee i.bound { color: var(--green); }
.canteen-meal-config-actions { min-height: 58px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.canteen-meal-config-actions > span { color: var(--muted); font-size: 9px; }
.canteen-meal-config-actions .btn { display: inline-flex; align-items: center; gap: 5px; }
.canteen-meal-config-actions svg { width: 13px; }
.canteen-meal-table { width: 100%; min-width: 840px; table-layout: fixed; }
.canteen-meal-table th:nth-child(1) { width: 18%; }.canteen-meal-table th:nth-child(2) { width: 12%; }.canteen-meal-table th:nth-child(3), .canteen-meal-table th:nth-child(4) { width: 15%; }.canteen-meal-table th:nth-child(5) { width: 13%; }.canteen-meal-table th:nth-child(6) { width: 27%; }
.canteen-meal-table td, .canteen-meal-table th { vertical-align: middle; text-align: center; }
.canteen-meal-table thead th { height: 42px; padding: 6px 8px; font-size: 11px; font-weight: 900; }
.canteen-meal-table tbody tr { height: 38px; }
.canteen-meal-table tbody td { height: 38px; padding: 5px 8px; line-height: 1.15; }
.canteen-meal-table tbody td:first-child { font-weight: 900; }
.canteen-meal-table td:nth-child(5) strong, .canteen-meal-table tfoot strong { color: #b4232f; }
.canteen-meal-table td:nth-child(5) small { display: block; margin-top: 1px; color: var(--ink); font-size: 9px; font-weight: 900; line-height: 1.1; }
.canteen-meal-person { display: flex; align-items: center; justify-content: center; gap: 5px; }.canteen-meal-person .icon-btn { width: 25px; height: 25px; color: var(--green); }.canteen-meal-person .icon-btn svg { width: 13px; height: 13px; }
.canteen-meal-return-status, .canteen-meal-revision-status { display: block; margin-top: 2px; font-size: 8px; line-height: 1.3; }.canteen-meal-return-status { color: #a45c12; }.canteen-meal-revision-status { color: var(--muted); }
.canteen-meal-delivery-status { display: block; max-width: 170px; margin: 2px auto 0; overflow: hidden; font-size: 8px; font-weight: 800; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.canteen-meal-delivery-status.sent { color: #2d6c50; }.canteen-meal-delivery-status.pending { color: #9a651b; }.canteen-meal-delivery-status.error { color: #b4232f; }
.canteen-meal-row-returned { background: #fffaf2; }.canteen-meal-row-returned td { color: #766a5b; }
.canteen-payment-toggle.review b { color: #a45c12; }.canteen-payment-toggle.unpaid b { color: #a34239; }.canteen-payment-toggle.paid b { color: var(--green); }
.canteen-meal-table tfoot { background: #edf5f1; }
.canteen-meal-table tfoot th, .canteen-meal-table tfoot td { text-align: center; }
.canteen-meal-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }.canteen-meal-table-actions .btn { display: inline-flex; align-items: center; gap: 5px; }.canteen-meal-table-actions .btn svg { width: 13px; }
.canteen-meal-return-modal { position: fixed; z-index: 1250; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(19, 31, 27, .46); }.canteen-meal-return-modal[hidden] { display: none; }.canteen-meal-return-modal > section { width: min(520px, 100%); overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 22px 60px rgba(10, 28, 21, .28); }.canteen-meal-return-modal header { min-height: 72px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.canteen-meal-return-modal header span { color: var(--green); font-size: 9px; font-weight: 800; }.canteen-meal-return-modal h3 { margin: 3px 0 0; font-size: 17px; }.canteen-meal-return-modal main { padding: 18px; }.canteen-meal-return-summary { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f3f7f5; border-left: 3px solid var(--green); }.canteen-meal-return-summary strong { font-size: 13px; }.canteen-meal-return-summary span { color: var(--muted); font-size: 10px; text-align: right; }.canteen-meal-return-modal main label { display: block; margin-top: 16px; }.canteen-meal-return-modal main label > span { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 900; }.canteen-meal-return-modal textarea { width: 100%; min-height: 86px; padding: 10px 11px; resize: vertical; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; font: 11px/1.6 inherit; }.canteen-meal-return-modal main label small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }.canteen-meal-return-modal main > p { margin: 14px 0 0; display: flex; gap: 7px; color: #76521f; font-size: 10px; line-height: 1.6; }.canteen-meal-return-modal main > p svg { width: 14px; height: 14px; flex: 0 0 auto; }.canteen-meal-return-modal footer { padding: 13px 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
.canteen-package-check { width: 25px; height: 25px; margin: auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 14px; font-weight: 900; }
.canteen-payment-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; }.canteen-payment-toggle.review { cursor: default; }
.canteen-payment-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.canteen-payment-toggle span { width: 30px; height: 17px; position: relative; border-radius: 10px; background: #cbd3cf; transition: background .15s ease; }.canteen-payment-toggle.review span { background: #d89b43; }
.canteen-payment-toggle span::after { content: ''; width: 13px; height: 13px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #0003; transition: transform .15s ease; }
.canteen-payment-toggle input:checked + span { background: var(--green); }.canteen-payment-toggle input:checked + span::after { transform: translateX(13px); }
.canteen-payment-toggle b { min-width: 25px; color: #7b8580; font-size: 9px; }.canteen-payment-toggle input:checked ~ b { color: var(--green); }
.canteen-payment-proof-upload { position: relative; }.canteen-payment-proof-upload > summary { list-style: none; }.canteen-payment-proof-upload > summary::-webkit-details-marker { display: none; }.canteen-payment-proof-entry { display: inline-flex; align-items: center; gap: 5px; color: #176c52; border-color: #9fc8b9; background: #edf7f3; cursor: pointer; }.canteen-payment-proof-entry svg { width: 14px; }.canteen-payment-proof-entry svg:last-child { width: 11px; transition: transform .15s ease; }.canteen-payment-proof-upload[open] .canteen-payment-proof-entry svg:last-child { transform: rotate(180deg); }.canteen-payment-proof-entry:hover { border-color: #176c52; background: #e3f2ec; }.canteen-payment-proof-upload.disabled { opacity: .48; pointer-events: none; }.canteen-payment-proof-upload > div { width: 260px; position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; padding: 6px; border: 1px solid #cfdad5; border-radius: 7px; background: #fff; box-shadow: 0 12px 30px rgba(18, 45, 36, .16); }.canteen-payment-proof-upload > div label { padding: 9px 10px; display: flex; align-items: center; gap: 9px; border-radius: 5px; cursor: pointer; text-align: left; }.canteen-payment-proof-upload > div label:hover { background: #edf7f3; }.canteen-payment-proof-upload > div svg { width: 16px; color: var(--green); }.canteen-payment-proof-upload > div span { display: grid; gap: 2px; }.canteen-payment-proof-upload > div b { color: var(--ink); font-size: 10px; }.canteen-payment-proof-upload > div small { color: var(--muted); font-size: 8px; }
.canteen-payment-status-cell { min-height: 32px; display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.canteen-payment-proof-inline { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; font-size: 8px; }.canteen-payment-proof-inline > a { display: inline-flex; align-items: center; gap: 3px; color: #9a651b; font-weight: 900; text-decoration: none; }.canteen-payment-proof-inline.approved > a { color: var(--green); }.canteen-payment-proof-inline.rejected > a { color: #a34239; }.canteen-payment-proof-inline svg { width: 11px; height: 11px; }.canteen-payment-proof-inline small { color: var(--muted); }.canteen-payment-proof-inline > span { display: inline-flex; gap: 3px; }.canteen-payment-proof-inline button { min-height: 22px; padding: 0 5px; border: 1px solid #a9cbbf; border-radius: 4px; color: var(--green); background: #fff; font: 800 8px/1 inherit; cursor: pointer; }.canteen-payment-proof-inline button:last-child { color: #a34239; border-color: #dfbbb7; }
.canteen-pending-proof-link { padding: 0; border: 0; color: #a45c12; background: none; font: inherit; font-weight: 900; text-decoration: underline; cursor: pointer; }
.canteen-payment-proof-match-modal { position: fixed; z-index: 1260; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(19, 31, 27, .46); }.canteen-payment-proof-match-modal[hidden] { display: none; }.canteen-payment-proof-match-modal > section { width: min(680px, 100%); max-height: min(680px, calc(100vh - 44px)); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 8px; background: #fff; box-shadow: 0 22px 60px rgba(10, 28, 21, .28); }.canteen-payment-proof-match-modal header { min-height: 68px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.canteen-payment-proof-match-modal header span { color: var(--green); font-size: 9px; font-weight: 800; }.canteen-payment-proof-match-modal h3 { margin: 3px 0 0; font-size: 17px; }.canteen-payment-proof-match-modal main { padding: 10px 18px; overflow: auto; }.canteen-payment-proof-match-modal footer { padding: 12px 18px; display: flex; justify-content: flex-end; border-top: 1px solid var(--line); }.canteen-payment-proof-match-row { min-height: 48px; padding: 7px 0; display: grid; grid-template-columns: minmax(150px, 1fr) minmax(180px, 230px) auto; align-items: center; gap: 8px; border-bottom: 1px solid #edf0ee; }.canteen-payment-proof-match-row > div { min-width: 0; }.canteen-payment-proof-match-row a { display: block; overflow: hidden; color: var(--green); font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }.canteen-payment-proof-match-row small { display: block; margin-top: 2px; color: #a45c12; font-size: 8px; }.canteen-payment-proof-match-row select { width: 100%; min-height: 31px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font: 10px inherit; }.canteen-payment-proof-match-row .compact { min-height: 31px; padding: 0 10px; }

.canteen-package-modal { position: fixed; z-index: 1100; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(15, 31, 25, .55); }
.canteen-package-modal[hidden] { display: none !important; }
.canteen-package-dialog { width: min(920px, 100%); max-height: calc(100vh - 48px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid #cdd8d3; border-radius: 8px; background: white; box-shadow: 0 24px 70px rgba(6, 28, 19, .25); }
.canteen-package-dialog > header { min-height: 70px; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.canteen-package-titlebar { min-width: 0; display: flex; align-items: center; gap: 20px; }.canteen-package-dialog > header h2 { margin: 0; font-size: 18px; white-space: nowrap; }
.canteen-package-period-inline { display: inline-flex; align-items: center; gap: 10px; }.canteen-package-period-inline label { height: 40px; display: flex; align-items: center; gap: 5px; padding-left: 11px; overflow: hidden; border: 1px solid #b9cbc4; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(24, 58, 47, .04); }.canteen-package-period-inline label:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23, 108, 82, .11); }.canteen-package-period-inline label > span { flex: 0 0 auto; color: var(--muted); font-size: 9px; font-weight: 800; }.canteen-package-period-inline select { height: 38px; padding: 0 30px 0 5px; border: 0; outline: 0; color: var(--ink); background-color: transparent; font-size: 11px; font-weight: 900; cursor: pointer; }.canteen-package-period-inline label:first-child select { width: 88px; }.canteen-package-period-inline label:last-child select { width: 88px; }
.canteen-package-dialog .icon-btn { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: white; cursor: pointer; }.canteen-package-dialog .icon-btn svg { width: 15px; }
.canteen-package-dialog-body { min-height: 0; overflow-y: auto; background: #f6f8f7; }
.canteen-package-message label span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; font-weight: 700; }
.canteen-package-config { display: flex; flex-direction: column; gap: 12px; }
.canteen-package-grid { order: 1; margin: 0 18px 16px; overflow-x: auto; }
.canteen-meal-slot-table { min-width: 620px; overflow: hidden; border: 1px solid #d5dfda; border-radius: 7px; background: white; box-shadow: 0 5px 14px rgba(29, 57, 48, .045); }
.canteen-meal-slot-table > header, .canteen-meal-slot-row { display: grid; grid-template-columns: minmax(180px, 1.35fr) 1fr 1fr .9fr; align-items: center; }
.canteen-meal-slot-table > header { min-height: 38px; color: #66736d; background: #eef2f4; font-size: 9px; font-weight: 900; text-align: center; }
.canteen-meal-slot-table > header span:first-child { padding-left: 22px; text-align: left; }
.canteen-meal-slot-row { min-height: 68px; border-top: 1px solid #e1e7e4; }
.canteen-meal-slot-row > div { padding: 10px 22px; display: grid; gap: 4px; }
.canteen-meal-slot-row > div small { color: #77847e; font-size: 9px; font-weight: 700; }
.canteen-meal-slot-row > div strong { color: var(--ink); font-size: 14px; }
.canteen-meal-slot-row > label { height: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border-left: 1px solid #edf1ef; cursor: pointer; font-size: 11px; font-weight: 800; }
.canteen-meal-slot-row input { width: 18px; height: 18px; accent-color: var(--green); }
.canteen-template-empty-choice { height: 100%; display: flex; align-items: center; justify-content: center; border-left: 1px solid #edf1ef; color: #52635c; font-size: 11px; font-weight: 800; }
.canteen-meal-slot-row > b { margin-left: 56px; color: #cf2d2d; font-size: 12px; font-weight: 900; white-space: nowrap; }
.canteen-package-message { order: 0; min-height: 76px; padding: 14px 18px; border-bottom: 1px solid #dce4e0; border-left: 3px solid #2e6799; background: #f7fafc; }.canteen-package-message label { display: block; }.canteen-package-message output { min-height: 36px; padding: 8px 0; display: block; border: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 700; }
.canteen-qr-upload { height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--green); background: white; cursor: pointer; font-size: 9px; font-weight: 800; }.canteen-qr-upload input { position: absolute; opacity: 0; pointer-events: none; }.canteen-qr-upload svg { width: 13px; }
.canteen-qr-preview { width: 66px; position: relative; }.canteen-qr-preview img { width: 66px; height: 66px; display: block; border: 1px solid var(--line); object-fit: contain; }.canteen-qr-preview button { width: 100%; position: absolute; left: 0; bottom: 0; border: 0; color: white; background: #0009; font-size: 7px; cursor: pointer; }
.canteen-package-people { min-height: 74px; padding: 12px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; }.canteen-package-people > div strong,.canteen-package-people > div small { display: block; }.canteen-package-people > div small { margin-top: 3px; color: var(--muted); font-size: 9px; }.canteen-package-people > span { color: var(--muted); font-size: 9px; }.canteen-package-people > span b { color: var(--ink); }.canteen-package-people .btn { display: inline-flex; align-items: center; gap: 5px; }.canteen-package-people .btn svg { width: 13px; }
.canteen-package-dialog > footer { min-height: 66px; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); background: #f7f9f8; }.canteen-package-dialog > footer p { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; }.canteen-package-dialog > footer p svg { width: 13px; }.canteen-package-dialog > footer > div { display: flex; gap: 8px; }.canteen-package-dialog > footer .btn { display: inline-flex; align-items: center; gap: 5px; }.canteen-package-dialog > footer .btn svg { width: 13px; }

.canteen-recipient-picker { position: fixed; z-index: 1120; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(15, 31, 25, .5); }.canteen-recipient-picker[hidden] { display: none !important; }.canteen-recipient-picker > section { width: min(920px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid #cdd8d3; border-radius: 8px; background: white; box-shadow: 0 24px 70px rgba(6, 28, 19, .28); }
.canteen-recipient-picker header { min-height: 70px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.canteen-recipient-picker header span { color: var(--green); font-size: 8px; font-weight: 800; }.canteen-recipient-picker header h3 { margin: 3px 0 0; font-size: 16px; }
.canteen-recipient-picker main { min-height: 0; overflow-y: auto; padding: 14px 16px; }
.canteen-recipient-tools { margin-bottom: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }.canteen-recipient-bulk-actions { display: flex; align-items: center; gap: 7px; }.canteen-recipient-tools .btn { display: inline-flex; align-items: center; gap: 5px; }.canteen-recipient-tools .btn svg { width: 13px; }
.canteen-recipient-search { height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 4px; }.canteen-recipient-search svg { width: 14px; color: var(--muted); }.canteen-recipient-search input { width: 100%; border: 0; outline: 0; background: transparent; }
.canteen-recipient-tree { min-height: 430px; max-height: 510px; height: min(510px, calc(100vh - 300px)); display: grid; grid-template-columns: 230px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: white; }
.canteen-recipient-departments { min-height: 0; padding: 8px; overflow-y: scroll; scrollbar-gutter: stable; border-right: 1px solid var(--line); background: #f5f8f6; }.canteen-recipient-departments button { width: 100%; min-height: 40px; margin-bottom: 5px; padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid transparent; border-radius: 4px; color: var(--ink); background: transparent; cursor: pointer; text-align: left; }.canteen-recipient-departments button:hover { background: #eef3f0; }.canteen-recipient-departments button.active { border-color: #9eb8ae; color: var(--green); background: white; }.canteen-recipient-departments button > span { min-width: 0; overflow: hidden; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.canteen-recipient-departments button > small { flex: 0 0 auto; color: var(--muted); font-size: 8px; font-weight: 700; white-space: nowrap; }.canteen-recipient-departments button.active > small { color: var(--green); }
.canteen-recipient-panels { min-width: 0; min-height: 0; overflow-y: scroll; scrollbar-gutter: stable; }.canteen-recipient-group[hidden],.canteen-recipient-subgroup[hidden] { display: none !important; }.canteen-recipient-level-header { min-height: 54px; padding: 9px 14px; position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); background: #f7faf8; }.canteen-recipient-level-header > div { min-width: 0; display: flex; align-items: center; gap: 8px; }.canteen-recipient-level-header svg { width: 16px; color: var(--green); }.canteen-recipient-level-header b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }.canteen-recipient-level-header small { color: var(--muted); font-size: 9px; font-weight: 800; white-space: nowrap; }.canteen-recipient-subgroup { border-bottom: 1px solid #e3e9e6; }.canteen-recipient-subgroup > header { min-height: 44px; padding: 7px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: white; }.canteen-recipient-subgroup > header label { min-width: 0; display: flex; align-items: center; gap: 9px; cursor: pointer; }.canteen-recipient-subgroup > header input { width: 17px; height: 17px; accent-color: var(--green); }.canteen-recipient-subgroup > header label span { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--ink); }.canteen-recipient-subgroup > header label svg { width: 14px; color: #65877a; }.canteen-recipient-subgroup > header label b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.canteen-recipient-subgroup > header > small { color: var(--muted); font-size: 9px; font-weight: 700; white-space: nowrap; }
.canteen-recipient-group-people { padding: 12px 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start; gap: 9px; background: #fbfcfb; }.canteen-recipient-group-people .canteen-meal-employee { min-width: 0; min-height: 34px; padding: 6px 9px; display: flex; align-items: center; gap: 6px; border: 1px solid #d5dfda; border-radius: 999px; background: white; cursor: pointer; }.canteen-recipient-group-people .canteen-meal-employee:has(input:checked) { border-color: #9ab9ad; background: #eef6f2; }.canteen-recipient-group-people .canteen-meal-employee input { width: 14px; height: 14px; flex: 0 0 auto; accent-color: var(--green); }.canteen-recipient-group-people .canteen-meal-employee span { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.canteen-meal-selection-state { flex: 0 0 auto; color: #51776a; font-size: 7px; font-weight: 800; white-space: nowrap; }
.canteen-recipient-picker footer { min-height: 62px; padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); background: #f7f9f8; }.canteen-recipient-picker footer > span { color: var(--muted); font-size: 9px; }.canteen-recipient-picker footer > span b { color: var(--ink); }.canteen-recipient-picker footer > div { display: flex; gap: 8px; }.canteen-recipient-picker footer .btn { display: inline-flex; align-items: center; gap: 5px; }.canteen-recipient-picker footer .btn svg { width: 13px; }
.canteen-recipient-departments,.canteen-recipient-panels { min-height: 0; height: 100%; overflow-y: scroll; scrollbar-gutter: stable; scrollbar-width: auto; }
.canteen-recipient-departments::-webkit-scrollbar,.canteen-recipient-panels::-webkit-scrollbar { width: 10px; height: 10px; }
.canteen-recipient-departments::-webkit-scrollbar-track,.canteen-recipient-panels::-webkit-scrollbar-track { border-radius: 5px; background: #edf2ef; }
.canteen-recipient-departments::-webkit-scrollbar-thumb,.canteen-recipient-panels::-webkit-scrollbar-thumb { border: 2px solid #edf2ef; border-radius: 6px; background: #78988b; }

@media (max-width: 1100px) {
  .canteen-expense-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canteen-meal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canteen-satisfaction-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canteen-satisfaction-layout { grid-template-columns: 1fr; }
  .canteen-meal-employees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canteen-recipient-tree { grid-template-columns: 210px minmax(0, 1fr); }
  .canteen-recipient-group-people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .canteen-module-tabs { gap: 8px; }
  .canteen-module-tabs button { min-width: 0; flex: 1; padding: 0 8px; font-size: 12px; }
  .canteen-expense-head .actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .canteen-expense-head select, .canteen-expense-head .btn { width: 100%; }
  .canteen-expense-stats { grid-template-columns: 1fr; }
  .canteen-expense-panel .panel-head { align-items: stretch; flex-direction: column; }
  .canteen-cost-table, .canteen-cost-table tbody { width: 100%; min-width: 0; display: block; }
  .canteen-cost-table thead { display: none; }
  .canteen-cost-table tbody tr { height: 134px !important; display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(108px, 38%); grid-template-rows: 36px 36px 28px; align-content: start; gap: 7px 9px; margin: 10px; padding: 10px; border: 1px solid var(--line); }
  .canteen-cost-table tbody td { width: auto; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; text-align: right; }
  .canteen-cost-table tbody td::before { content: attr(data-label); color: var(--muted); font-size: 9px; font-weight: 700; text-align: left; }
  .canteen-cost-table tbody td:nth-child(-n+4)::before { display: none; }
  .canteen-cost-table tbody td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; justify-content: center; }
  .canteen-cost-table tbody td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: left; }
  .canteen-cost-table tbody td:nth-child(3) { grid-column: 2; grid-row: 2; justify-content: flex-start; color: var(--muted); text-align: left; }
  .canteen-cost-table tbody td:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
  .canteen-cost-table tbody td:nth-child(5) { min-height: 28px; grid-column: 1 / -1; grid-row: 3; padding-top: 7px; border-top: 1px solid var(--line-soft); }
  .canteen-money-input { width: 100%; }
  .canteen-cost-table tfoot { display: table; width: calc(100% - 20px); margin: 0 10px 10px; }
  .canteen-cost-table tfoot { display: block; }
  .canteen-cost-table tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(118px, 38%); }
  .canteen-cost-table tfoot th, .canteen-cost-table tfoot td { width: auto !important; height: 42px !important; min-height: 42px; display: flex; align-items: center; padding: 8px 10px; }
  .canteen-cost-table tfoot th { grid-column: 1; justify-content: flex-end; }
  .canteen-cost-table tfoot td { grid-column: 2; justify-content: flex-end; }
  .canteen-expense-note { grid-template-columns: 1fr; }
  .canteen-trend-panel .panel-head { align-items: stretch; flex-direction: column; }
  .canteen-trend-year-select { width: 100%; justify-content: space-between; }
  .canteen-trend-year-select select { width: min(180px, 55%); }
  .canteen-trend-chart-scroll { padding-inline: 10px; }
  .canteen-trend-dual { grid-template-columns: 1fr; }
  .canteen-trend-chart-block + .canteen-trend-chart-block { border-left: 0; border-top: 1px solid var(--line); }
  .canteen-trend-summary { grid-template-columns: 1fr; }
  .canteen-trend-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .canteen-trend-summary > div:last-child { border-bottom: 0; }
  .canteen-module-toolbar { align-items: stretch; flex-direction: column; }
  .canteen-module-toolbar .actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .canteen-module-toolbar select { width: 100%; grid-column: 1 / -1; }
  .canteen-meal-period-filter, .canteen-satisfaction-period-filter { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .canteen-module-toolbar .canteen-meal-period-filter select, .canteen-module-toolbar .canteen-satisfaction-period-filter select { width: 100%; }
  .canteen-module-toolbar .btn { justify-content: center; }
  .canteen-meal-stats { grid-template-columns: 1fr 1fr; }
  .canteen-satisfaction-stats { grid-template-columns: 1fr 1fr; }
  .canteen-satisfaction-dimension-list { grid-template-columns: 1fr; }
  .canteen-satisfaction-dimension { grid-template-columns: 1fr 72px; gap: 9px; padding: 12px 0; }
  .canteen-satisfaction-dimension:nth-child(2) { border-top: 1px solid var(--line-soft); }
  .canteen-satisfaction-dimension > i { grid-column: 1 / -1; }
  .canteen-satisfaction-modal-backdrop { align-items: end; padding: 0; }
  .canteen-satisfaction-modal { width: 100%; max-height: 92vh; border-radius: 8px 8px 0 0; }
  .canteen-satisfaction-recipient-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canteen-satisfaction-followup-head { align-items: flex-start; flex-direction: column; }
  .canteen-satisfaction-followup-table { overflow-x: auto; }
  .canteen-satisfaction-followup-table table { min-width: 560px; }
  .canteen-satisfaction-modal > footer { align-items: stretch; flex-direction: column; }.canteen-satisfaction-modal > footer > div { display: grid; grid-template-columns: 1fr 1fr; }.canteen-satisfaction-modal > footer .btn { flex: 1; justify-content: center; }
  .canteen-meal-fields { grid-template-columns: 1fr; }
  .canteen-meal-fields .message { grid-column: auto; }
  .canteen-service-days > div { grid-template-columns: 1fr 1fr; }
  .canteen-meal-employees { grid-template-columns: 1fr; }
  .canteen-meal-config-actions { align-items: stretch; flex-direction: column; }
  .canteen-meal-config-actions .btn { width: 100%; justify-content: center; }
  .canteen-meal-table-panel .table-wrap { overflow-x: auto; }
  .canteen-package-modal { padding: 10px; align-items: end; }
  .canteen-package-dialog { max-height: calc(100vh - 20px); }
  .canteen-package-titlebar { width: 100%; align-items: flex-start; flex-direction: column; gap: 8px; }.canteen-package-dialog > header h2 { font-size: 17px; }.canteen-package-period-inline { width: 100%; }.canteen-package-period-inline label { min-width: 0; flex: 1; }.canteen-package-period-inline select { width: 100% !important; }
  .canteen-package-grid { margin-inline: 12px; }.canteen-meal-slot-table { min-width: 590px; }
  .canteen-package-people { grid-template-columns: 1fr auto; }.canteen-package-people > div { grid-column: 1 / -1; }.canteen-package-people .btn { justify-content: center; }
  .canteen-recipient-picker { padding: 10px; align-items: end; }.canteen-recipient-picker > section { max-height: calc(100vh - 20px); }.canteen-recipient-tree { min-height: 410px; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }.canteen-recipient-departments { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }.canteen-recipient-departments button { min-width: 170px; margin-bottom: 0; }.canteen-recipient-group-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }.canteen-recipient-tools { grid-template-columns: 1fr; }.canteen-recipient-bulk-actions { display: grid; grid-template-columns: 1fr 1fr; }.canteen-recipient-tools .btn { justify-content: center; }
  .canteen-meal-table-panel .panel-head { align-items: stretch; flex-direction: column; }.canteen-meal-table-actions { justify-content: space-between; }
  .canteen-package-dialog > footer { align-items: stretch; flex-direction: column; }.canteen-package-dialog > footer > div { display: grid; grid-template-columns: 1fr 1fr; }.canteen-package-dialog > footer .btn { justify-content: center; }
}
/* Talent pool */
.talent-pool-head .page-kicker { color: var(--green); }
.talent-pool-stats { margin-bottom: 18px; }
.talent-pool-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 16px; margin-bottom: 16px; }
.talent-pool-analysis-grid .panel, .talent-pool-list-panel { min-width: 0; overflow: hidden; border-color: #dce6e2; border-radius: 7px; box-shadow: 0 8px 22px rgba(31, 63, 52, .035); }
.talent-pool-analysis-grid .panel-head, .talent-pool-list-panel > .panel-head { min-height: 66px; padding: 0 18px; border-bottom-color: #e1ebe7; background: #f8fcfa; }
.talent-track-panel > .panel-head { border-top: 3px solid #7fa99b; }
.talent-source-panel > .panel-head { border-top: 3px solid #8babc6; }
.talent-pool-list-panel > .panel-head { border-top: 3px solid #9bafa9; }
.talent-pool-analysis-grid .panel-head > div > p, .talent-pool-list-panel .panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.analysis-panel-icon { width: 34px; height: 34px; padding: 8px; border-radius: 7px; color: var(--green); background: #e8f3ef; }.analysis-panel-icon.blue { color: #2e6799; background: #e9f1f8; }
.talent-track-list { padding: 14px 18px 18px; display: grid; align-content: start; gap: 9px; }
.talent-track-list > button { min-height: 50px; padding: 9px 11px; display: grid; gap: 8px; border: 1px solid #e1e9e6; border-radius: 6px; background: #fbfcfc; cursor: pointer; text-align: left; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.talent-track-list > button:hover { border-color: #9ab8ad; background: #f4f9f7; }
.talent-track-list > button.active { border-color: #6fa18f; background: #eef7f3; box-shadow: inset 3px 0 0 var(--green); }
.talent-track-list > button span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.talent-track-list > button strong { font-size: 10px; }.talent-track-list > button b { color: var(--muted); font-size: 9px; }
.talent-track-list > button > i { height: 6px; display: block; overflow: hidden; border-radius: 3px; background: #e3ebe7; }.talent-track-list > button > i em { height: 100%; display: block; border-radius: inherit; background: #247159; }
.talent-analysis-section { padding: 16px 18px; }.talent-analysis-section + .talent-analysis-section { border-top: 1px solid #dce6e2; padding-top: 16px; }.talent-analysis-section > strong { display: block; margin-bottom: 11px; color: #29483e; font-size: 9px; }
.talent-analysis-tags { display: flex; flex-wrap: wrap; gap: 7px; }.talent-analysis-tags button { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #d6e1dd; border-radius: 5px; color: #36584d; background: #fbfcfc; cursor: pointer; font-size: 9px; }.talent-analysis-tags button::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4f83ae; }.talent-analysis-tags button:hover, .talent-analysis-tags button.active { border-color: #7198ba; color: #245f91; background: #edf4fa; }.talent-analysis-tags button b { min-width: 18px; color: #567369; text-align: right; }
.talent-experience-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid #e0e9e5; border-radius: 6px; }.talent-experience-grid > div { min-width: 0; padding: 12px 7px; text-align: center; border-right: 1px solid #e0e9e5; background: #f8fcfa; }.talent-experience-grid > div:nth-child(2) { background: #f8fbfe; }.talent-experience-grid > div:nth-child(3) { background: #fffcf7; }.talent-experience-grid > div:nth-child(4) { background: #fdfbfe; }.talent-experience-grid > div:last-child { border-right: 0; }.talent-experience-grid span { display: block; color: var(--muted); font-size: 8px; }.talent-experience-grid b { display: inline-block; margin-top: 6px; color: #24493e; font-size: 18px; }.talent-experience-grid small { margin-left: 2px; color: var(--muted); font-size: 7px; }
.talent-pool-toolbar { align-items: center; padding: 12px 14px; background: #fbfcfb; }.talent-pool-toolbar .filters { flex: 1; }.talent-pool-toolbar .search { min-width: 250px; flex: 1; background: white; }.talent-pool-toolbar select { min-width: 130px; background-color: white; }.talent-pool-toolbar .search:focus-within, .talent-pool-toolbar select:focus { border-color: #79a593; box-shadow: 0 0 0 3px rgba(36, 113, 89, .08); }
.talent-pool-list-panel { scroll-margin-top: 72px; }.talent-pool-list-panel:focus { outline: none; }.talent-pool-list-panel .table-wrap { border-top: 1px solid #dbe5e1; }
.talent-pool-table { min-width: 1120px; }.talent-pool-table th { height: 42px; color: #35564b; background: #f5f9f7; font-weight: 700; }.talent-pool-table .person { min-width: 150px; }.talent-pool-table .avatar { color: #285e50; background: #eef7f3; }.talent-pool-table td { height: 68px; vertical-align: middle; border-bottom-color: #e5ece9; }.talent-pool-table tbody tr:nth-child(even) td { background: #fcfdfc; }.talent-pool-table tbody tr:hover td { background: #f7faf9; }.talent-tags { max-width: 180px; white-space: normal; }
.talent-summary-cell { width: 260px; }.talent-summary-cell > span { max-width: 260px; display: -webkit-box; overflow: hidden; color: var(--muted); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.talent-status-select { min-width: 92px; height: 32px; padding: 0 24px 0 9px; border: 1px solid #bfd2ca; border-radius: 5px; color: #245a48; background-color: #f7fbf9; font-size: 9px; font-weight: 700; }
.talent-row-actions { min-width: 112px; display: flex; align-items: center; gap: 7px; white-space: nowrap; }.talent-edit-btn { color: #245a48; border-color: #bfd2ca; background: #f7fbf9; }.talent-edit-btn:hover { border-color: #79a593; background: #edf7f3; }.talent-edit-btn svg { width: 13px; height: 13px; }
.talent-pool-upload-drawer { width: min(620px, 94vw); }.talent-resume-upload-block { margin-bottom: 14px; }.talent-pool-upload-drawer .resume-upload { min-height: 76px; }.talent-pool-upload-drawer .resume-upload > span { display: grid; gap: 3px; }.talent-pool-upload-drawer .resume-upload strong { color: var(--ink); font-size: 10px; }.talent-pool-upload-drawer .resume-upload small { color: var(--muted); font-size: 8px; font-weight: 500; }
.talent-extract-banner { min-height: 54px; margin: 0 0 18px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #a9cfc0; background: #eef8f4; }.talent-extract-banner.warn { border-color: #e5c28b; background: #fff8eb; }.talent-extract-banner > i { width: 18px; color: var(--green); }.talent-extract-banner.warn > i { color: #b87018; }.talent-extract-banner > div { display: grid; gap: 3px; }.talent-extract-banner strong { font-size: 9px; }.talent-extract-banner span { color: var(--muted); font-size: 8px; }

@media (max-width: 1050px) {
  .talent-pool-analysis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .talent-pool-head .actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .talent-pool-head .actions .btn { justify-content: center; }
  .talent-pool-toolbar { align-items: stretch; flex-direction: column; }.talent-pool-toolbar .filters { width: 100%; display: grid; grid-template-columns: 1fr; }.talent-pool-toolbar .search, .talent-pool-toolbar select { width: 100%; min-width: 0; }
  .talent-experience-grid { grid-template-columns: 1fr 1fr; }.talent-experience-grid > div:nth-child(2) { border-right: 0; }.talent-experience-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Attendance subpages stay inside the main HR shell. */
.attendance-module-host > :not(.attendance-module-frame) { display: none !important; }
.attendance-module-host { min-width: 0; }
.attendance-module-frame {
  width: 100%;
  height: calc(100vh - 122px);
  min-height: 720px;
  display: block;
  border: 0;
  background: #f3f6f4;
}
@media (max-width: 760px) {
  .payment-delivery-meta, .payment-fields-preview ol { grid-template-columns: 1fr; }
  .payment-delivery-meta > div, .payment-fields-preview li { border-right: 0; border-bottom: 1px solid var(--line); }
  .payment-review-grid, .payment-review-grid.bank { grid-template-columns: 1fr; }
  .payment-panel-actions { width: 100%; justify-content: stretch; }
  .payment-panel-actions .btn { flex: 1; justify-content: center; }
  .payment-simulation-notice, .payment-simulation-steps, .payment-simulation-stage { margin-left: 12px; margin-right: 12px; }
  .payment-simulation-steps > div { min-height: 60px; padding: 9px 7px; grid-template-columns: 24px minmax(0,1fr); gap: 6px; }
  .payment-simulation-steps b { width: 22px; height: 22px; }
  .payment-simulation-steps small { display: none; }
  .payment-demo-form { grid-template-columns: 1fr; padding: 14px; }
  .payment-demo-person { grid-template-columns: 1fr; }
  .payment-demo-person div { border-right: 0; border-bottom: 1px solid var(--line); }
  .payment-demo-person div:last-child { border-bottom: 0; }
  .payment-simulation-review-head, .payment-finance-preview-head { align-items: flex-start; }
  .payment-simulation-actions { display: grid; grid-template-columns: 1fr; }
  .payment-simulation-actions .btn { justify-content: center; }
}

/* A 区：统一顶部横向流程卡片。 */
.a-zone-flow-cards {
  min-height: 0;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid var(--line);
  display: grid;
  gap: 12px;
  background: var(--paper);
  box-shadow: var(--shadow);
  overflow-x: auto;
}
.a-zone-flow-cards.cols-4 { grid-template-columns: repeat(4, minmax(230px, 1fr)); }
.a-zone-flow-cards.cols-3 { grid-template-columns: repeat(3, minmax(230px, 1fr)); }
.a-zone-flow-cards.cols-2 { grid-template-columns: repeat(2, minmax(280px, 420px)); }
.a-zone-flow-cards .a-zone-flow-card {
  --a-flow-bg: #f8fcfa;
  --a-flow-icon-bg: #eef7f3;
  --a-flow-border: #dcebe5;
  --a-flow-accent: #287c64;
  position: relative;
  min-width: 0;
  min-height: 102px;
  padding: 14px 32px 14px 14px;
  border: 1px solid var(--a-flow-border);
  border-radius: 7px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  grid-template-areas: none;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  background: var(--a-flow-bg);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.a-zone-flow-cards .a-zone-flow-card:nth-child(4n + 2) {
  --a-flow-bg: #f8fbfe;
  --a-flow-icon-bg: #eef5fc;
  --a-flow-border: #dce8f3;
  --a-flow-accent: #487fb1;
}
.a-zone-flow-cards .a-zone-flow-card:nth-child(4n + 3) {
  --a-flow-bg: #fffcf7;
  --a-flow-icon-bg: #fff5e5;
  --a-flow-border: #f1e4d1;
  --a-flow-accent: #a66f26;
}
.a-zone-flow-cards .a-zone-flow-card:nth-child(4n + 4) {
  --a-flow-bg: #fdfbfe;
  --a-flow-icon-bg: #f7f0f9;
  --a-flow-border: #eadfec;
  --a-flow-accent: #8c6a9a;
}
.a-zone-flow-cards .a-zone-flow-card:hover {
  border-color: var(--a-flow-accent);
  background: var(--a-flow-bg);
  box-shadow: 0 5px 13px rgba(34, 65, 55, .07);
  transform: translateY(-1px);
}
.a-zone-flow-cards .a-zone-flow-card:focus { outline: 0; }
.a-zone-flow-cards .a-zone-flow-card:focus-visible { outline: 2px solid var(--a-flow-accent); outline-offset: 2px; }
.a-zone-flow-cards .a-zone-flow-card.active {
  border: 2px solid var(--a-flow-accent);
  padding: 13px 31px 13px 13px;
  color: var(--ink);
  background: var(--a-flow-bg);
  box-shadow: 0 2px 0 var(--a-flow-accent);
}
.a-zone-flow-cards .a-zone-flow-card.active::after { content: none; }
.a-zone-flow-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--a-flow-accent);
  background: var(--a-flow-icon-bg);
}
.a-zone-flow-icon svg { width: 22px; height: 22px; }
.a-zone-flow-copy {
  min-width: 0;
  padding: 0;
  border: 0;
  display: block;
  color: inherit;
  background: transparent;
}
.a-zone-flow-copy strong, .a-zone-flow-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a-zone-flow-copy strong { color: var(--ink); font-size: 11px; line-height: 1.35; }
.a-zone-flow-copy small { margin-top: 6px; color: var(--muted); font-size: 8px; font-weight: 400; line-height: 1.4; }
.a-zone-flow-count {
  min-width: 24px;
  padding: 0;
  border: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--a-flow-accent);
  background: transparent;
  white-space: nowrap;
}
.a-zone-flow-count b { color: var(--a-flow-accent); font-size: 22px; line-height: 1; }
.a-zone-flow-count small { margin: 0; color: var(--muted); font-size: 8px; font-weight: 700; }
.a-zone-flow-arrow {
  position: absolute;
  right: 8px;
  width: 14px;
  height: 14px;
  color: #9baca6;
}
.talent-pool-stats.a-zone-flow-cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: hidden; }
.talent-pool-stats.a-zone-flow-cards .a-zone-flow-card { font: inherit; }
.talent-pool-stats.a-zone-flow-cards .a-zone-flow-card.active { box-shadow: 0 2px 0 var(--a-flow-accent); }
.onboarding-modules.a-zone-flow-cards {
  min-height: 0;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.onboarding-modules.a-zone-flow-cards.materials-flow {
  grid-template-columns: repeat(4, 200px);
  justify-content: space-between;
  overflow-x: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.onboarding-modules.a-zone-flow-cards .a-zone-flow-card { flex: none; border-right: 1px solid var(--a-flow-border); }
.onboarding-modules.a-zone-flow-cards .a-zone-flow-card:last-child { border-right: 1px solid var(--a-flow-border); }
.onboarding-modules.a-zone-flow-cards.materials-flow .a-zone-flow-card {
  width: 200px;
  min-height: 84px;
  padding: 10px 24px 10px 10px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 8px;
  border-color: var(--a-flow-border);
  background: var(--a-flow-bg);
}
.onboarding-modules.a-zone-flow-cards.materials-flow .a-zone-flow-card.active { padding: 9px 23px 9px 9px; }
.onboarding-modules.a-zone-flow-cards.materials-flow .a-zone-flow-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 7px;
}
.onboarding-modules.a-zone-flow-cards.materials-flow .a-zone-flow-icon svg { width: 19px; height: 19px; }
.onboarding-modules.a-zone-flow-cards.materials-flow .a-zone-flow-copy strong { font-size: 10px; }
.onboarding-modules.a-zone-flow-cards.materials-flow .a-zone-flow-copy small { margin-top: 4px; font-size: 7px; }
.onboarding-modules.a-zone-flow-cards.materials-flow .a-zone-flow-count { gap: 3px; }
.onboarding-modules.a-zone-flow-cards.materials-flow .a-zone-flow-count b { font-size: 19px; }
.onboarding-modules.a-zone-flow-cards.materials-flow .a-zone-flow-count small { font-size: 7px; }
.onboarding-modules.a-zone-flow-cards.materials-flow .a-zone-flow-arrow { right: 6px; width: 12px; height: 12px; }
.onboarding-modules.a-zone-flow-cards.materials-flow .a-zone-flow-card:hover {
  border-color: var(--a-flow-accent);
  background: var(--a-flow-bg);
}
.onboarding-modules.a-zone-flow-cards.materials-flow .a-zone-flow-card.active {
  border: 2px solid var(--a-flow-accent);
  background: var(--a-flow-bg);
  box-shadow: 0 2px 0 var(--a-flow-accent);
}

.onboarding-flow-page {
  --onboarding-flow-accent: #287c64;
  --onboarding-flow-panel-bg: #f8fcfa;
}
.onboarding-flow-page.onboarding-tone-hr,
.onboarding-flow-page.onboarding-tone-training {
  --onboarding-flow-accent: #487fb1;
  --onboarding-flow-panel-bg: #f8fbfe;
}
.onboarding-flow-page.onboarding-tone-collection,
.onboarding-flow-page.onboarding-tone-probation {
  --onboarding-flow-accent: #a66f26;
  --onboarding-flow-panel-bg: #fffcf7;
}
.onboarding-flow-page.onboarding-tone-payment {
  --onboarding-flow-accent: #8c6a9a;
  --onboarding-flow-panel-bg: #fdfbfe;
}
.area-a-theme .onboarding-flow-page > .panel {
  border-top: 4px solid var(--onboarding-flow-accent);
}
.area-a-theme .onboarding-flow-page > .panel > .panel-head {
  background: var(--onboarding-flow-panel-bg);
  box-shadow: none;
}
.employee-change-switcher.a-zone-flow-cards { min-height: 0; margin: 0; border: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); box-shadow: none; overflow-x: hidden; }
.employee-change-switcher.a-zone-flow-cards .a-zone-flow-card { min-height: 114px; padding: 14px; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; }
.employee-change-switcher.a-zone-flow-cards .a-zone-flow-card.active { padding: 13px; }
.employee-change-switcher.a-zone-flow-cards .a-zone-flow-icon { width: 56px; height: 56px; min-width: 56px; }
.employee-change-switcher.a-zone-flow-cards .a-zone-flow-icon svg { width: 26px; height: 26px; }
.employee-change-switcher.a-zone-flow-cards .a-zone-flow-copy strong { font-size: 14px; }
.employee-change-switcher.a-zone-flow-cards .a-zone-flow-copy small { margin-top: 7px; font-size: 10px; }
.employee-change-switcher.a-zone-flow-cards .a-zone-flow-count b { font-size: 28px; }
.employee-change-switcher.a-zone-flow-cards .a-zone-flow-arrow { display: none; }
.offboard-module-tabs.a-zone-flow-cards { min-height: 0; align-items: stretch; }
.offboard-module-tabs.a-zone-flow-cards .a-zone-flow-card { min-height: 102px; border-bottom: 1px solid var(--a-flow-border); font: inherit; }
.offboard-module-tabs.a-zone-flow-cards .a-zone-flow-card.active { border: 2px solid var(--a-flow-accent); }

@media (max-width: 1100px) {
  .a-zone-flow-cards.cols-4 { grid-template-columns: repeat(4, 230px); }
  .a-zone-flow-cards.cols-3 { grid-template-columns: repeat(3, 230px); }
  .a-zone-flow-cards.cols-2 { grid-template-columns: repeat(2, 280px); }
  .employee-change-switcher.a-zone-flow-cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .talent-pool-stats.a-zone-flow-cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .talent-pool-stats.a-zone-flow-cards .a-zone-flow-card { padding: 12px 27px 12px 12px; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; }
  .talent-pool-stats.a-zone-flow-cards .a-zone-flow-card.active { padding: 11px 26px 11px 11px; }
  .talent-pool-stats.a-zone-flow-cards .a-zone-flow-icon { width: 42px; height: 42px; min-width: 42px; }
  .talent-pool-stats.a-zone-flow-cards .a-zone-flow-icon svg { width: 20px; height: 20px; }
}

@media (max-width: 760px) {
  .talent-pool-stats.a-zone-flow-cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .talent-pool-stats.a-zone-flow-cards .a-zone-flow-card { min-height: 86px; grid-template-columns: 44px minmax(0, 1fr) auto; }
  .talent-pool-stats.a-zone-flow-cards .a-zone-flow-icon { width: 44px; height: 44px; min-width: 44px; }
  .employee-change-switcher.a-zone-flow-cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-change-switcher.a-zone-flow-cards .a-zone-flow-card { min-height: 92px; padding: 11px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; }
  .employee-change-switcher.a-zone-flow-cards .a-zone-flow-card.active { padding: 10px; }
  .employee-change-switcher.a-zone-flow-cards .a-zone-flow-icon { width: 44px; height: 44px; min-width: 44px; }
  .employee-change-switcher.a-zone-flow-cards .a-zone-flow-icon svg { width: 22px; height: 22px; }
  .employee-change-switcher.a-zone-flow-cards .a-zone-flow-copy strong { font-size: 12px; }
  .employee-change-switcher.a-zone-flow-cards .a-zone-flow-copy small { margin-top: 4px; font-size: 9px; }
  .employee-change-switcher.a-zone-flow-cards .a-zone-flow-count b { font-size: 24px; }
}

@media (max-width: 560px) {
  .talent-pool-stats.a-zone-flow-cards.cols-4 { grid-template-columns: 1fr; }
}

/* 招聘流程卡在当前页面切换阶段数据。 */
.recruit-flow-step.attention:not(.current) { box-shadow: inset 0 -3px 0 var(--flow-accent); }
.recruit-flow-detail-anchor { height: 0; scroll-margin-top: 76px; }
.recruit-flow-data-panel { margin-bottom: 20px; overflow: hidden; border-color: #c8d8d1; }
.recruit-flow-data-panel > .panel-head { min-height: 58px; }
.recruit-flow-data-panel > .panel-head h2 span { margin-left: 7px; color: var(--muted); font-size: 8px; font-weight: 500; }
.recruit-flow-data-table { min-width: 1080px; table-layout: fixed; }
.recruit-flow-data-table th { height: 44px; padding: 0 11px; color: #315347; background: #eef6f3; font-size: 9px; white-space: nowrap; }
.recruit-flow-data-table td { min-height: 66px; padding: 11px; font-size: 9px; vertical-align: middle; }
.recruit-flow-data-table tbody tr:nth-child(even) td { background: #fbfcfb; }
.recruit-flow-data-table tbody tr:hover td { background: #f5faf7; }
.recruit-flow-data-table .person { min-width: 150px; }
.recruit-flow-data-table td > strong { font-size: 10px; }
.recruit-flow-data-table .cell-sub { margin-top: 4px; }
.recruit-flow-analysis-stats { margin-bottom: 14px; }
.recruit-page:has(> .recruit-command-grid) > .recruit-request-panel { order: 4; }
.recruit-page:has(> .recruit-command-grid) > .recruit-command-grid { order: 5; }

/* 招聘需求与招聘登记：同页平铺、原位更新。 */
.recruit-flow-band, .recruitment-stage-overview {
  overflow: hidden;
  border-color: #cad9d3;
  border-radius: 7px;
  box-shadow: 0 8px 22px rgba(31, 63, 52, .055);
}
.recruitment-stage-head {
  min-height: 66px;
  padding: 0 18px;
  border-bottom-color: #d9e4e0;
  background: #f8fbf9;
}
.recruitment-stage-head h2 { font-size: 13px; }
.recruit-flow-steps {
  min-height: 112px;
  padding: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
  overflow-x: hidden;
}
.recruit-flow-step {
  min-height: 80px;
  padding: 13px 27px 13px 13px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
}
.recruit-flow-step.current {
  border-width: 1px;
  padding: 13px 27px 13px 13px;
  box-shadow: 0 0 0 1px var(--flow-accent) inset, 0 4px 0 var(--flow-accent);
}
.flow-step-index { width: 42px; height: 42px; }
.flow-step-index svg { width: 19px; height: 19px; }
.flow-step-copy strong { font-size: 10px; }
.recruit-flow-step > b { font-size: 20px; }

.recruitment-flow-steps {
  padding: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow-x: hidden;
}
.recruitment-flow-steps button { position: relative; min-height: 102px; padding: 14px 27px 14px 14px; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; }
.recruitment-flow-steps button.active { border-width: 2px; padding: 13px 26px 13px 13px; box-shadow: 0 2px 0 var(--stage-accent); }
.recruitment-flow-steps .stage-icon { width: 48px; height: 48px; padding: 13px; }
.recruitment-flow-steps .stage-arrow { position: absolute; right: 8px; width: 14px; height: 14px; }

.recruit-demand-combined-panel, .registration-panel, .recruitment-onboarding-panel, .recruitment-analysis-panel, .recruit-flow-data-panel {
  overflow: hidden;
  border-color: #dce6e2;
  border-radius: 7px;
  box-shadow: 0 8px 22px rgba(31, 63, 52, .035);
}
.recruit-demand-combined-panel { padding: 18px; border-top: 3px solid #7fa99b; background: #fdfefd; }
.recruit-demand-combined-title h2 { font-size: 18px; }
.recruit-demand-combined-table { border-radius: 7px; }
.registration-panel > .panel-head, .recruitment-onboarding-panel > .panel-head, .recruitment-analysis-panel > .panel-head, .recruit-flow-data-panel > .panel-head {
  min-height: 66px;
  padding: 0 18px;
  border-top: 3px solid #9bafa9;
  border-bottom-color: #e1ebe7;
  background: #f8fcfa;
}
.registration-panel > .panel-head { border-top-color: #8babc6; }
.registration-panel-head { flex-wrap: wrap; }
.registration-month-picker { display: flex; align-items: center; gap: 8px; }
.registration-month-picker label { min-height: 34px; padding: 0 9px; display: flex; align-items: center; gap: 7px; border: 1px solid #cfdeda; border-radius: 5px; color: #4f665e; background: #fff; }
.registration-month-picker label:focus-within { border-color: #78a092; box-shadow: 0 0 0 3px rgba(72, 127, 177, .09); }
.registration-month-picker label > svg { width: 15px; height: 15px; color: #487fb1; }
.registration-month-picker label > span { margin: 0; color: #5b6e67; font-size: 9px; font-weight: 700; }
.registration-month-picker input { width: 118px; border: 0; outline: 0; color: #263b34; background: transparent; font: inherit; font-size: 10px; font-weight: 700; }
.registration-month-picker .btn { min-height: 34px; }
.recruitment-onboarding-panel > .panel-head { border-top-color: #c9a66f; }
.registration-toolbar, .talent-pool-toolbar { background: #fdfefd; }
.registration-filter-tabs { padding: 10px 18px; grid-template-columns: repeat(6, minmax(0, 1fr)); display: grid; overflow-x: hidden; }
.registration-filter-tabs button { width: 100%; min-width: 0; }
.registration-panel table th, .recruitment-onboarding-panel table th, .recruitment-analysis-panel table th {
  color: #35564b;
  background: #f5f9f7;
}
.registration-panel tbody tr:hover td, .recruitment-onboarding-panel tbody tr:hover td, .recruitment-analysis-panel tbody tr:hover td { background: #f7faf9; }

@media (max-width: 1280px) {
  .recruit-flow-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .recruitment-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .recruit-flow-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .registration-filter-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .registration-panel-head { align-items: flex-start; padding-top: 12px !important; padding-bottom: 12px !important; flex-direction: column; }
}

@media (max-width: 560px) {
  .recruit-flow-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .recruitment-flow-steps { grid-template-columns: 1fr; }
  .recruit-demand-combined-panel { padding: 12px; }
  .registration-filter-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registration-month-picker { width: 100%; }
  .registration-month-picker label { min-width: 0; flex: 1; }
  .registration-month-picker input { min-width: 0; width: 100%; }
}

/* ===== 组织架构层级视图 2026-07-18 ===== */
.org-redesign-stats { margin-bottom: 18px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.org-refresh-action { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.org-refresh-time { padding-left: 2px; color: var(--muted); font-size: 10px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.org-redesign-stat { min-height: 100px; padding: 17px 19px; border-right: 1px solid var(--line); position: relative; }
.org-redesign-stat:last-child { border-right: 0; }
.org-redesign-stat > span { color: var(--muted); display: flex; align-items: center; gap: 7px; font-size: 10px; }
.org-redesign-stat > span i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.org-redesign-stat > strong { margin-top: 11px; display: block; font-size: 28px; line-height: 1; }
.org-redesign-stat > strong small { margin-left: 3px; color: var(--muted); font-size: 10px; font-weight: 600; }
.org-redesign-stat > em { position: absolute; right: 17px; bottom: 17px; color: var(--green); font-size: 8px; font-style: normal; font-weight: 700; }
.org-redesign-stat > em.warn { color: var(--amber); }
.org-hierarchy-panel { min-height: 0; padding: 0; overflow: hidden; }
.org-hierarchy-company { width: 270px; min-height: 76px; margin: 28px auto 40px; padding: 13px 15px; border: 1px solid #86aa9c; border-radius: 6px; background: #f0f7f3; display: block; position: relative; }
.org-hierarchy-company::after { content: ''; position: absolute; left: 50%; top: 100%; height: 40px; border-left: 1px solid #b8c8c1; }
.org-hierarchy-company > .org-company-icon { width: 19px; color: var(--green); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
.org-company-name { width: 116px; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.org-hierarchy-company span strong, .org-hierarchy-company span small { display: block; }
.org-hierarchy-company span strong { font-size: 16px; line-height: 1.2; }
.org-hierarchy-company span small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.org-hierarchy-company > b { font-size: 23px; white-space: nowrap; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); }
.org-hierarchy-company > b small { color: var(--muted); font-size: 9px; font-weight: 600; }
.org-hierarchy-level1 { margin: 0 20px 22px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; position: relative; }
.org-hierarchy-level1::before { content: ''; position: absolute; left: 8.33%; right: 8.33%; top: -20px; border-top: 1px solid #b8c8c1; }
.org-hierarchy-node { min-width: 0; min-height: 138px; padding: 12px 11px 10px 14px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); position: relative; cursor: pointer; text-align: left; }
.org-hierarchy-node::before { content: ''; position: absolute; left: 50%; bottom: 100%; height: 20px; border-left: 1px solid #b8c8c1; }
.org-hierarchy-node::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 6px 0 0 6px; background: var(--org-node-color); }
.org-hierarchy-node:hover { border-color: #9fb8ae; background: #fbfdfc; }
.org-hierarchy-node.active { border-color: var(--green); box-shadow: 0 0 0 2px rgba(24, 95, 74, .1); }
.org-hierarchy-node > span { min-height: 32px; display: block; font-size: 10px; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.org-hierarchy-node > strong { margin-top: 4px; display: block; font-size: 21px; }
.org-hierarchy-node > strong small { margin-left: 2px; color: var(--muted); font-size: 8px; font-weight: 600; }
.org-hierarchy-node > i { height: 5px; margin-top: 10px; border-radius: 3px; background: #e9eeeb; display: block; overflow: hidden; }
.org-hierarchy-node > i b { height: 100%; min-width: 3px; border-radius: 3px; background: var(--org-node-color); display: block; }
.org-hierarchy-node > em { margin-top: 7px; color: var(--muted); display: block; font-size: 8px; font-style: normal; }
.org-hierarchy-level2 { padding: 18px 20px 20px; border-top: 1px solid var(--line); background: #f8faf9; }
.org-hierarchy-level2-head { margin-bottom: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.org-hierarchy-level2-head h3 { margin: 0; font-size: 13px; }
.org-hierarchy-level2-head p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.org-hierarchy-level2-head > span { min-width: 60px; padding: 4px 8px; border-radius: 4px; color: var(--green); background: var(--mint); font-size: 8px; font-weight: 800; text-align: center; }
.org-hierarchy-level2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.org-hierarchy-level2-grid > button { min-width: 0; min-height: 66px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); display: grid; grid-template-columns: 5px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; cursor: pointer; text-align: left; }
.org-hierarchy-level2-grid > button:hover { border-color: #9fb8ae; }
.org-hierarchy-level2-grid > button.active { border-color: var(--green); background: #f0f7f3; box-shadow: 0 0 0 2px rgba(24, 95, 74, .09); }
.org-hierarchy-level2-grid > button > i:first-child { width: 5px; height: 34px; border-radius: 3px; background: var(--org-node-color); }
.org-hierarchy-level2-grid > button > span { min-width: 0; }
.org-hierarchy-level2-grid > button > span strong, .org-hierarchy-level2-grid > button > span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-hierarchy-level2-grid > button > span strong { font-size: 10px; }
.org-hierarchy-level2-grid > button > span small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.org-hierarchy-level2-grid > button > b { font-size: 16px; white-space: nowrap; }
.org-hierarchy-level2-grid > button > b small { color: var(--muted); font-size: 8px; font-weight: 600; }
.org-hierarchy-level2-grid > button > em { color: var(--green); display: flex; align-items: center; gap: 2px; font-size: 8px; font-style: normal; white-space: nowrap; }
.org-hierarchy-level2-grid > button > em svg { width: 12px; height: 12px; }
.employee-list-heading { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.employee-list-heading h3 { margin: 0; }
.employee-list-heading p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }

@media (max-width: 1180px) {
  .org-hierarchy-level1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .org-hierarchy-level1::before, .org-hierarchy-node::before, .org-hierarchy-company::after { display: none; }
}
@media (max-width: 760px) {
  .org-redesign-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-redesign-stat { min-height: 106px; padding: 15px; }
  .org-redesign-stat:nth-child(2) { border-right: 0; }
  .org-redesign-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .org-redesign-stat > em { position: static; margin-top: 8px; display: block; line-height: 1.35; }
  .org-hierarchy-company { width: min(250px, calc(100% - 28px)); margin: 20px auto; }
  .org-hierarchy-level1 { margin: 0 12px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-hierarchy-node { min-height: 130px; }
  .org-hierarchy-level2 { padding: 15px 12px; }
  .org-hierarchy-level2-grid { grid-template-columns: 1fr; }
  .employee-list-heading { align-items: flex-start; }
}
/* 组织架构流程卡色系 */
.org-redesign-stats { border: 0; background: transparent; box-shadow: none; gap: 10px; }
.org-redesign-stat { min-height: 96px; padding: 13px 15px; border: 1px solid; border-radius: 6px; }
.org-redesign-stat { width: 100%; color: var(--ink); font-family: inherit; text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.org-redesign-stat:hover, .org-redesign-stat:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31, 63, 52, .045); outline: 0; }
.org-redesign-stat:last-child { border-right: 1px solid; }
.org-redesign-stat.tone-green { border-color: #dcebe5; background: #f8fcfa; }
.org-redesign-stat.tone-blue { border-color: #dce8f3; background: #f8fbfe; }
.org-redesign-stat.tone-amber { border-color: #f1e4d1; background: #fffcf7; }
.org-redesign-stat.tone-purple { border-color: #eadfec; background: #fdfbfe; }
.org-stat-label { color: var(--ink) !important; font-weight: 800; }
.org-stat-icon { width: 32px !important; height: 32px !important; border-radius: 6px !important; display: grid; place-items: center; background: #eef7f3 !important; }
.tone-blue .org-stat-icon { color: #487fb1; background: #eef5fc !important; }
.tone-amber .org-stat-icon { color: #a66f26; background: #fff5e5 !important; }
.tone-purple .org-stat-icon { color: #8c6a9a; background: #f7f0f9 !important; }
.org-stat-icon > svg { width: 16px; height: 16px; }
.org-redesign-stat > .org-stat-label { font-size: 9px; }
.org-redesign-stat > strong { margin: 0; font-size: 24px; position: absolute; right: 30px; top: 29px; transform: translateY(-50%); text-align: right; }
.org-redesign-stat > em { right: 14px; bottom: 13px; font-size: 7px; }
.org-redesign-stat.tone-green > em { color: #287c64; }
.org-redesign-stat.tone-blue > em { color: #487fb1; }
.org-redesign-stat.tone-amber > em { color: #a66f26; }
.org-redesign-stat.tone-purple > em { color: #8c6a9a; }
.org-stat-arrow { width: 12px; height: 12px; position: absolute; right: 11px; top: 12px; opacity: .58; }
.org-hierarchy-company { color: var(--ink); cursor: pointer; font-family: inherit; }
.org-hierarchy-company:hover { border-color: var(--green); background: #e8f4ee; }
.org-hierarchy-company { width: 250px; min-height: 82px; margin-top: 24px; }
.org-company-name { width: 100px; top: 50%; }
.org-hierarchy-company span strong { font-size: 18px; }
.org-hierarchy-company span small { margin-top: 3px; }
.org-hierarchy-company > b { left: auto; right: 13px; top: 50%; bottom: auto; font-size: 23px; transform: translateY(-50%); }
.org-hierarchy-company > b small { font-size: 8px; }
.org-hierarchy-level1 { gap: 10px; }
.org-hierarchy-node { min-height: 118px; padding: 13px 12px 11px; border: 1px solid #d8e2de; border-radius: 6px; background: #fff; box-shadow: 0 4px 12px rgba(31, 63, 52, .045); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.org-hierarchy-node:nth-child(1) { --org-node-color: #3f6f8f !important; }
.org-hierarchy-node:nth-child(2) { --org-node-color: #2f705e !important; }
.org-hierarchy-node:nth-child(3) { --org-node-color: #68718b !important; }
.org-hierarchy-node:nth-child(4) { --org-node-color: #5c7c72 !important; }
.org-hierarchy-node:nth-child(5) { --org-node-color: #49657f !important; }
.org-hierarchy-node:nth-child(6) { --org-node-color: #766783 !important; }
.org-hierarchy-node::after { left: 12px; right: 12px; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
.org-hierarchy-node:hover, .org-hierarchy-node:focus-visible { border-color: #9eb7ae; background: #fff; box-shadow: 0 8px 18px rgba(31, 63, 52, .09); transform: translateY(-2px); outline: 0; }
.org-hierarchy-node > span { display: flex; align-items: center; gap: 8px; }
.org-hierarchy-node > span > b { min-width: 0; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.org-hierarchy-node > strong { margin-top: 7px; font-size: 22px; text-align: center; }
.org-hierarchy-node > i { height: 4px; margin-top: 8px; background: #e8eeeb; }
.org-hierarchy-node > em { margin-top: 6px; font-size: 7px; }
.org-node-icon { width: 28px; height: 28px; border-radius: 5px; color: var(--org-node-color); background: #f5f8f7; display: grid; place-items: center; flex: 0 0 28px; }
.org-node-icon > svg { width: 14px; height: 14px; }
.level2-position-row.level1-summary .level2-position-node:nth-child(5n + 1) { background: #f8fcfa; border-color: #8fb5a8; }
.level2-position-row.level1-summary .level2-position-node:nth-child(5n + 2) { background: #f8fbfe; border-color: #9bb6cd; }
.level2-position-row.level1-summary .level2-position-node:nth-child(5n + 3) { background: #fffcf7; border-color: #cfb184; }
.level2-position-row.level1-summary .level2-position-node:nth-child(5n + 4) { background: #fdfbfe; border-color: #b9a5c1; }
.level2-position-row.level1-summary .level2-position-node:nth-child(5n + 5) { background: #f8fbfb; border-color: #9bb8b2; }

/* 总经办为固定的上下级关系：总经理在上、总经理助理在下。仅覆盖该部门，
   其他部门继续使用原有的岗位横向布局。 */
.general-office-chart .level2-position-row {
  width: min(180px, 100%);
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.general-office-chart .level2-position-row::before {
  display: none;
}
.general-office-chart .level2-position-row::after {
  left: 50%;
  top: -28px;
  width: 2px;
  height: 28px;
  background: #29384d;
  transform: translateX(-50%);
}
.general-office-chart .level2-position-row .level2-position-node {
  width: 148px;
  min-height: 54px;
  height: 54px;
  aspect-ratio: auto;
  padding: 7px 10px;
  flex: 0 0 54px;
  border-radius: 8px;
  flex-direction: column;
  gap: 3px;
}
.general-office-chart .level2-position-row .level2-position-node::after {
  left: 50%;
  top: -18px;
  width: 2px;
  height: 18px;
  transform: translateX(-50%);
}
.general-office-chart .level2-position-row .level2-position-node:first-child::after {
  display: none;
}
.general-office-chart .level2-position-row .level2-position-node strong {
  font-size: 15px;
  white-space: nowrap;
}
.general-office-chart .level2-position-row .level2-position-node span {
  font-size: 13px;
}
.org-person-scope { min-height: 64px; padding: 10px 16px; border-top: 1px solid #cfe0d9; background: #f0f7f4; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.org-person-scope > svg { width: 18px; height: 18px; color: var(--green); }
.org-person-scope > span strong, .org-person-scope > span small { display: block; }
.org-person-scope > span strong { font-size: 11px; }
.org-person-scope > span small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.org-person-scope .btn svg { width: 12px; height: 12px; }
.org-person-actions { display: flex; align-items: center; gap: 7px; }
.org-distribution { margin: 0 20px 20px; padding-top: 16px; border-top: 1px solid #d5e1dc; }
.org-distribution-head { min-height: 42px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.org-distribution-head > span { display: flex; align-items: center; gap: 10px; }
.org-distribution-head > span > svg { width: 18px; height: 18px; color: var(--green); }
.org-distribution-head span span strong, .org-distribution-head span span small { display: block; }
.org-distribution-head span span strong { font-size: 12px; }
.org-distribution-head span span small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.org-distribution-head > b { font-size: 20px; }
.org-distribution-head > b small { color: var(--muted); font-size: 8px; }
.org-distribution-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
.org-distribution-row { min-height: 42px; padding: 8px 4px; border: 0; border-bottom: 1px solid #e2e9e6; background: transparent; color: var(--ink); font-family: inherit; display: grid; grid-template-columns: minmax(92px, .9fr) minmax(90px, 1.5fr) 72px 14px; align-items: center; gap: 10px; cursor: pointer; text-align: left; }
.org-distribution-row:hover, .org-distribution-row:focus-visible { background: #f0f7f4; outline: 0; }
.org-distribution-row > span { min-width: 0; font-size: 9px; font-weight: 800; overflow-wrap: anywhere; }
.org-distribution-row > i:not(:last-child) { height: 7px; border-radius: 4px; background: #e5ece9; overflow: hidden; }
.org-distribution-row > i:not(:last-child) b { display: block; height: 100%; border-radius: inherit; background: #2fa8cc; }
.org-distribution-row:nth-child(4n + 1) > i:not(:last-child) b { background: #298166; }
.org-distribution-row:nth-child(4n + 3) > i:not(:last-child) b { background: #ef951f; }
.org-distribution-row:nth-child(4n + 4) > i:not(:last-child) b { background: #81558f; }
.org-distribution-row > strong { font-size: 11px; white-space: nowrap; text-align: right; }
.org-distribution-row > strong small { color: var(--muted); font-size: 7px; font-weight: 600; }
.org-distribution-row > svg { width: 13px; height: 13px; color: var(--muted); }

/* 组织架构原位钻取 */
.org-drilldown-head { min-height: 82px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: #f3f8f5; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.org-drilldown-head > div > span { color: var(--green); font-size: 8px; font-weight: 800; }
.org-drilldown-head h3 { margin: 5px 0 0; font-size: 17px; }
.org-drilldown-head p { margin: 6px 0 0; color: var(--muted); font-size: 9px; }
.org-drilldown-head > b { font-size: 26px; white-space: nowrap; }
.org-drilldown-head > b small { margin-left: 3px; color: var(--muted); font-size: 9px; font-weight: 600; }
.org-drilldown-stage { min-height: 0; margin: 20px; }
button.level2-position-node { color: var(--ink); font-family: inherit; cursor: default; }
button.level2-position-node.clickable { cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
button.level2-position-node.clickable:hover, button.level2-position-node.clickable:focus-visible { border-color: var(--green); background: #eef8f3; transform: translateY(-2px); outline: 0; }
.level2-position-node > small { color: var(--green); font-size: 7px; font-weight: 800; line-height: 1; }

@media (max-width: 760px) {
  .org-redesign-stats { gap: 8px; }
  .org-redesign-stat { min-height: 102px; padding: 12px; }
  .org-redesign-stat > strong { margin-top: 6px; position: static; transform: none; text-align: center; }
  .org-drilldown-head { padding: 14px; align-items: flex-start; }
  .org-drilldown-head h3 { font-size: 15px; }
  .org-drilldown-stage { margin: 12px; padding: 18px 10px; overflow-x: auto; }
  .org-distribution { margin: 0 12px 14px; }
  .org-distribution-grid { grid-template-columns: 1fr; }
  .org-distribution-row { grid-template-columns: minmax(82px, 1fr) minmax(64px, 1.2fr) 68px 12px; gap: 7px; }
  .org-person-scope { grid-template-columns: 30px minmax(0, 1fr); }
  .org-person-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; }
  .org-person-actions .btn { width: 100%; }
}

/* Recruitment selected stage tone: the open data area follows its active card. */
.recruit-flow-data-panel[data-stage],
.recruit-demand-combined-panel[data-stage],
.recruit-command-grid[data-stage] {
  --recruit-stage-accent: #287c64;
  --recruit-stage-soft: #eef7f3;
  --recruit-stage-panel: #f8fcfa;
  --recruit-stage-border: #dcebe5;
  --recruit-stage-ink: #285e50;
  --recruit-stage-hover: #f5faf8;
  --recruit-stage-shadow: rgba(40, 124, 100, .045);
}
.recruit-flow-data-panel[data-stage="invite"] {
  --recruit-stage-accent: #487fb1;
  --recruit-stage-soft: #eef5fc;
  --recruit-stage-panel: #f8fbfe;
  --recruit-stage-border: #dce8f3;
  --recruit-stage-ink: #3f6e97;
  --recruit-stage-hover: #f5f9fd;
  --recruit-stage-shadow: rgba(72, 127, 177, .05);
}
.recruit-flow-data-panel[data-stage="interview"] {
  --recruit-stage-accent: #a66f26;
  --recruit-stage-soft: #fff5e5;
  --recruit-stage-panel: #fffcf7;
  --recruit-stage-border: #f1e4d1;
  --recruit-stage-ink: #885a1d;
  --recruit-stage-hover: #fff9f0;
  --recruit-stage-shadow: rgba(166, 111, 38, .05);
}
.recruit-flow-data-panel[data-stage="offer"] {
  --recruit-stage-accent: #8c6a9a;
  --recruit-stage-soft: #f7f0f9;
  --recruit-stage-panel: #fdfbfe;
  --recruit-stage-border: #eadfec;
  --recruit-stage-ink: #765683;
  --recruit-stage-hover: #fbf7fc;
  --recruit-stage-shadow: rgba(140, 106, 154, .05);
}
.recruit-flow-data-panel[data-stage="onboarding"] {
  --recruit-stage-accent: #5c8179;
  --recruit-stage-soft: #edf5f3;
  --recruit-stage-panel: #f8fbfb;
  --recruit-stage-border: #dce8e5;
  --recruit-stage-ink: #526f68;
  --recruit-stage-hover: #f5f9f8;
  --recruit-stage-shadow: rgba(92, 129, 121, .05);
}
.area-a-theme .recruit-flow-data-panel[data-stage] {
  border-color: var(--recruit-stage-border);
  box-shadow: inset 0 4px 0 var(--recruit-stage-accent), 0 8px 22px var(--recruit-stage-shadow);
}
.area-a-theme .panel.recruit-flow-data-panel[data-stage] > .panel-head {
  border-top-color: var(--recruit-stage-accent);
  border-bottom-color: var(--recruit-stage-border);
  background: var(--recruit-stage-panel);
  box-shadow: none;
}
.area-a-theme .panel.recruit-flow-data-panel[data-stage] > .panel-head h2 { color: var(--recruit-stage-ink); }
.area-a-theme .recruit-flow-data-panel[data-stage] .btn.primary {
  border-color: var(--recruit-stage-accent);
  background: var(--recruit-stage-accent);
}
.area-a-theme .recruit-flow-data-panel[data-stage] table th {
  border-bottom-color: var(--recruit-stage-border);
  color: var(--recruit-stage-ink);
  background: var(--recruit-stage-soft);
}
.area-a-theme .recruit-flow-data-panel[data-stage] table td { border-bottom-color: var(--recruit-stage-border); }
.area-a-theme .recruit-flow-data-panel[data-stage] table tbody tr:nth-child(even) td { background: var(--recruit-stage-panel); }
.area-a-theme .recruit-flow-data-panel[data-stage] table tbody tr:hover td { background: var(--recruit-stage-hover); }
.area-a-theme .recruit-flow-data-panel[data-stage] .avatar,
.area-a-theme .recruit-flow-data-panel[data-stage] .tag:not(.red) {
  color: var(--recruit-stage-ink);
  background: var(--recruit-stage-soft);
}
.area-a-theme .recruit-command-grid[data-stage] .panel,
.area-a-theme .recruit-demand-combined-panel[data-stage] {
  border-color: var(--recruit-stage-border);
  background: var(--recruit-stage-panel);
  box-shadow: 0 8px 22px var(--recruit-stage-shadow);
}
.area-a-theme .recruit-command-grid[data-stage] .panel {
  box-shadow: inset 0 4px 0 var(--recruit-stage-accent), 0 8px 22px var(--recruit-stage-shadow);
}
.area-a-theme .recruit-command-grid[data-stage] .panel > .panel-head {
  border-bottom-color: var(--recruit-stage-border);
  background: var(--recruit-stage-panel);
  box-shadow: none;
}
.area-a-theme .recruit-command-grid[data-stage] .panel > .panel-head h2,
.area-a-theme .recruit-demand-combined-panel[data-stage] h2 { color: var(--recruit-stage-ink); }
.area-a-theme .recruit-demand-combined-panel[data-stage] { border-top-color: var(--recruit-stage-accent); }
.area-a-theme .recruit-demand-combined-panel[data-stage] table th {
  border-bottom-color: var(--recruit-stage-border);
  color: var(--recruit-stage-ink);
  background: var(--recruit-stage-soft);
}
.area-a-theme .recruit-demand-combined-panel[data-stage] .btn.primary {
  border-color: var(--recruit-stage-accent);
  background: var(--recruit-stage-accent);
}

/* A area visual theme: color and surface treatment only; layout remains unchanged. */
.main.area-a-theme {
  --line: #e0e9e5;
  --soft: #f7faf8;
  --mint: #edf5f1;
  --shadow: 0 8px 24px rgba(31, 63, 52, .035);
  background: #f5f8f7;
}
.area-a-theme .topbar {
  border-bottom-color: #e0e9e5;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 0 rgba(35, 78, 63, .018);
}
.area-a-theme .page-head h1,
.area-a-theme .panel-head h2 { color: #13251f; }
.area-a-theme .page-head p,
.area-a-theme .panel-head p { color: #6a7973; }
.area-a-theme .panel,
.area-a-theme .stats,
.area-a-theme .org-chart-panel,
.area-a-theme .a-zone-flow-cards {
  border-color: #dce6e2;
  background-color: #ffffff;
  box-shadow: 0 8px 22px rgba(31, 63, 52, .035);
}
.area-a-theme .panel > .panel-head {
  border-bottom-color: #e1ebe7;
  background: #f8fcfa;
  box-shadow: inset 0 3px 0 #7fa99b;
}
.area-a-theme .panel:nth-of-type(4n + 2) > .panel-head {
  background: #f8fbfe;
  box-shadow: inset 0 3px 0 #8babc6;
}
.area-a-theme .panel:nth-of-type(4n + 3) > .panel-head {
  background: #fffcf7;
  box-shadow: inset 0 3px 0 #c9a66f;
}
.area-a-theme .panel:nth-of-type(4n + 4) > .panel-head {
  background: #fdfbfe;
  box-shadow: inset 0 3px 0 #b49fbc;
}
.area-a-theme .stats > .stat:nth-child(4n + 1) {
  --area-a-stat-accent: #287c64;
  border-color: #dcebe5;
  background: #f8fcfa;
}
.area-a-theme .stats > .stat:nth-child(4n + 2) {
  --area-a-stat-accent: #487fb1;
  border-color: #dce8f3;
  background: #f8fbfe;
}
.area-a-theme .stats > .stat:nth-child(4n + 3) {
  --area-a-stat-accent: #a66f26;
  border-color: #f1e4d1;
  background: #fffcf7;
}
.area-a-theme .stats > .stat:nth-child(4n + 4) {
  --area-a-stat-accent: #8c6a9a;
  border-color: #eadfec;
  background: #fdfbfe;
}
.area-a-theme .stats > .stat:nth-child(4n + 1) .value { color: #287c64; }
.area-a-theme .stats > .stat:nth-child(4n + 2) .value { color: #487fb1; }
.area-a-theme .stats > .stat:nth-child(4n + 3) .value { color: #a66f26; }
.area-a-theme .stats > .stat:nth-child(4n + 4) .value { color: #8c6a9a; }
.area-a-theme .stats > .stat.selected {
  box-shadow: inset 0 -3px 0 var(--area-a-stat-accent);
}
.area-a-theme .toolbar,
.area-a-theme .registration-toolbar,
.area-a-theme .talent-pool-toolbar,
.area-a-theme .offboard-ledger-toolbar { background-color: #fdfefd; }
.area-a-theme table th {
  border-bottom-color: #dce7e2;
  color: #35564b;
  background: #f5f9f7;
}
.area-a-theme table tbody tr:nth-child(even) td { background-color: #fcfdfc; }
.area-a-theme table tbody tr:hover td { background-color: #f7faf9; }
.area-a-theme .search,
.area-a-theme input,
.area-a-theme select,
.area-a-theme textarea { border-color: #dce6e2; }
.area-a-theme .search:focus-within,
.area-a-theme input:focus,
.area-a-theme select:focus,
.area-a-theme textarea:focus {
  border-color: #79a593;
  box-shadow: 0 0 0 3px rgba(36, 113, 89, .055);
}
.area-a-theme .tabs button.active,
.area-a-theme .tag:not(.red):not(.warn):not(.blue) {
  color: #285e50;
  background: #eef7f3;
}
.area-a-theme .attendance-module-frame { background: #f5f8f7; }

/* Employee self-service query replaces the former attendance overview target. */
.employee-query-module-host { min-width: 0; margin: -28px -30px -50px; }
.employee-query-module-frame {
  width: 100%;
  height: calc(100vh - 68px);
  min-height: 720px;
  display: block;
  border: 0;
  background: #f3f6f4;
}
.employee-learning-module-host { min-width: 0; margin: -28px -30px -50px; }
.employee-learning-module-frame {
  width: 100%;
  height: calc(100vh - 68px);
  min-height: 720px;
  display: block;
  border: 0;
  background: #f3f6f4;
}

@media (max-width: 760px) {
  .employee-learning-module-host { margin: -20px -14px -35px; }
  .employee-learning-module-frame { height: calc(100vh - 58px); min-height: 640px; }
}

/* A-area selectable modules: the open content follows the selected card tone. */
.area-a-theme [data-follow-tone] {
  --follow-accent: #287c64;
  --follow-soft: #eef7f3;
  --follow-panel: #f8fcfa;
  --follow-border: #dcebe5;
  --follow-ink: #285e50;
  --follow-hover: #f5faf8;
  --follow-shadow: rgba(40, 124, 100, .045);
}
.area-a-theme [data-follow-tone="blue"] {
  --follow-accent: #487fb1;
  --follow-soft: #eef5fc;
  --follow-panel: #f8fbfe;
  --follow-border: #dce8f3;
  --follow-ink: #3f6e97;
  --follow-hover: #f5f9fd;
  --follow-shadow: rgba(72, 127, 177, .05);
}
.area-a-theme [data-follow-tone="amber"] {
  --follow-accent: #a66f26;
  --follow-soft: #fff5e5;
  --follow-panel: #fffcf7;
  --follow-border: #f1e4d1;
  --follow-ink: #885a1d;
  --follow-hover: #fff9f0;
  --follow-shadow: rgba(166, 111, 38, .05);
}
.area-a-theme [data-follow-tone="purple"] {
  --follow-accent: #8c6a9a;
  --follow-soft: #f7f0f9;
  --follow-panel: #fdfbfe;
  --follow-border: #eadfec;
  --follow-ink: #765683;
  --follow-hover: #fbf7fc;
  --follow-shadow: rgba(140, 106, 154, .05);
}
.area-a-theme [data-follow-tone="teal"] {
  --follow-accent: #5c8179;
  --follow-soft: #edf5f3;
  --follow-panel: #f8fbfb;
  --follow-border: #dce8e5;
  --follow-ink: #526f68;
  --follow-hover: #f5f9f8;
  --follow-shadow: rgba(92, 129, 121, .05);
}

.area-a-theme .onboarding-four-stage-page[data-follow-tone] {
  --onboarding-stage-accent: var(--follow-accent);
  --onboarding-flow-accent: var(--follow-accent);
  --onboarding-flow-panel-bg: var(--follow-panel);
}
.area-a-theme .onboarding-four-stage-page[data-follow-tone] .onboarding-subflow-tabs button.active {
  color: var(--follow-ink);
  box-shadow: inset 0 -3px 0 var(--follow-accent);
}
.area-a-theme .onboarding-four-stage-page[data-follow-tone] .onboarding-job-description-focus > div > svg {
  color: var(--follow-accent);
}
.area-a-theme .onboarding-four-stage-page[data-follow-tone] .onboarding-issuance-check input:checked + span {
  background: var(--follow-accent);
}

.area-a-theme [data-follow-tone] :is(
  .talent-pool-analysis-grid > .panel,
  .talent-pool-list-panel,
  .recruit-info-tone-page > .panel,
  .onboarding-tone-page > .panel,
  .contract-management-board > section,
  .employee-change-workspace > .panel,
  .interview-workspace > .panel,
  .offboard-tone-page > .panel:not(.offboard-turnover-panel)
) {
  border-color: var(--follow-border);
  border-radius: 7px;
  box-shadow: 0 8px 22px var(--follow-shadow);
}
.area-a-theme [data-follow-tone][data-follow-tone] :is(
  .talent-pool-analysis-grid > .panel,
  .talent-pool-list-panel,
  .recruit-info-tone-page > .panel,
  .onboarding-tone-page:not(.onboarding-flow-page) > .panel,
  .contract-management-board > section,
  .employee-change-workspace > .panel,
  .interview-workspace > .panel
) {
  box-shadow: inset 0 4px 0 var(--follow-accent), 0 8px 22px var(--follow-shadow);
}
.area-a-theme [data-follow-tone] :is(
  .talent-pool-analysis-grid > .panel,
  .talent-pool-list-panel,
  .recruit-info-tone-page > .panel,
  .onboarding-tone-page > .panel,
  .contract-management-board > section,
  .employee-change-workspace > .panel,
  .interview-workspace > .panel,
  .offboard-tone-page > .panel:not(.offboard-turnover-panel)
) > .panel-head {
  border-radius: 6px 6px 0 0;
  border-top-color: var(--follow-panel);
  border-bottom-color: var(--follow-border);
  background: var(--follow-panel);
  box-shadow: inset 0 4px 0 var(--follow-accent);
}
.area-a-theme [data-follow-tone] :is(
  .talent-pool-analysis-grid > .panel,
  .talent-pool-list-panel,
  .recruit-info-tone-page > .panel,
  .onboarding-tone-page > .panel,
  .contract-management-board > section,
  .employee-change-workspace > .panel,
  .interview-workspace > .panel,
  .offboard-tone-page > .panel:not(.offboard-turnover-panel)
) > .panel-head h2,
.area-a-theme [data-follow-tone] :is(.contract-risk-head, .housing-contract-head) h2 {
  color: var(--follow-ink);
}
.area-a-theme [data-follow-tone] :is(.contract-risk-head, .housing-contract-head) {
  border-radius: 6px 6px 0 0;
  border-bottom-color: var(--follow-border);
  background: var(--follow-panel);
  box-shadow: none;
}
.area-a-theme [data-follow-tone] :is(.contract-risk-head-icon, .housing-contract-icon, .analysis-panel-icon) {
  color: var(--follow-ink);
  background: var(--follow-soft);
}
.area-a-theme [data-follow-tone].onboarding-tone-page.onboarding-flow-page > .panel {
  border-top-color: var(--follow-accent);
}
.area-a-theme [data-follow-tone].onboarding-tone-page.onboarding-flow-page > .panel > .panel-head {
  border-top-color: var(--follow-panel);
  box-shadow: none;
}
.area-a-theme :is(
  [data-follow-tone].talent-tone-page,
  [data-follow-tone].recruit-info-tone-page,
  [data-follow-tone].onboarding-tone-page,
  [data-follow-tone].employee-change-tone-page,
  [data-follow-tone].employee-interview-tone-page,
  [data-follow-tone].offboard-tone-page
) .btn.primary {
  border-color: var(--follow-accent);
  background: var(--follow-accent);
}
.area-a-theme :is(
  [data-follow-tone].talent-tone-page,
  [data-follow-tone].recruit-info-tone-page,
  [data-follow-tone].onboarding-tone-page,
  [data-follow-tone].employee-change-tone-page,
  [data-follow-tone].employee-interview-tone-page,
  [data-follow-tone].offboard-tone-page
) table th {
  border-bottom-color: var(--follow-border);
  color: var(--follow-ink);
  background: var(--follow-soft);
}
.area-a-theme :is(
  [data-follow-tone].talent-tone-page,
  [data-follow-tone].recruit-info-tone-page,
  [data-follow-tone].onboarding-tone-page,
  [data-follow-tone].employee-change-tone-page,
  [data-follow-tone].employee-interview-tone-page,
  [data-follow-tone].offboard-tone-page
) table td { border-bottom-color: var(--follow-border); }
.area-a-theme :is(
  [data-follow-tone].talent-tone-page,
  [data-follow-tone].recruit-info-tone-page,
  [data-follow-tone].onboarding-tone-page,
  [data-follow-tone].employee-change-tone-page,
  [data-follow-tone].employee-interview-tone-page,
  [data-follow-tone].offboard-tone-page
) table tbody tr:nth-child(even) td { background: var(--follow-panel); }
.area-a-theme :is(
  [data-follow-tone].talent-tone-page,
  [data-follow-tone].recruit-info-tone-page,
  [data-follow-tone].onboarding-tone-page,
  [data-follow-tone].employee-change-tone-page,
  [data-follow-tone].employee-interview-tone-page,
  [data-follow-tone].offboard-tone-page
) table tbody tr:hover td { background: var(--follow-hover); }
.area-a-theme :is(
  [data-follow-tone].talent-tone-page,
  [data-follow-tone].recruit-info-tone-page,
  [data-follow-tone].onboarding-tone-page,
  [data-follow-tone].employee-change-tone-page,
  [data-follow-tone].employee-interview-tone-page,
  [data-follow-tone].offboard-tone-page
) :is(.avatar, .tag:not(.red)) {
  color: var(--follow-ink);
  background: var(--follow-soft);
}
.area-a-theme :is(
  [data-follow-tone].talent-tone-page,
  [data-follow-tone].recruit-info-tone-page,
  [data-follow-tone].onboarding-tone-page,
  [data-follow-tone].employee-change-tone-page,
  [data-follow-tone].employee-interview-tone-page,
  [data-follow-tone].offboard-tone-page
) :is(.toolbar, .registration-toolbar, .talent-pool-toolbar, .offboard-ledger-toolbar) {
  background: var(--follow-panel);
}
.area-a-theme :is(
  [data-follow-tone].talent-tone-page,
  [data-follow-tone].recruit-info-tone-page,
  [data-follow-tone].onboarding-tone-page,
  [data-follow-tone].employee-change-tone-page,
  [data-follow-tone].employee-interview-tone-page,
  [data-follow-tone].offboard-tone-page
) :is(.tabs button.active, .registration-filter-tabs button.active, .offboard-type-filters button.active, .offboard-departure-views button.active) {
  border-color: var(--follow-border);
  color: var(--follow-ink);
  background: var(--follow-soft);
}
.area-a-theme .contract-management-tabs > button:nth-child(2).active {
  background: #f8fbfe;
  box-shadow: inset 0 -3px #8babc6;
}
.area-a-theme .offboard-tone-page[data-follow-tone] > .panel:not(.offboard-turnover-panel)::before {
  background: var(--follow-accent);
}
.area-a-theme .offboard-tone-page[data-follow-tone] > .panel:not(.offboard-turnover-panel) > .panel-head {
  border-top-color: var(--follow-panel);
  box-shadow: none;
}
.area-a-theme .offboard-tone-page[data-follow-tone] :is(.offboard-planning-strip, .offboard-hiring-list, .offboard-departure-heading) {
  border-color: var(--follow-border);
  background: var(--follow-panel);
}
.area-a-theme .offboard-tone-page[data-follow-tone] :is(.offboard-module-mark, .offboard-heading-icon, .offboard-total-rate strong) {
  color: var(--follow-ink);
  background: var(--follow-soft);
}

/* The selected roster module colors one shared, complete roster. */
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel {
  border-color: var(--follow-border);
  border-top: 5px solid var(--follow-accent);
  background: #fff;
  box-shadow: 0 10px 24px var(--follow-shadow);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel > .roster-contextbar {
  border-bottom-color: var(--follow-border);
  background: var(--follow-panel);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel > .roster-contextbar .roster-context-title strong {
  color: var(--follow-ink);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel > .roster-contextbar .roster-context-title > span,
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel > .roster-contextbar :is(.tag, .tabs button.active) {
  border-color: var(--follow-border);
  color: var(--follow-ink);
  background: var(--follow-soft);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel > .toolbar {
  border-bottom-color: var(--follow-border);
  background: #fff;
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel > .toolbar :is(.search, select),
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .roster-capture-controls select {
  border-color: var(--follow-border);
  border-radius: 7px;
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel > .toolbar :is(.search, select):focus-within,
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .roster-capture-controls select:focus {
  border-color: var(--follow-accent);
  box-shadow: 0 0 0 3px var(--follow-shadow);
  outline: 0;
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel > .toolbar > .muted {
  color: var(--follow-ink);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel :is(.roster-viewbar, .roster-capturebar) {
  border-color: var(--follow-border);
  background: var(--follow-panel);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel :is(.roster-capture-title > span, .roster-person-capture) {
  border-color: var(--follow-border);
  color: var(--follow-ink);
  background: var(--follow-soft);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel :is(.roster-layout-fixed, .roster-capture-modes button.active, .roster-capture-action:not(:disabled)) {
  border-color: var(--follow-accent);
  color: #fff;
  background: var(--follow-accent);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .roster-capture-modes {
  border-color: var(--follow-border);
  border-radius: 7px;
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .roster-table-wrap {
  border-top: 1px solid var(--follow-border);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster :is(th, td) {
  border-color: var(--follow-border);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster thead .roster-groups th {
  border-bottom-color: var(--follow-accent);
  color: var(--follow-ink);
  background: var(--follow-soft);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster thead .roster-column-head th {
  border-bottom-color: var(--follow-accent);
  color: var(--follow-ink);
  background: var(--follow-panel);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster .roster-column-filter {
  border-color: var(--follow-accent);
  color: var(--follow-ink);
  background: #fff;
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster .roster-column-filter:hover,
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster .roster-column-filter[aria-expanded="true"] {
  background: var(--follow-soft);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster thead .roster-groups th,
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(4),
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(8),
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(14),
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(20),
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(29),
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(32),
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster tr:not(.roster-groups) > :is(th,td):nth-child(38) {
  border-right-color: var(--follow-accent);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster tbody tr:nth-child(even) td,
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster.roster-layout-comfort tbody td:nth-child(n+5):nth-child(-n+8),
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster.roster-layout-comfort tbody td:nth-child(n+15):nth-child(-n+20),
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster.roster-layout-comfort tbody td:nth-child(n+30):nth-child(-n+32),
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster.roster-layout-comfort tbody td:nth-child(n+39):nth-child(-n+40) {
  background: var(--follow-panel);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster tbody tr:hover td,
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .comprehensive-roster tbody tr:hover td:nth-child(-n+3) {
  background: var(--follow-soft) !important;
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .roster-horizontal-scrollbar input::-webkit-slider-thumb {
  background: var(--follow-accent);
}
.area-a-theme .roster-tone-page[data-follow-tone] > .roster-panel .roster-horizontal-scrollbar input::-moz-range-thumb {
  background: var(--follow-accent);
}

/* Employee records use the same compact rounded-card language as the roster overview. */
.area-a-theme .employee-record-stats {
  gap: 12px;
  padding: 12px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(30,54,46,.05);
}
.area-a-theme .employee-record-stats > .stat {
  --employee-record-soft: #eef7f3;
  min-width: 0;
  min-height: 104px;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid #dcebe5;
  border-radius: 7px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.area-a-theme .employee-record-stats > .stat:nth-child(2) { --employee-record-soft: #eef5fc; border-color: #dce8f3; }
.area-a-theme .employee-record-stats > .stat:nth-child(3) { --employee-record-soft: #fff5e5; border-color: #f1e4d1; }
.area-a-theme .employee-record-stats > .stat:nth-child(4) { --employee-record-soft: #f7f0f9; border-color: #eadfec; }
.area-a-theme .employee-record-stats > .stat:hover,
.area-a-theme .employee-record-stats > .stat:focus-visible {
  border-color: var(--area-a-stat-accent);
  box-shadow: 0 0 0 2px var(--employee-record-soft);
  outline: 0;
}
.area-a-theme .employee-record-stats > .stat.selected {
  padding: 13px;
  border: 2px solid var(--area-a-stat-accent);
  box-shadow: inset 0 -3px 0 var(--area-a-stat-accent), 0 0 0 2px var(--employee-record-soft);
}
.area-a-theme .employee-record-stats > .stat .trend,
.area-a-theme .employee-record-stats > .stat .trend.warn {
  right: 12px;
  bottom: 11px;
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--area-a-stat-accent);
  background: var(--employee-record-soft);
  font-size: 8px;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .area-a-theme .employee-record-stats { gap: 10px; padding: 10px; }
  .area-a-theme .employee-record-stats > .stat { min-height: 100px; padding: 11px; }
}

/* Employee archive center: complete onboarding, filing and lifecycle detail. */
.employee-archive-mask { background: rgba(16, 31, 25, .42); }
.drawer.wide.employee-archive-drawer {
  width: min(940px, 96vw);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #17251f;
  background: #f5f8f7;
}
.employee-archive-header {
  min-height: 68px;
  padding: 0 22px;
  flex: 0 0 auto;
  border-bottom: 1px solid #d7e1dd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #fff;
}
.employee-archive-header > div:first-child > span { color: #6c7d76; font-size: 9px; font-weight: 700; }
.employee-archive-header h2 { margin: 3px 0 0; font-size: 17px; letter-spacing: 0; }
.employee-archive-header-actions { display: flex; align-items: center; gap: 8px; }
.employee-archive-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.employee-archive-identity {
  min-height: 130px;
  padding: 20px 24px;
  border-bottom: 1px solid #d7e1dd;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: 26px;
  background: #fff;
}
.employee-archive-person { min-width: 0; display: flex; align-items: center; gap: 15px; }
.employee-archive-person .avatar { width: 58px; height: 58px; flex: 0 0 58px; color: #735338; background: #eadccc; font-size: 15px; }
.employee-archive-person h3 { margin: 0; font-size: 18px; letter-spacing: 0; }
.employee-archive-person p { margin: 5px 0 9px; overflow: hidden; color: #66776f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.employee-archive-person > div:last-child > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.employee-archive-person > div:last-child > div > span { min-height: 22px; padding: 0 7px; border-radius: 4px; display: inline-flex; align-items: center; color: #566961; background: #eef3f1; font-size: 8px; font-weight: 700; }
.employee-archive-status.active { color: #126248 !important; background: #e3f2ec !important; }
.employee-archive-status.probation { color: #2d6da7 !important; background: #e3eef9 !important; }
.employee-archive-status.pending, .employee-archive-status.leaving { color: #9d5d0a !important; background: #fff0d9 !important; }
.employee-archive-status.left { color: #6a7772 !important; background: #e9edeb !important; }
.employee-archive-completeness { min-width: 0; padding-left: 22px; border-left: 1px solid #e1e8e5; }
.employee-archive-completeness > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.employee-archive-completeness strong { color: #17664e; font-size: 20px; }
.employee-archive-completeness span, .employee-archive-completeness small { color: #687a72; font-size: 8px; }
.employee-archive-completeness small { margin-top: 7px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-archive-progress { height: 6px; margin-top: 9px; overflow: hidden; border-radius: 3px; background: #e2eae6; }
.employee-archive-progress i { height: 100%; display: block; border-radius: inherit; background: #24775e; }
.employee-archive-metrics { padding: 14px 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.employee-archive-metrics > div { min-height: 74px; padding: 12px; border: 1px solid #d7e2dd; border-radius: 7px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 9px; background: #fff; }
.employee-archive-metrics svg { width: 28px; height: 28px; padding: 6px; grid-row: 1 / 3; border-radius: 6px; color: #17664e; background: #e5f2ed; }
.employee-archive-metrics span { color: #6a7a73; font-size: 8px; font-weight: 700; }
.employee-archive-metrics strong { color: #20372e; font-size: 12px; text-align: right; }
.employee-archive-metrics small { grid-column: 2 / 4; color: #7a8a83; font-size: 7px; }
.employee-archive-metrics > div:nth-child(2) svg { color: #2d6da7; background: #e7f0f9; }
.employee-archive-metrics > div:nth-child(3) svg { color: #a9630d; background: #fff0d8; }
.employee-archive-metrics > div:nth-child(4) svg { color: #7d548c; background: #f0e6f4; }
.employee-archive-tabs { min-height: 46px; padding: 0 24px; border-top: 1px solid #dce5e1; border-bottom: 1px solid #cbd9d3; display: flex; align-items: stretch; gap: 2px; background: #fff; }
.employee-archive-tabs button { min-width: 120px; padding: 0 13px; border: 0; border-bottom: 3px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #61736b; background: transparent; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.employee-archive-tabs button:hover, .employee-archive-tabs button:focus-visible { color: #17664e; background: #f3f8f6; outline: 0; }
.employee-archive-tabs button.active { border-bottom-color: #17664e; color: #17664e; background: #f3f8f6; }
.employee-archive-tabs svg { width: 14px; height: 14px; }
.employee-archive-tabs span { min-width: 17px; padding: 1px 4px; border-radius: 8px; color: inherit; background: #e6efeb; font-size: 7px; text-align: center; }
.employee-archive-content { padding: 16px 24px 24px; }
.employee-archive-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.employee-archive-section { overflow: hidden; border: 1px solid #d8e2de; border-radius: 7px; background: #fff; }
.employee-archive-section > header { min-height: 54px; padding: 10px 14px; border-bottom: 1px solid #e0e7e4; display: flex; align-items: center; gap: 10px; background: #fafcfb; }
.employee-archive-section > header > svg { width: 30px; height: 30px; padding: 7px; flex: 0 0 30px; border-radius: 6px; color: #17664e; background: #e5f2ed; }
.employee-archive-section > header > div { min-width: 0; }
.employee-archive-section > header h3 { margin: 0; font-size: 11px; }
.employee-archive-section > header p { margin: 3px 0 0; color: #71827a; font-size: 8px; }
.employee-archive-section > header > :is(.employee-archive-pill, .employee-archive-count) { margin-left: auto; }
.employee-archive-contract { grid-column: 1 / -1; }
.employee-archive-kv { margin: 0; padding: 4px 14px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.employee-archive-contract .employee-archive-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.employee-archive-kv > div { min-width: 0; min-height: 44px; border-bottom: 1px solid #edf1ef; display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 8px; }
.employee-archive-kv > div:nth-last-child(-n+2) { border-bottom: 0; }
.employee-archive-kv dt { color: #71827a; font-size: 8px; }
.employee-archive-kv dd { margin: 0; overflow: hidden; color: #20342c; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.employee-archive-kv dd small { margin-left: 6px; color: #798881; font-size: 7px; font-weight: 500; }
.employee-archive-pill, .employee-archive-count { min-height: 23px; padding: 0 8px; border-radius: 4px; display: inline-flex; align-items: center; color: #63736c; background: #edf2f0; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.employee-archive-pill.complete { color: #17664e; background: #e3f2ec; }
.employee-archive-pill.pending { color: #9d5d0a; background: #fff0d9; }
.employee-archive-pill.returned { color: #9d3e3e; background: #f8e5e5; }
.employee-archive-review, .employee-archive-version { min-height: 74px; margin-bottom: 14px; padding: 12px 15px; border: 1px solid #d4e1dc; border-radius: 7px; display: flex; align-items: center; gap: 12px; background: #f7fbf9; }
.employee-archive-review > svg, .employee-archive-version > svg { width: 34px; height: 34px; padding: 8px; flex: 0 0 34px; border-radius: 7px; color: #17664e; background: #e3f2ec; }
.employee-archive-review > div, .employee-archive-version > div { min-width: 0; flex: 1; }
.employee-archive-review strong, .employee-archive-version strong { display: block; font-size: 10px; }
.employee-archive-review span, .employee-archive-version span { margin-top: 4px; display: block; color: #6f8078; font-size: 8px; }
.employee-archive-review > b { color: #17664e; font-size: 18px; }
.employee-archive-review.pending { border-color: #eedbbd; background: #fffbf4; }
.employee-archive-review.pending > svg, .employee-archive-review.pending > b { color: #a9630d; }
.employee-archive-review.pending > svg { background: #fff0d8; }
.employee-archive-review.returned { border-color: #eccdcd; background: #fff8f8; }
.employee-archive-review.returned > svg, .employee-archive-review.returned > b { color: #a34242; }
.employee-archive-review.returned > svg { background: #f8e5e5; }
.employee-archive-checklist, .employee-archive-categories { padding: 4px 14px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.employee-archive-checklist > div, .employee-archive-categories > div { min-width: 0; min-height: 56px; border-bottom: 1px solid #e8eeeb; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.employee-archive-checklist > div > svg, .employee-archive-categories > div > svg { width: 26px; height: 26px; padding: 6px; border-radius: 6px; color: #a56515; background: #fff0d9; }
.employee-archive-checklist > div.complete > svg, .employee-archive-categories > div.complete > svg { color: #17664e; background: #e3f2ec; }
.employee-archive-checklist span, .employee-archive-categories span { min-width: 0; }
.employee-archive-checklist strong, .employee-archive-categories strong { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.employee-archive-checklist small, .employee-archive-categories small { margin-top: 3px; display: block; overflow: hidden; color: #77877f; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.employee-archive-checklist em, .employee-archive-categories em { color: #a56515; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.employee-archive-checklist .complete em, .employee-archive-categories .complete em { color: #17664e; }
.employee-archive-timeline { padding: 8px 16px 14px; }
.employee-archive-timeline article { position: relative; min-height: 78px; padding: 12px 0 12px 52px; }
.employee-archive-timeline article:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 50px; bottom: -12px; width: 1px; background: #d7e2dd; }
.employee-archive-timeline article > svg { position: absolute; left: 0; top: 12px; width: 36px; height: 36px; padding: 9px; border-radius: 50%; color: #17664e; background: #e3f2ec; }
.employee-archive-timeline article header { display: flex; justify-content: space-between; gap: 12px; }
.employee-archive-timeline article strong { font-size: 10px; }
.employee-archive-timeline article time { color: #6f8078; font-size: 8px; }
.employee-archive-timeline article p { margin: 6px 0 4px; color: #40554c; font-size: 9px; }
.employee-archive-timeline article small { color: #819088; font-size: 7px; }
.employee-archive-empty { min-height: 190px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #72827b; text-align: center; }
.employee-archive-empty svg { width: 34px; height: 34px; margin-bottom: 10px; color: #8da098; }
.employee-archive-empty strong { color: #40554c; font-size: 10px; }
.employee-archive-empty span { margin-top: 5px; font-size: 8px; }
.employee-archive-footer { min-height: 58px; padding: 0 22px; flex: 0 0 auto; border-top: 1px solid #d5dfdb; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: #fff; }
.employee-archive-footer > span { display: inline-flex; align-items: center; gap: 7px; color: #6c7d75; font-size: 8px; }
.employee-archive-footer > span svg { width: 14px; height: 14px; color: #17664e; }
.employee-archive-footer > div { display: flex; gap: 8px; }

@media (max-width: 760px) {
  .drawer.wide.employee-archive-drawer { width: 100vw; max-width: 100vw; }
  .employee-archive-header { min-height: 60px; padding: 0 14px; }
  .employee-archive-header-actions .btn { display: none; }
  .employee-archive-identity { padding: 16px; grid-template-columns: 1fr; gap: 16px; }
  .employee-archive-completeness { padding: 14px 0 0; border-top: 1px solid #e1e8e5; border-left: 0; }
  .employee-archive-metrics { padding: 10px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-archive-tabs { padding: 0 8px; overflow-x: auto; }
  .employee-archive-tabs button { min-width: 104px; padding: 0 9px; }
  .employee-archive-content { padding: 12px 14px 18px; }
  .employee-archive-overview { grid-template-columns: 1fr; }
  .employee-archive-contract { grid-column: auto; }
  .employee-archive-kv, .employee-archive-contract .employee-archive-kv { grid-template-columns: 1fr; }
  .employee-archive-kv > div { grid-template-columns: 92px minmax(0, 1fr); }
  .employee-archive-checklist, .employee-archive-categories { grid-template-columns: 1fr; }
  .employee-archive-footer { padding: 0 14px; }
  .employee-archive-footer > span { display: none; }
  .employee-archive-footer > div { width: 100%; justify-content: flex-end; }
}

/* Dashboard option 2: one teal system with a layered attendance summary. */
.dashboard-workbench-v2 .dashboard-stats {
  gap: 0;
  overflow: visible;
  border-color: #cfdfda;
  border-radius: 7px;
  background: #f8fbfa;
  box-shadow: 0 9px 24px rgba(30, 76, 62, .065);
}
.dashboard-workbench-v2 .dashboard-stats .stat {
  min-height: 124px;
  padding: 18px;
  border-right-color: #cfdfda;
  background: #f8fbfa;
}
.dashboard-workbench-v2 .dashboard-stats .stat .label {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #14261f;
  font-size: 11px;
}
.dashboard-workbench-v2 .dashboard-stats .stat .label > span:last-child strong,
.dashboard-workbench-v2 .dashboard-stats .stat .label > span:last-child small { display: block; }
.dashboard-workbench-v2 .dashboard-stats .stat .label > span:last-child strong { font-size: 13px; }
.dashboard-workbench-v2 .dashboard-stats .stat .label > span:last-child small {
  margin-top: 4px;
  color: #70817a;
  font-size: 8px;
  font-weight: 500;
}
.dashboard-workbench-v2 .dashboard-stat-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #246e61;
  background: #deeee9;
}
.dashboard-workbench-v2 .dashboard-stat-icon svg { width: 18px; height: 18px; }
.dashboard-workbench-v2 .dashboard-stats .stat .value {
  margin-top: 14px;
  color: #13251f;
  font-size: 30px;
}
.dashboard-workbench-v2 .dashboard-stats .headcount-stat .trend,
.dashboard-workbench-v2 .dashboard-stats .pending-onboard-stat .trend,
.dashboard-workbench-v2 .dashboard-stats .my-todo-stat .trend {
  border: 0;
  color: #1d6655;
  background: #e4f1ed;
  font-size: 9px;
  font-weight: 800;
}
.dashboard-workbench-v2 .dashboard-stats .headcount-stat .trend:hover,
.dashboard-workbench-v2 .dashboard-stats .pending-onboard-stat .trend:hover,
.dashboard-workbench-v2 .dashboard-stats .my-todo-stat .trend:hover { background: #d9ebe5; }
.dashboard-workbench-v2 .headcount-stat-actions {
  right: 18px;
  bottom: 17px;
  display: flex;
  gap: 6px;
}
.dashboard-workbench-v2 .dashboard-stats .headcount-stat .headcount-stat-actions .trend { min-width: 0; }
.dashboard-workbench-v2 .pending-onboard-trigger,
.dashboard-workbench-v2 .dashboard-todo-trigger { right: 18px; bottom: 18px; }

.dashboard-workbench-v2 .department-attendance-panel {
  border-color: #cfdfda;
  border-radius: 7px;
  box-shadow: 0 9px 24px rgba(30, 76, 62, .065);
}
.dashboard-workbench-v2 .department-attendance-panel > .panel-head {
  min-height: 60px;
  border-bottom-color: #cfdfda;
  background: #fbfdfc;
}
.dashboard-workbench-v2 .department-attendance-panel .panel-head .attendance-period { color: #1d6d5a; }
.dashboard-workbench-v2 .dashboard-panel-link {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #cfdfda;
  border-radius: 5px;
  background: #fff;
}
.dashboard-attendance-layout {
  min-height: 590px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
}
.dashboard-attendance-summary {
  min-width: 0;
  padding: 20px;
  border-right: 1px solid #cfdfda;
  background: #f3f8f6;
}
.dashboard-attendance-summary > strong { font-size: 13px; }
.dashboard-attendance-ring {
  width: 136px;
  height: 136px;
  margin: 20px auto 22px;
  position: relative;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#246e61 0 var(--attendance-rate), #d7e5e0 var(--attendance-rate) 100%);
}
.dashboard-attendance-ring::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: #f3f8f6;
}
.dashboard-attendance-ring > span { position: relative; z-index: 1; text-align: center; }
.dashboard-attendance-ring b,
.dashboard-attendance-ring small { display: block; }
.dashboard-attendance-ring b { color: #163f35; font-size: 23px; }
.dashboard-attendance-ring small { margin-top: 5px; color: #71847c; font-size: 8px; }
.dashboard-attendance-summary-list { display: grid; }
.dashboard-attendance-summary-list > button {
  width: 100%;
  min-height: 48px;
  padding: 0;
  border-bottom: 1px solid #d8e4df;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #4f665e;
  background: transparent;
  font: inherit;
  font-size: 9px;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease;
}
.dashboard-attendance-summary-list > button:not(:disabled):hover { background: rgba(36, 110, 97, .07); box-shadow: inset 3px 0 #70a99a; }
.dashboard-attendance-summary-list > button[aria-expanded="true"] { background: rgba(36, 110, 97, .1); box-shadow: inset 3px 0 #246e61; }
.dashboard-attendance-summary-list > button:focus-visible { position: relative; z-index: 1; outline: 2px solid #246e61; outline-offset: -2px; }
.dashboard-attendance-summary-list > button:disabled { cursor: default; }
.dashboard-attendance-summary-list b { color: #163f35; font-size: 13px; }
.dashboard-workbench-v2 .dashboard-attendance-layout .department-attendance-grid {
  padding: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  overflow: visible;
}
.dashboard-workbench-v2 .department-attendance-card {
  min-height: 108px;
  padding: 10px;
  border-color: #d2e0db;
  background: #fcfefd;
}
.dashboard-workbench-v2 .department-attendance-card:hover {
  border-color: #89b4a6;
  box-shadow: 0 5px 15px rgba(30, 89, 70, .075);
}
.dashboard-workbench-v2 .department-attendance-title { min-height: 31px; }
.dashboard-workbench-v2 .department-attendance-title .attendance-rate {
  color: #246e61;
  background: #e1efeb;
}
.dashboard-workbench-v2 .department-attendance-metrics { margin-top: 7px; }
.dashboard-workbench-v2 .department-attendance-foot { margin-top: 8px; }
.dashboard-workbench-v2 .department-attendance-progress { margin-top: 5px; background: #e8efec; }
.dashboard-workbench-v2 .department-attendance-progress i { background: #246e61; }
.dashboard-workbench-v2 .dashboard-absence-button {
  width: 100%;
  min-width: 0;
  margin: -4px 0;
  padding: 4px;
  border: 1px solid rgba(178, 64, 64, .28);
  border-radius: 4px;
  color: var(--red);
  background: #fff8f8;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dashboard-workbench-v2 .dashboard-absence-button:not(:disabled):hover { border-color: rgba(178, 64, 64, .6); background: #fff1f1; }
.dashboard-workbench-v2 .dashboard-absence-button:not(:disabled):active { transform: translateY(1px); }
.dashboard-workbench-v2 .dashboard-absence-button strong { transition: transform .16s ease; }
.dashboard-workbench-v2 .dashboard-absence-button:focus-visible { outline: 2px solid #246e61; outline-offset: 3px; border-radius: 2px; }
.dashboard-workbench-v2 .dashboard-absence-button:disabled { border-color: transparent; background: transparent; cursor: default; }

.dashboard-absence-mask {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 37, 30, .36);
  backdrop-filter: blur(3px);
}
.dashboard-absence-dialog {
  width: min(760px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid #cbded7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 52, 41, .24);
}
.dashboard-absence-dialog > header,
.dashboard-absence-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dashboard-absence-dialog > header { padding: 22px 24px 18px; border-bottom: 1px solid #dce9e4; background: #f5faf8; }
.dashboard-absence-dialog > header > div > span { color: #287160; font-size: 12px; font-weight: 800; }
.dashboard-absence-dialog > header h2 { margin: 5px 0 2px; color: #132d25; font-size: 22px; }
.dashboard-absence-dialog > header p { margin: 0; color: #687a73; font-size: 13px; }
.dashboard-absence-dialog > main { max-height: calc(100vh - 270px); min-height: 180px; padding: 20px 24px; overflow-x: hidden; overflow-y: auto; }
.dashboard-absence-table-wrap { overflow: hidden; border: 1px solid #d8e5e0; border-radius: 7px; }
.dashboard-absence-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.dashboard-absence-table th:nth-child(1),
.dashboard-absence-table td:nth-child(1) { width: 30%; }
.dashboard-absence-table th:nth-child(2),
.dashboard-absence-table td:nth-child(2) { width: 45%; }
.dashboard-absence-table th:nth-child(3),
.dashboard-absence-table td:nth-child(3) { width: 25%; }
.dashboard-absence-table th,
.dashboard-absence-table td { padding: 13px 14px; border-bottom: 1px solid #e4ece9; overflow-wrap: anywhere; text-align: left; white-space: normal; }
.dashboard-absence-table th { color: #64766f; background: #f8fbfa; font-size: 12px; font-weight: 700; }
.dashboard-absence-table td { color: #263a33; font-size: 13px; }
.dashboard-absence-table tbody tr:last-child td { border-bottom: 0; }
.dashboard-absence-table tbody tr:hover td { background: #f8fbfa; }
.dashboard-absence-status { display: inline-flex; padding: 4px 10px; border-radius: 4px; color: #a94444; background: #f9eaea; font-size: 12px; font-weight: 800; }
.dashboard-absence-status.present { color: #1e6b59; background: #e5f2ed; }
.dashboard-absence-status.on_leave { color: #326f9d; background: #e8f1f8; }
.dashboard-absence-status.pending { color: #95621a; background: #fbf1df; }
.dashboard-absence-empty { min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #6a7b74; text-align: center; }
.dashboard-absence-empty > i { width: 30px; height: 30px; color: #2b7563; }
.dashboard-absence-empty strong { color: #29443b; }
.dashboard-absence-empty span { max-width: 420px; font-size: 12px; }
.dashboard-absence-dialog > footer { padding: 14px 24px; border-top: 1px solid #dce9e4; background: #fbfdfc; }
.dashboard-absence-dialog > footer > span { display: inline-flex; align-items: center; gap: 7px; color: #667971; font-size: 12px; }
.dashboard-absence-dialog > footer > span i { width: 15px; height: 15px; color: #287160; }
@media (max-width: 620px) {
  .dashboard-absence-mask { padding: 12px; }
  .dashboard-absence-dialog > header,
  .dashboard-absence-dialog > main,
  .dashboard-absence-dialog > footer { padding-left: 16px; padding-right: 16px; }
  .dashboard-absence-dialog > footer > span { display: none; }
  .dashboard-absence-dialog > footer { justify-content: flex-end; }
}

@media (max-width: 1450px) {
  .dashboard-attendance-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .dashboard-workbench-v2 .dashboard-attendance-layout .department-attendance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .dashboard-workbench-v2 .headcount-stat-actions { display: grid; }
  .dashboard-attendance-layout { grid-template-columns: 1fr; }
  .dashboard-attendance-summary {
    border-right: 0;
    border-bottom: 1px solid #cfdfda;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 126px minmax(220px, 1fr);
    align-items: center;
    gap: 18px;
  }
  .dashboard-attendance-ring { width: 116px; height: 116px; margin: 0; }
  .dashboard-attendance-summary-list { grid-template-columns: repeat(3, 1fr); }
  .dashboard-attendance-summary-list > button { padding: 0 10px; border-bottom: 0; border-left: 1px solid #d8e4df; }
}
@media (max-width: 760px) {
  .dashboard-workbench-v2 .dashboard-stats .stat { min-height: 132px; }
  .dashboard-attendance-summary { grid-template-columns: 1fr; justify-items: center; }
  .dashboard-attendance-summary-list { width: 100%; }
  .dashboard-workbench-v2 .dashboard-attendance-layout .department-attendance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dashboard-attendance-summary-list { grid-template-columns: 1fr; }
  .dashboard-attendance-summary-list > button { border-left: 0; border-bottom: 1px solid #d8e4df; }
  .dashboard-workbench-v2 .dashboard-attendance-layout .department-attendance-grid { grid-template-columns: 1fr; }
}

/* ===== 工作台整体出勤概览 2026-07-19 ===== */
.dashboard-workbench-v2 .dashboard-attendance-summary {
  display: block;
  padding: 16px;
  background: #f6faf8;
}
.dashboard-attendance-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dashboard-attendance-summary-head strong { color: #172d27; font-size: 15px; font-weight: 900; }
.dashboard-attendance-summary-head small { color: #75877f; font-size: 10px; font-weight: 700; }
.dashboard-workbench-v2 .dashboard-attendance-ring {
  width: 144px;
  height: 144px;
  margin: 24px auto 18px;
}
.dashboard-workbench-v2 .dashboard-attendance-ring::before { inset: 18px; background: #f6faf8; }
.dashboard-workbench-v2 .dashboard-attendance-ring b { font-size: 29px; font-weight: 900; }
.dashboard-workbench-v2 .dashboard-attendance-ring small { margin-top: 5px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.dashboard-workbench-v2 .dashboard-attendance-summary-list > button {
  min-height: 48px;
  font-size: 11px;
  font-weight: 800;
}
.dashboard-attendance-summary-list span { display: flex; align-items: center; gap: 7px; }
.dashboard-attendance-summary-list span i { width: 7px; height: 7px; border-radius: 50%; background: #287a63; }
.dashboard-attendance-summary-list .leave span i { background: #3979a8; }
.dashboard-attendance-summary-list .absent span i { background: #bd4d4d; }
.dashboard-attendance-summary-list .pending span i { background: #c68b32; }
.dashboard-workbench-v2 .dashboard-attendance-summary-list b { font-size: 17px; font-weight: 900; }
.dashboard-attendance-summary-list .absent b { color: #a73d3d; }
.dashboard-attendance-summary-list .pending b { color: #9d681e; }

@media (max-width: 1100px) and (min-width: 761px) {
  .dashboard-workbench-v2 .dashboard-attendance-summary {
    display: grid;
    grid-template-columns: minmax(190px, .8fr) 150px minmax(330px, 1.5fr);
    align-items: center;
    gap: 20px;
  }
  .dashboard-workbench-v2 .dashboard-attendance-summary .dashboard-attendance-ring { margin: 0; }
  .dashboard-workbench-v2 .dashboard-attendance-summary .dashboard-attendance-summary-list { grid-template-columns: repeat(4, 1fr); }
  .dashboard-workbench-v2 .dashboard-attendance-summary .dashboard-attendance-summary-list > button { min-height: 64px; padding: 0 12px; border-bottom: 0; border-left: 1px solid #d8e4df; }
}
@media (max-width: 760px) {
  .dashboard-workbench-v2 .dashboard-attendance-summary { display: block; }
  .dashboard-workbench-v2 .dashboard-attendance-ring { width: 138px; height: 138px; }
}

/* ===== 工作台人员动态双版面 2026-07-19 ===== */
.dashboard-workbench-v2 .people-dynamics-panel {
  border-color: #cfdfda;
  border-radius: 7px;
  box-shadow: 0 9px 24px rgba(30, 76, 62, .065);
  overflow: hidden;
}
.dashboard-workbench-v2 .people-dynamics-head { min-height: 60px; background: #fbfdfc; border-bottom-color: #cfdfda; }
.people-dynamics-head-actions { display: flex; align-items: center; gap: 10px; }
.people-dynamics-layout-switch { height: 32px; display: inline-grid; grid-template-columns: repeat(2, auto); padding: 3px; border: 1px solid #dce7e2; border-radius: 5px; background: #f5f9f7; }
.people-dynamics-layout-switch button { min-width: 76px; height: 24px; padding: 0 9px; border: 0; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #60766e; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.people-dynamics-layout-switch button svg { width: 13px; height: 13px; }
.people-dynamics-layout-switch button.active { color: #174f41; background: #fff; box-shadow: 0 1px 4px rgba(25, 76, 61, .12); }
.people-dynamics-list-wrap { overflow-x: hidden; }
.dashboard-workbench-v2 .people-dynamics-table { width: 100%; min-width: 0; table-layout: fixed; }
.dashboard-workbench-v2 .people-dynamics-table th:nth-child(1) { width: 13%; }
.dashboard-workbench-v2 .people-dynamics-table th:nth-child(2) { width: 16%; }
.dashboard-workbench-v2 .people-dynamics-table th:nth-child(3) { width: 16%; }
.dashboard-workbench-v2 .people-dynamics-table th:nth-child(4) { width: 27%; }
.dashboard-workbench-v2 .people-dynamics-table th:nth-child(5) { width: 15%; }
.dashboard-workbench-v2 .people-dynamics-table th:nth-child(6) { width: 13%; }
.dashboard-workbench-v2 .people-dynamics-table th { height: 38px; padding: 0 18px; color: #496b60; background: #f4f8f6; font-size: 12px; }
.dashboard-workbench-v2 .people-dynamics-table td { height: 62px; padding: 10px 18px; border-bottom-color: #e3ece8; vertical-align: middle; }
.dashboard-workbench-v2 .people-dynamics-table tbody tr:last-child td { border-bottom: 0; }
.dashboard-workbench-v2 .people-dynamics-table tbody tr:hover td { background: #f7faf9; }
.dashboard-workbench-v2 .people-dynamics-table .people-dynamics-department,
.dashboard-workbench-v2 .people-dynamics-table .people-dynamics-position { color: #263d35; font-weight: 800; }
.people-dynamics-change-cell { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.people-dynamics-timeline { padding: 8px 20px 14px; }
.people-dynamics-timeline-item { min-height: 82px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.people-dynamics-timeline-rail { display: flex; flex-direction: column; align-items: center; }
.people-dynamics-timeline-rail > span { width: 30px; height: 30px; margin-top: 14px; border: 1px solid #b9d3c9; border-radius: 50%; display: grid; place-items: center; color: #1e705b; background: #e8f3ef; position: relative; z-index: 1; }
.people-dynamics-timeline-rail > span.transfer { color: #2f6f99; background: #e9f2f8; border-color: #c1d6e5; }
.people-dynamics-timeline-rail > span.leave { color: #a64b43; background: #f9eae8; border-color: #e8c4c0; }
.people-dynamics-timeline-rail > span svg { width: 14px; height: 14px; }
.people-dynamics-timeline-rail > i { width: 1px; flex: 1; min-height: 38px; background: #d6e4df; }
.people-dynamics-timeline-content { min-width: 0; padding: 12px 0 11px; border-bottom: 1px solid #e2ebe7; }
.people-dynamics-timeline-item:last-of-type .people-dynamics-timeline-content { border-bottom: 0; }
.people-dynamics-timeline-content header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.people-dynamics-timeline-content header > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.people-dynamics-timeline-content header strong { font-size: 14px; }
.people-dynamics-timeline-content time { color: #72847d; font-size: 10px; font-weight: 800; white-space: nowrap; }
.people-dynamics-timeline-content p { margin: 6px 0 7px; color: #263d35; font-size: 11px; font-weight: 800; line-height: 1.45; }
.people-dynamics-timeline-content footer { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 16px; color: #7b8a84; font-size: 9px; }
.people-dynamics-timeline-content footer strong { color: #425d53; font-size: 10px; }
.people-dynamics-pagination { min-height: 48px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #e2ebe7; color: #72847d; font-size: 10px; }
.people-dynamics-pagination-controls { display: inline-flex; align-items: center; gap: 10px; }
.people-dynamics-pagination-controls strong { color: #425d53; font-size: 10px; white-space: nowrap; }
.people-dynamics-pagination .icon-btn { width: 28px; height: 28px; min-width: 28px; padding: 0; }
.people-dynamics-pagination .icon-btn svg { width: 14px; height: 14px; }
.people-dynamics-pagination .icon-btn:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 700px) {
  .dashboard-workbench-v2 .people-dynamics-head { min-height: 96px; align-items: flex-start; padding-top: 13px; padding-bottom: 13px; flex-direction: column; }
  .people-dynamics-head-actions { width: 100%; justify-content: space-between; }
  .people-dynamics-layout-switch { flex: 1; max-width: 190px; }
  .people-dynamics-layout-switch button { min-width: 0; }
  .dashboard-workbench-v2 .people-dynamics-table thead { display: none; }
  .dashboard-workbench-v2 .people-dynamics-table,
  .dashboard-workbench-v2 .people-dynamics-table tbody { display: block; }
  .dashboard-workbench-v2 .people-dynamics-table tr { padding: 13px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; border-bottom: 1px solid #e2ebe7; }
  .dashboard-workbench-v2 .people-dynamics-table td { width: auto !important; height: auto; padding: 0; border: 0; display: block; }
  .dashboard-workbench-v2 .people-dynamics-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .dashboard-workbench-v2 .people-dynamics-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .dashboard-workbench-v2 .people-dynamics-table td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .dashboard-workbench-v2 .people-dynamics-table td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .dashboard-workbench-v2 .people-dynamics-table td:nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
  .dashboard-workbench-v2 .people-dynamics-table td:nth-child(6) { grid-column: 2; grid-row: 1; align-self: center; }
  .dashboard-workbench-v2 .people-dynamics-table td:nth-child(2)::before,
  .dashboard-workbench-v2 .people-dynamics-table td:nth-child(3)::before,
  .dashboard-workbench-v2 .people-dynamics-table td:nth-child(5)::before { margin-right: 7px; color: #7b8a84; font-size: 9px; font-weight: 700; }
  .dashboard-workbench-v2 .people-dynamics-table td:nth-child(2)::before { content: "部门"; }
  .dashboard-workbench-v2 .people-dynamics-table td:nth-child(3)::before { content: "岗位"; }
  .dashboard-workbench-v2 .people-dynamics-table td:nth-child(5)::before { content: "当前部门"; }
  .dashboard-workbench-v2 .people-dynamics-table tr .empty-line { grid-column: 1 / -1; grid-row: 1; }
  .people-dynamics-timeline { padding: 5px 14px 10px; }
  .people-dynamics-timeline-item { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
  .people-dynamics-timeline-rail > span { width: 28px; height: 28px; }
  .people-dynamics-pagination { min-height: 70px; padding: 12px 14px; align-items: flex-start; flex-direction: column; gap: 9px; }
  .people-dynamics-pagination-controls { width: 100%; justify-content: space-between; }
}

/* Dashboard attendance: balance department cards without orphan rows. */
.dashboard-workbench-v2 .dashboard-attendance-layout {
  min-height: 0;
  display: block;
}
.dashboard-workbench-v2 .dashboard-attendance-summary {
  min-height: 180px;
  padding: 16px 20px;
  border-right: 0;
  border-bottom: 1px solid #c9dbd4;
  display: grid;
  grid-template-columns: minmax(190px, .7fr) 176px minmax(480px, 2fr);
  align-items: center;
  gap: 22px;
  background: #f4f9f7;
}
.dashboard-workbench-v2 .dashboard-attendance-summary-head {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-right: 1px solid #d3e1dc;
}
.dashboard-workbench-v2 .dashboard-attendance-summary-head strong { color: #172d27; font-size: 17px; font-weight: 900; }
.dashboard-workbench-v2 .dashboard-attendance-ring {
  width: 148px;
  height: 148px;
  margin: 0 auto;
}
.dashboard-workbench-v2 .dashboard-attendance-ring::before { inset: 14px; }
.dashboard-workbench-v2 .dashboard-attendance-ring > span { width: 118px; }
.dashboard-workbench-v2 .dashboard-attendance-ring b { font-size: 30px; line-height: 1.05; }
.dashboard-workbench-v2 .dashboard-attendance-ring small { margin-top: 7px; color: #263a33; font-size: 10px; line-height: 1.3; }
.dashboard-workbench-v2 .dashboard-attendance-summary-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: stretch;
}
.dashboard-workbench-v2 .dashboard-attendance-summary-list > button {
  min-height: 0;
  padding: 0 15px;
  border-bottom: 0;
  border-left: 1px solid #d8e4df;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.dashboard-workbench-v2 .dashboard-attendance-summary-list > button:first-child { border-left: 0; }
.dashboard-workbench-v2 .dashboard-attendance-summary-list > button > span { width: 100%; justify-content: center; }
.dashboard-workbench-v2 .dashboard-attendance-summary-list b {
  width: 100%;
  font-size: 24px;
  text-align: center;
}
.dashboard-workbench-v2 .dashboard-attendance-layout .department-attendance-grid {
  padding: 16px;
  grid-template-columns: repeat(var(--department-columns), minmax(0, 1fr));
  gap: 10px;
}
.dashboard-workbench-v2 .department-attendance-card {
  min-height: 118px;
  padding: 12px;
}

@media (max-width: 1100px) {
  .dashboard-workbench-v2 .dashboard-attendance-summary {
    grid-template-columns: minmax(180px, 1fr) 176px;
  }
  .dashboard-workbench-v2 .dashboard-attendance-summary-list {
    grid-column: 1 / -1;
    min-height: 72px;
  }
  .dashboard-workbench-v2 .dashboard-attendance-layout .department-attendance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .dashboard-workbench-v2 .dashboard-attendance-summary { display: block; }
  .dashboard-workbench-v2 .dashboard-attendance-summary-head { min-height: 58px; border-right: 0; }
  .dashboard-workbench-v2 .dashboard-attendance-ring { margin: 8px auto 16px; }
  .dashboard-workbench-v2 .dashboard-attendance-summary-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-workbench-v2 .dashboard-attendance-summary-list > button { min-height: 62px; border-bottom: 1px solid #d8e4df; }
  .dashboard-workbench-v2 .dashboard-attendance-summary-list > button:nth-child(odd) { border-left: 0; }
  .dashboard-workbench-v2 .dashboard-attendance-layout .department-attendance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dashboard-workbench-v2 .dashboard-attendance-layout .department-attendance-grid { grid-template-columns: 1fr; }
}

/* ===== Employee change compact preview: keep the full ledger in one desktop viewport ===== */
.employee-change-tone-page .employee-change-mode-panel { margin-bottom: 10px; }
.employee-change-tone-page .employee-change-mode-head { min-height: 34px; padding: 0 12px; }
.employee-change-tone-page .employee-change-switcher.a-zone-flow-cards { padding: 8px; gap: 7px; }
.employee-change-tone-page .employee-change-switcher.a-zone-flow-cards .a-zone-flow-card {
  min-height: 72px;
  padding: 9px 10px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
}
.employee-change-tone-page .employee-change-switcher.a-zone-flow-cards .a-zone-flow-card.active { padding: 8px 9px; }
.employee-change-tone-page .employee-change-switcher.a-zone-flow-cards .a-zone-flow-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
}
.employee-change-tone-page .employee-change-switcher.a-zone-flow-cards .a-zone-flow-icon svg { width: 19px; height: 19px; }
.employee-change-tone-page .employee-change-switcher.a-zone-flow-cards .a-zone-flow-copy strong { font-size: 12px; }
.employee-change-tone-page .employee-change-switcher.a-zone-flow-cards .a-zone-flow-copy small { margin-top: 3px; font-size: 8px; }
.employee-change-tone-page .employee-change-switcher.a-zone-flow-cards .a-zone-flow-count b { font-size: 20px; }

.employee-change-detail-panel > .toolbar { min-height: 50px; padding: 7px 12px; }
.employee-change-detail-panel > .toolbar .filters { gap: 6px; }
.employee-change-detail-panel > .toolbar .search { width: 300px; max-width: 300px; }
.employee-change-detail-panel > .toolbar .search input { min-height: 34px; }
.employee-change-detail-panel > .toolbar select,
.employee-change-detail-panel > .toolbar .btn,
.employee-change-detail-panel .employee-change-month { min-height: 34px; }
.employee-change-detail-panel .employee-change-month { padding: 0 8px; gap: 6px; }
.employee-change-detail-panel .employee-change-month input { width: 116px; min-height: 28px; }

.employee-change-compact-table {
  width: 100%;
  min-width: 1080px;
  table-layout: fixed;
}
.employee-change-compact-table th,
.employee-change-compact-table td {
  height: 52px;
  padding: 7px 6px;
  font-size: 9px;
  line-height: 1.35;
}
.employee-change-compact-table thead th {
  height: 38px;
  padding-block: 6px;
  white-space: nowrap;
}
.employee-change-compact-table .change-col-sequence { width: 40px; }
.employee-change-compact-table .change-col-name { width: 84px; }
.employee-change-compact-table .change-col-org { width: 170px; }
.employee-change-compact-table .change-col-type { width: 116px; }
.employee-change-compact-table .change-col-timeline { width: 142px; }
.employee-change-compact-table .change-col-salary-summary { width: 154px; }
.employee-change-compact-table .change-col-action { width: 138px; }
.employee-change-compact-table .change-col-note { width: 148px; }
.employee-change-compact-table td > strong,
.employee-change-compact-table td > small { display: block; }
.employee-change-compact-table td > small { margin-top: 2px; font-size: 7px; }
.employee-change-compact-table .change-org-cell {
  text-align: center;
  vertical-align: middle;
}
.employee-change-compact-table .change-org-cell strong,
.employee-change-compact-table .change-org-cell small {
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-change-compact-table .change-timeline-cell { text-align: center; }
.employee-change-compact-table .change-timeline-cell span { display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.employee-change-compact-table .change-timeline-cell span + span { margin-top: 4px; }
.employee-change-compact-table .change-timeline-cell b {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  display: inline-grid;
  place-items: center;
  color: #47685c;
  background: #edf3f0;
  font-size: 7px;
}
.employee-change-compact-table .money-summary-cell {
  padding: 0 !important;
  color: #375f51;
  background: #fbfdfc;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.employee-change-compact-table .money-summary-cell.after { color: #075f44; background: #f1f8f4; }
.employee-change-compact-table .salary-cell-split {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.employee-change-compact-table .salary-cell-part {
  min-width: 0;
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.employee-change-compact-table .salary-cell-part + .salary-cell-part { border-left: 1px solid #c7d8d1; }
.employee-change-compact-table .money-summary-cell.after .salary-cell-part + .salary-cell-part { border-left-color: #b8d3c4; }
.employee-change-compact-table .salary-cell-part small {
  width: 100%;
  color: #71817a;
  font-size: 7px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.employee-change-compact-table .salary-cell-part strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-change-compact-table .relation-type { padding: 4px 6px; font-size: 8px; }
.employee-change-compact-table .change-type-cell { text-align: center; }
.employee-change-compact-table .relation-type.pending { color: #8a4b08; background: #fff0d8; }
.employee-change-classification-select {
  display: block;
  width: 100%;
  min-height: 26px;
  margin-top: 0;
  padding: 3px 4px;
  border: 1px solid #b9cec1;
  border-radius: 4px;
  color: #234d3e;
  background: #fff;
  font-size: 8px;
}
.salary-not-involved { color: #687b72; font-size: 9px; font-weight: 700; }
.employee-change-compact-table .change-level-transition {
  display: block;
  margin-top: 5px;
  color: #5f7069;
  font-size: 7px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.employee-change-compact-table .change-action-cell .relation-actions { gap: 4px; flex-wrap: wrap; }
.employee-change-compact-table .change-action-cell .tag,
.employee-change-compact-table .change-action-cell .btn { min-height: 24px; padding: 4px 6px; font-size: 8px; }
.employee-change-compact-table .change-note-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .employee-change-compact-table { min-width: 1000px; }
  .employee-change-compact-table .change-col-org { width: 118px; }
  .employee-change-compact-table .change-col-salary-summary { width: 142px; }
  .employee-change-compact-table .change-col-note { width: 120px; }
}

/* Employee-change reference density for every Area A business table. */
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) {
  --area-a-table-head-height: 38px;
  --area-a-table-row-height: 52px;
  --area-a-table-toolbar-height: 50px;
  --area-a-table-control-height: 34px;
}
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap {
  max-width: 100%;
}
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap > table:not(.comprehensive-roster) {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap > table:not(.comprehensive-roster) th {
  height: var(--area-a-table-head-height);
  min-width: 0 !important;
  padding: 6px;
  font-size: 9px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap > table:not(.comprehensive-roster) td {
  height: var(--area-a-table-row-height);
  min-width: 0 !important;
  padding: 7px 6px;
  font-size: 9px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap > table:not(.comprehensive-roster) .person {
  min-width: 0;
  gap: 7px;
}
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap > table:not(.comprehensive-roster) .avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  font-size: 9px;
}
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap > table:not(.comprehensive-roster) .person strong,
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap > table:not(.comprehensive-roster) .person span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap > table:not(.comprehensive-roster) .person strong { font-size: 10px; }
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap > table:not(.comprehensive-roster) .person span,
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap > table:not(.comprehensive-roster) .cell-sub,
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap > table:not(.comprehensive-roster) .cell-note { font-size: 7px; }

:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) :is(.toolbar, .panel-head) {
  min-height: var(--area-a-table-toolbar-height);
  padding: 7px 12px;
}
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .toolbar :is(input, select),
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .toolbar .search {
  min-height: var(--area-a-table-control-height);
  height: var(--area-a-table-control-height);
}
:is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap > table:not(.comprehensive-roster) :is(.btn.compact, .tag) {
  min-height: 24px;
  padding: 4px 6px;
  font-size: 8px;
}

/* Seven-to-ten column business tables fit the visible workspace. */
.employee-record-table th:nth-child(1) { width: 17%; }
.employee-record-table th:nth-child(2) { width: 20%; }
.employee-record-table th:nth-child(3) { width: 14%; }
.employee-record-table th:nth-child(4) { width: 13%; }
.employee-record-table th:nth-child(5) { width: 14%; }
.employee-record-table th:nth-child(6) { width: 12%; }
.employee-record-table th:nth-child(7) { width: 10%; }
.employee-directory-page .table-wrap > table th:nth-child(1) { width: 17%; }
.employee-directory-page .table-wrap > table th:nth-child(2) { width: 11%; }
.employee-directory-page .table-wrap > table th:nth-child(3),
.employee-directory-page .table-wrap > table th:nth-child(4) { width: 17%; }
.employee-directory-page .table-wrap > table th:nth-child(5) { width: 18%; }
.employee-directory-page .table-wrap > table th:nth-child(6) { width: 10%; }
.employee-directory-page .table-wrap > table th:nth-child(7) { width: 10%; }
.talent-pool-table th:nth-child(1) { width: 15%; }
.talent-pool-table th:nth-child(2) { width: 16%; }
.talent-pool-table th:nth-child(3), .talent-pool-table th:nth-child(4) { width: 9%; }
.talent-pool-table th:nth-child(5) { width: 20%; }
.talent-pool-table th:nth-child(6) { width: 11%; }
.talent-pool-table th:nth-child(7) { width: 10%; }
.talent-pool-table th:nth-child(8) { width: 10%; }
.recruit-flow-data-table th:first-child { width: 15%; }
.recruit-flow-data-table th:nth-child(2) { width: 18%; }
.recruit-flow-data-table th:last-child { width: 12%; }
.recruit-candidate-table.registration-table th:nth-child(1) { width: 15%; }
.recruit-candidate-table.registration-table th:nth-child(2) { width: 13%; }
.recruit-candidate-table.registration-table th:nth-child(3) { width: 13%; }
.recruit-candidate-table.registration-table th:nth-child(4),
.recruit-candidate-table.registration-table th:nth-child(5) { width: 18%; }
.recruit-candidate-table.registration-table th:nth-child(6) { width: 12%; }
.recruit-candidate-table.registration-table th:nth-child(7) { width: 11%; }
.recruit-candidate-table.registration-table :is(.candidate-resume-cell, .interview-round-cell) { min-width: 0; }
.recruit-candidate-table.registration-table .interview-round-cell > span,
.recruit-candidate-table.registration-table .cell-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recruit-candidate-table.registration-table .interview-round-cell > div { margin-top: 4px; gap: 3px; }
.recruit-candidate-table.registration-table .round-actions { gap: 3px; flex-wrap: wrap; }
.interview-analysis-table th:nth-child(1) { width: 6%; }
.interview-analysis-table th:nth-child(2) { width: 17%; }
.interview-analysis-table th:nth-child(n+3) { width: auto; }
.offboard-turnover-table th:first-child { width: 16%; }

/* The complete 39-column source roster stays scrollable at a dense readable width. */
.roster-toolbar-summary { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.roster-toolbar-summary button { min-height: 26px; padding: 0 7px; border: 1px solid #dfc386; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; color: #765a22; background: #fff9eb; font: inherit; font-size: 8px; cursor: pointer; }
.roster-toolbar-summary button:hover, .roster-toolbar-summary button:focus-visible { border-color: #b98b35; background: #fff1ce; outline: 0; }
.roster-toolbar-summary button svg { width: 11px; height: 11px; }
.comprehensive-roster {
  width: 3806px;
  min-width: 3806px !important;
}
.comprehensive-roster th, .comprehensive-roster td { padding: 4px 5px; }
.comprehensive-roster thead th { height: 32px; font-size: 9px; }
.comprehensive-roster thead .roster-groups th { height: 30px; padding: 4px 5px; font-size: 9px; }
.comprehensive-roster thead .roster-groups + tr th { top: 30px; }
.comprehensive-roster .roster-column-head th { padding-right: 19px; }
.comprehensive-roster.roster-layout-office thead tr:nth-child(2) th { height: 32px; }
.comprehensive-roster.roster-layout-office tbody td { height: 36px; padding: 4px 5px; font-size: 9px; line-height: 1.25; }
.comprehensive-roster .roster-address { white-space: nowrap; line-height: 1.25; }
.comprehensive-roster thead tr:not(.roster-groups) th:nth-child(2), .comprehensive-roster td:nth-child(2) { left: 44px; }
.comprehensive-roster thead tr:not(.roster-groups) th:nth-child(3), .comprehensive-roster td:nth-child(3) { left: 132px; }
.roster-column-filter { width: 14px; height: 14px; right: 3px; }
.roster-column-filter svg { width: 8px; height: 8px; }
.roster-person-capture { width: 20px; height: 20px; flex-basis: 20px; border-radius: 4px; }
.roster-person-capture svg { width: 10px; height: 10px; }

@media (max-width: 760px) {
  :is(.roster-tone-page, .employee-records-page, .employee-directory-page, .employee-relation-page, .recruit-page, .onboarding-page, .offboard-tone-page) .table-wrap { overflow-x: auto; }
  :is(.employee-record-table, .talent-pool-table, .recruit-flow-data-table, .recruit-candidate-table, .onboarding-progress-table, .onboarding-collection-table, .offboard-turnover-table) { min-width: 760px !important; }
}

/* Keep the talent overview dense enough to expose the records below the fold. */
.talent-pool-stats { margin-bottom: 12px; }
.talent-pool-stats.a-zone-flow-cards { padding: 8px; gap: 8px; }
.talent-pool-stats.a-zone-flow-cards .a-zone-flow-card {
  min-height: 74px;
  padding: 9px 27px 9px 10px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
}
.talent-pool-stats.a-zone-flow-cards .a-zone-flow-card.active { padding: 8px 26px 8px 9px; }
.talent-pool-stats.a-zone-flow-cards .a-zone-flow-icon { width: 38px; height: 38px; min-width: 38px; border-radius: 7px; }
.talent-pool-stats.a-zone-flow-cards .a-zone-flow-icon svg { width: 18px; height: 18px; }
.talent-pool-stats.a-zone-flow-cards .a-zone-flow-copy small { margin-top: 3px; }
.talent-pool-stats.a-zone-flow-cards .a-zone-flow-count b { font-size: 19px; }
.talent-pool-stats.a-zone-flow-cards .a-zone-flow-arrow { width: 12px; height: 12px; }
.talent-pool-analysis-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
}
.talent-track-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.talent-source-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); }
.talent-source-panel .talent-analysis-section { display: flex; flex-direction: column; justify-content: center; }
.talent-pool-analysis-grid .panel-head { min-height: 52px; padding: 0 14px; }
.talent-pool-analysis-grid .panel-head > div > p { margin-top: 2px; font-size: 8px; }
.talent-pool-analysis-grid .analysis-panel-icon { width: 28px; height: 28px; padding: 6px; border-radius: 6px; }
.talent-track-list {
  padding: 10px 14px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: 6px;
}
.talent-track-list > button { min-height: 40px; padding: 7px 9px; gap: 5px; }
.talent-track-list.is-very-sparse { grid-template-columns: 1fr; }
.talent-track-list.is-sparse > button { min-height: 52px; align-content: center; }
.talent-track-list.is-dense > button { min-height: 0; padding: 6px 9px; gap: 4px; }
.talent-track-list.is-crowded { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.talent-track-list.is-crowded > button { padding: 5px 7px; }
.talent-track-list.is-crowded > button strong { font-size: 9px; }
.talent-track-list.is-crowded > button b { font-size: 8px; }
.talent-track-list > button > i { height: 4px; border-radius: 2px; }
.talent-analysis-section { padding: 12px 14px; }
.talent-analysis-section + .talent-analysis-section { padding-top: 12px; }
.talent-analysis-section > strong { margin-bottom: 8px; }
.talent-analysis-tags { gap: 5px; }
.talent-analysis-tags button { min-height: 27px; padding: 0 8px; gap: 6px; font-size: 8px; }
.talent-analysis-tags button::before { width: 5px; height: 5px; }
.talent-experience-grid > div { padding: 8px 6px; }
.talent-experience-grid b { margin-top: 4px; font-size: 16px; }

@media (max-width: 1050px) {
  .talent-pool-analysis-grid { grid-template-columns: 1fr; }
  .base-salary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .talent-track-list, .talent-track-list.is-crowded { grid-template-columns: 1fr; }
  .base-salary-stats .value { font-size: 24px; }
  .base-salary-ledger-head { align-items: stretch; flex-direction: column; }
  .base-salary-ledger-title { align-items: flex-start !important; flex-direction: column; gap: 4px; }
  .base-salary-name-guide { white-space: normal; }
  .base-salary-filters { width: 100%; align-items: stretch; flex-direction: column; }
  .base-salary-filters label, .base-salary-filters .base-salary-search, .base-salary-filters .base-salary-department-filter, .base-salary-filters .base-salary-scope-filter { width: 100%; }
  .base-salary-filters label { display: grid; grid-template-columns: 58px minmax(0, 1fr); }
  .base-salary-page .payroll-head .actions { grid-template-columns: 1fr; }
  .base-salary-ledger .table-wrap { overflow: visible; }
  .base-salary-table, .base-salary-table tbody { width: 100%; min-width: 0; display: block; }
  .base-salary-table colgroup, .base-salary-table thead { display: none; }
  .base-salary-table tbody tr { height: auto; min-height: 0; padding: 15px 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "sequence name" "department department" "base position" "overtime gross" "performance payable" "seniority seniority"; gap: 11px 10px; }
  .base-salary-table tbody tr:last-child { border-bottom: 0; }
  .base-salary-table tbody td { width: auto; height: auto; min-height: 0; padding: 0; border: 0; text-align: center; }
  .base-salary-table .base-salary-sequence { grid-area: sequence; text-align: center; }
  .base-salary-table .base-salary-name { grid-area: name; text-align: center; }
  .base-salary-table .base-salary-department { grid-area: department; padding: 7px 0 0; border-top: 1px dashed var(--line); text-align: center; }
  .base-salary-table .base-salary-department::before { content: attr(data-label); margin-right: 8px; color: var(--muted); font-size: 9px; font-weight: 700; }
  .base-salary-table .base-salary-money { padding-top: 9px; border-top: 1px dashed var(--line); }
  .base-salary-table .base-salary-money::before { content: attr(data-label); margin-bottom: 4px; display: block; color: var(--muted); font-size: 9px; font-weight: 700; }
  .base-salary-table .base-salary-money.base { grid-area: base; }
  .base-salary-table .base-salary-money.position { grid-area: position; }
  .base-salary-table .base-salary-money.overtime { grid-area: overtime; }
  .base-salary-table .base-salary-money.gross { grid-area: gross; }
  .base-salary-table .base-salary-money.performance { grid-area: performance; }
  .base-salary-table .base-salary-money.payable { grid-area: payable; }
  .base-salary-table .base-salary-money.seniority { grid-area: seniority; }
  .drawer.wide.base-salary-profile-drawer { width: 100vw; }
  .base-salary-profile-head, .base-salary-profile-tabs, .base-salary-profile-panel { padding-left: 14px; padding-right: 14px; }
  .base-salary-profile-period { margin-left: 0; }
  .base-salary-profile-period input { width: 100%; }
  .base-salary-profile-tabs { gap: 16px; }
  .base-salary-profile-fields { grid-template-columns: 1fr; gap: 13px; }
  .base-salary-profile-fields.employee, .base-salary-profile-fields.employee.attendance { grid-template-columns: 1fr; }
  .base-salary-ledger-meta { align-items: flex-start !important; flex-direction: column; gap: 3px; }
  .base-salary-ledger-meta b { padding-left: 0; border-left: 0; }
  .base-salary-manual-change-fields { grid-template-columns: 1fr; }
  .base-salary-manual-change-fields .wide { grid-column: auto; }
  .base-salary-profile-fields .wide { grid-column: auto; }
  .base-salary-profile-drawer .drawer-actions { padding: 12px 14px; }
}
.pay-cashout-mark{display:block;color:#b34949;font-size:11px;font-weight:700;line-height:1.35;margin-top:2px}
/* Roster governance and former employee archive */
.roster-governance-page,.former-records-page{display:grid;gap:12px}.roster-governance-principle,.roster-archive-summary{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid #b8d9c4;background:#f4fbf6;border-radius:6px;color:#174f2f}.roster-governance-principle>svg,.roster-archive-summary>span{width:32px;height:32px;display:grid;place-items:center;color:#168447}.roster-governance-principle div,.roster-archive-summary div{display:grid;gap:2px}.roster-governance-principle span,.roster-archive-summary p{margin:0;color:#4e6557;font-size:13px}.roster-governance-tabs{display:flex;gap:2px;border-bottom:1px solid #dce2e0}.roster-governance-tabs button{display:flex;align-items:center;gap:6px;padding:9px 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:#59645f;cursor:pointer}.roster-governance-tabs button.active{border-bottom-color:#168447;color:#126d3d;font-weight:700}.roster-governance-tabs svg{width:15px}.roster-governance-tabs b{min-width:19px;padding:1px 5px;border-radius:8px;background:#e9eeec;font-size:11px}.roster-import-panel,.roster-audit-panel{padding:14px}.roster-import-intro{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;align-items:center;gap:12px}.roster-import-intro>span{width:36px;height:36px;display:grid;place-items:center;border-radius:6px;background:#e9f6ee;color:#168447}.roster-import-intro h2{margin:0;font-size:16px}.roster-import-intro p{margin:3px 0 0;color:#66716c;font-size:12px}.roster-import-intro>.btn{white-space:nowrap}.roster-import-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:10px;margin-top:14px;padding:12px;background:#f7f9f8;border:1px solid #e1e6e3}.roster-import-step{display:grid;grid-template-columns:24px 1fr;gap:1px 8px;align-items:center;padding:9px;border:1px solid transparent;border-radius:6px;background:transparent;text-align:left;color:#26352d;cursor:pointer}.roster-import-step:hover,.roster-import-step:focus-visible{border-color:#8bc9a5;background:#eff9f2;outline:none}.roster-import-step b{grid-row:1/3;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#168447;color:#fff;font-size:12px}.roster-import-step strong{font-size:13px}.roster-import-step span{font-size:11px;color:#77817c}.roster-import-flow>svg{width:16px;align-self:center;color:#a2aaa6}.roster-import-preview header{display:flex;justify-content:space-between;align-items:center}.roster-import-preview h2{margin:2px 0 0;font-size:15px}.roster-import-stats,.roster-reconciliation-stats{display:grid;grid-template-columns:repeat(6,minmax(90px,1fr));gap:8px;margin:12px 0}.roster-import-stats>div,.roster-reconciliation-stats>div{padding:9px 11px;border:1px solid #dfe5e2;background:#fff}.roster-import-stats span,.roster-reconciliation-stats span{display:block;font-size:11px;color:#727d78}.roster-import-stats strong,.roster-reconciliation-stats strong{font-size:19px;color:#25312b}.roster-import-stats .warn strong{color:#b35a10}.roster-reconciliation-stats{grid-template-columns:repeat(4,minmax(100px,1fr));margin:0 0 10px}.roster-reconciliation-list article{display:grid;grid-template-columns:34px minmax(220px,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid #e5e9e7}.roster-reconciliation-list article:first-child{border-top:0}.roster-reconciliation-icon{width:32px;height:32px;display:grid;place-items:center;background:#eef5f1;color:#287650;border-radius:5px}.roster-reconciliation-icon svg{width:16px}.roster-reconciliation-list article>div:nth-child(2){display:grid;gap:2px}.roster-reconciliation-list article span,.roster-reconciliation-list article small{font-size:12px;color:#6b7671}.roster-reconciliation-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.former-records-page .employee-record-panel{margin:0}.former-records-page .employee-record-table th,.former-records-page .employee-record-table td,.roster-governance-page table th,.roster-governance-page table td{padding:8px 10px;font-size:12px}.roster-governance-page .btn.compact{min-height:28px;padding:4px 8px;font-size:12px}
.roster-audit-row{cursor:pointer}.roster-audit-row:hover{background:#f4faf6}.roster-source-drawer{max-width:960px}.roster-source-summary{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0;border-bottom:1px solid #e2e9e4;color:#365247;font-size:13px}.roster-source-summary span{padding:5px 9px;background:#eef7f1;border:1px solid #d5e9da}.roster-source-row-meta{display:flex;gap:10px;align-items:baseline;padding:12px 0 8px}.roster-source-row-meta span{color:#66756d;font-size:12px}.roster-source-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #e5ebe7}.roster-source-fields>div{display:grid;grid-template-columns:minmax(120px,38%) minmax(0,1fr);gap:8px;padding:8px 10px;border-right:1px solid #e5ebe7;border-bottom:1px solid #e5ebe7}.roster-source-fields small{color:#718078}.roster-source-fields strong{font-weight:600;overflow-wrap:anywhere}.roster-source-table{max-height:55vh;overflow:auto}
.roster-password-field{display:grid;gap:3px;font-size:11px;color:#66716c}.roster-password-field input{width:130px;height:30px;padding:4px 8px;border:1px solid #cfd8d3;border-radius:4px;background:#fff;color:#17231d}
.roster-structure-section{margin:-8px 0 16px;padding:0 14px 14px;border:1px solid #dfe7e3;border-top:4px solid #287c64;background:#fff}.roster-structure-section>header{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px}.roster-structure-section>header>div{display:flex;align-items:center;gap:10px}.roster-structure-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:5px;background:#edf7f2;color:#287c64}.roster-structure-icon svg{width:16px;height:16px}.roster-structure-section h2{margin:0;color:#1d2b25;font-size:15px;letter-spacing:0}.roster-structure-section header p{margin:2px 0 0;color:#718078;font-size:10px}.roster-structure-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #e8ecea;border-left:1px solid #e8ecea}.roster-structure-grid article{--structure-accent:#287c64;min-width:0;padding:11px 12px 12px;border-right:1px solid #e8ecea;border-bottom:1px solid #e8ecea}.roster-structure-grid article:nth-child(2){--structure-accent:#487fb1}.roster-structure-grid article:nth-child(3){--structure-accent:#a66f26}.roster-structure-grid article:nth-child(4){--structure-accent:#8c6a9a}.roster-structure-grid article:nth-child(5){--structure-accent:#397f8b}.roster-structure-grid article:nth-child(6){--structure-accent:#b35c55}.roster-structure-grid article:nth-child(7){--structure-accent:#667b45}.roster-structure-grid h3{margin:0 0 9px;color:var(--structure-accent);font-size:11px;letter-spacing:0}.roster-structure-row{display:grid;gap:3px;margin-top:7px}.roster-structure-row>div{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px}.roster-structure-row span{min-width:0;overflow:hidden;color:#4e5e56;text-overflow:ellipsis;white-space:nowrap}.roster-structure-row strong{flex:0 0 auto;color:#25332c;font-size:10px}.roster-structure-row>i{height:3px;overflow:hidden;background:#edf0ee}.roster-structure-row>i>b{height:100%;display:block;background:var(--structure-accent)}
@media(max-width:1100px){.roster-structure-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.roster-import-flow{grid-template-columns:1fr}.roster-import-flow>svg{display:none}.roster-import-stats,.roster-reconciliation-stats{grid-template-columns:repeat(2,1fr)}.roster-reconciliation-list article{grid-template-columns:30px 1fr}.roster-reconciliation-actions{grid-column:1/-1;justify-content:flex-start}.roster-governance-tabs{overflow-x:auto}.roster-governance-tabs button{white-space:nowrap}.roster-import-intro{grid-template-columns:32px 1fr}.roster-import-intro>label{grid-column:1/-1;justify-content:center}.roster-source-fields{grid-template-columns:1fr}.roster-source-drawer{width:100%;max-width:none}.roster-structure-section{padding-inline:10px}.roster-structure-grid{grid-template-columns:1fr}}
.roster-import-stats>div[role="button"]{cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}.roster-import-stats>div[role="button"]:hover,.roster-import-stats>div[role="button"]:focus-visible,.roster-import-stats>div[role="button"].active{border-color:#168447;background:#f1faf4;box-shadow:0 0 0 2px rgba(22,132,71,.08);outline:none}

/* Account management */
.account-management-page{display:grid;gap:16px}.account-management-page .page-head{margin-bottom:0}.account-summary-strip{min-height:72px;padding:0 18px;border:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(100px,140px)) minmax(260px,1fr);align-items:center;background:#fff}.account-summary-strip>div{min-width:0;padding:0 18px;border-right:1px solid var(--line)}.account-summary-strip>div:first-child{padding-left:0}.account-summary-strip span,.account-summary-strip strong{display:block}.account-summary-strip span{color:var(--muted);font-size:10px}.account-summary-strip strong{margin-top:3px;font-size:21px}.account-summary-strip p{margin:0;display:flex;justify-content:flex-end;align-items:center;gap:7px;color:var(--green);font-size:11px;font-weight:700}.account-summary-strip p svg{width:16px;height:16px}.account-table-panel{overflow:hidden}.account-toolbar .filters{min-width:0}.account-table{min-width:1040px}.account-table th:nth-child(1){width:13%}.account-table th:nth-child(2){width:19%}.account-table th:nth-child(3){width:12%}.account-table th:nth-child(4){width:25%}.account-table th:nth-child(5){width:9%}.account-table th:nth-child(6){width:15%}.account-table th:nth-child(7){width:7%}.account-table td>strong,.account-table td>small,.account-employee strong,.account-employee span{display:block}.account-table td>small,.account-employee span{margin-top:3px;color:var(--muted);font-size:9px;line-height:1.4}.account-role,.account-status{width:fit-content;min-height:24px;padding:0 8px;border-radius:4px;display:inline-flex;align-items:center;color:#385f8a;background:#eaf1f8;font-size:10px;font-weight:700}.account-role.admin{color:#7a4e16;background:#fff0d8}.account-role.hr{color:#185f4a;background:#e1f0e8}.account-role.employee{color:#5f5c72;background:#efedf4}.account-status{gap:6px;color:#25684f;background:transparent}.account-status i{width:7px;height:7px;border-radius:50%;background:#32a56f}.account-status.disabled{color:#8a5550}.account-status.disabled i{background:#c8675f}.account-row-actions{display:flex;gap:5px}.account-row-actions .icon-btn{width:30px;height:30px}.account-editor{width:min(520px,94vw)}.account-editor select{width:100%}.account-editor .form-row small{margin-top:6px;display:block;color:var(--muted);font-size:9px;line-height:1.5}.account-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.account-permission-note{margin:4px 0 14px;padding:12px;border:1px solid #cfe0d8;display:flex;align-items:flex-start;gap:9px;color:#315849;background:#f4f9f6}.account-permission-note svg{width:17px;height:17px;flex:0 0 auto}.account-permission-note span,.account-permission-note strong{display:block}.account-permission-note span{font-size:10px;line-height:1.5}.account-permission-note strong{margin-bottom:2px;font-size:11px}.account-password-mask{position:fixed;inset:0;z-index:70;padding:24px;display:grid;place-items:center;background:rgba(12,24,19,.38)}.account-password-dialog{width:min(460px,100%);border:1px solid var(--line);background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.18)}.account-password-dialog>header{min-height:72px;padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.account-password-dialog>header span{color:var(--muted);font-size:9px}.account-password-dialog>header h2{margin:3px 0 0;font-size:16px}.account-password-dialog>main{padding:20px 18px 8px}.account-password-dialog>main small{margin-top:6px;display:block;color:var(--muted);font-size:9px;line-height:1.5}.account-password-dialog>footer{padding:14px 18px 18px;display:flex;justify-content:flex-end;gap:8px}
@media(max-width:760px){.account-summary-strip{padding:12px;grid-template-columns:repeat(3,1fr);gap:10px}.account-summary-strip>div{padding:0 8px}.account-summary-strip p{grid-column:1/-1;justify-content:flex-start}.account-toolbar,.account-toolbar .filters{align-items:stretch;flex-direction:column}.account-toolbar .search,.account-toolbar select{width:100%;max-width:none}.account-form-grid{grid-template-columns:1fr;gap:0}}