/* 村级任务管理 - light theme, no external deps */
:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --line: #e5e7eb;
  --text: #1f2329;
  --dim: #8a919f;
  --brand: #2f6bff;
  --brand-dark: #1f4fd8;
  --ok-bg: #e8f7ee; --ok-tx: #0a8a4a;
  --err-bg: #fdecec; --err-tx: #c0392b;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6;
}
a { color: var(--brand); }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.req { color: #c0392b; }

/* top bar */
.topbar {
  display: flex; align-items: center; gap: 24px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 0 28px; height: 56px; position: sticky; top: 0; z-index: 10;
}
.brand { font-size: 16px; font-weight: 700; white-space: nowrap; flex: none; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a {
  color: var(--dim); text-decoration: none; padding: 6px 14px; border-radius: 8px;
  white-space: nowrap;
}
.topbar nav a:hover { color: var(--text); background: #f2f3f5; }
.topbar nav a.on { color: var(--brand); background: #eef3ff; font-weight: 600; }
/* 返回入口门户：视觉上与系统内页签区分开 */
.topbar nav a.nav-portal { color: #a3aab8; margin-left: 6px; }
.topbar nav a.nav-portal:hover { color: var(--brand); background: #f2f3f5; }
.top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.link-btn {
  background: none; border: 0; color: var(--dim); font: inherit; cursor: pointer; padding: 6px 4px;
}
.link-btn:hover { color: var(--err-tx); }
form.inline { display: inline; }

.wrap { max-width: 1080px; margin: 24px auto 40px; padding: 0 20px; }

/* flash */
.flash {
  max-width: 1080px; margin: 0 auto 16px; padding: 10px 16px; border-radius: 8px;
  background: var(--ok-bg); color: var(--ok-tx); font-size: 13px;
}
.flash-err { background: var(--err-bg); color: var(--err-tx); }

/* 表单内联报错（发布失败留在当前页） */
.form-alert {
  margin: 0 0 16px; padding: 11px 14px; border-radius: 8px;
  background: var(--err-bg); color: var(--err-tx); border: 1px solid #f5c6c6;
  font-size: 13.5px; line-height: 1.7;
}
.form-alert b { font-weight: 600; }
.form-alert-tip { margin-top: 4px; font-size: 12px; color: #a55248; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; }
.card-label { color: var(--dim); font-size: 13px; }
.card-num { font-size: 26px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.card-sub { color: var(--dim); font-size: 12px; }
.card-todo { background: #f7f9ff; border-color: #dfe7ff; }
.card-doing { background: #f2f8ff; border-color: #d5e6ff; }
.card-doing .card-num { color: var(--brand-dark); }
.card-overdue { background: #fff6f5; border-color: #f6dedb; }
.card-overdue .card-num { color: #c0392b; }
.card-week { background: #f4fbf7; border-color: #d9efe4; }
.card-week .card-num { color: #0a8a4a; }

/* panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 20px; }
.panel h2 { font-size: 15px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-form { max-width: 640px; }

/* tabs */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.tab {
  text-decoration: none; color: var(--dim); font-size: 13px; padding: 5px 12px;
  border-radius: 8px; border: 1px solid transparent;
}
.tab i { font-style: normal; font-size: 11px; margin-left: 5px; color: #b6bcc7; }
.tab:hover { background: #f2f3f5; color: var(--text); }
.tab.on { background: #eef3ff; color: var(--brand); border-color: #dbe5ff; font-weight: 600; }
.tab.on i { color: var(--brand); }

/* table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--dim); font-weight: 500; font-size: 12px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.task-table td.t-main { min-width: 260px; }
.t-title { font-weight: 600; }
.t-detail { color: var(--dim); font-size: 12px; margin-top: 2px; }
.t-note { color: #0a8a4a; font-size: 12px; margin-top: 2px; }
.t-meta { color: #b6bcc7; font-size: 11px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.row-done .t-title { color: var(--dim); text-decoration: line-through; }
.row-cancelled .t-title { color: var(--dim); }
.row-done, .row-cancelled { background: #fbfbfc; }

/* pills */
.pill {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px;
  line-height: 20px; white-space: nowrap;
}
.st-open { background: #eef3ff; color: var(--brand-dark); }
.st-doing { background: #fff4e5; color: #b25e00; }
.st-done { background: var(--ok-bg); color: var(--ok-tx); }
.st-cancel { background: #f2f3f5; color: var(--dim); }
.prio-0 { background: #f7f8fa; color: #8a919f; border: 1px solid #eceef2; }
.prio-1 { background: #fff4e5; color: #b25e00; }
.prio-2 { background: #fdecec; color: #c0392b; font-weight: 600; }

/* due */
.due { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.due-overdue { color: #c0392b; font-weight: 600; }
.due-today { color: #b25e00; font-weight: 600; }
.due-future { color: var(--dim); }
.due-closed { color: #b6bcc7; }
.due-none { color: #b6bcc7; }

/* buttons */
.btn {
  display: inline-block; background: var(--brand); color: #fff; border: 0; border-radius: 8px;
  padding: 8px 18px; font-size: 14px; cursor: pointer; text-decoration: none; font-family: inherit;
  line-height: 1.4;
}
.btn:hover { background: var(--brand-dark); }
.btn-sm { padding: 4px 12px; font-size: 12px; }
.btn-block { width: 100%; margin-top: 6px; }
.btn-ghost { background: transparent; color: var(--dim); border: 1px solid var(--line); }
.btn-ghost:hover { background: #f2f3f5; color: var(--text); }
.btn-danger { background: transparent; color: #c0392b; border: 1px solid #f3d4d1; }
.btn-danger:hover { background: var(--err-bg); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.row-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* forms */
label { display: block; margin-bottom: 12px; color: var(--dim); font-size: 13px; }
input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; color: var(--text);
}
textarea { resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,107,255,.12);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-acts { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-row input[type=text] { width: 220px; margin-top: 0; }
.filter-row select { width: auto; margin-top: 0; }
.warn { color: #c0392b; margin-bottom: 10px; }

/* empty */
.empty { color: var(--dim); padding: 22px 0; text-align: center; }

/* timeline */
.task-logs { margin-top: 22px; border-top: 1px dashed var(--line); padding-top: 16px; }
.task-logs h3 { font-size: 13px; color: var(--dim); font-weight: 500; margin-bottom: 10px; }
.timeline { list-style: none; }
.timeline li { display: flex; gap: 10px; font-size: 12px; padding: 5px 0; border-bottom: 1px dashed #f0f1f4; }
.timeline li:last-child { border-bottom: 0; }
.tl-time { color: #b6bcc7; font-variant-numeric: tabular-nums; flex: none; }
.tl-act { color: var(--brand-dark); flex: none; }
.tl-note { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* auth */
.center-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 34px 38px; width: 360px; box-shadow: 0 6px 30px rgba(0,0,0,.05);
}
.auth-card h1 { font-size: 19px; margin-bottom: 8px; }
.auth-card .flash { max-width: none; margin: 0 0 12px; }
.foot-link { margin-top: 18px; font-size: 12px; text-align: center; }
.foot-link a { color: var(--dim); text-decoration: none; }
.foot-link a:hover { color: var(--brand); }
.auth-back {
  display: inline-block; margin: -4px 0 12px; font-size: 12px;
  color: var(--dim); text-decoration: none;
}
.auth-back:hover { color: var(--brand); text-decoration: underline; }
.pwd-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 12px; color: var(--dim); margin: 10px 0 12px;
}
.pwd-meta b { color: var(--text); font-weight: 600; }
.auth-out { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.check-line {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--text); margin: 4px 0 12px;
}
.check-line input[type="checkbox"] { width: 15px; height: 15px; margin: 0; }

.foot { text-align: center; color: var(--dim); font-size: 12px; padding: 6px 0 26px; }

/* modal */
.modal-mask {
  position: fixed; inset: 0; background: rgba(20, 24, 33, .38);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-mask[hidden] { display: none; }
.modal {
  background: var(--panel); border-radius: 14px; padding: 24px 26px;
  width: 380px; max-width: calc(100vw - 32px); box-shadow: 0 18px 48px rgba(20,24,33,.18);
}
.modal-msg { font-size: 14px; line-height: 1.7; margin-bottom: 8px; }
.modal-hint { color: var(--dim); font-size: 12px; margin-bottom: 16px; }
.modal-acts { display: flex; justify-content: flex-end; gap: 10px; }
.modal textarea { margin-top: 6px; }

/* 账号与角色 */
.user-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.user-chip b { font-weight: 600; }
.role-badge {
  display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 11px; line-height: 18px;
  border: 1px solid transparent;
}
.role-town { background: #eef3ff; color: var(--brand-dark); border-color: #dbe5ff; }
.role-village { background: #f2f8f4; color: #17795e; border-color: #d9efe4; }
.village-tag {
  display: inline-block; padding: 1px 9px; border-radius: 6px; font-size: 12px;
  background: #f5f7fb; color: #4a5262; border: 1px solid #e6eaf2; white-space: nowrap;
}

/* 多选承办村 */
.field-block { margin-bottom: 14px; }
.field-label { color: var(--dim); font-size: 13px; margin-bottom: 6px; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pick-item {
  display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text);
  font-size: 13px; cursor: pointer;
}
.pick-item:hover { border-color: #cdd8ee; background: #fafbff; }
.pick-item input { margin: 0; accent-color: var(--brand); }
.pick-item:has(input:checked) { border-color: var(--brand); background: #f3f7ff; color: var(--brand-dark); font-weight: 600; }
.pick-acts { display: flex; gap: 8px; margin-top: 8px; }
.readonly-box {
  padding: 9px 11px; border: 1px dashed #d8dee9; border-radius: 8px; background: #fafbfc; font-size: 14px;
}
.inline-edit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-edit input[type=text] { width: 130px; margin-top: 0; padding: 5px 8px; font-size: 13px; }
.tl-who { color: #7a8494; flex: none; }

@media (max-width: 760px) {
  .topbar { padding: 0 12px; gap: 10px; overflow-x: auto; }
  .wrap { padding: 0 12px; }
  .grid-2 { grid-template-columns: 1fr; gap: 0; }
  .filter-row input[type=text] { width: 100%; }
  .panel-form { max-width: none; }
}

/* ---------- 任务类型 ---------- */
.kind-chip {
  display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 11px; line-height: 18px;
  font-weight: 600; margin-right: 6px; vertical-align: 1px; border: 1px solid transparent;
  white-space: nowrap;
}
.kind-notice { background: #eef3ff; color: var(--brand-dark); border-color: #dbe5ff; }
.kind-collect { background: #fff4e5; color: #b25e00; border-color: #f6e2c8; }

.kind-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.kind-item {
  display: block; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; color: var(--text);
}
.kind-item input { margin-right: 7px; accent-color: var(--brand); }
.kind-item b { font-size: 14px; }
.kind-item span { display: block; color: var(--dim); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.kind-item:hover { border-color: #cdd8ee; background: #fafbff; }
.kind-item:has(input:checked) { border-color: var(--brand); background: #f3f7ff; box-shadow: 0 0 0 3px rgba(47,107,255,.08); }
[data-kind-block] { margin-bottom: 14px; }
.check-line { display: block; margin: 8px 0 0; font-size: 13px; color: #4a5262; }
.check-line input { margin-right: 6px; accent-color: var(--brand); }

/* ---------- 任务详情 ---------- */
.task-hero .hero-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
/* 右上角「返回列表」：始终贴右，窄屏换行后也靠右 */
.task-hero .hero-back { margin-left: auto; }
.task-hero .hero-title { font-size: 19px; line-height: 1.45; margin-bottom: 6px; }
.hero-meta { color: var(--dim); font-size: 12px; }
.hero-body {
  margin-top: 14px; padding: 12px 14px; background: #fafbfc; border: 1px solid var(--line);
  border-radius: 10px; font-size: 14px; line-height: 1.8; color: #3d4352;
}
.hero-imgs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.hero-imgs .shot {
  display: block; width: 180px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff;
}
.hero-imgs .shot img { display: block; width: 100%; height: 130px; object-fit: cover; }
.hero-acts { margin-top: 16px; }

/* ---------- 上报文件 ---------- */
.file-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.f-name { font-weight: 600; word-break: break-all; }
.tmpl-auto {
  font-size: 12px; color: var(--brand-dark); background: #eef4fc; border: 1px solid #d3e2f5;
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.flow-tip {
  margin: 0 0 12px; padding: 8px 12px; font-size: 12px; line-height: 1.6;
  color: var(--brand-dark); background: #eef4fc; border: 1px solid #d3e2f5; border-radius: 8px;
}
.upload-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload-line input[type=file] { flex: 1; min-width: 220px; margin: 0; }
.file-list { list-style: none; margin-top: 12px; }
.file-list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px dashed var(--line); font-size: 13px;
}
.file-list li .inline { margin-left: auto; }
.link-btn.danger { color: var(--err-tx); }

/* ---------- 镇级下发资料（详情页 / 编辑页） ---------- */
.notice-docs { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; }
.notice-docs .nd-title { font-size: 13px; font-weight: 600; color: var(--brand-dark); margin-bottom: 4px; }
.notice-docs .file-list { margin-top: 4px; }
.notice-manage { margin-top: 22px; border-top: 1px dashed var(--line); padding-top: 16px; }
.notice-manage h3 { font-size: 13px; color: var(--dim); font-weight: 500; margin-bottom: 8px; }
.notice-manage .file-list li { font-size: 13px; }
.notice-manage .task-form { margin-top: 10px; }

/* ---------- 编辑页：承办村管理 / 危险操作 ---------- */
.v-manage { margin-top: 22px; border-top: 1px dashed var(--line); padding-top: 16px; }
.v-manage h3 { font-size: 13px; color: var(--dim); font-weight: 500; margin-bottom: 10px; }
.v-manage .collect-table { font-size: 13px; }
.v-manage .collect-table td { vertical-align: middle; }
.v-add { margin-top: 14px; padding: 12px 14px; background: #fafbfd; border: 1px solid var(--line); border-radius: 10px; }
.v-pick-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 12px; }
.v-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.v-pick input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }
.danger-zone {
  margin-top: 22px; padding: 12px 14px; border: 1px solid #f3d6d4; background: #fefafa;
  border-radius: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.danger-zone > div:first-child { flex: 1 1 320px; font-size: 13px; }
.danger-zone b { color: var(--err-tx); }
.danger-zone form { margin: 0; }

/* ---------- 手动填写表 ---------- */
.fill-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.fill-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.fill-table th, .fill-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.fill-table thead th { background: #fafbfc; color: #4a5160; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fill-table td input[type=text] {
  width: 100%; min-width: 90px; margin: 0; padding: 6px 8px; font: inherit; font-size: 13px;
  border: 1px solid var(--line); border-radius: 6px;
}
.fill-table td input[type=text]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,107,255,.1); }
.fill-table .col-no { width: 40px; color: var(--dim); text-align: right; }
.fill-table .col-del { width: 56px; text-align: center; }
/* 分层列名：小组名小字在上，叶子名在下（导出 CSV 时仍是「组/子」全名） */
.th-grp { display: block; font-size: 11px; font-weight: 400; color: var(--dim); line-height: 1.3; margin-bottom: 2px; }

/* ---------- 汇总页 ---------- */
.collect-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: #4a5262; margin-bottom: 14px; }
.collect-stats b { font-size: 16px; color: var(--text); }
.collect-table td { vertical-align: top; }
.f-chip {
  display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom; padding: 0 8px; margin: 0 4px 4px 0; border-radius: 6px;
  background: #f5f7fb; border: 1px solid #e6eaf2; font-size: 12px;
}
.collect-grid th, .collect-grid td { font-size: 12px; }
.collect-grid td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 汇总内容：勾选行，做「部分汇总」 */
.pick-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe;
}
.pick-all { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pick-all input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }
.pick-count { font-size: 13px; color: var(--dim); }
.pick-count.has { color: var(--brand-dark); font-weight: 600; }
.col-pick { width: 34px; text-align: center; }
.collect-grid td.col-pick { overflow: visible; }
.col-pick input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--brand); }
.collect-grid tr.is-picked td { background: #eff5ff; }
.collect-table th.col-pick, .collect-table td.col-pick { text-align: center; }
.collect-table tr.is-picked td { background: #eff5ff; }
.vd-sub { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #4a5262; margin: -4px 0 12px; }

@media (max-width: 760px) {
  .hero-imgs .shot { width: calc(50% - 5px); }
  .hero-imgs .shot img { height: 110px; }
  .collect-stats { gap: 10px 16px; }
  .upload-line input[type=file] { min-width: 0; width: 100%; }
  .file-list li .inline { margin-left: 0; }
  .hero-title { font-size: 17px; }
}

/* 任务标题链接：保持正文颜色，悬停才提醒可点 */
.t-title a { color: inherit; text-decoration: none; }
.t-title a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- 一次下发（多村共用一条任务） ---------- */
.multi-tag {
  display: inline-block; margin-left: 7px; padding: 0 7px; border-radius: 6px;
  font-size: 11px; line-height: 18px; font-weight: 500; vertical-align: 1px;
  background: #eef3ff; color: #3558b3; border: 1px solid #dbe5ff;
}
.v-cell { min-width: 190px; }
.v-list { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.v-item { display: inline-flex; align-items: center; }
.v-sep { font-style: normal; color: #9aa3b2; margin: 0 1px; line-height: 1; }
/* 折叠状态下，最后一个可见村名后面不留顿号，免得「、＋13 个村」 */
.v-list:not(.is-open) .v-item-end .v-sep { display: none; }
.v-chip {
  display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 12px; line-height: 19px;
  border: 1px solid #e6eaf2; border-left-width: 3px; background: #f7f8fa; color: #4a5262; white-space: nowrap;
}
.v-chip.v-open { border-left-color: #9db4e6; background: #f6f9ff; }
.v-chip.v-doing { border-left-color: #e2a33c; background: #fffaf1; }
.v-chip.v-done { border-left-color: #35a06a; background: #f4fbf7; }
.v-chip.v-cancelled { border-left-color: #c9ced8; background: #f8f8f9; color: #8a919f; text-decoration: line-through; }
.v-toggle { color: #3558b3; font-size: 12px; padding: 0 4px; }
.v-toggle:hover { color: var(--brand); }
.v-prog { color: var(--dim); font-size: 11px; margin-top: 3px; }
.v-prog b { color: var(--text); }

.batch-chip {
  display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 20px;
  background: #eef3ff; color: #3558b3; border: 1px solid #dbe5ff;
}
.batch-banner {
  margin: 10px 0 6px; padding: 9px 12px; border: 1px solid #dbe5ff; background: #f5f9ff;
  border-radius: 8px; font-size: 13px; color: #3558b3; line-height: 1.7;
}
.batch-banner a { color: var(--brand); text-decoration: none; margin-left: 6px; white-space: nowrap; }
.batch-banner a:hover { text-decoration: underline; }
.batch-nums { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.bn { padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.bn-done { background: var(--ok-bg); color: var(--ok-tx); }
.bn-doing { background: #fff4e5; color: #b25e00; }
.bn-open { background: #eef3ff; color: var(--brand-dark); }
.bn-cancel { background: #f2f3f5; color: var(--dim); }
.bs-bar { height: 8px; border-radius: 999px; background: #eef0f4; overflow: hidden; margin: 4px 0 14px; }
.bs-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4e8cff, #35a06a); transition: width .3s; }
.cell-note { max-width: 240px; font-size: 12px; color: #4a5262; }

@media (max-width: 760px) {
  .v-cell { min-width: 140px; }
  .v-chip { font-size: 11px; line-height: 18px; padding: 0 6px; }
  .batch-nums { gap: 6px; font-size: 11px; }
  .cell-note { max-width: 160px; }
  .multi-tag { display: none; }
}