:root {
  --c-bg: #f4f6f9;
  --c-surface: #ffffff;
  --c-border: #e2e8f0;
  --c-text: #1a202c;
  --c-muted: #64748b;
  --c-primary: #2563eb;
  --c-primary-hover: #1d4ed8;
  --c-success: #16a34a;
  --c-warning: #d97706;
  --c-danger: #dc2626;
  --c-info: #0891b2;
  --c-pending: #7c3aed;
  --sidebar-w: 240px;
  --radius: 8px;
  font-size: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
  display: flex;
}

/* ── Sidebar ── */
#sidebar {
  width: var(--sidebar-w);
  background: #f8f8f9;
  color: #34383f;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  border-right: 1px solid #eceef1;
}

#sidebar .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 14px 20px 10px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: #202329;
}

#sidebar .brand-mark {
  width: 21px;
  height: 21px;
  flex: none;
  fill: none;
  stroke: #525966;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#sidebar nav {
  overflow-y: auto;
  padding: 2px 12px 14px;
  scrollbar-width: thin;
  scrollbar-color: #d7d9de transparent;
}

.nav-group + .nav-group { margin-top: 17px; }

.nav-group-title {
  padding: 9px 9px 6px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .11em;
  color: #989da6;
  text-transform: uppercase;
}

.nav-sub { margin: 1px 0; }

.nav-sub-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #454951;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

#sidebar .nav-sub-title:hover { background: #f0f1f3; color: #292c31; }
#sidebar .nav-sub-title:focus-visible,
#sidebar nav a:focus-visible,
#sidebar .sidebar-footer a:focus-visible {
  outline: 2px solid #9ca3af;
  outline-offset: 2px;
}

#sidebar .nav-sub-title .icon,
#sidebar .sidebar-footer .icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #858a93;
}

.nav-sub-title > span:nth-child(2) { flex: 1; }

.nav-caret {
  width: 7px;
  height: 7px;
  margin: -3px 3px 0 8px;
  border-right: 1.5px solid #858a93;
  border-bottom: 1.5px solid #858a93;
  transform: rotate(45deg);
  transition: transform .16s ease, margin .16s ease;
}

.nav-sub.is-expanded .nav-caret {
  margin-top: 3px;
  transform: rotate(225deg);
}

.nav-sub-items {
  display: none;
  padding: 2px 0 5px 28px;
}

.nav-sub.is-expanded .nav-sub-items { display: block; }

#sidebar nav .nav-sub-items a {
  display: flex;
  align-items: center;
  min-height: 35px;
  gap: 8px;
  margin: 1px 0;
  padding: 7px 10px;
  border-radius: 8px;
  color: #666b74;
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.3;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

#sidebar nav .nav-sub-items a:hover { background: #f0f1f3; color: #30343a; }
#sidebar nav .nav-sub-items a.active {
  background: #fff;
  color: #22252a;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(25, 30, 40, .08), 0 0 0 1px rgba(30, 35, 45, .035);
}

#sidebar nav a .nav-badge {
  margin-left: auto;
  background: #ef4b55;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  min-width: 24px;
  padding: 0 7px;
  text-align: center;
  border-radius: 10px;
  font-weight: 600;
}

/* ── Main content ── */
#main {
  margin-left: var(--sidebar-w);
  flex: 1;
  padding: 24px;
  min-height: 100vh;
}

.page { display: none; }
.page.active { display: block; }

h1 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }

/* ── Cards ── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.stat-card .num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.stat-card .label {
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 4px;
}

.stat-card.success .num { color: var(--c-success); }
.stat-card.danger .num  { color: var(--c-danger); }
.stat-card.warning .num { color: var(--c-warning); }
.stat-card.info .num    { color: var(--c-info); }
.stat-card.pending .num { color: var(--c-pending); }

/* ── Status bar chart ── */
.stage-bars { display: flex; flex-direction: column; gap: 8px; }
.stage-row { display: flex; align-items: center; gap: 10px; }
.stage-row .stage-name { width: 140px; font-size: 12px; color: var(--c-muted); flex-shrink: 0; }
.stage-row .bar-wrap { flex: 1; background: #e2e8f0; border-radius: 4px; height: 14px; overflow: hidden; }
.stage-row .bar { height: 100%; border-radius: 4px; transition: width 0.3s; }
.stage-row .bar.done      { background: var(--c-success); }
.stage-row .bar.pending   { background: var(--c-pending); }
.stage-row .bar.failed    { background: var(--c-danger); }
.stage-row .bar-count { width: 36px; text-align: right; font-size: 12px; color: var(--c-muted); }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th {
  text-align: left;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid var(--c-border);
  font-weight: 600;
  color: var(--c-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: #f8fafc; }
tr.clickable { cursor: pointer; }

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-done     { background: #dcfce7; color: #166534; }
.badge-pending  { background: #ede9fe; color: #5b21b6; }
.badge-failed   { background: #fee2e2; color: #991b1b; }
.badge-review   { background: #fef3c7; color: #92400e; }
.badge-success  { background: #dcfce7; color: #166534; }
.badge-info     { background: #e0f2fe; color: #075985; }

/* ── 人员管理 role 胶囊组：左「客户」右「我方」，选中亮色、未定两个都灰 ── */
.cgm-role-group { display: inline-flex; gap: 6px; }
.cgm-pill {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
  background: #f1f5f9;
  color: #94a3b8;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.cgm-pill:hover { border-color: #cbd5e1; color: #64748b; }
.cgm-pill.cgm-pill-customer.active  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.cgm-pill.cgm-pill-our_staff.active { background: #e0f2fe; color: #075985; border-color: #bae6fd; }

/* ── Filter bar ── */
.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filter-bar select,
.filter-bar input {
  padding: 7px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--c-surface);
  color: var(--c-text);
}

/* ── Pagination ── */
.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  cursor: pointer;
  font-size: 13px;
}

.pagination button:disabled { opacity: 0.4; cursor: default; }
.pagination .page-info { font-size: 13px; color: var(--c-muted); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s ease, box-shadow 0.15s;
}

.btn:active { transform: translateY(1px); }
/* 禁用态原本没样式，按钮看着还能点 */
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-hover); }
.btn-secondary { background: #f1f5f9; color: var(--c-text); border: 1px solid var(--c-border); }
.btn-secondary:hover { background: #e2e8f0; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-warning { background: var(--c-warning); color: #fff; }
.btn-warning:hover { background: #b45309; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* 映射明细状态分页 */
.learn-map-tab { background: #f1f5f9; color: var(--c-text); border: 1px solid var(--c-border); }
.learn-map-tab:hover { background: #e2e8f0; }
.learn-map-tab.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ── Modal (centered overlay) ── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open,
.modal-overlay.active { display: flex; animation: overlayFadeIn 0.18s ease; }
.modal-overlay.open .modal,
.modal-overlay.active .modal { animation: modalPopIn 0.22s cubic-bezier(.2, .8, .25, 1); }

.modal {
  background: var(--c-surface);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  max-width: 920px;
  width: 92%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.modal-header h3 { margin: 0; font-size: 16px; }
.modal-header .close-btn {
  background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--c-muted); padding: 0 4px;
}

.modal-body {
  overflow-y: auto;
  padding: 16px 20px;
  flex: 1;
}

.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.material-export-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: 90vh;
  margin: auto;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.material-export-dialog::backdrop { background: rgba(0,0,0,.4); }
.material-export-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.material-export-dates label { display: grid; gap: 8px; min-width: 0; }
.material-export-dates input { width: 100%; min-width: 0; }
.material-export-sources { margin: 20px 0 16px; border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.material-export-sources legend { margin-bottom: 10px; }
.material-export-sources label { display: inline-flex; align-items: center; gap: 5px; }
.material-export-hint { color: var(--c-muted); font-size: 13px; line-height: 1.6; margin: 8px 0; }
#material-export-message { font-size: 13px; color: var(--c-danger, #c0392b); margin: 12px 0 0; }
#material-export-message:empty { display: none; }
@media (max-width: 480px) { .material-export-dates { grid-template-columns: 1fr; gap: 12px; } }

/* ── Review modal pair table ── */
.review-meta {
  font-size: 13px;
  color: var(--c-muted);
  background: #f8fafc;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.review-meta strong { color: var(--c-text); }
.review-pair-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.review-pair-table th { text-align: left; padding: 6px 8px; color: var(--c-muted);
  font-weight: 500; border-bottom: 1px solid var(--c-border); }
.review-pair-table td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; }
.review-pair-table tr.warn { background: #fef3c7; }
.review-pair-table tr.temp { background: #fee2e2; }
.review-pair-table .erp-extra { color: var(--c-muted); font-style: italic; }
.review-pair-table .pair-arrow { color: var(--c-muted); text-align: center; }

/* ── Drawer ── */
#drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 100;
}

#drawer {
  position: fixed;
  top: 0; right: -900px; bottom: 0;
  width: 900px;
  background: var(--c-surface);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  z-index: 101;
  transition: right 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#drawer.open { right: 0; }
#drawer-overlay.open { display: block; animation: overlayFadeIn 0.25s ease; }

#drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

#drawer-header h2 { margin: 0; }

#drawer-body {
  overflow-y: auto;
  padding: 20px;
  flex: 1;
}

#drawer-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--c-muted);
  line-height: 1;
}

/* ── Settings form ── */
.settings-section { margin-bottom: 28px; }
.settings-section h2 { margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }

/* PSS 扫码登录配置 */
#pss-scan-login-fields { border: 0; min-width: 0; }
#main:has(#page-settings-pss-login.active) { min-width: 0; }
.scan-login-intro { color: var(--c-muted); margin: -8px 0 18px; }
.scan-login-notice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 22px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); font-size: 13px; line-height: 1.7; }
.scan-login-help { color: var(--c-muted); font-size: 12px; line-height: 1.7; margin: 8px 0 12px; }
.scan-login-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.scan-login-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.scan-login-check[hidden] { display: none; }
.scan-login-history { border: 1px dashed var(--c-border); padding: 12px 14px; border-radius: var(--radius); font-size: 13px; line-height: 1.8; }
.scan-login-history code { overflow-wrap: anywhere; margin-right: 8px; }
.scan-login-schedule { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.scan-login-schedule > span { padding: 8px 12px; border-radius: 6px; background: #f1f5f9; font-size: 13px; }
.scan-login-rules { padding-left: 22px; line-height: 2; font-size: 13px; }
.scan-login-result { margin: 12px 0 20px; font-size: 13px; line-height: 1.7; }
.scan-login-table { min-width: 850px; }
.scan-login-table .scan-login-help { margin: 3px 0 0; }
.pss-scan-login-robot { width: 240px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--radius); font-size: 13px; }
.scan-login-table [data-scan-test] { margin-top: 8px; }

/* 配置页 5 大主题色区分：左侧色条 + 浅底 + 同色标题 */
.settings-section.theme-pss,
.settings-section.theme-erp,
.settings-section.theme-account,
.settings-section.theme-schedule,
.settings-section.theme-notify { border-left-width: 4px; border-left-style: solid; }

.settings-section.theme-pss      { border-left-color: #2563eb; background: #ffffff; }
.settings-section.theme-pss h2   { color: #000000; border-bottom-color: #2563eb; }

.settings-section.theme-erp      { border-left-color: #de6603; background: #ffffff; }
.settings-section.theme-erp h2   { color: #000000; border-bottom-color: #de6603; }

.settings-section.theme-account     { border-left-color: #7c3aed; background: #ffffff; }
.settings-section.theme-account h2  { color: #000000; border-bottom-color: #7c3aed; }

.settings-section.theme-schedule    { border-left-color: #d97706; background: #ffffff; }
.settings-section.theme-schedule h2 { color: #000000; border-bottom-color: #d97706; }

.settings-section.theme-notify      { border-left-color: #27d505; background: #ffffff; }
.settings-section.theme-notify h2   { color: #000000; border-bottom-color: #27d505; }

.field-group { margin-bottom: 14px; }
.field-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field-group input[type=text],
.field-group input[type=url] {
  width: 100%;
  max-width: 480px;
  padding: 8px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 13px;
}

.field-group .field-hint { font-size: 12px; color: var(--c-muted); margin-top: 4px; }

.radio-group { display: flex; gap: 20px; align-items: center; }
.radio-group label { display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }

.account-card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 12px;
  overflow: hidden;
}

.account-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  background: #f8fafc;
}

.account-card-header:hover { background: #f1f5f9; }
.account-card .acct-name { font-weight: 600; }
.account-card .acct-info { font-size: 12px; color: var(--c-muted); margin-top: 2px; }
.account-card .acct-chevron { color: var(--c-muted); font-size: 12px; transition: transform 0.2s; }
.account-card.expanded .acct-chevron { transform: rotate(180deg); }

/* 展开态分区：账号(外层)整块用绿色（框 + 表头 + 竖条），平台(内层)整块用蓝色。
   每层「框色 = 自己表头色」，两层色系不同 → 嵌套时一眼分得清层级和当前焦点。
   账号比平台粗一档（3px vs 2px）再强化外层/内层关系。
   加粗走 box-shadow 而非改 border-width：.account-card 是 overflow:hidden，
   改边框宽度会挤动内部布局，box-shadow 不占布局、不引起 reflow。 */
.account-card.expanded {
  border-color: var(--c-success);
  box-shadow: 0 0 0 2px var(--c-success);   /* 外层：绿色，合计 3px 视觉厚度 */
}
.account-card.expanded .account-card-header {
  background: #ecfdf5;                       /* 绿色表头，与平台的蓝色表头区分 */
  box-shadow: inset 4px 0 0 var(--c-success);
}
.account-card.expanded .account-card-header:hover { background: #d1fae5; }
.account-card.expanded .acct-name { color: #15803d; }

.account-card-body {
  display: none;
  padding: 16px;
  border-top: 1px solid var(--c-border);
}

/* 账号启用开关（卡片头）：停用的卡片整体压灰，但仍可展开编辑 */
.account-card.account-disabled .account-card-header { background: #f3f4f6; }
.account-card.account-disabled .acct-name,
.account-card.account-disabled .acct-info { opacity: .55; }
.badge-muted { background: #e5e7eb; color: #4b5563; }

.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 12px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .switch-slider {
  position: relative; width: 34px; height: 18px; border-radius: 9px;
  background: #cbd5e1; transition: background .15s; flex-shrink: 0;
}
.switch .switch-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.switch input:checked + .switch-slider { background: var(--c-success, #16a34a); }
.switch input:checked + .switch-slider::after { transform: translateX(16px); }
.switch .switch-label { color: var(--c-muted); min-width: 2em; }
.switch input:checked ~ .switch-label { color: var(--c-success, #16a34a); font-weight: 600; }

.account-card.expanded .account-card-body { display: block; }

.acct-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-bottom: 14px;
}

/* 窄屏塌成一列——两列写死时字段会被压到只剩几个字宽 */
@media (max-width: 900px) {
  .acct-form-grid { grid-template-columns: 1fr; }
}

/* ── 平台开关行（摘要标识 / 合单 / 回溯往期）──
   自适应栅格：宽屏三列，中屏两列，窄屏一列。开关之间互不挤压，
   也不再跟「PSS 机构简称」抢同一行的空间。沿用 .stats-grid 的 minmax 写法。 */
.plat-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.plat-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  cursor: pointer;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.plat-toggle:hover { border-color: #cbd5e1; }

.plat-toggle input { margin-top: 2px; flex: none; }

/* 勾选态：主色边框 + 浅蓝底，跟 .platform-block.expanded 同一套蓝色语言 */
.plat-toggle:has(input:checked) {
  border-color: var(--c-primary);
  background: #eff6ff;
}

/* 窄屏开关行塌成一列。必须放在上面 .plat-toggle-grid 基础规则之后——
   同特异度下后写的胜出，写在前面会被 auto-fit 覆盖掉。 */
@media (max-width: 900px) {
  .plat-toggle-grid { grid-template-columns: 1fr; }
}

.acct-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.acct-form-group .pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.acct-form-group input {
  width: 100%;
  padding: 7px 32px 7px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 13px;
}

.acct-form-group .pw-toggle {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-muted);
  font-size: 14px;
  padding: 0;
  line-height: 1;
}

.acct-platforms {
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 12px;
}

.acct-save-result { font-size: 12px; }

/* ── Platform block ── */
/* 折叠态：只留一行摘要（名字 + 推去哪 + 映射表 + 客户映射数 + ✓/⚠）。
   一个账号下可能挂 3+ 个平台，每个平台展开后是 5 个字段 + 上百行客户映射，
   全铺开一屏根本看不完，所以默认收起、点头部才展开。 */
.platform-block {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 12px;
  background: #fafbfc;
  overflow: hidden;
}

.platform-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.platform-block-header:hover { background: #f1f5f9; }

/* 展开态：整块蓝色（框 + 表头 + 竖条），与账号的绿色区分；
   比账号细一档（1px 外扩 vs 账号 2px）体现内层关系 */
.platform-block.expanded {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 1px var(--c-primary);   /* 内层：合计 2px，比账号的 3px 细 */
}
.platform-block.expanded .platform-block-header {
  background: #eff6ff;
  box-shadow: inset 4px 0 0 var(--c-primary);
}
.platform-block.expanded .platform-block-header:hover { background: #dbeafe; }
.platform-block.expanded .plat-head-name { color: #1d4ed8; }

.platform-block .plat-head-name { font-size: 13px; font-weight: 600; }
.platform-block .plat-head-summary {
  font-size: 12px;
  color: var(--c-text);
  margin-top: 3px;
  line-height: 1.6;
}
.platform-block .plat-chevron {
  color: var(--c-muted);
  font-size: 12px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.platform-block.expanded .plat-chevron { transform: rotate(180deg); }

.platform-block-body {
  display: none;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--c-border);
}
.platform-block.expanded .platform-block-body { display: block; }

.platform-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* 可搜索选择框（input + datalist）的校验提示：值不在候选里标黄，但不阻断输入 */
.acct-form-group input.pick-unknown {
  border-color: #fbbf24;
  background: #fffbeb;
}
.field-hint.pick-hint {
  font-size: 11px;
  color: var(--c-muted);
  margin-top: 3px;
  min-height: 14px;
}
.field-hint.pick-hint.warn { color: #b45309; }
.field-hint.pick-hint.ok   { color: var(--c-success); }
.field-hint.pick-hint.muted { color: var(--c-muted); }

/* ── Customer map rows ── */
.cmap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cmap-row input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 12px;
}

.cmap-arrow { color: var(--c-muted); flex-shrink: 0; }

/* 折叠态：只显示前 10 行，其余隐藏（仍在 DOM，保存时照样收集） */
.cmap-table.collapsed .cmap-row:nth-child(n+11) { display: none; }

/* ERP 客户列表核对：行尾 ✓/⚠ 状态位 + 汇总栏 + 「只看问题行」过滤 */
.cmap-erp-status {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  cursor: help;
}
.cmap-erp-status.ok { color: #16a34a; }
.cmap-erp-status.missing { color: #dc2626; }
.cmap-row.cmap-missing .cmap-erp { border-color: #f87171; background: #fef2f2; }
.cmap-table.only-missing .cmap-row:not(.cmap-missing) { display: none; }
.cmap-erpchk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--c-bg, #f8fafc);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

/* 折叠/展开切换：填满整行的浅绿横条 */
.cmap-toggle {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 7px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #2f7a3f;
  background: #eaf7ee;
  border: 1px solid #cfe9d6;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s;
}
.cmap-toggle:hover { background: #ddf0e3; }

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  z-index: 999;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: var(--c-success); }
.toast.error   { background: var(--c-danger); }

/* ── Detail sections inside drawer ── */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin-bottom: 16px;
}

.detail-item .di-label { font-size: 11px; color: var(--c-muted); text-transform: uppercase; }
.detail-item .di-val   { font-size: 13px; margin-top: 2px; word-break: break-all; }

.error-box {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 12px;
  color: #991b1b;
  margin-bottom: 16px;
  white-space: pre-wrap;
  word-break: break-all;
}

.empty-state {
  text-align: center;
  color: var(--c-muted);
  padding: 48px 0;
  font-size: 14px;
}

.loading { color: var(--c-muted); font-size: 13px; padding: 20px 0; }

/* ── 服务日历 ────────────────────────────────────────────────────────────── */

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
#cal-month-label {
  font-weight: 600;
  min-width: 120px;
  text-align: center;
  font-size: 15px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-header-cell {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
  padding: 4px 0;
}
.cal-cell {
  min-height: 56px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  position: relative;
  transition: background 0.12s;
}
.cal-cell:hover { background: #f1f5f9; }
.cal-cell.cal-empty { border: none; cursor: default; background: transparent; }
.cal-cell.cal-service { background: #dbeafe; border-color: #93c5fd; }
.cal-cell.cal-service:hover { background: #bfdbfe; }
.cal-day-num { font-size: 13px; font-weight: 600; display: block; }
.cal-ov-badge {
  position: absolute;
  top: 4px; right: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.cal-ov-add  { color: var(--c-success); }
.cal-ov-remove { color: var(--c-danger); }
.cal-hint {
  font-size: 11px;
  color: var(--c-muted);
  margin-top: 12px;
  margin-bottom: 0;
}

/* ── 服务班次配置卡片 ─────────────────────────────────────────────────────── */

.sched-card {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.sched-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  background: #f8fafc;
  user-select: none;
}
.sched-card-header:hover { background: #f1f5f9; }
.sched-acct-name { font-weight: 600; font-size: 14px; flex-shrink: 0; }
.sched-status { font-size: 12px; color: var(--c-muted); flex: 1; }
.sched-chevron { font-size: 11px; color: var(--c-muted); transition: transform 0.2s; }
.sched-card.expanded .sched-chevron { transform: rotate(180deg); }
.sched-card-body { display: none; padding: 14px 16px; }
.sched-card.expanded .sched-card-body { display: block; }

/* ── 过渡动画 ──────────────────────────────────────────────────────────────
   交互后给用户一个「刚刚发生了什么」的视觉提示，避免内容/布局瞬间跳变。
   卡片展开/收起的高度动画由 JS（animateCardBody）逐帧驱动，这里只放
   纯 CSS 能覆盖的部分；并尊重系统「减弱动态效果」偏好。 */

/* 页面切换：淡入 + 轻微上滑 */
.page.active { animation: pageFadeIn 0.28s ease both; }

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 列表里的账号 / 实例卡片渲染时淡入 */
.account-card { animation: cardFadeIn 0.25s ease both; }

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalPopIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* 尊重「减弱动态效果」：关掉所有装饰性动画与过渡 */
@media (prefers-reduced-motion: reduce) {
  .page.active,
  .account-card,
  .modal-overlay.open,
  .modal-overlay.active,
  .modal-overlay.open .modal,
  .modal-overlay.active .modal,
  #drawer-overlay.open { animation: none !important; }

  .btn,
  .toast,
  #drawer,
  .acct-chevron,
  .sched-chevron,
  .account-card-body,
  .sched-card-body { transition: none !important; }
}

/* ── 多选下拉（通知路由规则的「分公司 / 通知类型」）─────────────────────── */
.ms { position: relative; }
.ms-control {
  display: flex; align-items: center; gap: 6px; min-height: 38px;
  padding: 4px 8px; border: 1px solid var(--c-border); border-radius: 6px;
  background: var(--c-surface); cursor: pointer;
}
.ms.open .ms-control { border-color: var(--c-primary); }
.ms-tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-items: center; }
.ms-ph { color: var(--c-muted); font-size: 13px; }
.ms-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 4px;
  padding: 1px 6px; font-size: 12px; color: var(--c-text);
}
.ms-chip i { cursor: pointer; font-style: normal; color: var(--c-muted); font-size: 13px; }
.ms-chip i:hover { color: var(--c-danger); }
.ms-more {
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 4px;
  padding: 1px 6px; font-size: 12px; color: var(--c-muted);
}
.ms-caret { color: var(--c-muted); font-size: 12px; transition: transform .15s; }
.ms.open .ms-caret { transform: rotate(180deg); }
.ms-menu {
  /* 走文档流（展开时把下方内容顶下去），避免被 .account-card 等 overflow:hidden 的祖先裁切 */
  display: none; margin-top: 4px;
  max-height: 240px; overflow-y: auto; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px;
}
.ms.open .ms-menu { display: block; }
.ms-search {
  width: 100%; box-sizing: border-box; padding: 6px 8px; margin-bottom: 4px;
  border: 1px solid var(--c-border); border-radius: 4px; font-size: 13px;
  position: sticky; top: 0; background: var(--c-surface); z-index: 1;
}
.ms-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.ms-opt:hover { background: var(--c-bg); }
.ms-opt.on { color: var(--c-primary); font-weight: 600; }
.ms-opt .ms-tick { opacity: 0; color: var(--c-primary); }
.ms-opt.on .ms-tick { opacity: 1; }
.ms-empty { padding: 8px 10px; color: var(--c-muted); font-size: 12px; }

/* 单选可搜索 combobox（出库人姓名：输入即搜，也可手输新名字）*/
.combo { position: relative; }
.combo-menu {
  display: none; margin-top: 4px; max-height: 240px; overflow-y: auto;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px;
}
.combo.open .combo-menu { display: block; }

/* ── 访问口令登录遮罩 ──────────────────────────────────────────────
   盖住整个应用（含 sidebar），z-index 高于一切浮层（modal 是 200，
   toast 是 999）——未登录时不该有任何业务界面能露出来。 */
#login-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
  align-items: center;
  justify-content: center;
}
#login-overlay.show { display: flex; }

.login-box {
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--c-surface);
  border-radius: 12px;
  padding: 32px 28px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  text-align: center;
}

.login-logo { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.login-hint { font-size: 13px; color: var(--c-muted); margin-bottom: 20px; }

#login-form { display: flex; flex-direction: column; gap: 10px; }
#login-form .login-password-wrap { position: relative; width: 100%; }
#login-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 14px;
}
#login-form .login-password-wrap input { padding-right: 48px; }
#login-form input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
#login-form button { width: 100%; padding: 10px; font-size: 14px; }
#login-form .login-password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #7b8493;
  cursor: pointer;
  transform: translateY(-50%);
}
#login-form .login-password-toggle:hover { background: rgba(100, 116, 139, .1); color: #475569; }
#login-form .login-password-toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
#login-form .login-password-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#login-form .login-password-toggle .eye-closed { display: none; }
#login-form .login-password-toggle[aria-pressed="true"] .eye-open { display: none; }
#login-form .login-password-toggle[aria-pressed="true"] .eye-closed { display: block; }

.login-error {
  min-height: 18px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--c-danger);
}

/* 固定操作区与主导航分开，继续使用同一套轻量视觉。 */
.sidebar-footer {
  margin-top: auto;
  padding: 10px 12px 12px;
  border-top: 1px solid #eceef1;
}
.sidebar-footer a.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #666b74;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  font-size: 12.5px;
}
.sidebar-footer a.nav-link:hover { background: #f0f1f3; color: #30343a; }

/* 重启后台容器：常驻侧边栏底部。重启中禁用点击并降透明度。 */
#btn-restart-workers.is-busy {
  pointer-events: none;
  opacity: 0.6;
}

/* ── 客户映射：分组视图 / 标识 / PSS 食堂清单 ── */
.cmap-view-btn.active { background: var(--c-primary, #3b82f6); color: #fff; border-color: var(--c-primary, #3b82f6); }
.cmap-group {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: #fff;
}
.cmap-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f1f5f9;
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 12px;
}
.cmap-group.folded .cmap-group-body { display: none; }
.cmap-group.folded .cmap-group-head { border-bottom: none; border-radius: var(--radius); }
.cmap-group-chev { cursor: pointer; user-select: none; width: 14px; color: var(--c-muted); }
.cmap-group-erp {
  width: 210px;
  padding: 4px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cmap-group-ername { font-weight: 600; }
.cmap-group-count { color: var(--c-muted); }
.cmap-group-body { padding: 6px 10px 2px 28px; }
.cmap-group-multi .cmap-row .cmap-erp-status { display: none; }   /* 组内行不重复打标，组头统一 */
.cmap-group-singles .cmap-group-head, .cmap-group-blank .cmap-group-head { background: #f8fafc; }
.cmap-taglabel { color: var(--c-muted); font-size: 11px; flex-shrink: 0; margin-left: 4px; }
.cmap-row input.cmap-pss { flex: 2 1 200px; }
.cmap-row input.cmap-erp:not([type="hidden"]) { flex: 1 1 150px; }
.cmap-tag-controls { display: flex; align-items: center; gap: 6px; flex: 0 1 340px; }
.cmap-row input.cmap-tag { flex: 1 1 120px; width: 120px; }
.cmap-target-label { display: flex; align-items: center; gap: 4px; color: var(--c-muted); font-size: 11px; white-space: nowrap; }
.cmap-tag-target { width: 116px; padding: 5px 4px; border: 1px solid var(--c-border); border-radius: var(--radius); font-size: 12px; background: #fff; }
.cmap-row input.cmap-tag.cmap-tag-bad { border-color: #f87171; background: #fef2f2; }
.cmap-tagprev { flex-basis: 100%; color: var(--c-muted); font-size: 11px; overflow-wrap: anywhere; padding: 0 0 4px; }
.cmap-tagchk {
  margin-bottom: 8px;
  padding: 6px 10px;
  font-size: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cmap-buyers {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px dashed var(--c-border);
  border-radius: var(--radius);
  background: #fafafa;
}
.cmap-buyers-list { margin-top: 6px; max-height: 260px; overflow: auto; }
.cmap-buyers-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.cmap-buyers-name { flex: 1; min-width: 0; }
.cmap-buyers-sel { font-size: 12px; padding: 3px 6px; max-width: 320px; }