/* ==========================================================================
 * 劳务外包任务与考核记录系统 —— 样式
 * 配色统一在 :root 变量里；深色主题变量在文件末尾。
 * ========================================================================== */

:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e5eaf1;
  --text: #0f1b2d;
  --text-2: #4a5a70;
  --text-3: #8494a8;
  --brand: #17395c;
  --brand-dark: #0f2942;
  --brand-soft: #eef3f9;
  --ok: #16704a;
  --ok-soft: #ecf7f1;
  --warn: #9a6700;
  --warn-soft: #fdf6e7;
  --danger: #b42318;
  --danger-soft: #fdf1f0;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC",
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 700; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1rem; }
p { margin: 0; }
.muted { color: var(--text-3); font-size: .86rem; }
.hint { color: var(--text-3); font-size: .8rem; margin-top: 6px; }
.error { color: var(--danger); background: var(--danger-soft); border: 1px solid #f3caca; border-radius: var(--radius-sm); padding: 8px 12px; font-size: .85rem; margin-top: 10px; }

/* ------------------------------- 表单控件 ------------------------------- */
input, select, textarea, button { font-family: inherit; font-size: .92rem; }
input[type="text"], input[type="password"], input[type="search"], input[type="date"], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; background: var(--surface); }
input::placeholder { color: #a8b3c2; }
.inline-label { font-size: .82rem; color: var(--text-3); align-self: center; white-space: nowrap; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }

.primary-btn, .secondary-btn, .ghost-btn, .danger-btn, .file-btn {
  border-radius: 10px; padding: 10px 16px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: transform .12s, background .15s, border-color .15s;
}
.primary-btn { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(29, 78, 216, .22); }
.primary-btn:hover { background: var(--brand-dark); }
.secondary-btn { background: var(--surface); border-color: var(--border); color: var(--text); }
.secondary-btn:hover { background: var(--surface-2); }
.ghost-btn { background: transparent; border-color: var(--border); color: var(--text-2); padding: 7px 12px; font-size: .85rem; }
.danger-btn { background: var(--surface); border-color: #f0cccc; color: var(--danger); }
.file-btn { display: inline-flex; align-items: center; background: var(--surface); border-color: var(--border); color: var(--text); }
.file-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wide { width: 100%; }
.row { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.row.wrap { flex-wrap: wrap; }
.icon-btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 9px;
  padding: 6px 10px; cursor: pointer; color: var(--text-2); font-size: .85rem;
}
.icon-btn:hover { border-color: #cbd5e1; }
.icon-btn.danger { color: var(--danger); border-color: #f0cccc; }
.icon-btn.mic { font-size: 1rem; padding: 6px 12px; }
.icon-btn.mic.listening { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); animation: pulse 1.1s infinite; }
.icon-btn[disabled] { opacity: .45; cursor: not-allowed; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.segmented { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 999px; border: 1px solid var(--border); }
.segmented button { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.segmented button.on { background: var(--brand); color: #fff; }

/* ------------------------------- 登录页 ------------------------------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); padding: clamp(20px, 5vw, 32px); }
.brand-line { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: linear-gradient(135deg, var(--brand), #3b82f6); font-size: 1.3rem; }
.brand-mark.small { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
.field-block { margin-top: 14px; }
.field-block label { display: block; font-size: .84rem; color: var(--text-2); margin-bottom: 5px; font-weight: 600; }

/* ------------------------------- 顶栏 ------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px clamp(12px, 3vw, 22px);
  padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-text { display: grid; line-height: 1.25; min-width: 0; }
.topbar-text strong { font-size: .95rem; }
.topbar-text small { color: var(--text-3); font-size: .76rem; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex: none; }
.badge-offline { background: var(--warn-soft); color: var(--warn); border-radius: 999px; padding: 2px 9px; font-size: .7rem; font-weight: 700; }

main { max-width: 980px; margin: 0 auto; padding: 14px clamp(12px, 3vw, 22px) 96px; }
.view { display: grid; gap: 12px; }
.view[hidden] { display: none; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px clamp(13px, 3vw, 20px); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }

/* ------------------------------- 底部标签栏 ------------------------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around; gap: 2px;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbar button {
  flex: 1; border: 0; background: none; padding: 8px 4px; border-radius: 10px;
  font-size: .78rem; font-weight: 600; color: var(--text-3); cursor: pointer;
}
.tabbar button.on { color: var(--brand); background: var(--brand-soft); }

/* ------------------------------- 今日值班 ------------------------------- */
.duty-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.date-input { max-width: 170px; }
.shift-tabs button { min-width: 74px; }
.summary-line { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: .88rem; color: var(--text-2); }
.summary-line b { color: var(--brand-dark); }
.add-box { display: flex; gap: 8px; margin-top: 10px; }
.add-box select { flex: 1; }
.empty-hint { text-align: center; color: var(--text-3); font-size: .88rem; padding: 18px; }

.entry-list { display: grid; gap: 12px; }
.entry { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px clamp(12px, 3vw, 18px); }
.entry.done { border-color: #bfe3cb; background: linear-gradient(180deg, var(--ok-soft), var(--surface) 60%); }
.entry-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.entry .who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entry .who strong { font-size: 1rem; }
.entry .code { font-size: .78rem; color: var(--text-3); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; }
.entry .job { font-size: .78rem; color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; padding: 2px 8px; }

.task-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.task { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; }
.task label { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; font-size: .9rem; }
.task input { width: 17px; height: 17px; accent-color: var(--ok); }
.task.done label span { text-decoration: line-through; color: var(--text-3); }
.task button { border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: 1rem; }

.task-add { display: flex; gap: 8px; margin-top: 10px; }
.task-add input { flex: 1; min-width: 0; }
.quick-tasks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.quick-tasks button {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  border-radius: 999px; padding: 5px 11px; font-size: .78rem; cursor: pointer;
}
.quick-tasks button:hover { border-color: var(--brand); color: var(--brand-dark); }

.entry-flags { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.entry-flags select { max-width: 130px; }
.entry-flags input[type="text"] { max-width: 160px; }
.entry-note { margin-top: 10px; }

/* ------------------------------- 签名 ------------------------------- */
.sign-card .sig-canvas {
  width: 100%; height: 190px; margin-top: 12px; touch-action: none;
  border: 1px dashed #c7d2e0; border-radius: var(--radius-sm);
  background: repeating-linear-gradient(45deg, #fbfcfe, #fbfcfe 10px, #f6f8fc 10px, #f6f8fc 20px);
  cursor: crosshair;
}
.sig-preview { width: 100%; max-width: 340px; margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
/* 签名图（记录详情 / 打印）：透明底 + 深色笔迹，任何主题下都垫白底，否则夜间看不见 */
.sig-img { max-width: 220px; background: #fff; border-bottom: 1px solid #999; border-radius: 4px 4px 0 0; padding: 0 2px; }
.sticky-actions { position: sticky; bottom: 62px; display: flex; gap: 10px; padding: 10px 0; background: linear-gradient(180deg, rgba(244,246,250,0), var(--bg) 40%); }
.sticky-actions button { flex: 1; }

/* ------------------------------- 人员 / 记录列表 ------------------------------- */
.worker-list, .rec-list { display: grid; gap: 8px; margin-top: 12px; }
.worker-row {
  display: grid; grid-template-columns: 1.2fr .8fr 1fr auto; gap: 8px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: .88rem;
}
.worker-row .name { font-weight: 600; }
.worker-row .pill { font-size: .74rem; border-radius: 999px; padding: 2px 8px; }
.pill.on { background: var(--ok-soft); color: var(--ok); }
.pill.off { background: var(--surface); color: var(--text-3); border: 1px solid var(--border); }
.worker-actions { display: flex; gap: 6px; }

.rec-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 10px 12px; cursor: pointer; }
.rec-item:hover { border-color: var(--brand); }
.rec-item .line1 { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; color: var(--text-3); }
.rec-item .line2 { font-size: .9rem; margin-top: 4px; }
.tag { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: .74rem; font-weight: 600; }
.tag.done { background: var(--ok-soft); color: var(--ok); }
.tag.undone { background: var(--danger-soft); color: var(--danger); }
.tag.assessed { background: var(--brand-soft); color: var(--brand-dark); }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow); }
.kpi .k-label { font-size: .78rem; color: var(--text-3); }
.kpi .k-value { font-size: 1.45rem; font-weight: 700; color: var(--brand-dark); }
.kpi .k-note { font-size: .72rem; color: var(--text-3); }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }

.bars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.bars li { display: grid; grid-template-columns: minmax(88px, 40%) 1fr 54px; gap: 9px; align-items: center; font-size: .85rem; }
.bars .b-label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .b-track { height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bars .b-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #60a5fa); }
.bars .b-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.data-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .85rem; }
.data-table th, .data-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.data-table th { color: var(--text-3); font-weight: 600; }

/* ------------------------------- 提示 ------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 10px);
  background: #16202f; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: .88rem;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .3); opacity: 0; transition: opacity .2s, transform .2s; z-index: 60;
  max-width: min(90vw, 420px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast[hidden] { display: none; }

/* ------------------------------- 打印 ------------------------------- */
.print-area { display: none; }
@media print {
  body { background: #fff; }
  .topbar, .tabbar, main, .toast { display: none !important; }
  .print-area { display: block !important; padding: 0 6mm; }
  .print-area h1 { font-size: 16pt; text-align: center; margin-bottom: 2mm; }
  .print-area .pmeta { text-align: center; font-size: 10pt; color: #333; margin-bottom: 4mm; }
  .print-area table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .print-area th, .print-area td { border: 1px solid #333; padding: 1.6mm 2mm; vertical-align: top; }
  .print-area thead th { background: #f0f0f0; }
  .print-area .sign-box { margin-top: 5mm; display: flex; justify-content: space-between; align-items: flex-end; font-size: 10pt; }
  .print-area .sign-box img { max-width: 60mm; max-height: 22mm; border-bottom: 1px solid #333; }
  @page { size: A4 landscape; margin: 8mm; }
}

/* ------------------------------- 深色主题 ------------------------------- */

/* ------------------------------- 小屏微调 ------------------------------- */
@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .entry-flags { gap: 8px; }
  .entry-flags input[type="text"], .entry-flags select { max-width: none; flex: 1 1 44%; }
  .worker-row { grid-template-columns: 1fr auto; grid-template-areas: "name actions" "meta actions"; }
  .worker-row .meta { grid-area: meta; color: var(--text-3); font-size: .8rem; }
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* ==========================================================================
 *  项目介绍页（网址首页）与新增交互件
 * ========================================================================== */

.intro-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 20px clamp(14px, 3vw, 24px) 64px;
  display: grid;
  gap: 14px;
}
/* 注意：display:grid 会覆盖 [hidden] 的默认隐藏，必须显式写一条 */
.intro-wrap[hidden] { display: none; }

.intro-hero {
  background: linear-gradient(160deg, var(--brand-soft), var(--surface) 62%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(20px, 4vw, 34px);
  box-shadow: var(--shadow);
}
.intro-hero h1 { font-size: clamp(1.4rem, 4vw, 2rem); margin-top: 6px; }
.intro-lead { color: var(--text-2); margin-top: 10px; font-size: 1.02rem; line-height: 1.75; }
.intro-lead strong { color: var(--brand-dark); }
.eyebrow {
  display: inline-block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; padding: 4px 12px;
  font-weight: 700;
}
.intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.intro-list { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 8px; color: var(--text-2); font-size: .92rem; }
.intro-list li b { color: var(--text); }

.intro-flow { list-style: none; counter-reset: step; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.intro-flow li {
  counter-increment: step;
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start;
  font-size: .92rem; color: var(--text-2);
}
.intro-flow li::before {
  content: counter(step);
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; font-size: .78rem;
}
.intro-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.link-btn {
  border: 0; background: none; color: var(--brand); font-weight: 600; cursor: pointer;
  padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; font-size: .88rem;
}

/* 常见任务批量填充 */
.batch-box { display: block; }
.batch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.batch-chips .chip {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  border-radius: 999px; padding: 6px 12px; font-size: .82rem; cursor: pointer;
}
.batch-chips .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* 未完成任务在列表里用左侧红条提示，收工前一眼能看出谁还没干完 */
.entry.not-done { border-left: 4px solid var(--danger); }
/* ==========================================================================
 *  简化操作版式：宽屏双栏 + 大按钮完成 + 折叠的考核区 + 收起式签字板
 * ========================================================================== */

.duty-bar { display: grid; gap: 10px; }
.duty-cols { display: grid; gap: 12px; }
.duty-main { display: grid; gap: 12px; min-width: 0; }
.duty-side { display: grid; gap: 12px; }
.quick-dispatch .batch-chips { margin-top: 10px; }
.quick-dispatch .hint { font-size: .8rem; }

/* 宽屏（电脑）横向排布：左边人员任务，右边签字与保存，不再像手机竖屏 */
@media (min-width: 900px) {
  .duty-cols { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); align-items: start; }
  .duty-side { position: sticky; top: 66px; }
  .entry-head { gap: 12px; }
}

/* 大按钮完成：一眼能点，不用找小方框 */
.done-toggle {
  flex: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: .86rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.done-toggle:hover { transform: translateY(-1px); }
.done-toggle.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.entry.done .done-toggle.on { box-shadow: 0 4px 12px rgba(21, 128, 61, .25); }

/* 考核 / 检查人 / 备注收进折叠区，默认不占地方 */
.entry-more { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
.entry-more > summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--text-3);
  list-style: none;
  padding: 4px 0;
}
.entry-more > summary::-webkit-details-marker { display: none; }
.entry-more > summary::before { content: '▸ '; }
.entry-more[open] > summary::before { content: '▾ '; }
.entry-more .entry-flags { margin-top: 8px; }
.entry-more .icon-btn { margin-top: 8px; }

/* 签字板：默认只露一个按钮 */
.sign-card .wide { margin-top: 10px; }
#signPanel { margin-top: 4px; }
.duty-actions .wide { margin-bottom: 8px; }
.duty-actions .wide:last-of-type { margin-bottom: 0; }

@media (max-width: 560px) {
  .done-toggle { padding: 7px 12px; font-size: .8rem; }
  .duty-side { order: 2; }
}
/* ==========================================================================
 *  专业化版式（v0.3）：电脑左侧导航 + 手机底部标签；表格可横向滚动
 * ========================================================================== */

:root { --sidebar-w: 236px; }

/* 侧边栏：手机隐藏，电脑显示 */
.sidebar { display: none; }
.app-main { min-width: 0; }

/* 表格一律放进可横向滚动的容器，手机窄屏不会把页面撑破 */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .data-table { min-width: 560px; }
.data-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.data-table tbody tr:hover { background: var(--surface-2); }
.num { font-variant-numeric: tabular-nums; }

/* 手机端：按钮和输入更大，方便点 */
@media (max-width: 899px) {
  .primary-btn, .secondary-btn, .ghost-btn, .danger-btn { min-height: 42px; }
  input[type="text"], input[type="password"], input[type="search"], input[type="date"], select { min-height: 42px; }
  .entry .task-add .icon-btn { min-width: 46px; }
  .tabbar button { min-height: 48px; }
}

/* 电脑端：左侧固定导航，隐藏顶部条与底部标签 */
@media (min-width: 900px) {
  body { background: var(--bg); }

  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: fixed;
    top: 0; right: auto; bottom: 0; left: 0;   /* 老浏览器兜底 */
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    padding: 18px 14px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 40;
  }
  .side-brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 12px; border-bottom: 1px solid var(--border); }
  .side-brand-text { display: grid; line-height: 1.25; }
  .side-brand-text strong { font-size: 1.02rem; letter-spacing: .01em; }
  .side-brand-text small { color: var(--text-3); font-size: .74rem; }

  .sidenav { display: grid; gap: 4px; }
  .sidenav button {
    text-align: left;
    border: 0;
    background: none;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    position: relative;
  }
  .sidenav button:hover { background: var(--surface-2); color: var(--text); }
  .sidenav button.on { background: var(--brand-soft); color: var(--brand-dark); }
  .sidenav button.on::before {
    content: '';
    position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--brand);
  }

  .side-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
  .side-who { display: grid; line-height: 1.3; }
  .side-who strong { font-size: .92rem; }
  .side-who small { color: var(--text-3); font-size: .76rem; }

  .app-main { margin-left: var(--sidebar-w); }
  .topbar { display: none; }          /* 电脑上用侧边栏显示身份 */
  .tabbar { display: none; }          /* 电脑上用侧边栏导航 */
  main { max-width: 1180px; padding: 22px clamp(18px, 3vw, 34px) 40px; }

  /* 电脑上值班页横向铺开：左边内容更宽，右边操作区固定 */
  .duty-cols { grid-template-columns: minmax(0, 1.7fr) minmax(330px, 1fr); }
  .duty-side { position: sticky; top: 18px; }
  .sticky-actions { display: none; }  /* 电脑上保存/打印在右栏，无需吸底 */
}

/* 统计与记录里的表格：窄屏时容器内横向滚动，不撑破页面 */
#statByWorker, #statByDate, #statUndone, #recDetail { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 899px) {
  #statByWorker .data-table,
  #statByDate .data-table,
  #statUndone .data-table,
  #recDetail .data-table { min-width: 520px; }
}
/* ==========================================================================
 *  商务风视觉（v0.4）：白底、深蓝主色、线性图标、克制的阴影
 * ========================================================================== */

/* 线性图标 */
.ico { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px; }
.ico.lg { width: 22px; height: 22px; }
button .ico { margin-right: 6px; vertical-align: -4px; }
.tabbar .ico { margin: 0 0 2px; display: block; }

/* 品牌标：深蓝底白图标 */
.brand-mark {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--brand); color: #fff; box-shadow: none;
}
.brand-mark.small { width: 34px; height: 34px; border-radius: 9px; }
.brand-mark.lg { width: 48px; height: 48px; border-radius: 12px; }
.brand-mark .ico { width: 22px; height: 22px; }

/* 按钮：实色深蓝、无渐变、克制阴影 */
.primary-btn {
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 1px 2px rgba(15, 41, 66, .16); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.primary-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); transform: none; }
.secondary-btn {
  background: var(--surface); border-color: #dde5ef; color: var(--brand); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.secondary-btn:hover { background: var(--brand-soft); border-color: #cbd8e6; }
.ghost-btn { border-color: transparent; color: var(--text-2); }
.ghost-btn:hover { background: var(--surface-2); }
.danger-btn { background: var(--surface); border-color: #f0d5d2; color: var(--danger); border-radius: 8px; }
.icon-btn { border-radius: 8px; border-color: #dde5ef; }
.icon-btn.mic { display: inline-flex; align-items: center; justify-content: center; }

/* 卡片：白底细边，轻阴影 */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 27, 45, .04);
}
.card h2 { font-size: .95rem; letter-spacing: .01em; }
.card-head .hint { font-weight: 400; }

/* 侧边栏：白底、深蓝高亮 */
@media (min-width: 900px) {
  .sidenav button { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text-2); }
  .sidenav button .ico { color: var(--text-3); }
  .sidenav button.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
  .sidenav button.on .ico { color: var(--brand); }
  .sidenav button.on::before { background: var(--brand); }
  .side-brand { border-bottom-color: var(--border); }
}

/* 顶部条（手机） */
.topbar { background: var(--surface); }

/* 底部标签（手机）：图标 + 文字 */
.tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; font-weight: 500; color: var(--text-3);
}
.tabbar button.on { background: transparent; color: var(--brand); font-weight: 600; }

/* 输入控件 */
input[type="text"], input[type="password"], input[type="search"], input[type="date"], select {
  background: var(--surface); border-color: #dde5ef; border-radius: 8px;
}
input:focus, select:focus { outline: 2px solid rgba(23, 57, 92, .18); border-color: var(--brand); }

/* 人员卡片 */
.entry { border-radius: 12px; border-color: var(--border); box-shadow: 0 1px 2px rgba(15, 27, 45, .04); }
.entry.done { background: var(--ok-soft); border-color: #d6ece0; }
.entry.not-done { border-left: 3px solid #d97706; }
.entry .who strong { font-size: .98rem; letter-spacing: .01em; }
.entry .code, .entry .job { background: var(--surface-2); border: 1px solid var(--border); }
.entry .job { color: var(--brand); background: var(--brand-soft); border-color: #dbe6f2; }
.task { background: var(--surface-2); border-color: var(--border); border-radius: 8px; }
.task.done label span { color: var(--text-3); }

/* 大按钮完成：白底 → 深绿实色 */
.done-toggle { border-radius: 8px; border-color: #dde5ef; background: var(--surface); color: var(--text-2); font-weight: 600; }
.done-toggle.on { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: none; }

/* 芯片（常用任务 / 批量派工） */
.quick-tasks button, .batch-chips .chip {
  background: var(--surface); border-color: #dde5ef; color: var(--text-2); border-radius: 999px;
}
.quick-tasks button:hover, .batch-chips .chip:hover { border-color: var(--brand); color: var(--brand); }
.batch-chips .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 表格：表头浅灰、行分隔线细 */
.data-table th { background: var(--surface-2); color: var(--text-3); font-weight: 600; font-size: .78rem; border-bottom: 1px solid var(--border); }
.data-table td { border-bottom: 1px solid #eef2f7; }
.data-table tbody tr:hover { background: var(--surface-2); }

/* KPI */
.kpi { border-radius: 12px; }
.kpi .k-label { font-weight: 500; letter-spacing: .02em; }
.kpi .k-value { color: var(--brand); font-size: 1.5rem; }

/* 标签徽章 */
.tag { border-radius: 6px; font-weight: 600; }
.pill { border-radius: 6px; }

/* 汇总行：做成细横条 */
.summary-line { gap: 6px 20px; font-size: .86rem; }
.summary-line b { color: var(--brand); font-variant-numeric: tabular-nums; }

/* 登录页：左品牌板 + 右表单 */
.login-wrap { background: var(--bg); padding: 28px 16px; }
.login-card { max-width: 900px; padding: 0; border-radius: 16px; overflow: hidden; }
.login-form { padding: clamp(20px, 4vw, 34px); }
.login-brand {
  background: linear-gradient(165deg, #17395c, #0f2942 70%);
  color: #fff; padding: clamp(22px, 4vw, 34px);
  display: flex; flex-direction: column; gap: 12px;
}
.login-brand h1 { font-size: 1.5rem; letter-spacing: .02em; }
.login-brand .brand-mark { background: rgba(255,255,255,.14); }
.login-brand-sub { color: rgba(255,255,255,.78); font-size: .88rem; }
.login-points { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.login-points li { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: rgba(255,255,255,.9); }
.login-points .ico { color: #7fb2e5; width: 16px; height: 16px; margin-top: 3px; }
.login-brand-foot { margin-top: auto; font-size: .78rem; color: rgba(255,255,255,.62); }
@media (min-width: 760px) {
  .login-card { display: grid; grid-template-columns: 1.05fr 1fr; }
}

/* 一键派工折叠卡 */
details.quick-dispatch { padding: 0; overflow: hidden; }
details.quick-dispatch > summary { list-style: none; cursor: pointer; padding: 14px 16px; }
details.quick-dispatch > summary::-webkit-details-marker { display: none; }
details.quick-dispatch[open] > summary { border-bottom: 1px solid var(--border); }
details.quick-dispatch > .batch-chips, details.quick-dispatch > .row { padding: 0 16px; }
details.quick-dispatch > .row { padding-bottom: 14px; }

/* 打印时仍是黑字白底 */
@media print { .print-area, .print-area * { color: #000 !important; } }
/* ==========================================================================
 *  强制浅色（商务白底）。不跟随系统深色模式：用户要求白底。
 * ========================================================================== */
:root { color-scheme: light; }
body { background: #f6f8fb !important; color: #0f1b2d; }
input, select, textarea { color-scheme: light; }
/* ==========================================================================
 *  关键修复：让 hidden 属性真正生效
 *  ------------------------------------------------------------------------
 *  作者样式里的 display（如 .login-wrap{display:grid}）会盖掉 [hidden] 的
 *  默认 display:none，导致"登录页已经 hidden 但还是显示着"，把内容页挤下去。
 *  这条规则必须放在样式表最后，确保优先级最高。
 * ========================================================================== */
[hidden] { display: none !important; }
/* ==========================================================================
 *  v0.5 精修：统一控件尺寸与留白、页面标题栏、头像、空状态、细节打磨
 * ========================================================================== */

:root {
  --h-ctl: calc(38px * var(--font-scale, 1));   /* 控件高度随字号一起缩放 */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --line: #e8edf4;
  --ink-2: #5b6b81;
  --shadow-1: 0 1px 2px rgba(15, 27, 45, .04);
  --shadow-2: 0 2px 8px rgba(15, 27, 45, .06);
}

/* ---------- 页面标题栏（内容区顶部） ---------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 18px clamp(16px, 3vw, 34px) 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: 1.12rem; letter-spacing: .01em; font-weight: 650; }
.page-sub { color: var(--text-3); font-size: .8rem; margin-top: 3px; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (min-width: 900px) {
  .page-head { position: sticky; top: 0; z-index: 20; padding-left: clamp(18px, 3vw, 34px); }
}
@media (max-width: 899px) {
  .page-head { padding: 14px 16px 10px; }
  .page-head h1 { font-size: 1.02rem; }
}

/* ---------- 统一控件 ---------- */
.primary-btn, .secondary-btn, .ghost-btn, .danger-btn, .file-btn {
  height: var(--h-ctl); padding: 0 14px; border-radius: var(--r-md);
  font-size: .88rem; font-weight: 600; gap: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.primary-btn:active, .secondary-btn:active { transform: translateY(1px); }
.primary-btn:disabled, .secondary-btn:disabled { opacity: .5; cursor: not-allowed; }
input[type="text"], input[type="password"], input[type="search"], input[type="date"], select, .input {
  height: var(--h-ctl); padding: 0 12px; border-radius: var(--r-md);
  font-size: .9rem; background: var(--surface); border: 1px solid #dde5ef;
}
textarea.input { height: auto; padding: 10px 12px; }
.icon-btn {
  height: 34px; min-width: 34px; padding: 0 10px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .84rem; background: var(--surface); border: 1px solid #dde5ef; color: var(--text-2);
}
.icon-btn:hover { border-color: #c9d6e5; color: var(--text); }
.icon-btn.mic { min-width: 40px; }
.icon-btn.danger { color: var(--danger); border-color: #f0d5d2; }
:focus-visible { outline: 2px solid rgba(23, 57, 92, .38); outline-offset: 2px; }

/* ---------- 卡片与分区 ---------- */
.card { padding: 18px clamp(14px, 2.4vw, 22px); border-radius: var(--r-lg); border-color: var(--line); box-shadow: var(--shadow-1); }
.card-head { padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.card-head h2 { font-size: .95rem; font-weight: 650; }
.card-head .hint { font-size: .78rem; }
.card > .row:first-of-type { margin-top: 0; }
.data-table { font-size: .85rem; }
.data-table th { padding: 9px 10px; font-size: .76rem; letter-spacing: .02em; }
.data-table td { padding: 10px; }

/* ---------- 侧边栏 ---------- */
.side-brand { padding: 4px 8px 14px; }
.side-brand-text strong { font-size: .98rem; font-weight: 650; }
.sidenav { gap: 2px; }
.sidenav button { height: 38px; padding: 0 12px; font-size: .88rem; border-radius: var(--r-md); }
.side-foot { gap: 10px; padding-top: 14px; }
.side-who { display: flex; align-items: center; gap: 10px; }
.side-who-text { display: grid; line-height: 1.25; min-width: 0; }
.side-who-text strong { font-size: .88rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-who-text small { color: var(--text-3); font-size: .74rem; }

/* ---------- 头像 ---------- */
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-size: .84rem; font-weight: 650; letter-spacing: .02em;
  border: 1px solid #dbe6f2;
}
.avatar-sm { width: 30px; height: 30px; font-size: .8rem; }
.avatar-lg { width: 38px; height: 38px; font-size: .95rem; }
.avatar.av-1 { background: #eef3f9; color: #17395c; }
.avatar.av-2 { background: #eaf4ef; color: #16704a; border-color: #d6ece0; }
.avatar.av-3 { background: #f3effa; color: #5b3aa8; border-color: #e3dbf5; }
.avatar.av-4 { background: #fdf3e7; color: #9a6700; border-color: #f4e4c8; }
.avatar.av-5 { background: #eef6fb; color: #1a6a9a; border-color: #d8e9f5; }

/* ---------- 人员卡片精修 ---------- */
.entry { padding: 16px; }
.entry-head { align-items: center; gap: 12px; }
.entry .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.entry .who-text { display: grid; line-height: 1.3; min-width: 0; }
.entry .who-text strong { font-size: .95rem; font-weight: 650; }
.entry .who-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 1px; }
.entry .code, .entry .job {
  font-size: .72rem; padding: 1px 7px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3);
}
.entry .job { color: var(--brand); background: var(--brand-soft); border-color: #dbe6f2; }
.task-list { gap: 4px; margin-top: 12px; }
.task { padding: 7px 10px; font-size: .88rem; }
.task-add { gap: 6px; margin-top: 10px; }
.quick-tasks { gap: 6px; margin-top: 8px; }
.quick-tasks button { height: 28px; padding: 0 10px; font-size: .76rem; border-radius: var(--r-sm); }
.done-toggle { height: 32px; padding: 0 12px; font-size: .82rem; }
.entry-more { margin-top: 12px; }
.entry-more > summary { font-size: .78rem; color: var(--text-3); }

/* ---------- 空状态（内部页面用） ---------- */
.empty-state-card {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 34px 20px; border: 1px dashed #cfd8e6; border-radius: var(--r-lg);
  background: var(--surface);
}
.empty-state-card .ico { width: 26px; height: 26px; color: var(--text-3); padding: 12px; box-sizing: content-box; border-radius: 50%; background: var(--surface-2); margin-bottom: 4px; }
.empty-state-card h3 { font-size: .95rem; font-weight: 650; }
.empty-state-card p { color: var(--text-3); font-size: .84rem; }

/* ---------- 汇总条 ---------- */
.summary-line { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--ink-2); }
.summary-line b { font-weight: 650; }

/* ---------- 提示条 ---------- */
.toast {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
  border-radius: var(--r-md); font-size: .86rem; padding: 10px 16px;
}
@media (min-width: 900px) {
  .toast { left: auto; right: 24px; bottom: 24px; transform: translateY(8px); }
  .toast.show { transform: translateY(0); }
}

/* ---------- 分段控件（白班/夜班） ---------- */
.segmented { padding: 3px; border-radius: var(--r-md); background: var(--surface-2); border-color: var(--line); }
.segmented button { height: 30px; padding: 0 14px; border-radius: var(--r-sm); font-size: .84rem; font-weight: 600; }
.segmented button.on { background: var(--brand); color: #fff; }

/* ---------- 滚动条（桌面观感） ---------- */
@media (min-width: 900px) {
  * { scrollbar-width: thin; scrollbar-color: #c9d4e2 transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #c9d4e2; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: #b3c1d4; background-clip: content-box; }
}

/* ---------- 登录页细节 ---------- */
.login-brand-sub { font-size: .86rem; }
.login-points li { font-size: .84rem; line-height: 1.6; }
.login-form .field-block label { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.login-card { box-shadow: var(--shadow-2); }
/* --------------------------------------------------------------------------
 *  修「解决思路」错位：grid 容器里的内联 <b> 会被当成独立格子，
 *  所以 li 内容必须包一层 span（index.html 已处理），这里把对齐做稳。
 * -------------------------------------------------------------------------- */
.intro-flow { gap: 10px; }
.intro-flow li { grid-template-columns: 24px 1fr; gap: 10px; align-items: start; line-height: 1.65; }
.intro-flow li > span { display: block; min-width: 0; }
.intro-flow li::before {
  width: 24px; height: 24px; border-radius: 7px; margin-top: 1px;
  font-size: .76rem; font-weight: 700; line-height: 1;
}
.intro-flow li b { color: var(--text); font-weight: 650; }

/* 同类保护：grid/flex 容器里避免内联元素直接成为格子 */
.intro-list li { line-height: 1.65; }
.login-points li > span { min-width: 0; }
/* 侧边栏分组分隔线 */
.nav-sep { height: 1px; background: var(--line); margin: 6px 8px; }
.sidenav button[data-nav="intro"].on { background: var(--brand-soft); color: var(--brand); }
/* ==========================================================================
 *  v0.6 设置页样式：设置行、开关、夜间模式、字号与密度
 * ========================================================================== */

html { font-size: calc(16px * var(--font-scale, 1)); }
body { font-size: .94rem; }

/* ---------- 设置行 ---------- */
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.setting-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.setting-label { display: grid; gap: 2px; min-width: 0; }
.setting-label strong { font-size: .9rem; font-weight: 600; }
.setting-label small { color: var(--text-3); font-size: .78rem; }
.setting-col { display: grid; gap: 8px; padding-top: 6px; }
.setting-col .field-label { font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.short-select { max-width: 160px; }

/* ---------- 开关 ---------- */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 44px; height: 24px; border-radius: 999px; background: #d7dfea;
  border: 1px solid #cfd8e6; position: relative; transition: background .18s, border-color .18s;
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 27, 45, .2);
  transition: transform .18s;
}
.switch input:checked + .track { background: var(--brand); border-color: var(--brand); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 2px solid rgba(23, 57, 92, .38); outline-offset: 2px; }

/* ---------- 帮助列表 ---------- */
.help-list { margin: 4px 0 12px; padding-left: 18px; display: grid; gap: 8px; color: var(--text-2); font-size: .86rem; line-height: 1.6; }
.help-list li b { color: var(--text); font-weight: 650; }




/* ---------- 夜间模式（只在显式选择时生效） ---------- */
:root[data-theme="dark"] {
  --bg: #0f151d;
  --surface: #161d27;
  --surface-2: #1d2632;
  --border: #26303d;
  --line: #232c38;
  --text: #e8eef6;
  --text-2: #b9c5d4;
  --text-3: #8a97a8;
  --ink-2: #a9b6c6;
  --brand: #4b8fd0;
  --brand-dark: #7db2e3;
  --brand-soft: #1a2735;
  --ok: #4ade80;
  --ok-soft: #14261c;
  --warn: #fbbf24;
  --warn-soft: #2a2113;
  --danger: #f87171;
  --danger-soft: #2c1a1a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
:root[data-theme="dark"] body { background: var(--bg) !important; color: var(--text); }
:root[data-theme="dark"] .sidebar { background: var(--surface); border-right-color: var(--border); }
:root[data-theme="dark"] .topbar { background: var(--surface); }
:root[data-theme="dark"] .page-head { background: var(--surface); border-bottom-color: var(--border); }
:root[data-theme="dark"] .card { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .nested, :root[data-theme="dark"] .task { background: var(--surface-2); border-color: var(--border); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
  background: var(--surface-2); border-color: var(--border); color: var(--text);
}
:root[data-theme="dark"] .primary-btn { background: var(--brand); border-color: var(--brand); color: #08121c; }
:root[data-theme="dark"] .secondary-btn, :root[data-theme="dark"] .icon-btn, :root[data-theme="dark"] .file-btn {
  background: var(--surface-2); border-color: var(--border); color: var(--text-2);
}
:root[data-theme="dark"] .data-table th { background: var(--surface-2); color: var(--text-3); }
:root[data-theme="dark"] .data-table td { border-bottom-color: var(--border); }
:root[data-theme="dark"] .data-table tbody tr:hover { background: var(--surface-2); }
:root[data-theme="dark"] .empty-state-card { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .toast { background: var(--surface); color: var(--text); border-color: var(--border); }
:root[data-theme="dark"] .nav-sep { background: var(--border); }
:root[data-theme="dark"] .switch .track { background: #2c3644; border-color: #39465a; }
:root[data-theme="dark"] .avatar { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
/* 签名板在任何主题下都必须保持"白纸深字"：
   签名存成透明底 + 深色笔迹，预览、打印、归档都是白底，
   画布要是跟着夜间模式变深色，写的字就看不见了 */
:root[data-theme="dark"] .sig-canvas,
:root[data-theme="dark"] .sign-card .sig-canvas {
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #eef2f7 10px, #eef2f7 20px);
  border-color: #46566b;
}
:root[data-theme="dark"] .sig-preview { background: #fff; border-color: #46566b; }
:root[data-theme="dark"] .login-brand { background: linear-gradient(165deg, #12324f, #0a1f33 70%); }
:root[data-theme="dark"] .segmented { background: var(--surface-2); border-color: var(--border); }
:root[data-theme="dark"] .segmented button.on { background: var(--brand); color: #08121c; }
:root[data-theme="dark"] .done-toggle.on { color: #08121c; }
:root[data-theme="dark"] .entry.done { background: var(--ok-soft); border-color: #23402c; }
:root[data-theme="dark"] .summary-line { color: var(--text-2); }
/* ==========================================================================
 *  v0.6.1 字号自由调节 + 几处细节打磨
 * ========================================================================== */

/* 字号控件：预设 + 滑块 + 实时预览 */
.font-control { display: grid; gap: 10px; width: 100%; }
.font-control #fontSwitch { align-self: start; }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; padding: 0; background: transparent; border: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15, 27, 45, .25);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-2); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: var(--brand); }
.font-preview {
  border: 1px dashed var(--border); border-radius: var(--r-md);
  padding: 10px 12px; color: var(--text-2); background: var(--surface-2);
  line-height: 1.6;
}
.font-preview b { color: var(--text); }

/* 值班页搜索框 */
#dutySearch { flex: 1; min-width: 160px; }
#btnClearSearch { flex: none; }

/* 主按钮更明确的主次关系 */
.danger-btn { background: var(--surface); }
.danger-btn:hover { background: #fdf1f0; }

/* 数字列右对齐 */
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 保存按钮的短暂已保存状态 */
.primary-btn.saved { background: var(--ok); border-color: var(--ok); color: #fff; }

/* 深色模式下的字号预览与滑块 */
:root[data-theme="dark"] .font-preview { background: var(--surface-2); border-color: var(--border); }
:root[data-theme="dark"] input[type="range"]::-webkit-slider-runnable-track { background: #232c38; border-color: var(--border); }
/* 某人还没有任务时的提示 */
.task-empty {
  margin: 10px 0 0; padding: 9px 12px; border: 1px dashed var(--border);
  border-radius: var(--r-md); background: var(--surface-2);
  color: var(--text-3); font-size: .84rem;
}
/* 人员档案列表：头像 + 姓名/编号 一行 */
.cell-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cell-name > span { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cell-name .name { font-weight: 600; }
.cell-name .muted { color: var(--text-3); font-size: .78rem; }

/* ==========================================================================
 *  v0.9 商务感升级：统一的「颜色区块」体系 + 更大气介绍页
 *  - 用 data-tone="blue|green|amber|violet|teal|indigo|slate" 给区块上色
 *  - 卡片：左侧细色条 + 彩色标题条；KPI：顶部色条 + 彩色数值
 *  - 介绍页：深蓝渐变首屏 + 三块软色面板 + 标签墙
 * ========================================================================== */
[data-tone="blue"]   { --tone: #2f6feb; --tone-soft: #eff4ff; --tone-line: #dbe6ff; --tone-ink: #1c4fc0; }
[data-tone="green"]  { --tone: #12855b; --tone-soft: #ecf8f2; --tone-line: #d3eddf; --tone-ink: #0d6544; }
[data-tone="amber"]  { --tone: #b7791f; --tone-soft: #fdf6e8; --tone-line: #f3e3c2; --tone-ink: #8f5c0f; }
[data-tone="violet"] { --tone: #6d4bd8; --tone-soft: #f3f0ff; --tone-line: #e2daff; --tone-ink: #5232b8; }
[data-tone="teal"]   { --tone: #0f8a9c; --tone-soft: #e9f7f9; --tone-line: #cdebee; --tone-ink: #0b6a78; }
[data-tone="indigo"] { --tone: #4338ca; --tone-soft: #eef0ff; --tone-line: #dcdffb; --tone-ink: #33309f; }
[data-tone="slate"]  { --tone: #46586f; --tone-soft: #f2f5f9; --tone-line: #e0e7ef; --tone-ink: #35455a; }

/* ---------- 卡片上的颜色区块 ---------- */
.card[data-tone] { border-left: 3px solid var(--tone); }
.card[data-tone] > .card-head {
  background: var(--tone-soft); border-bottom: 1px solid var(--tone-line);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 12px;
}
.card[data-tone] > .card-head h2 { color: var(--tone-ink); }
.card[data-tone] > h2 { color: var(--tone-ink); }

/* ---------- KPI 数字块：一色一块，扫一眼就能分辨 ---------- */
.kpi[data-tone] { border-top: 3px solid var(--tone); }
.kpi[data-tone] .k-value { color: var(--tone-ink); }
.kpi[data-tone] .k-label { color: var(--tone-ink); opacity: .82; font-weight: 600; }

/* ---------- 介绍页首屏：深蓝商务底 ---------- */
.intro-hero {
  background: linear-gradient(150deg, #17395c 0%, #102b45 52%, #0c1f31 100%);
  border: 1px solid #14304c;
  color: #e9f0f8;
  box-shadow: 0 18px 42px rgba(11, 32, 52, .2);
  position: relative; overflow: hidden;
}
.intro-hero::after {
  content: ''; position: absolute; right: -90px; top: -110px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(88, 156, 232, .38), rgba(88, 156, 232, 0) 68%);
  pointer-events: none;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .76rem; letter-spacing: .08em; color: #cfe4ff;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px; padding: 5px 12px;
}
.hero-badge .ico { width: 15px; height: 15px; }
.intro-hero h1 { color: #fff; letter-spacing: .01em; margin: 12px 0 0; }
.intro-hero .intro-lead { color: #c3d4e6; max-width: 60ch; }
.intro-hero .intro-lead strong { color: #fff; }
.hero-stats {
  list-style: none; margin: 18px 0 4px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 10px;
}
.hero-stats li { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; padding: 10px 12px; }
.hero-stats b { display: block; color: #fff; font-size: 1.06rem; letter-spacing: .01em; }
.hero-stats span { color: #a9c0d6; font-size: .8rem; }
.hero-hint { color: #93a9c0; font-size: .8rem; margin-top: 12px; }
.intro-hero .primary-btn { background: #fff; border-color: #fff; color: #12324f; }
.intro-hero .primary-btn:hover { background: #eaf2fa; border-color: #eaf2fa; }
.intro-hero .secondary-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); color: #eaf2fa; }
.intro-hero .secondary-btn:hover { background: rgba(255, 255, 255, .16); }

/* ---------- 介绍页三块软色面板 ---------- */
.tone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; }
.tone-panel { background: var(--tone-soft); border: 1px solid var(--tone-line); border-radius: 16px; padding: 16px 18px; }
.tone-panel h3 { font-size: .98rem; color: var(--tone-ink); margin-top: 2px; }
.tone-ico {
  display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px;
  border-radius: 10px; background: #fff; color: var(--tone); border: 1px solid var(--tone-line);
}
.tone-ico .ico { width: 17px; height: 17px; }
.intro-list.tight { list-style: none; padding-left: 0; margin-top: 10px; gap: 7px; font-size: .88rem; }
.intro-list.tight li { position: relative; padding-left: 14px; }
.intro-list.tight li::before {
  content: ''; position: absolute; left: 1px; top: .58em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--tone, #9aa8ba);
}

/* ---------- 「解决思路」改成 6 个小色块 ---------- */
.intro-flow { grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 10px; }
.intro-flow li {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
}
.intro-flow li::before { background: var(--tone-soft, var(--brand-soft)); color: var(--tone-ink, var(--brand-dark)); }

/* ---------- 标签墙（技术实现） ---------- */
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip-grid .chip {
  border: 1px solid var(--tone-line, var(--border)); background: #fff; color: var(--tone-ink, var(--text-2));
  border-radius: 999px; padding: 6px 12px; font-size: .82rem; font-weight: 500;
}

/* ---------- 夜间模式：色块换成暗调，别晃眼 ---------- */
:root[data-theme="dark"] [data-tone="blue"]   { --tone-soft: #16233a; --tone-line: #23344f; --tone-ink: #8fb3ff; }
:root[data-theme="dark"] [data-tone="green"]  { --tone-soft: #142a21; --tone-line: #1f3b2e; --tone-ink: #7fd3ac; }
:root[data-theme="dark"] [data-tone="amber"]  { --tone-soft: #2b2314; --tone-line: #3d3320; --tone-ink: #e6bd72; }
:root[data-theme="dark"] [data-tone="violet"] { --tone-soft: #211d34; --tone-line: #322b4d; --tone-ink: #b8a6ff; }
:root[data-theme="dark"] [data-tone="teal"]   { --tone-soft: #122a2e; --tone-line: #1d3b40; --tone-ink: #7fd0dc; }
:root[data-theme="dark"] [data-tone="indigo"] { --tone-soft: #1b1d38; --tone-line: #2a2d55; --tone-ink: #a3a6ff; }
:root[data-theme="dark"] [data-tone="slate"]  { --tone-soft: #1a2029; --tone-line: #262e3a; --tone-ink: #a9bacf; }
:root[data-theme="dark"] .tone-ico { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .chip-grid .chip { background: var(--surface-2); }
:root[data-theme="dark"] .intro-hero { box-shadow: 0 18px 42px rgba(0, 0, 0, .45); }

/* ---------- 手机：首屏指标两列 ---------- */
@media (max-width: 620px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .intro-flow { grid-template-columns: 1fr; }
}
/* ---------- 外壳细节：顶栏收口渐变 + 底部标签高亮条 ---------- */
.topbar { position: sticky; }
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, #3b82f6 52%, #0f8a9c 100%);
  opacity: .5; pointer-events: none;
}
.tabbar button.on { position: relative; }
.tabbar button.on::before {
  content: ''; position: absolute; left: 50%; top: 3px; width: 22px; height: 3px;
  transform: translateX(-50%); border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), #3b82f6);
}
.sidenav button.on { position: relative; }
.sidenav button.on::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 18px;
  transform: translateY(-50%); border-radius: 0 3px 3px 0; background: var(--brand);
}
/* ---------- 介绍页首屏：制作人署名一行 ---------- */
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hero-by {
  color: #dbe9f8; font-size: .84rem; letter-spacing: .04em; font-weight: 600;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: 5px 14px;
}

/* ==========================================================================
 *  v0.9.1 左侧导航栏改成「深蓝」配色
 *  和介绍页首屏、登录页品牌块的深蓝一致；文字用浅蓝白，选中的一项更亮
 * ========================================================================== */
@media (min-width: 900px) {
  .sidebar {
    background: linear-gradient(180deg, #17395c 0%, #132f4c 56%, #0e2740 100%);
    border-right: 1px solid #0d2136;
    box-shadow: 6px 0 24px rgba(11, 32, 52, .1);
  }
  .sidebar .side-brand { border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .sidebar .side-brand-text strong { color: #fff; }
  .sidebar .side-brand-text small { color: #9fb6cd; }
  .sidebar .side-brand .brand-mark { background: rgba(255, 255, 255, .18); color: #fff; }
  .sidebar .nav-sep { background: rgba(255, 255, 255, .14); }

  .sidebar .sidenav button { color: #c3d4e6; }
  .sidebar .sidenav button .ico { color: #8fa8c0; }
  .sidebar .sidenav button:hover { background: rgba(255, 255, 255, .09); color: #fff; }
  .sidebar .sidenav button:hover .ico { color: #fff; }
  .sidebar .sidenav button.on { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }
  .sidebar .sidenav button.on .ico { color: #fff; }
  .sidebar .sidenav button.on::before { background: #7fb2ea; }
  .sidebar .sidenav button[data-nav="intro"].on { background: rgba(255, 255, 255, .18); color: #fff; }

  .sidebar .side-foot { border-top: 1px solid rgba(255, 255, 255, .14); }
  .sidebar .side-who strong { color: #fff; }
  .sidebar .side-who small { color: #9fb6cd; }
  .sidebar .ghost-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #eaf2fa; }
  .sidebar .ghost-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
}
/* 夜间模式：同一个深蓝，但再压暗一档，不跟内容区抢眼 */
:root[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #102a44 0%, #0d2237 60%, #0a1a2b 100%);
  border-right-color: #0a1c2e;
}
/* ==========================================================================
 *  v0.9.2 手机底部标签栏：换成和电脑侧边栏同一套深蓝
 *  （底部栏只在 <900px 出现；选中项用白色胶囊 + 浅蓝指示条）
 * ========================================================================== */
@media (max-width: 899px) {
  .tabbar {
    background: linear-gradient(180deg, #1a3d61 0%, #13304c 58%, #0e2740 100%);
    border-top: 1px solid #0d2136;
    box-shadow: 0 -8px 24px rgba(11, 32, 52, .18);
  }
  .tabbar button { color: #9fb6cd; }
  .tabbar button .ico { color: #8fa8c0; }
  .tabbar button.on {
    color: #fff; background: rgba(255, 255, 255, .16); font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  }
  .tabbar button.on .ico { color: #fff; }
  .tabbar button.on::before { background: #7fb2ea; opacity: 1; }
}
:root[data-theme="dark"] .tabbar {
  background: linear-gradient(180deg, #102a44 0%, #0d2237 60%, #0a1a2b 100%);
  border-top-color: #0a1c2e;
}
/* ==========================================================================
 *  v0.9.4 介绍页首屏：把「直接登录」做成一眼就能看见的大按钮
 * ========================================================================== */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.hero-login {
  height: auto; min-height: 58px; padding: 0 34px;
  font-size: 1.08rem; font-weight: 700; letter-spacing: .02em;
  border-radius: 14px; gap: 10px;
  box-shadow: 0 12px 26px rgba(8, 22, 38, .38);
}
.hero-login .ico { width: 21px; height: 21px; }
.hero-login:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(8, 22, 38, .46); }
.hero-cta-note { color: #a9c0d6; font-size: .82rem; margin-top: 10px; }
@media (max-width: 620px) {
  .hero-login { width: 100%; min-height: 62px; font-size: 1.14rem; }
  .hero-cta .secondary-btn { flex: 1; }
}
/* ==========================================================================
 *  v0.10 手机版排版整理（<900px）
 *  目标：控件够大好点、按钮成组对齐、表单不再挤成一条、留白统一
 * ========================================================================== */

/* ---------- 记录查询：每个条件一个「标签在上、控件在下」的字段 ---------- */
.gf { display: grid; gap: 5px; min-width: 0; }
.gf-label { font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.gf > input, .gf > select { width: 100%; }

@media (max-width: 899px) {
  /* 1) 触控尺寸：主控件 38 → 46px */
  :root { --h-ctl: calc(46px * var(--font-scale, 1)); }
  input[type="text"], input[type="password"], input[type="search"], input[type="date"], select { min-height: 46px; }
  .primary-btn, .secondary-btn, .danger-btn, .file-btn { min-height: 46px; font-size: .92rem; }
  .icon-btn { min-height: 42px; min-width: 42px; }
  .topbar .ghost-btn { min-height: 36px; }   /* 顶栏别被撑高 */

  /* 2) 留白统一 */
  main { padding: 12px 16px 104px; }
  .view { gap: 14px; }
  .card { padding: 16px; border-radius: 14px; }
  .card-head { padding-bottom: 10px; margin-bottom: 12px; }

  /* 3) 按钮成组：主操作独占一行，次要按钮两列对齐 */
  .row.wrap { gap: 8px; }
  .row.wrap > .primary-btn { flex: 1 1 100%; }
  .row.wrap > .secondary-btn,
  .row.wrap > .ghost-btn,
  .row.wrap > .file-btn,
  .row.wrap > .danger-btn { flex: 1 1 calc(50% - 4px); }

  /* 4) 设置行：控件放不下就换行并占满整行；开关仍与文字同一行 */
  .setting-row { flex-wrap: wrap; row-gap: 10px; padding: 14px 0; }
  .setting-row .segmented { flex: 1 1 100%; width: 100%; }
  .setting-row .segmented button { flex: 1; }
  .setting-row select, .setting-row input[type="text"] { max-width: none; }
  .short-select { max-width: none; }
  .font-control { width: 100%; }

  /* 5) 分段控件好点 */
  .segmented { padding: 4px; }
  .segmented button { height: 40px; font-size: .88rem; }

  /* 6) 值班页：日期一行、班次一行；加人框上下堆叠 */
  .duty-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; }
  .duty-row .segmented { grid-column: 1 / -1; }
  .duty-row .segmented button { flex: 1; }
  .date-input { max-width: none; }
  .add-box { flex-wrap: wrap; }
  .add-box select, .add-box .primary-btn { flex: 1 1 100%; }

  /* 7) 每人一条：完成按钮不挤姓名 */
  .entry-head { flex-wrap: wrap; gap: 8px 10px; }
  .done-toggle { height: 40px; padding: 0 14px; font-size: .84rem; margin-left: auto; }
  .quick-tasks button { height: 32px; font-size: .8rem; }
  .entry-flags input[type="text"], .entry-flags select { flex: 1 1 100%; max-width: none; }

  /* 8) 筛选行里的下拉两个一排 */
  .row.wrap > select { flex: 1 1 calc(50% - 4px); width: auto; min-width: 0; }

  /* 9) 人员档案：从 4 列挤在一起改成「姓名 + 状态 / 职务 + 操作」两行 */
  .worker-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name status" "meta actions";
    gap: 6px 10px; padding: 12px;
  }
  .worker-row .cell-name { grid-area: name; }
  .worker-row .meta { grid-area: meta; }
  .worker-row .pill-cell { grid-area: status; justify-self: end; align-self: center; }
  .worker-row .worker-actions { grid-area: actions; justify-self: end; }
  .worker-actions .icon-btn { min-width: 72px; }

  /* 10) 记录查询的字段网格：手机上两列 */
  .form-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 10px; }

  /* 11) 记录列表：每行信息允许换行，不硬挤成一条 */
  .rec-item { padding: 12px; }
  .rec-item .line1 { flex-wrap: wrap; gap: 4px 10px; }

  /* 12) 签名板：手机上高宽比更接近实际画布，写出来的字不会被压扁 */
  .sign-card .sig-canvas { height: 170px; }
}

/* 11) 登录页（手机）：收掉品牌块的要点列表，登录表单直接可见 */
@media (max-width: 759px) {
  .login-wrap { padding: 16px 14px 28px; }
  .login-card { border-radius: 16px; }
  .login-brand { padding: 18px 20px 16px; gap: 6px; }
  .login-brand h1 { font-size: 1.34rem; }
  .login-brand-sub { font-size: .82rem; }
  .login-points, .login-brand-foot { display: none; }
  .login-form { padding: 20px; }
  .login-form .field-block { margin-top: 12px; }
  #btnLogin { font-size: .98rem; }
}
/* ==========================================================================
 *  v0.10.3 安装到桌面 / 主屏：分平台的三步指引
 * ========================================================================== */
.install-steps {
  list-style: none; counter-reset: ins; margin: 12px 0 0; padding: 0;
  display: grid; gap: 8px;
}
.install-steps li {
  counter-increment: ins;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px;
  align-items: start; font-size: .86rem; color: var(--text-2); line-height: 1.6;
}
.install-steps li > span { display: block; min-width: 0; }
.install-steps li::before {
  content: counter(ins);
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark);
  font-size: .76rem; font-weight: 700; line-height: 1;
}
:root[data-theme="dark"] .install-steps li::before { background: var(--surface-2); color: var(--text-2); }