:root {
  color-scheme: light;
  --navy:#071f55;
  --blue:#087af0;
  --cyan:#1bc8d8;
  --green:#76d13f;
  --ink:#12213c;
  --muted:#6a7891;
  --line:#dce5f2;
  --surface:#ffffff;
  --canvas:#f3f7fb;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--canvas); color:var(--ink); letter-spacing:0; }
button,a { font:inherit; }
.login-page { display:grid; place-items:center; padding:24px; background:linear-gradient(155deg,#071f55 0%,#0d3e8e 56%,#0a9db0 100%); }
.login-shell { width:min(100%,420px); }
.login-card { display:grid; justify-items:center; gap:12px; padding:34px 28px; border:1px solid rgba(255,255,255,.42); border-radius:8px; background:rgba(255,255,255,.96); box-shadow:0 24px 70px rgba(2,19,56,.32); text-align:center; }
.login-card img { width:76px; height:76px; border-radius:8px; }
.login-card > span { color:var(--blue); font-size:12px; font-weight:800; }
.login-card h1 { margin:0; font-size:32px; }
.login-card p { margin:0 0 8px; color:var(--muted); font-size:14px; line-height:1.7; }
.login-card small { color:var(--muted); font-size:11px; line-height:1.55; }
.primary-action { width:100%; padding:13px 16px; border-radius:8px; background:linear-gradient(100deg,var(--blue),var(--cyan),var(--green)); color:#fff; font-weight:900; text-decoration:none; }
.login-error { width:100%; padding:10px; border:1px solid #ffc1cb; border-radius:6px; background:#fff1f4; color:#b31f3b; font-size:12px; text-align:left; }
.app-header { padding:18px max(18px,calc((100vw - 1120px)/2)); background:linear-gradient(115deg,#071f55,#0b3f8f 62%,#087e91); color:#fff; }
.brand-line { display:flex; align-items:center; gap:9px; }
.brand-line img { width:32px; height:32px; border-radius:7px; }
.brand-line strong { font-size:17px; }
.brand-actions { display:flex; align-items:center; gap:16px; margin-left:auto; }
.brand-line a { color:rgba(255,255,255,.82); font-size:12px; text-decoration:none; }
.brand-line a:hover { color:#fff; }
.identity { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:14px; margin-top:24px; }
.avatar { width:58px; height:58px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(255,255,255,.18); font-size:22px; font-weight:900; }
.identity small,.identity p { color:rgba(255,255,255,.72); }
.identity h1 { margin:3px 0; font-size:24px; }
.identity p { margin:0; font-size:12px; }
.identity > b { padding:6px 9px; border-radius:6px; background:rgba(117,209,63,.2); color:#c8ff9d; font-size:11px; }
.employee-shell { width:min(1120px,calc(100% - 36px)); margin:0 auto; padding:18px 0 38px; }
.metric-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.metric-strip article,.content-panel { border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 8px 26px rgba(13,42,84,.06); }
.metric-strip article { min-height:92px; display:grid; grid-template-columns:auto 1fr; align-content:center; gap:2px 5px; padding:14px; }
.metric-strip span { grid-column:1/-1; color:var(--muted); font-size:11px; font-weight:700; }
.metric-strip strong { font-size:28px; line-height:1; }
.metric-strip small { align-self:end; color:var(--muted); }
.content-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:12px; margin-top:12px; }
.content-panel { min-width:0; padding:16px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.section-head span { color:var(--cyan); font-size:10px; font-weight:900; }
.section-head h2 { margin:3px 0 0; font-size:18px; }
.section-head > b { color:var(--muted); font-size:11px; }
ul,dl { margin:0; padding:0; list-style:none; }
.task-list,.attendance-list { display:grid; }
.task-item { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); }
.task-item:last-child,.attendance-list li:last-child { border-bottom:0; }
.risk-dot { width:8px; height:8px; border-radius:50%; background:var(--cyan); }
.risk-dot.high { background:#ff4e7a; }
.risk-dot.medium { background:#ffad31; }
.task-item div { min-width:0; display:grid; gap:4px; }
.task-item strong,.task-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-item strong { font-size:13px; }
.task-item small { color:var(--muted); font-size:10px; }
.task-item > b { padding:4px 6px; border-radius:5px; background:#edf7ff; color:#1670b7; font-size:10px; }
.profile-panel dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-top:13px; }
.profile-panel dl div { padding:12px; border-radius:7px; background:#f7f9fc; }
.profile-panel dt { color:var(--muted); font-size:10px; }
.profile-panel dd { margin:6px 0 0; font-size:13px; font-weight:800; }
.attendance-list li { display:grid; grid-template-columns:88px minmax(0,1fr) auto; align-items:center; gap:8px; padding:11px 0; border-bottom:1px solid var(--line); font-size:12px; }
.attendance-list time { color:var(--muted); }
.attendance-list b { font-size:10px; }
.attendance-list .ok { color:#238c57; }
.attendance-list .warn { color:#d66a18; }
.salary-value { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:5px; padding-top:16px; }
.salary-value span { grid-column:1/-1; color:var(--muted); font-size:11px; }
.salary-value strong { font-size:27px; }
.salary-value button { border:0; background:transparent; color:var(--blue); font-size:11px; font-weight:800; cursor:pointer; }
.salary-panel p { color:var(--muted); font-size:11px; }
.mapping-note { display:block; margin-top:16px; padding:13px; border-radius:7px; background:#f7f9fc; color:var(--muted); font-size:12px; }
.empty-row { padding:20px 0; color:var(--muted); font-size:12px; text-align:center; }
.data-note { margin:14px 2px 0; color:var(--muted); font-size:10px; line-height:1.6; }
.admin-page { background:#edf3f9; }
.admin-header { padding:18px 0 28px; background:linear-gradient(118deg,#071f55 0%,#075fae 60%,#078c83 100%); color:#fff; }
.admin-header-inner,.admin-shell { width:min(1360px,calc(100% - 40px)); margin:0 auto; }
.admin-title { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-top:34px; }
.admin-title span { color:#8ff5dc; font-size:11px; font-weight:900; }
.admin-title h1 { margin:5px 0; font-size:30px; }
.admin-title p { margin:0; color:rgba(255,255,255,.72); font-size:13px; }
.admin-title > b { padding:8px 11px; border:1px solid rgba(255,255,255,.25); border-radius:7px; background:rgba(255,255,255,.1); font-size:12px; }
.admin-shell { padding:18px 0 42px; }
.admin-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.admin-metrics article { min-height:104px; display:grid; grid-template-columns:auto 1fr; align-content:center; gap:4px 6px; padding:16px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 8px 26px rgba(13,42,84,.06); }
.admin-metrics span { grid-column:1/-1; color:var(--muted); font-size:11px; font-weight:800; }
.admin-metrics strong { font-size:30px; line-height:1.05; }
.admin-metrics small { align-self:end; color:var(--muted); font-size:11px; }
.admin-metrics .sync-metric strong { color:#178659; font-size:20px; }
.admin-grid { display:grid; grid-template-columns:320px minmax(0,1fr); gap:12px; margin-top:12px; align-items:start; }
.department-list { max-height:630px; overflow:auto; }
.department-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }
.department-list li:last-child { border-bottom:0; }
.department-list div { min-width:0; display:grid; gap:4px; }
.department-list strong,.department-list small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.department-list strong { font-size:13px; }
.department-list small { color:var(--muted); font-size:9px; }
.department-list span { color:var(--muted); font-size:10px; }
.department-list b { grid-column:2; color:var(--blue); font-size:12px; }
.employee-search { width:min(300px,45%); display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line); border-radius:7px; background:#f7f9fc; }
.employee-search span { color:var(--muted); }
.employee-search input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:11px; }
.admin-table-wrap { overflow:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:12px; }
.admin-table th,.admin-table td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.admin-table th { position:sticky; top:0; background:#fff; color:var(--muted); font-size:10px; z-index:1; }
.admin-table td:first-child { display:grid; gap:3px; min-width:130px; }
.admin-table td:first-child small { color:var(--muted); font-size:9px; }
.status-pill { display:inline-flex; padding:4px 7px; border-radius:5px; background:#e9f8ef; color:#187549; font-size:10px; font-weight:800; }
.access-denied { width:min(100%,460px); margin:auto; }
@media (max-width:720px) {
  .app-header { padding:16px 18px 28px; }
  .employee-shell { width:100%; margin-top:-12px; padding:0 12px 86px; }
  .metric-strip { grid-template-columns:repeat(4,112px); gap:8px; overflow-x:auto; padding:0 0 4px; scrollbar-width:none; }
  .metric-strip article { min-height:84px; }
  .content-grid { grid-template-columns:1fr; }
  .tasks-panel { order:1; }
  .attendance-panel { order:2; }
  .profile-panel { order:3; }
  .salary-panel { order:4; }
  .identity h1 { font-size:21px; }
  .profile-panel dl { grid-template-columns:1fr 1fr; }
  .admin-header-inner,.admin-shell { width:100%; padding-left:12px; padding-right:12px; }
  .admin-title { align-items:start; flex-direction:column; margin-top:24px; }
  .admin-title h1 { font-size:25px; }
  .admin-metrics { grid-template-columns:repeat(4,140px); overflow-x:auto; }
  .admin-grid { grid-template-columns:1fr; }
  .employee-search { width:52%; }
}