:root {
  --xh-bg: #f6f8f9;
  --xh-panel: #ffffff;
  --xh-border: #e8e8e8;
  --xh-text: #1a1a1a;
  --xh-muted: #666;
  --xh-green: #00c17c;
  --xh-green-2: #00a86a;
  --xh-red: #e5484d;
  --xh-orange: #d97706;
  --xh-sider-w: 228px;
  --xh-radius: 8px;
  --xh-font: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --xh-shadow: 0 8px 28px rgba(0, 0, 0, .06);
}
* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 118, 110, .28) transparent;
}
html::-webkit-scrollbar { width: 6px; height: 6px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: rgba(15, 118, 110, .22); border-radius: 999px; }
html::-webkit-scrollbar-thumb:hover { background: rgba(15, 118, 110, .42); }
html::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
body { font-family: var(--xh-font); background: var(--xh-bg); color: var(--xh-text); font-size: 13px; }
a { color: var(--xh-green); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  position: relative;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(0, 193, 124, .22), transparent 58%),
    linear-gradient(145deg, #e8f5ef 0%, #f3faf6 42%, #eef6f2 100%);
}
.login-layout {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 22px;
  position: relative;
  z-index: 1;
}
.login-box {
  background: #fff;
  border-radius: 14px;
  padding: 36px 32px 28px;
  box-shadow: 0 18px 48px rgba(0,0,0,.16);
}
.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.login-logo .mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(145deg, #1aa88a, #0d7a6a);
}
.login-brand { font-size: 20px; font-weight: 700; color: #0f766e; }
.login-title { margin: 0 0 6px; font-size: 26px; }
.login-sub { color: #6b7280; margin: 0 0 26px; }
.login-field { margin-bottom: 16px; }
.login-field label { display: block; margin-bottom: 7px; font-weight: 500; }
.login-field input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid #d1d5db; border-radius: 8px; background: #f8fafb;
}
.login-submit { width: 100%; height: 42px; margin-top: 6px; letter-spacing: .12em; }
.login-links { margin-top: 14px; text-align: center; }
.login-roles { background: #fff; border-radius: 14px; padding: 22px; box-shadow: var(--xh-shadow); }
.login-roles h2 { margin: 0 0 6px; font-size: 16px; }
.login-roles-tip { color: var(--xh-muted); margin: 0 0 14px; }
.login-role-group-title { font-size: 12px; color: #888; margin: 10px 0 8px; }
.login-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.login-role-card {
  text-align: left; border: 1px solid var(--xh-border); background: #f9fbfa;
  border-radius: 10px; padding: 10px; transition: all .15s;
}
.login-role-card:hover { border-color: var(--xh-green); box-shadow: 0 4px 14px rgba(0,193,124,.10); }
.login-role-card.active { border-color: var(--xh-green); background: #f0fdf8; }
.login-role-card strong { display: block; }
.login-role-cred { color: #0f766e; font-size: 12px; }
.login-role-card em { display: block; color: #888; font-style: normal; font-size: 12px; }

/* 登录页预览条：模拟登录后右上角栏目 */
.login-preview { margin-top: 14px; }
.login-preview-cap {
  display: flex; align-items: center; gap: 6px;
  color: #0f766e; font-size: 12px; font-weight: 600; margin-bottom: 6px;
}
.login-preview-cap i { font-style: normal; }
.lp-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e3eee9; border-radius: 10px; padding: 8px 10px;
  box-shadow: inset 0 0 0 1px #f4faf7;
}
.lp-crumb { color: #88939b; font-size: 11px; white-space: nowrap; }
.lp-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.lp-chip {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 8px 0 5px; border: 1px solid #e4e4e4; border-radius: 7px;
  background: #fff; color: #555; font-size: 11.5px; white-space: nowrap;
}
.lp-chip .lp-ico {
  min-width: 16px; height: 16px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
  background: #e2f3ee; color: #0f766e; font-size: 9.5px; font-weight: 800; white-space: nowrap; padding: 0 2px;
}
.lp-chip.lp-todo .lp-ico { background: var(--xh-green); color: #fff; }
.lp-chip .lp-badge {
  position: absolute; top: -5px; right: -3px; min-width: 13px; height: 13px; padding: 0 3px;
  border-radius: 999px; background: var(--xh-red); color: #fff; font-size: 9px; line-height: 13px;
  text-align: center; font-style: normal; font-weight: 700;
}
.lp-chip.lp-user { border-color: #f0e6ff; background: #faf7ff; }
.lp-chip.lp-user .lp-ico { background: #f0e6ff; color: #7e22ce; }
.lp-div { width: 1px; height: 18px; background: #e8e8e8; }
.lp-uname { max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
.login-preview-note { margin-top: 6px; color: #98a3a8; font-size: 11px; }

.layout { display: flex; min-height: 100vh; }
.layout.sider-off .sider { display: none; }
.sider {
  width: var(--xh-sider-w); background: #fff; border-right: 1px solid var(--xh-border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden;
  z-index: 8;
}
.sider-nav {
  flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0 4px 8px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sider-nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent;
}
.sider-nav::-webkit-scrollbar-button,
.sider-nav::-webkit-scrollbar-button:start:decrement,
.sider-nav::-webkit-scrollbar-button:end:increment,
.sider-nav::-webkit-scrollbar-button:vertical:start:decrement,
.sider-nav::-webkit-scrollbar-button:vertical:end:increment,
.sider-nav::-webkit-scrollbar-button:single-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.table-wrap,
.modal-body,
.hours-box,
.print-layer {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 118, 110, .28) transparent;
}
.table-wrap::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.hours-box::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.table-wrap::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.hours-box::-webkit-scrollbar-track {
  background: transparent;
}
.table-wrap::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.hours-box::-webkit-scrollbar-thumb {
  background: rgba(15, 118, 110, .22);
  border-radius: 999px;
}
.table-wrap::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.hours-box::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 118, 110, .42);
}
.table-wrap::-webkit-scrollbar-button,
.modal-body::-webkit-scrollbar-button,
.hours-box::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
.sider-brand { flex-shrink: 0; padding: 14px 12px 8px; font-weight: 700; color: #0f766e; display: flex; align-items: center; gap: 8px; }
.sider-role { font-style: normal; font-weight: 400; font-size: 11px; color: #9aa; background: #f0f4f3; border-radius: 99px; padding: 2px 8px; }
.sider-search { flex-shrink: 0; padding: 0 12px 8px; }
.sider-search input {
  width: 100%; height: 30px; border: 1px solid var(--xh-border); border-radius: 8px;
  padding: 0 10px; font-size: 12px; background: #f8fafb; color: #333;
}
.sider-search input:focus { outline: 0; border-color: #7ed9b8; background: #fff; box-shadow: 0 0 0 3px rgba(0,193,124,.12); }
.sider-toggle {
  position: fixed; top: 10px; left: calc(var(--xh-sider-w) - 42px); z-index: 30;
  height: 30px; min-width: 30px; padding: 0 8px;
  border: 1px solid var(--xh-border); border-radius: 8px; background: #fff;
  color: #0f766e; font-size: 15px; line-height: 1; cursor: pointer;
  transition: left .18s ease, color .15s, border-color .15s;
}
.sider-toggle:hover { color: var(--xh-green-2); border-color: var(--xh-green); }
.layout.sider-off .sider-toggle { left: 12px; }
.nav-group { padding: 2px 8px 4px; }
.nav-label {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: #889; padding: 10px 8px 4px; border: 0; background: transparent; text-align: left;
  letter-spacing: .04em;
}
.nav-label em { font-style: normal; color: #bbb; }
.nav-no { font-style: normal; font-size: 10px; color: #c0c8c4; margin-right: 7px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.nav-row { display: flex; align-items: center; gap: 2px; }
.nav-item {
  flex: 1; text-align: left; border: 0; background: transparent;
  padding: 6px 10px; border-radius: 8px; color: #333;
}
.nav-item.stat { color: #0f766e; }
.nav-item.active { background: rgba(0,193,124,.12); color: #0d7a6a; font-weight: 600; }
.nav-help {
  width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent;
  color: #9aa; font-size: 12px; line-height: 1; flex-shrink: 0;
}
.nav-help:hover, .nav-help.on { background: #e8f7f1; color: #0f766e; }
.help-mask { position: fixed; inset: 0; background: rgba(15,23,42,.28); z-index: 38; }
.help-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 92vw);
  background: #fff; z-index: 39; display: flex; flex-direction: column;
  box-shadow: -18px 0 48px rgba(15,23,42,.16);
  transform: translateX(105%); transition: transform .22s ease;
}
.help-panel.open { transform: translateX(0); }
.help-panel-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: 14px 16px 10px; border-bottom: 1px solid #f0f0f0;
}
.help-panel-head h2 { margin: 2px 0 0; font-size: 17px; }
.help-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 20px; }
.help-block { margin-bottom: 18px; }
.help-block h3 { margin: 0 0 8px; font-size: 13px; color: #0f766e; }
.help-block p { margin: 0; color: #556; line-height: 1.7; font-size: 12.5px; }
.help-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.help-fields li { display: flex; flex-direction: column; gap: 2px; border: 1px solid #f0f4f3; background: #fbfdfc; border-radius: 8px; padding: 8px 10px; }
.help-fields strong { font-size: 12.5px; color: #333; }
.help-fields em { font-style: normal; color: #667; font-size: 12px; line-height: 1.5; }
.help-req { align-self: flex-start; font-size: 10px; color: var(--xh-red); border: 1px solid #fecaca; background: #fef2f2; border-radius: 99px; padding: 0 6px; margin-top: 2px; }
.btn-back {
  display: inline-flex; align-items: center; height: 28px; margin: 0 8px 0 0;
  padding: 0 10px; border: 0; border-radius: 8px; background: #e8f7f1; color: #0d7a6a;
  font-size: 13px; vertical-align: middle;
}
.topbar h1 .btn-back { margin-bottom: 2px; }
.drill-bar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: #f0faf5; border: 1px solid #d8efe4; border-radius: 8px;
  padding: 8px 12px; margin: 0 0 12px; color: #356;
}
.drill-from {
  font-weight: 600; color: #0d7a6a; background: #fff; border: 1px solid #d8efe4;
  border-radius: 99px; padding: 2px 10px; font-size: 12px;
}
.sider-foot { flex-shrink: 0; margin-top: auto; padding: 14px; border-top: 1px solid var(--xh-border); color: #666; }
.sider-foot .site-foot { display: block; margin-top: 10px; font-size: 12px; color: #888; }

.main { flex: 1; padding: 12px 18px 28px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 10px; }
.crumb { color: #888; font-size: 12px; }
.topbar h1 { margin: 4px 0 0; font-size: 20px; }
.topbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.top-quick { display: flex; align-items: center; gap: 6px; }
.quick-role {
  align-self: stretch; display: inline-flex; align-items: center; justify-content: center;
  min-width: 58px; padding: 0 8px; margin-right: 2px; border-radius: 8px;
  background: #e8f6f0; border: 1px solid #cdeee0; color: #0f766e;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.top-sep { width: 1px; align-self: stretch; background: var(--xh-border); margin: 0 2px; }
.quick-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px; border: 1px solid var(--xh-border); border-radius: 8px;
  background: #fff; color: var(--xh-muted); font-size: 13px; transition: all .15s;
}
.quick-btn:hover { color: var(--xh-green); border-color: var(--xh-green-2); }
.quick-btn.on { background: #eafaf3; color: var(--xh-green-2); border-color: var(--xh-green); }
.quick-btn .quick-ico {
  min-width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: #e2f3ee; color: #0f766e; font-size: 11px; font-weight: 800; white-space: nowrap; padding: 0 3px;
}
.quick-btn .quick-ico:empty { display: none; }
.quick-btn.quick-todo .quick-ico { background: var(--xh-green); color: #fff; }
.quick-btn.quick-home .quick-ico { background: #e0f2fe; color: #0369a1; }
.quick-btn.quick-help .quick-ico { background: #f3e8ff; color: #7e22ce; }
.quick-btn .quick-badge {
  position: absolute; top: -6px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--xh-red); color: #fff; font-size: 10px; line-height: 16px;
  text-align: center; font-style: normal; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.notify-wrap { position: relative; }
.quick-bell .quick-ico { color: var(--xh-muted); }
.quick-bell.on { background: #eafaf3; color: var(--xh-green-2); border-color: var(--xh-green); }
.notify-panel {
  position: absolute; top: 42px; right: 0; width: 340px; max-height: 440px;
  background: #fff; border: 1px solid var(--xh-border); border-radius: 10px;
  box-shadow: var(--xh-shadow); z-index: 40; display: flex; flex-direction: column; overflow: hidden;
}
.notify-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--xh-border);
}
.notify-head strong { font-size: 14px; }
.notify-head .link { font-size: 12px; }
.notify-list { overflow-y: auto; max-height: 380px; }
.notify-item { padding: 11px 14px; border-bottom: 1px solid #f2f2f2; cursor: pointer; }
.notify-item:hover { background: #f8fbfa; }
.notify-item.unread { background: #f1fbf7; }
.notify-item.unread:hover { background: #eafaf3; }
.notify-t { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.notify-t strong { font-size: 13px; }
.notify-t em { font-size: 11px; color: #999; font-style: normal; }
.notify-b { margin-top: 3px; font-size: 12px; color: #667; line-height: 1.5; }
.notify-item.unread .notify-t strong::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--xh-red); margin-right: 6px; vertical-align: middle;
}
.user-wrap { position: relative; }
.user-wrap .quick-ico { background: var(--xh-green); color: #fff; }
.user-panel {
  position: absolute; top: 42px; right: 0; width: 200px;
  background: #fff; border: 1px solid var(--xh-border); border-radius: 10px;
  box-shadow: var(--xh-shadow); z-index: 40; overflow: hidden;
}
.user-panel-head {
  padding: 12px 14px; border-bottom: 1px solid var(--xh-border);
  font-size: 14px; font-weight: 600; color: #333;
}
.user-panel-head em { display: block; font-style: normal; font-size: 12px; color: #999; font-weight: 400; margin-top: 2px; }
.user-panel-item {
  display: block; width: 100%; text-align: left; border: 0; background: #fff;
  padding: 11px 14px; font-size: 13px; color: var(--xh-red); cursor: pointer;
}
.user-panel-item:hover { background: #fef2f2; }
@media (max-width: 920px) {
  .quick-btn .quick-label { display: none; }
  .quick-btn { padding: 0 9px; }
  .notify-panel { width: 300px; }
  .topbar { flex-direction: column; align-items: stretch; }
  .search { min-width: 0; flex: 1; }
}
.search { height: 36px; padding: 0 10px; border: 1px solid var(--xh-border); border-radius: 8px; min-width: 220px; }
.page-guide { display: none; }

.btn { border: 0; border-radius: 8px; height: 36px; padding: 0 14px; }
.btn-primary { background: var(--xh-green); color: #fff; }
.btn-ghost { background: #fff; border: 1px solid var(--xh-border); }
.link { background: none; border: 0; color: var(--xh-green); padding: 0 6px; }
.link.danger { color: var(--xh-red); }

.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.entry-wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.entry-label { font-size: 12px; color: #667; margin-bottom: 8px; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.entry-card {
  text-align: left; border: 1px solid var(--xh-border); background: #fff;
  border-radius: 10px; padding: 12px 12px 10px;
}
.entry-card strong { display: block; font-size: 14px; }
.entry-card span { color: #888; font-size: 12px; }
.entry-card.personal { border-top: 3px solid #10b981; }
.entry-card.sales { border-top: 3px solid #38bdf8; }
.entry-card.buy { border-top: 3px solid #f59e0b; }
.entry-card.site { border-top: 3px solid #8b5cf6; }
.form-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.form-tabs button {
  border: 1px solid var(--xh-border); background: #fff; border-radius: 8px;
  height: 32px; padding: 0 10px; color: #555;
}
.form-tabs button.active { background: rgba(0,193,124,.12); color: #0d7a6a; border-color: #9ee0c8; }
.wf-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.wf-box {
  text-align: left; border: 1px solid var(--xh-border); background: #fff;
  border-radius: 10px; padding: 12px 14px;
}
.wf-box strong { display: block; font-size: 22px; color: #0f766e; }
.wf-box span { color: #667; font-size: 12px; }
.wf-box.active { border-color: #9ee0c8; background: #f0fdf8; box-shadow: 0 0 0 2px rgba(0,193,124,.12); }
.cal-month { font-size: 18px; min-width: 96px; text-align: center; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;
  background: #fff; border: 1px solid var(--xh-border); border-radius: 10px; padding: 12px;
}
.cal-head { text-align: center; color: #667; font-size: 12px; padding: 4px 0; }
.cal-cell {
  min-height: 64px; border: 1px solid var(--xh-border); border-radius: 8px;
  background: #f8fafb; text-align: left; padding: 8px;
}
.cal-cell em { display: block; font-style: normal; font-weight: 700; }
.cal-cell span { font-size: 12px; color: #667; }
.cal-cell.empty { visibility: hidden; }
.cal-cell.t-工作日 { background: #ecfdf5; border-color: #bbf7d0; }
.cal-cell.t-休息日 { background: #fff7ed; border-color: #fed7aa; }
.cal-cell.t-节假日 { background: #fef2f2; border-color: #fecaca; }
.cal-cell.t-none { background: #f3f4f6; }
.inv-filter { display: flex; gap: 10px; align-items: end; margin-bottom: 12px; flex-wrap: wrap; }
.inv-filter label { display: flex; flex-direction: column; gap: 4px; color: #555; }
.inv-filter input, .inv-filter select { height: 36px; border: 1px solid var(--xh-border); border-radius: 8px; padding: 0 10px; min-width: 180px; }
.photo-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.photo-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--xh-border); border-radius: 8px; padding: 6px 8px; }
.photo-chip img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; }
.photo-upload { position: relative; overflow: hidden; }
.photo-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kpi { background: #fff; border: 1px solid var(--xh-border); border-radius: 10px; padding: 14px 16px; }
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { border-color: var(--xh-green); box-shadow: 0 4px 14px rgba(0,161,106,.08); }
.kpi-label { color: #777; }
.kpi-hint { color: #9aa; font-size: 11px; margin-top: 6px; }
.kpi-value { font-size: 22px; font-weight: 700; margin-top: 6px; }
.kpi-value.pos, .pos { color: var(--xh-green-2); }
.kpi-value.neg, .neg { color: var(--xh-red); }
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card { background: #fff; border: 1px solid var(--xh-border); border-radius: 10px; padding: 14px; }
.card h3 { margin: 0 0 10px; font-size: 14px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; text-align: left; white-space: nowrap; }
th { background: #f3faf7; font-weight: 600; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef2f3; }
.tag.ok { background: #dcfce7; color: #166534; }
.tag.warn { background: #fef3c7; color: #92400e; }
.tag.bad { background: #fee2e2; color: #991b1b; }
.empty { text-align: center; color: #999; padding: 20px; }
.empty-box p { margin: 0 0 8px; }
.pager { display: flex; gap: 8px; align-items: center; padding-top: 10px; color: #666; flex-wrap: wrap; }
.pager select, .pager-jump input { height: 32px; border: 1px solid var(--xh-border); border-radius: 6px; padding: 0 8px; }
.pager-jump input { width: 56px; }
.pager-pages { display: inline-flex; align-items: center; gap: 4px; }
.pager-page {
  min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid var(--xh-border);
  border-radius: 6px; background: #fff; color: #555; font-size: 12px;
}
.pager-page:hover { border-color: var(--xh-green-2); color: var(--xh-green-2); }
.pager-page.cur { background: var(--xh-green); color: #fff; border-color: var(--xh-green); font-weight: 600; }
.pager-page.gap { border-color: transparent; background: transparent; cursor: default; }
.ops { white-space: nowrap; }

.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 180px 1fr 90px; gap: 8px; align-items: center; }
.bar-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; }
.bar-row i { display: block; height: 10px; background: #00c17c; border-radius: 99px; }
.bar-row i.pay { background: #38bdf8; }
.bar-row em { font-style: normal; text-align: right; }

.modal { position: fixed; inset: 0; background: rgba(15,23,42,.42); display: grid; place-items: center; z-index: 20; padding: 12px; }
.modal-box {
  background: #fff; width: min(760px, 100%); max-height: 88vh;
  border-radius: 12px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(15,23,42,.22);
}
.modal-box.sm { width: min(480px, 100%); }
.modal-box.md { width: min(620px, 100%); }
.modal-box.lg { width: min(760px, 100%); }
.form-grid.sm { grid-template-columns: 1fr; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 16px 8px; border-bottom: 1px solid #f0f0f0; }
.modal-kicker { margin: 0; color: #889; font-size: 12px; }
.modal-box h2 { margin: 2px 0 0; font-size: 17px; }
.modal-x { width: 32px; height: 32px; border: 0; background: #f3f4f6; border-radius: 8px; font-size: 20px; line-height: 1; color: #555; }
.modal-body { padding: 10px 16px 12px; overflow: auto; flex: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; color: #555; }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid label.bad input, .form-grid label.bad select, .form-grid label.bad textarea { border-color: #f3b4b4; background: #fff7f7; }
.field-label { font-size: 12px; }
.field-label i { color: var(--xh-red); margin-left: 3px; font-style: normal; }
.field-err { color: var(--xh-red); font-size: 12px; }
.field-hint { display: block; font-size: 12px; color: #6a7f8d; line-height: 1.5; }
.field-hint.warn { color: var(--xh-red); }
.region-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.form-grid input, .form-grid select, .form-grid textarea {
  border: 1px solid var(--xh-border); border-radius: 8px; padding: 6px 10px; font: inherit; background: #fbfcfd;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: 0; border-color: #7ed9b8; box-shadow: 0 0 0 3px rgba(0,193,124,.12); background: #fff;
}
.hours-box { margin-top: 10px; overflow: auto; }
.hours-box input { width: 100%; min-width: 64px; border: 1px solid var(--xh-border); border-radius: 6px; padding: 4px 6px; }
.hours-head { font-weight: 600; margin-bottom: 8px; color: #0f766e; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 16px 12px; border-top: 1px solid #f0f0f0; background: #fafbfc; }
.wm {
  position: fixed; inset: -20%; pointer-events: none; z-index: 6; opacity: .045;
  display: flex; flex-wrap: wrap; transform: rotate(-18deg); overflow: hidden;
}
.wm span { width: auto; padding: 48px 24px; font-size: 15px; color: #0f766e; white-space: nowrap; }
.page-foot, .site-foot { color: #8a8f8a; font-size: 12px; }
.page-foot { margin-top: 28px; padding-top: 12px; border-top: 1px solid #eef1f0; }
.login-foot { margin-top: 18px; text-align: center; }

.toasts { position: fixed; right: 16px; top: 16px; z-index: 30; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #111827; color: #fff; padding: 8px 12px; border-radius: 8px; }
.toast.ok { background: #047857; }
.toast.err { background: #b91c1c; }

.click-row { cursor: pointer; }
.click-row:hover { background: #f3fbf7; }
.print-layer { position: fixed; inset: 0; z-index: 40; background: #f5f6f5; overflow: auto; }
.print-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: #fff; border-bottom: 1px solid #e8eceb; }
.print-sheet { max-width: 760px; margin: 24px auto 40px; background: #fff; padding: 28px 32px; border: 1px solid #e8eceb; }
.print-sheet h1 { margin: 0 0 4px; font-size: 22px; color: #0f766e; }
.print-sub { color: #667; margin: 0 0 18px; }
.print-sheet table { width: 100%; border-collapse: collapse; }
.print-sheet th { text-align: left; width: 28%; color: #667; font-weight: 500; padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }
.print-sheet td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }
.print-items { margin-top: 16px; }
.print-items th { width: auto; background: #f7faf8; }
.print-foot { margin-top: 24px; color: #8a8f8a; font-size: 12px; }

@media print {
  .layout, .modal, .toasts, .wm, .print-toolbar, .login-page { display: none !important; }
  .print-layer { position: static; background: #fff; overflow: visible; }
  .print-sheet { border: 0; margin: 0; max-width: none; }
}

@media (max-width: 900px) {
  .login-layout, .kpi-grid, .card-grid, .form-grid, .entry-wrap, .wf-boxes, .region-row { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 1fr; }
  .layout.sider-off .sider { display: none; }
  .layout:not(.sider-off) .sider {
    display: flex; position: fixed; z-index: 16; box-shadow: 12px 0 32px rgba(0,0,0,.12);
  }
}

.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.tb-left { display: flex; align-items: center; gap: 8px; }
.tb-right { display: flex; align-items: center; gap: 8px; }
.tb-count { color: #666; font-size: 12px; }
.tb-count b { color: var(--xh-green-2); }
.col-sel { width: 32px; text-align: center; padding: 8px 6px !important; }
.col-sel input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--xh-green); vertical-align: middle; }
.import-guide { background: #f6faf8; border: 1px solid #e2efe8; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.import-guide p { margin: 4px 0; color: #556; font-size: 12px; line-height: 1.5; }
.import-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.import-file { position: relative; overflow: hidden; cursor: pointer; }
.import-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.import-file-name { font-size: 12px; color: #667; margin-bottom: 6px; }
.import-err { color: var(--xh-red); font-size: 12px; margin: 6px 0; }
.import-result { background: #f0faf5; border: 1px solid #d8efe4; border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.import-result p { margin: 4px 0; font-size: 12px; color: #356; }
.qr-body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.qr-tip { color: #667; font-size: 13px; margin: 0 0 14px; }
.qr-img { width: 230px; height: 230px; border: 1px solid var(--xh-border); border-radius: 10px; padding: 8px; background: #fff; }
.qr-img img { width: 100%; height: 100%; display: block; }
.qr-url { display: flex; gap: 8px; width: 100%; margin-top: 14px; align-items: center; }
.qr-link {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  height: 34px; line-height: 34px; border: 1px solid var(--xh-border); border-radius: 8px;
  padding: 0 10px; font-size: 12px; color: #0f766e; background: #fafbfc; text-align: left;
}

/* ===== 五金版 UI 补充样式 ===== */
.nav-count {
  font-style: normal; margin-left: 8px; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--xh-red); color: #fff; font-size: 11px;
  line-height: 17px; text-align: center; display: inline-block;
}
.filt-label { display: inline-flex; align-items: center; gap: 6px; color: #555; }
.filt-label select { height: 32px; border: 1px solid var(--xh-border); border-radius: 8px; padding: 0 8px; }
.detail-head-ops { display: flex; align-items: center; gap: 10px; }
.detail-total { font-size: 18px; font-weight: 700; color: #0d7a6a; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; margin-bottom: 14px; }
.detail-field { display: flex; gap: 8px; border-bottom: 1px dashed #eef1f0; padding: 7px 2px; font-size: 13px; }
.detail-k { color: #889; flex-shrink: 0; min-width: 74px; }
.detail-v { color: #1f2d3a; word-break: break-all; white-space: pre-wrap; }
.detail-v.money { font-weight: 600; color: #0d7a6a; font-variant-numeric: tabular-nums; }
.detail-sec { margin: 18px 0 10px; font-size: 14px; color: #0f766e; border-left: 4px solid var(--xh-green); padding-left: 10px; }
.detail-items th, .detail-items td { white-space: normal; }
.detail-items td { max-width: 220px; overflow-wrap: break-word; }
.rels-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rel-card {
  position: relative; text-align: left; border: 1px solid #e6efeb; background: #fbfdfc;
  border-radius: 10px; padding: 10px 34px 10px 12px; display: flex; flex-direction: column; gap: 3px;
  transition: border-color .15s, box-shadow .15s;
}
.rel-card:hover { border-color: #9ee0c8; box-shadow: 0 4px 14px rgba(0,161,106,.10); }
.rel-module { font-style: normal; color: #0f766e; font-size: 11px; font-weight: 600; }
.rel-card strong { font-size: 15px; color: #1f2d3a; font-variant-numeric: tabular-nums; }
.rel-line { color: #667; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-meta { display: flex; gap: 8px; align-items: center; color: #889; font-size: 12px; font-style: normal; }
.rel-go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #9ee0c8; font-size: 18px; }
.prod-cell { position: relative; }
.prod-cell input { width: 100%; border: 1px solid var(--xh-border); border-radius: 8px; padding: 6px 10px; font: inherit; background: #fbfcfd; }
.prod-pop {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 2px); background: #fff;
  border: 1px solid var(--xh-border); border-radius: 10px; box-shadow: var(--xh-shadow); max-height: 240px; overflow: auto;
}
.prod-opt { padding: 8px 12px; border-bottom: 1px solid #f2f2f2; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.prod-opt:hover { background: #f0fdf8; }
.prod-opt strong { font-size: 13px; }
.prod-opt span { color: #889; font-size: 12px; }
.cell-sub { display: block; margin-top: 2px; color: #889; font-size: 12px; }
.hours-box td .money, .hours-box .money { font-variant-numeric: tabular-nums; }
.look-pop {
  position: fixed; z-index: 90; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(460px, 92vw); background: #fff; border: 1px solid var(--xh-border); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(15,23,42,.22); padding: 12px; display: flex; flex-direction: column;
}
.look-list { max-height: 320px; overflow: auto; display: flex; flex-direction: column; }
.look-opt { text-align: left; border: 0; background: #fbfdfc; border-bottom: 1px solid #f2f2f2; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.look-opt:hover { background: #f0fdf8; }
@media (max-width: 1000px) {
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .rels-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* ===== 引导条 / 逆向按钮 ===== */
.guide-line {
  background: #f0faf5; border: 1px solid #d8efe4; border-radius: 8px; color: #356;
  padding: 8px 12px; margin: 0 0 10px; font-size: 12.5px; line-height: 1.7;
}
.guide-line i { color: var(--xh-red); font-style: normal; }
.danger-ghost { color: var(--xh-red) !important; border-color: #fecaca !important; }
.danger-ghost:hover { background: #fef2f2 !important; }

/* ===== 移动/窄屏增强 ===== */
@media (max-width: 640px) {
  .modal { padding: 0; }
  .modal-box { width: 100vw !important; max-height: 100dvh; border-radius: 0; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .detail-grid, .rels-grid { grid-template-columns: 1fr; }
  .topbar h1 { font-size: 17px; }
  .main { padding: 10px 10px 20px; }
  .bar-row { grid-template-columns: minmax(0,1fr) auto; }
  .bar-row i { display: none; }
  .login-layout { grid-template-columns: 1fr; }
  .guide-line { font-size: 12px; }
}
@media (max-width: 420px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .quick-btn .quick-label { display: none; }
}

/* 看板域过滤 chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--xh-border); background: #fff; border-radius: 99px; padding: 5px 13px; color: #456; font-size: 13px; }
.chip.on { background: var(--xh-green); border-color: var(--xh-green); color: #fff; font-weight: 600; }

/* 海外结算与汇兑损益卡片 */
.guide-note { margin: 6px 0 0; color: #6a7a72; font-size: 12px; line-height: 1.6; }
.bar-row.sub { color: #445; border-top: 1px dashed #e0ebe5; margin-top: 4px; padding-top: 6px; font-size: 12px; }
.bar-row.sub em { color: #445; font-weight: 600; }

/* ===== 销售订单去重（疑似重复/合并/批量） ===== */
.dup-row { background: #fff6f4 !important; }
.dup-row:hover { background: #ffefec !important; }
.dup-tag {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 5px;
  background: #e5484d; color: #fff; font-size: 11px; font-weight: 600; line-height: 16px;
  vertical-align: 1px; white-space: nowrap;
}
.detail-head-ops .dup-tag { margin-right: 8px; }
.dup-panel {
  border: 1px solid #f5cfc9; background: linear-gradient(180deg, #fff7f4, #fffaf8);
  border-radius: 12px; padding: 10px 12px; margin: 10px 0 12px;
}
.dup-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dup-badge {
  background: #e5484d; color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 99px;
}
.dup-head strong { color: #7f1d1d; font-size: 13px; }
.dup-desc { color: #a06a63; font-size: 12px; }
.dup-group {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; margin-top: 8px; background: #fff; border: 1px dashed #edc2bb;
  border-radius: 10px; flex-wrap: wrap;
}
.dup-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.dup-cust { color: #263; font-size: 13px; }
.dup-po { color: #b45309; font-size: 12px; background: #fff7ed; border-radius: 6px; padding: 1px 7px; }
.dup-docs { color: #334; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.dup-amt { color: #c0392b; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 14px; }
.dup-cnt { color: #889; font-size: 12px; }
.detail-dup-line {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 2px; padding: 8px 12px; background: #fff8f5; border: 1px dashed #edc2bb;
  border-radius: 8px; color: #7f1d1d; font-size: 12.5px;
}
.detail-dup-line b { color: #c0392b; }