:root {
  --brand: #2563eb;
  --brand-deep: #1d4ed8;
  --brand-soft: #eff6ff;
  --brand-glow: rgba(37, 99, 235, 0.25);
  --page: #f6f8fc;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --card: #ffffff;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  --shadow-lg: 0 10px 30px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
  --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-family: var(--font-family);
  color: var(--ink);
  background: var(--page);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { min-width: 980px; background: var(--page); font-family: var(--font-family); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.15px; }
body:has(.settings-fullscreen), body:has(.login-page) { min-width: 0; }
button, input, select, textarea { font-family: var(--font-family); }
button { border: 0; cursor: pointer; }

.app-shell { min-height: 100vh; }
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  height: 54px;
  color: #fff;
  background: linear-gradient(90deg, #1e3a8a 0%, #1d4ed8 50%, #2563eb 100%);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 226px;
  height: 54px;
  padding: 0 20px;
  color: #fff;
  text-decoration: none;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.08;
}
.brand > span:last-child { max-width: 176px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.global-search-wrap {
  position: relative;
  width: min(500px, 42vw);
  margin-left: 18px;
}
.global-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  margin-left: 0;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 18px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.13);
}
.global-search-submit {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  color: inherit;
  background: transparent;
  line-height: 0;
}
.global-search-submit svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}
.global-search input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-size: 16px;
}
.global-search-clear {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  opacity: 0;
  color: rgba(255,255,255,.9);
  background: transparent;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  pointer-events: none;
  transition: opacity .15s ease, color .15s ease;
}
.global-search-clear.is-visible { opacity: 1; pointer-events: auto; }
.global-search-clear.is-visible:hover { color: #fff; }
.global-search input::placeholder { color: rgba(255,255,255,.78); }
.global-search-suggest {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  z-index: 80;
  max-height: 420px;
  overflow: auto;
  padding: 12px 0;
  border: 1px solid #e5ebf3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(35, 52, 76, .18);
}
.global-search-suggest:empty { display: none; }
.global-search-suggest-section + .global-search-suggest-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eef2f7;
}
.global-search-suggest-title {
  padding: 0 16px 7px;
  color: #98a3b1;
  font-size: 12px;
}
.global-search-suggest-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 10px 16px;
  color: #29384d;
  background: #fff;
  text-align: left;
}
.global-search-suggest-item:hover { background: #f6f9fe; }
.global-search-suggest-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
}
.global-search-suggest-icon.blue { color: var(--brand); background: var(--brand-soft); }
.global-search-suggest-icon.orange { color: #e6983d; background: #fff3e2; }
.global-search-suggest-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 0;
}
.global-search-suggest-copy strong,
.global-search-suggest-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-suggest-copy strong { color: #26364d; font-size: 13px; }
.global-search-suggest-copy small { color: #8995a6; font-size: 11px; }
.global-search-suggest-item em { color: #a1acba; font-size: 11px; font-style: normal; }
.global-search-no-result { padding: 18px 16px; color: #8995a6; font-size: 12px; text-align: center; }
.top-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; padding-right: 20px; }
.account { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 8px; border-radius: 20px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); font-size: 13px; font-weight: 500; }
.account-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #3b82f6, #1d4ed8); font-weight: 800; font-size: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }

.sidebar {
  position: fixed;
  inset: 54px auto 0 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 184px;
  padding: 16px 0;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: #ffffff;
}
.nav-group { margin: 0 10px 16px; }
.nav-label { padding: 8px 14px 6px; color: #94a3b8; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  color: #475569;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item:hover { color: var(--brand); background: #f8fafc; transform: translateX(2px); }
.nav-item.is-active { color: var(--brand); background: var(--brand-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.nav-arrow { margin-left: auto; color: #cbd5e1; font-size: 11px; }

.main { min-height: 100vh; margin-left: 184px; padding: 60px 18px 20px; }
.page { max-width: 1800px; margin: 0 auto; }
.quick-add-area { position: relative; z-index: 5; display: flex; align-items: flex-start; margin-bottom: 12px; }
.quick-add-trigger { display: inline-flex; align-items: center; gap: 8px; min-width: 136px; height: 38px; padding: 0 14px; border: 1px solid #dbeafe; border-radius: 19px; color: var(--brand); background: #eff6ff; font-size: 13px; font-weight: 600; transition: all 0.2s ease; }
.quick-add-trigger:hover, .quick-add-trigger[aria-expanded="true"] { border-color: #93c5fd; background: #dbeafe; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.15); transform: translateY(-1px); }
.quick-add-plus { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 5px; font-size: 16px; font-weight: 700; line-height: 1; }
.quick-add-caret { margin-left: auto; color: #60a5fa; font-size: 12px; }
.quick-add-menu { position: absolute; top: 46px; left: 0; width: 270px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: var(--shadow-lg); }
.quick-add-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; align-items: center; gap: 11px; width: 100%; min-height: 66px; padding: 8px 10px; border-radius: 8px; color: #1e293b; background: #fff; text-align: left; transition: all 0.18s ease; }
.quick-add-item:hover { background: #f8fafc; transform: translateX(3px); }
.quick-add-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-size: 20px; }
.quick-add-item strong, .quick-add-item small { display: block; }
.quick-add-item strong { color: #0f172a; font-size: 14px; font-weight: 600; }
.quick-add-item small { margin-top: 3px; color: #64748b; font-size: 12px; }
.quick-add-arrow { color: #94a3b8; font-size: 18px; text-align: right; }
.sidebar > .quick-add-area { margin: 0 10px 14px; }
.sidebar > .quick-add-area .quick-add-trigger { width: 100%; min-width: 0; height: 42px; padding: 0 14px; border-color: transparent; border-radius: 12px; background: #eff6ff; }
.sidebar > .quick-add-area .quick-add-trigger:hover, .sidebar > .quick-add-area .quick-add-trigger[aria-expanded="true"] { border-color: #bfdbfe; background: #dbeafe; }
.sidebar > .quick-add-area .quick-add-menu { position: fixed; top: 68px; left: 192px; z-index: 35; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.page-title { margin: 0; color: #0f172a; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -0.3px; }
.page-subtitle { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.head-actions { display: flex; align-items: center; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid #cbd5e1; border-radius: 8px; color: #334155; background: #fff; font-size: 13px; font-weight: 500; transition: all 0.2s ease; }
.btn:hover { border-color: #93c5fd; color: var(--brand); background: #f8fafc; }
.btn.primary { border: none; color: #fff; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); font-weight: 600; box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25); }
.btn.primary:hover { opacity: 0.95; box-shadow: 0 5px 14px rgba(37, 99, 235, 0.35); transform: translateY(-1px); }
.btn.primary:active { transform: translateY(0); }
.btn.danger { border-color: #fecaca; color: #dc2626; background: #fff; }
.btn.danger:hover { border-color: #f87171; color: #b91c1c; background: #fef2f2; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn:disabled { color: #94a3b8; cursor: not-allowed; box-shadow: none; opacity: .7; transform: none; }
.btn-icon { min-width: 34px; padding: 0; font-size: 16px; border-radius: 8px; }

.card { border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); transition: box-shadow 0.2s ease; }
.card:hover { box-shadow: var(--shadow-lg); }
.page > .card + .card { margin-top: 10px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px 10px; }
.card-title { margin: 0; color: #0f172a; font-size: 16px; font-weight: 750; }
.card-note { color: var(--muted); font-size: 12px; }
.tabs { display: flex; align-items: center; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.tab { position: relative; padding: 12px 16px; color: #64748b; background: transparent; font-size: 13px; font-weight: 500; transition: color 0.18s; }
.tab:hover { color: var(--brand); }
.tab.is-active { color: var(--brand); font-weight: 600; }
.tab.is-active::after { position: absolute; right: 14px; bottom: -1px; left: 14px; height: 3px; border-radius: 3px; background: var(--brand); content: ""; }

.filter-card { padding: 10px 14px 8px; }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 8px 12px; }
.filter-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.filter-field.wide { grid-column: span 2; }
.filter-label { flex: 0 0 auto; color: #4f5d70; font-size: 12px; }
.control { width: 100%; height: 34px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; outline: none; color: #1e293b; background: #fff; font-size: 13px; transition: all 0.18s ease; }
.control::placeholder { color: #94a3b8; }
.control:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.keyword-search-control { display: grid; grid-template-columns: minmax(108px, 0.36fr) minmax(0, 1fr); width: 100%; }
.keyword-search-control .control:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.keyword-search-control .control:last-child { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.keyword-filter-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.keyword-filter-row .keyword-search-control { min-width: 0; flex: 1 1 auto; }
.keyword-filter-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.lead-person-filter-control { position: relative; display: grid; grid-template-columns: minmax(88px, .42fr) minmax(0, 1fr); width: 100%; }
.lead-person-filter-control > .control:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lead-person-filter-picker { position: relative; min-width: 0; }
.lead-person-filter-picker > .control { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; cursor: pointer; padding-right: 28px; }
.lead-person-filter-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #94a3b8; font-size: 16px; line-height: 1; cursor: pointer; transition: all 0.15s; z-index: 2; }
.lead-person-filter-clear:hover { color: #334155; background: #f1f5f9; }
.lead-person-filter-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; display: none; width: min(410px, calc(100vw - 48px)); max-height: 320px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: var(--shadow-lg); }
.lead-person-filter-menu.is-open { display: block; }
.lead-person-filter-company { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; color: #1e293b; background: #f8fafc; }
.lead-person-filter-company span { color: #64748b; font-size: 12px; }
.lead-person-filter-company strong { overflow: hidden; color: #0f172a; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.lead-person-filter-company small { color: #94a3b8; font-size: 11px; }
.lead-person-filter-option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; padding: 0 16px; color: #334155; background: transparent; font-size: 13px; text-align: left; transition: all 0.15s; }
.lead-person-filter-option:hover, .lead-person-filter-option.is-selected { color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.lead-person-filter-option small { color: #94a3b8; font-size: 11px; }
.lead-person-filter-option.is-selected small { color: #3b82f6; }
.lead-person-filter-all { border-bottom: 1px solid #f1f5f9; }
.lead-person-filter-group { padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
.lead-person-filter-group:last-child { border-bottom: 0; }
.lead-person-filter-group > strong { display: block; padding: 4px 16px; color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.lead-person-filter-empty { padding: 32px 14px; color: #94a3b8; font-size: 13px; text-align: center; }
.filter-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.date-pair { display: flex; align-items: center; gap: 8px; width: 100%; }
.date-pair span { color: #94a3b8; font-size: 12px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.metric-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 146px;
  padding: 18px 20px 16px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: var(--shadow);
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.metric-card::after { position: absolute; right: -28px; bottom: -36px; width: 112px; height: 112px; border: 1px solid rgba(37, 99, 235, 0.08); border-radius: 50%; content: ''; pointer-events: none; }
.metric-label { display: flex; align-items: center; justify-content: space-between; color: #64748b; font-size: 13px; font-weight: 500; line-height: 1.2; }
.metric-help { color: #94a3b8; font-size: 12px; }
.metric-value { margin: 10px 0 6px; color: #0f172a; font-size: 30px; font-weight: 850; line-height: 1.1; letter-spacing: -0.5px; }
.metric-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; color: #94a3b8; font-size: 12px; line-height: 1.4; }
.trend-up { color: var(--danger); font-weight: 600; }
.trend-down { color: var(--success); font-weight: 600; }
.metric-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 10px; }
.metric-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.blue { color: #2563eb; border-color: #dbeafe; background: linear-gradient(145deg, #eff6ff, #dbeafe); }
.green { color: #059669; border-color: #d1fae5; background: linear-gradient(145deg, #ecfdf5, #d1fae5); }
.purple { color: #7c3aed; border-color: #ede9fe; background: linear-gradient(145deg, #f5f3ff, #ede9fe); }
.orange { color: #d97706; border-color: #fef3c7; background: linear-gradient(145deg, #fffbeb, #fef3c7); }
.overview-metrics { margin-top: 4px; }
.overview-secondary { margin-top: 14px; }
.secondary-card { display: flex; align-items: center; gap: 14px; height: 80px; min-height: 80px; padding: 16px 20px; border-radius: 12px; border: 1px solid rgba(226, 232, 240, 0.85); box-shadow: var(--shadow); transition: all 0.2s ease; }
.secondary-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.secondary-label { display: block; color: #64748b; font-size: 12px; font-weight: 500; }
.secondary-value { display: block; margin-top: 5px; color: #0f172a; font-size: 20px; font-weight: 800; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); gap: 12px; margin-top: 12px; align-items: stretch; }
.overview-panel-card { height: 310px; min-height: 310px; }
.overview-panel-card .panel-body { min-height: 230px; }
.dashboard-overview-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.dashboard-overview-grid .overview-panel-card { height: 360px; min-height: 360px; }
.today-allocation-dashboard { display: flex; flex-direction: column; min-height: 0; }
.today-allocation-dashboard .panel-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 9px; min-height: 0; overflow: hidden; }
.today-allocation-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.today-allocation-summary > div { display: grid; gap: 4px; min-width: 0; padding: 8px 10px; border: 1px solid #edf1f6; border-radius: 7px; background: #fbfcfe; }
.today-allocation-summary span { color: #8995a6; font-size: 11px; }
.today-allocation-summary strong { overflow: hidden; color: #2d405a; font-size: 16px; text-overflow: ellipsis; }
.today-allocation-search .control { height: 34px; }
.today-allocation-staff-list { flex: 1 1 auto; min-height: 0; max-height: 190px; overflow-x: hidden; overflow-y: auto; border: 1px solid #edf1f6; border-radius: 8px; background: #fbfcfe; }
.today-allocation-staff-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px; padding: 7px; }
.today-allocation-staff-columns.is-single { grid-template-columns: minmax(0, 1fr); }
.today-allocation-staff-group { min-width: 0; overflow: hidden; border: 1px solid #edf1f6; border-radius: 7px; background: #fff; }
.today-allocation-staff-row { display: grid; grid-template-columns: minmax(0, 1.3fr) .8fr .8fr .8fr; align-items: center; min-height: 42px; padding: 0 12px; border-bottom: 1px solid #eef2f7; color: #52647c; font-size: 12px; text-align: right; }
.today-allocation-staff-row:last-child { border-bottom: 0; }
.today-allocation-staff-row > :first-child { overflow: hidden; color: #2d405a; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.today-allocation-staff-row.is-head { min-height: 34px; color: #8b98aa; background: #f7f9fc; font-size: 11px; }
.today-allocation-staff-row.is-head > :first-child { color: #8b98aa; }
.today-allocation-staff-empty { padding: 34px 12px; color: #a2adba; font-size: 12px; text-align: center; }
.honor-card { min-height: 286px; }
.honor-board-panel { padding-bottom: 14px; }
.honor-board-tabs { display: flex; gap: 7px; padding: 0 18px 11px; border-bottom: 1px solid #eef2f7; }
.honor-board-tab { padding: 6px 12px; border: 1px solid transparent; border-radius: 16px; color: #7d8ca4; background: transparent; font-size: 12px; }
.honor-board-tab.is-active { color: #fff; background: var(--brand); box-shadow: 0 3px 8px rgba(67, 137, 245, .18); }
.honor-board { min-width: 0; overflow: hidden; border: 1px solid #edf1f6; border-radius: 8px; background: #fbfcfe; }
.honor-board-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px 9px; border-bottom: 1px solid #eef2f7; }
.honor-board-head strong { color: #35445c; font-size: 13px; }
.honor-board-head span { color: #a0aaba; font-size: 10px; }
.honor-board-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 7px; min-height: 188px; padding: 16px 8px 9px; }
.honor-podium-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; min-height: 124px; padding: 25px 5px 10px; border: 1px solid #e8edf4; border-top: 4px solid #cad9eb; border-radius: 8px; background: #fff; box-shadow: 0 3px 10px rgba(36, 64, 106, .05); text-align: center; }
.honor-podium-card.rank-1 { order: 2; min-height: 154px; border-top-color: #ffc23d; }
.honor-podium-card.rank-2 { order: 1; border-top-color: #bcd5ef; }
.honor-podium-card.rank-3 { order: 3; border-top-color: #efc2a1; }
.honor-podium-card.is-empty { opacity: .68; }
.honor-podium-badge { position: absolute; top: -13px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #58718c; background: #dcebfa; font-size: 15px; font-weight: 700; }
.honor-podium-card.rank-1 .honor-podium-badge { color: #a66a08; background: #ffe7a8; }
.honor-podium-card.rank-3 .honor-podium-badge { color: #a56d4a; background: #f7dec9; }
.honor-podium-medal { display: grid; place-items: center; width: 54px; height: 54px; margin: 2px auto 8px; border: 4px solid #e9eef5; border-radius: 50%; color: #607891; background: linear-gradient(145deg, #fff, #e7edf5); font-size: 22px; font-weight: 800; }
.honor-podium-card.rank-1 .honor-podium-medal { border-color: #ffd878; color: #d67b00; background: linear-gradient(145deg, #fff1aa, #ffb51d); }
.honor-podium-card.rank-3 .honor-podium-medal { border-color: #f2c49e; color: #bb5e16; background: linear-gradient(145deg, #ffe9d3, #e89a32); }
.honor-podium-name { width: 100%; overflow: hidden; color: #27364d; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.honor-podium-value { display: inline-flex; align-items: baseline; justify-content: center; min-width: 58px; margin-top: 7px; padding: 5px 8px; border-radius: 14px; color: #fff; background: #b6d2ee; font-size: 13px; }
.honor-podium-card.rank-1 .honor-podium-value { background: linear-gradient(90deg, #ffc52f, #ffad37); }
.honor-podium-card.rank-3 .honor-podium-value { background: #e8bd9b; }
.honor-podium-value small { margin-left: 2px; font-size: 10px; }
.honor-podium-empty { margin-top: 5px; color: #a4afbd; font-size: 10px; }
.honor-board.blue .honor-board-head strong { color: var(--brand); }
.honor-board.purple .honor-board-head strong { color: #8063d9; }
.view-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border: 1px solid #d6e5fb; border-radius: 4px; color: #5d87c6; background: #f4f8ff; font-size: 11px; white-space: nowrap; }
.panel-body { padding: 0 18px 17px; }
.bar-list { display: grid; gap: 13px; }
.bar-row { display: grid; gap: 7px; }
.bar-head { display: flex; align-items: center; justify-content: space-between; color: #68758a; font-size: 12px; }
.bar-head strong { color: #3b4a61; font-size: 13px; }
.bar-track { height: 9px; overflow: hidden; border-radius: 5px; background: #edf1f6; }
.bar-fill { height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, #6aa5f8, var(--brand)); }
.bar-legend { display: flex; gap: 18px; color: #a1acb9; font-size: 11px; }
.legend-dot { display: inline-block; width: 6px; height: 6px; margin: 0 4px 1px 0; border-radius: 50%; background: var(--brand); }
.legend-dot.gray { background: #d4dae2; }
.conversion-row + .conversion-row { margin-top: 18px; }
.conversion-row { display: grid; gap: 8px; }
.conversion-label { display: flex; align-items: center; gap: 8px; color: #5d6b7f; font-size: 12px; }
.conversion-label strong { margin-left: auto; color: #34435b; font-size: 13px; }
.conversion-number { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: 10px; font-weight: 700; }
.empty-note { padding: 30px 0 22px; color: #a4afbd; font-size: 12px; text-align: center; }
.attention-card { position: fixed; right: 18px; bottom: 18px; z-index: 15; width: 320px; padding: 14px 15px; border-radius: 8px; color: #fff; background: #202b3d; box-shadow: 0 10px 30px rgba(19, 32, 54, .24); }
.attention-pill, .attention-collapse { display: none; }
.attention-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; }
.attention-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 4px; padding: 0 5px; border-radius: 12px; background: #e95560; font-size: 11px; }
.attention-content { margin-top: 12px; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: #aeb9c9; font-size: 11px; text-align: center; }

.workbench-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 18px; border: 1px solid #cfe1fb; border-radius: 6px; background: linear-gradient(100deg, #eff6ff, #fbfdff); }
.workbench-banner-copy { display: flex; align-items: center; gap: 10px; }
.banner-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--brand); background: #dcecff; font-size: 18px; }
.workbench-banner strong, .workbench-banner span { display: block; }
.workbench-banner strong { color: #314b72; font-size: 13px; }
.workbench-banner span { margin-top: 4px; color: #8395ae; font-size: 11px; }
.workbench-summary { margin-top: 12px; }
.workbench-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 12px; margin-top: 12px; }
.task-row { display: flex; align-items: center; gap: 11px; padding: 14px 0; border-top: 1px solid #f0f2f6; }
.task-row:first-child { border-top: 0; }
.task-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; font-size: 16px; }
.task-copy { min-width: 0; flex: 1; }
.task-copy strong, .task-copy span { display: block; }
.task-copy strong { color: #40516a; font-size: 12px; }
.task-copy span { overflow: hidden; margin-top: 4px; color: #a0abba; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-count { color: #34445b; font-size: 12px; font-weight: 700; }
.shortcut-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.shortcut { display: flex; align-items: center; gap: 9px; padding: 12px 10px; border: 1px solid #edf0f4; border-radius: 5px; color: #58677b; background: #fbfcfe; text-align: left; }
.shortcut:hover { border-color: #bed7fa; color: var(--brand); background: #f6faff; }
.shortcut .nav-arrow { font-size: 15px; }
.focus-card { margin-top: 12px; }
.focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 18px 18px; }
.focus-item { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid #edf0f4; border-radius: 5px; background: #fbfcfe; }
.focus-index { color: #6e9fef; font-size: 16px; font-weight: 700; }
.focus-copy { min-width: 0; flex: 1; }
.focus-copy strong, .focus-copy span { display: block; }
.focus-copy strong { color: #40516a; font-size: 12px; }
.focus-copy span { margin-top: 4px; color: #9aa6b5; font-size: 11px; line-height: 1.5; }

.pool-card { padding: 10px 14px; }
.pool-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lead-scope-toolbar { display: grid; gap: 8px; margin-bottom: 10px; }
.lead-scope-hint { padding: 8px 14px; border: 1px solid #bfdbfe; border-radius: 8px; color: #1e40af; background: #eff6ff; font-size: 13px; }
.scope-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.scope-tab { min-height: 28px; padding: 0 10px; border: 1px solid #dfe6ef; border-radius: 6px; color: #677489; background: #fff; font-size: 12px; white-space: nowrap; }
.scope-tab strong { margin-left: 4px; color: #8e9aaa; font-weight: 600; }
.scope-tab:hover { border-color: #abcaf8; color: var(--brand); }
.scope-tab.is-active { border-color: #a8c9f8; color: var(--brand); background: var(--brand-soft); font-weight: 700; }
.scope-tab.is-active strong { color: var(--brand); }
.pool-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.pool-stats > div { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 10px; border: 1px solid #edf0f4; border-radius: 6px; background: #fbfcfe; }
.pool-stats span { color: #8995a6; font-size: 12px; }
.pool-stats strong { color: #34445b; font-size: 15px; font-weight: 700; }
.pool-stats .pool-rule { color: #5d87c6; font-size: 11px; font-weight: 500; }
.lead-assignment-modal { width: min(720px, calc(100vw - 40px)); overflow: hidden; border-radius: 9px; background: #fff; box-shadow: 0 20px 60px rgba(22, 39, 66, .28); }
.lead-assignment-modal .modal-head { min-height: 64px; padding: 0 24px; }
.lead-assignment-modal .modal-head h2 { margin: 0; color: #202d41; font-size: 19px; }
.lead-assignment-body { max-height: min(480px, calc(100vh - 210px)); overflow: auto; padding: 0 24px; }
.lead-assignment-table { width: 100%; border: 1px solid #e5ebf3; border-radius: 6px; overflow: hidden; }
.lead-assignment-table th, .lead-assignment-table td { height: 43px; padding: 0 13px; }
.lead-assignment-table th { background: #f6f8fb; }
.lead-assignment-table td strong { color: #2f415a; }
.lead-assignment-modal .modal-foot { padding: 16px 24px; }

.list-card { overflow: hidden; container-type: inline-size; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; min-width: 100%; border-bottom: 1px solid var(--line); }
.status-tabs { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; min-width: 0; gap: 2px; overflow: visible; }
.status-tab { position: relative; padding: 10px 18px 9px; color: #657185; background: transparent; white-space: nowrap; font-size: 14px; }
.status-tab.is-active { color: var(--brand); font-weight: 700; }
.status-tab.is-active::after { position: absolute; right: 11px; bottom: -1px; left: 11px; height: 2px; background: var(--brand); content: ""; }
.list-tools { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; min-height: 38px; padding: 0 14px 6px; color: #8995a6; font-size: 13px; white-space: nowrap; }
.selected-leads-count { color: var(--brand); font-size: 12px; }
.switch { display: inline-flex; align-items: center; gap: 5px; }
.switch input { accent-color: var(--brand); }
.sub-tabs { display: flex; align-items: center; gap: 4px; padding: 6px 14px 0; }
.sub-tab { padding: 5px 9px; border: 1px solid transparent; border-radius: 4px 4px 0 0; color: #7a8798; background: transparent; font-size: 12px; }
.sub-tab.is-active { border-color: #c8dcfb; color: var(--brand); background: var(--brand-soft); }
.table-wrap { overflow-x: auto; }
.table-wrap.has-custom-x-scroll { scrollbar-width: none; }
.table-wrap.has-custom-x-scroll::-webkit-scrollbar:horizontal { height: 0; }
.x-scrollbar {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  height: 18px;
  padding: 2px 0;
  background: #fff;
  cursor: pointer;
  touch-action: none;
}
.x-scrollbar[hidden] { display: none; }
.x-scrollbar-track {
  position: relative;
  width: 100%;
  height: 14px;
  overflow: hidden;
  border-radius: 7px;
  background: #eef2f7;
}
.x-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  min-width: 40px;
  border-radius: 7px;
  background: #b8c4d6;
  cursor: grab;
  touch-action: none;
  transition: background-color .12s ease;
  will-change: transform;
}
.x-scrollbar-thumb:hover,
.x-scrollbar.is-dragging .x-scrollbar-thumb { background: #8a9bb4; }
.x-scrollbar.is-dragging .x-scrollbar-thumb { cursor: grabbing; }
.x-scrollbar:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { height: 42px; padding: 0 12px; border-bottom: 1px solid #edf0f4; color: #637084; font-size: 12px; text-align: left; }
th { height: 38px; color: #536177; background: #fbfcfd; font-weight: 700; }
tbody tr:hover { background: #fbfdff; }
td.link { color: var(--brand); cursor: pointer; }
.lead-name-cell { white-space: nowrap; }
.lead-name-cell > span { vertical-align: middle; }
.lead-name-edit-trigger { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 5px; padding: 0; border: 1px solid transparent; border-radius: 5px; color: #8a98aa; background: transparent; vertical-align: middle; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.lead-name-edit-trigger svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.lead-name-edit-trigger:hover, .lead-name-edit-trigger:focus-visible { border-color: #cfe0f8; color: var(--brand); background: var(--brand-soft); outline: none; }
.lead-name-modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(24, 39, 62, .08); }
.lead-name-modal { position: fixed; width: min(300px, calc(100vw - 24px)); border: 1px solid #e2e9f2; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(22, 39, 66, .2); }
.lead-name-modal::after { position: absolute; bottom: -6px; left: 34px; width: 10px; height: 10px; border-right: 1px solid #e2e9f2; border-bottom: 1px solid #e2e9f2; background: #fff; content: ''; transform: rotate(45deg); }
.lead-name-modal .modal-head { padding: 13px 17px 8px; }
.lead-name-modal .modal-head h2 { margin: 0; color: #24344d; font-size: 15px; }
.lead-name-modal-form { padding: 0 17px; }
.lead-name-modal-form > .control { width: 100%; height: 34px; margin: 5px 0 12px; font-size: 13px; }
.lead-name-modal .modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 0 13px; }
.lead-name-modal .modal-foot .btn { min-height: 30px; padding: 0 12px; border-radius: 6px; font-size: 12px; }
.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 4px; color: #5486c9; background: #edf5ff; font-size: 11px; }
.tag.warning { color: #c6812e; background: #fff4e5; }
.tag.success { color: #27996c; background: #eaf8f1; }
.tag.danger { color: #d75a63; background: #fff0f1; }
.table-empty { padding: 45px 20px; color: #a2adba; text-align: center; }
.table-empty-icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 9px; border-radius: 50%; color: #b2bdc9; background: #f1f3f6; font-size: 17px; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 16px; color: #64748b; font-size: 12px; border-top: 1px solid #edf2f7; background: #fff; }
.pagination select, .pagination input { height: 30px; padding: 0 8px; border: 1px solid #cbd5e1; border-radius: 6px; color: #334155; background: #fff; font-size: 12px; }
.pagination select:focus { border-color: #3b82f6; }
.pagination input { width: 40px; text-align: center; }
.pagination-nav { display: inline-flex; align-items: center; gap: 4px; }
.pagination-nav .btn.btn-icon { min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 12px; color: #475569; background: #fff; transition: all .15s ease; }
.pagination-nav .btn.btn-icon:hover:not(:disabled) { border-color: #93c5fd; color: #2563eb; background: #eff6ff; }
.pagination-nav .btn.btn-icon.primary { border-color: #2563eb; color: #fff; background: #2563eb; font-weight: 600; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25); }
.pagination-nav .btn.btn-icon:disabled { color: #cbd5e1; border-color: #f1f5f9; background: #f8fafc; cursor: not-allowed; }
.pagination-ellipsis { min-width: 20px; text-align: center; color: #94a3b8; font-size: 12px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(23, 37, 59, .34); }
.modal { width: min(560px, calc(100vw - 40px)); border-radius: 7px; background: #fff; box-shadow: 0 18px 50px rgba(27, 44, 73, .2); }
.modal.lead-modal { width: min(1180px, calc(100vw - 48px)); max-height: calc(100vh - 32px); overflow: auto; }
.lead-modal .modal-head, .lead-modal .modal-foot { position: sticky; z-index: 2; background: #fff; }
.lead-modal .modal-head { top: 0; }
.lead-modal .modal-foot { bottom: 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-close { color: #96a1af; background: transparent; font-size: 18px; }
.modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 20px; }
.lead-modal .modal-body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.modal-section-title { grid-column: 1 / -1; padding-bottom: 2px; border-bottom: 1px solid #eef2f7; color: #314b72; font-size: 12px; font-weight: 700; }
.modal-field { display: grid; gap: 6px; }
.modal-field.full { grid-column: 1 / -1; }
.lead-modal .modal-field { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.modal-field label { color: #5c697c; font-size: 12px; white-space: nowrap; }
.lead-modal .modal-field.full { grid-template-columns: 56px minmax(0, 1fr); }
.lead-modal .lead-note-followup { align-items: start; padding: 10px 12px; border: 1px solid #dce5f1; border-radius: 8px; background: #fbfdff; }
.lead-note-followup-content { display: grid; gap: 8px; min-width: 0; }
.lead-note-followup-content .modal-textarea { min-height: 74px; }
.lead-next-follow-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; color: #5c697c; font-size: 12px; }
.modal-combo { display: grid; grid-template-columns: minmax(0, 1fr) 82px; min-width: 0; }
.modal-combo .control:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.modal-combo .control:last-child { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.required-mark { margin-right: 2px; color: var(--danger); }
.modal-textarea { min-height: 74px; padding-top: 8px; resize: vertical; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.toast { position: fixed; top: 68px; left: 50%; z-index: 60; transform: translateX(-50%); padding: 9px 16px; border: 1px solid #c8e9d8; border-radius: 5px; color: #267d5c; background: #f0fbf5; box-shadow: 0 5px 20px rgba(23, 58, 41, .1); font-size: 12px; }

.lead-detail-backdrop { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(23, 37, 59, .48); }
.lead-detail-modal { display: flex; flex-direction: column; width: min(1500px, calc(100vw - 32px)); height: min(900px, calc(100vh - 32px)); min-height: 560px; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 20px 60px rgba(22, 39, 66, .28); }
.lead-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.lead-detail-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lead-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #5c9cf6, #3e7fe9); font-size: 16px; font-weight: 700; }
.lead-detail-person strong, .lead-detail-person small { display: block; }
.lead-detail-person strong { color: #2f3d54; font-size: 15px; }
.lead-detail-person small { margin-top: 4px; color: #98a4b4; font-size: 11px; }
.lead-detail-actions { display: flex; align-items: center; gap: 8px; }
.lead-detail-actions .btn { min-width: 78px; }
.lead-detail-columns { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(380px, .8fr); flex: 1; min-height: 0; }
.lead-detail-left { min-width: 0; overflow: auto; padding: 0 24px 24px; background: #fff; }
.detail-meta-strip { display: flex; align-items: center; gap: 28px; min-height: 47px; border-bottom: 1px solid #eef2f7; color: #7f8b9d; font-size: 12px; }
.detail-meta-strip strong { color: #42536d; font-weight: 600; }
.lead-edit-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; padding-top: 18px; }
.lead-detail-left .modal-section-title { margin-top: 2px; }
.lead-detail-left .modal-field { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.lead-detail-left .modal-field.full { grid-column: 1 / -1; grid-template-columns: 56px minmax(0, 1fr); }
.lead-owner-picker { position: relative; min-width: 0; }
.lead-owner-picker::after { position: absolute; top: 7px; right: 12px; color: #6e85a3; content: "⌄"; font-size: 17px; pointer-events: none; transition: transform .15s ease; }
.lead-owner-picker.is-open::after { transform: rotate(180deg); }
.lead-owner-picker > .lead-owner-input { width: 100%; min-height: 38px; padding: 0 34px 0 13px; color: #344b6c; background: linear-gradient(180deg, #fff, #f9fbfe); font-size: 13px; }
.lead-owner-picker.is-open > .lead-owner-input { border-color: var(--brand); background: #f7faff; box-shadow: 0 0 0 3px rgba(61, 132, 242, .11); }
.lead-owner-picker[data-disabled="true"] { opacity: .68; pointer-events: none; }
.lead-owner-menu { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 20; display: none; max-height: 240px; overflow: auto; padding: 9px; border: 1px solid #dce5f0; border-radius: 11px; background: #fff; box-shadow: 0 16px 34px rgba(37, 59, 91, .18), 0 2px 7px rgba(37, 59, 91, .07); }
.lead-owner-picker.is-open .lead-owner-menu { display: block; }
.lead-owner-group > summary::-webkit-details-marker { display: none; }
.lead-owner-group { margin: 4px 0; overflow: hidden; border: 1px solid #e5ebf3; border-radius: 8px; background: #fff; }
.lead-owner-group:last-child { margin-bottom: 0; }
.lead-owner-group > summary { display: flex; align-items: center; justify-content: space-between; min-height: 39px; padding: 0 11px; color: #314b72; background: #fbfcfe; cursor: pointer; font-size: 12px; font-weight: 700; list-style: none; }
.lead-owner-group[open] > summary { color: var(--brand); border-bottom: 1px solid #e5ebf3; background: #f3f7ff; }
.lead-owner-group-label { color: #314b72; }
.lead-owner-group-meta { display: flex; align-items: center; gap: 6px; color: #9aa7b7; font-size: 11px; font-weight: 400; }
.lead-owner-group-meta em { font-style: normal; }
.lead-owner-group-toggle { display: inline-block; color: #71829a; font-size: 19px; line-height: 11px; transition: transform .15s ease; }
.lead-owner-group[open] .lead-owner-group-toggle { transform: rotate(90deg); }
.lead-owner-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 8px; background: #f8faff; }
.lead-owner-option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 6px; color: #475873; background: #fff; text-align: left; }
.lead-owner-option:hover, .lead-owner-option.is-selected { color: var(--brand); background: #eef5ff; }
.lead-owner-option small { color: #9aa7b7; font-size: 11px; }
.lead-owner-empty { padding: 12px 8px; color: #9aa7b7; font-size: 12px; text-align: center; }
.detail-edit-actions { display: flex; grid-column: 1 / -1; justify-content: space-between; padding-top: 2px; }
.lead-detail-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: #f6f8fb; }
.detail-tabs { display: flex; align-items: center; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #fff; }
.detail-tabs button { position: relative; min-height: 52px; padding: 0 15px; color: #667489; background: transparent; font-size: 13px; }
.detail-tabs button.is-active { color: var(--brand); font-weight: 700; }
.detail-tabs button.is-active::after { position: absolute; right: 13px; bottom: -1px; left: 13px; height: 2px; border-radius: 2px; background: var(--brand); content: ""; }
.detail-panel { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
.detail-records { display: grid; align-content: start; gap: 13px; flex: 1; overflow: auto; padding: 16px; }
.detail-empty { padding: 60px 18px; color: #a4afbd; font-size: 12px; text-align: center; }
.followup-card, .order-detail-card { padding: 14px; border: 1px solid #e9edf3; border-radius: 7px; background: #fff; box-shadow: 0 2px 9px rgba(39, 64, 102, .035); }
.followup-card-head, .followup-meta, .followup-card-foot, .order-detail-card > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.followup-card-head strong, .order-detail-card strong { color: #33435b; font-size: 13px; }
.followup-card-head span, .followup-card-foot, .followup-meta, .order-detail-card p { color: #9aa6b5; font-size: 11px; }
.followup-content { margin: 12px 0; color: #3f4e63; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.followup-meta { padding: 9px 0; border-top: 1px solid #f0f2f6; }
.followup-card-foot { justify-content: flex-start; padding-top: 8px; border-top: 1px solid #f0f2f6; }
.followup-card-foot span { margin-right: auto; }
.followup-card-foot .btn { min-height: 24px; padding: 0 7px; }
.followup-note-footer { padding: 12px 16px 14px; border-top: 1px solid var(--line); background: #fff; }
.followup-note-button { width: 100%; min-height: 42px; border: 1px solid #cfe0fb; color: var(--brand); background: #f7faff; font-size: 13px; font-weight: 600; }
.followup-note-button:hover { border-color: var(--brand); background: #eef5ff; }
.followup-modal-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(23, 37, 59, .5); }
.followup-modal { display: flex; flex-direction: column; width: min(680px, calc(100vw - 40px)); max-height: min(760px, calc(100vh - 40px)); overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 20px 60px rgba(22, 39, 66, .3); }
.followup-modal .modal-head { min-height: 60px; padding: 0 24px; }
.followup-modal .modal-head h2 { font-size: 17px; }
.followup-modal-body { display: grid; gap: 18px; overflow: auto; padding: 24px 30px 26px; }
.followup-form-field { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: start; gap: 14px; }
.followup-form-field > label { padding-top: 10px; color: #49566a; font-size: 13px; text-align: right; white-space: nowrap; }
.followup-form-field .control { width: 100%; min-height: 40px; }
.followup-time-picker { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-width: 0; }
.followup-time-picker .control:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.followup-time-picker .control:last-child { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.followup-content-field textarea { min-height: 154px; padding-top: 11px; resize: vertical; }
.followup-char-count { padding-top: 5px; color: #9ca7b5; font-size: 11px; text-align: right; }
.followup-upload { display: flex; align-items: center; justify-content: center; gap: 10px; width: 128px; min-height: 100px; padding: 12px; border: 1px dashed #cbd5e3; border-radius: 5px; color: var(--brand) !important; background: #fbfcfe; cursor: pointer; text-align: center !important; }
.followup-upload > span { padding-top: 0 !important; color: var(--brand); font-size: 12px; line-height: 1.6; }
.followup-upload small { color: #7ca4e6; font-size: 11px; }
.followup-upload-icon { font-size: 28px !important; line-height: 1 !important; }
.followup-upload input { display: none; }
.order-detail-card > div { justify-content: flex-start; }
.order-detail-card .tag { margin-left: auto; }
.order-detail-card p { margin: 12px 0 0; }
.log-kind-tabs { display: flex; gap: 0; padding: 14px 16px 4px; background: #f6f8fb; }
.log-kind-tabs button { min-height: 28px; padding: 0 10px; border: 1px solid #dfe6ef; color: #69768a; background: #fff; font-size: 11px; }
.log-kind-tabs button + button { border-left: 0; }
.log-kind-tabs button.is-active { border-color: var(--brand); color: #fff; background: var(--brand); }
.detail-logs { flex: 1; overflow: auto; padding: 10px 18px 18px; background: #f6f8fb; }
.log-entry { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid #e8edf3; }
.log-time { color: #9ba7b6; font-size: 11px; }
.log-entry strong { color: #40516a; font-size: 12px; }
.log-action { margin-left: 8px; color: #5c89cf; font-size: 11px; }
.log-entry p { margin: 7px 0 0; color: #667489; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }

@media (max-width: 1050px) {
  .lead-detail-modal { height: calc(100vh - 20px); }
  .lead-detail-columns { grid-template-columns: 1fr; overflow: auto; }
  .lead-detail-left { max-height: 60vh; }
  .lead-detail-right { min-height: 420px; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 640px) {
  .followup-modal-backdrop { padding: 10px; }
  .followup-modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .followup-modal-body { gap: 14px; padding: 18px 16px 20px; }
  .followup-form-field { grid-template-columns: 1fr; gap: 5px; }
  .followup-form-field > label { padding-top: 0; text-align: left; }
  .followup-time-picker { grid-template-columns: 1fr; gap: 6px; }
  .followup-time-picker .control:first-child, .followup-time-picker .control:last-child { border-radius: 5px; border-left: 1px solid #dce3ed; }
}

@media (max-width: 1180px) {
  .filter-grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-grid, .workbench-grid { grid-template-columns: 1fr; }
  .pool-head { align-items: flex-start; flex-direction: column; }
  .scope-tabs { width: 100%; }
  .scope-tab { flex: 1; }
}

/* 对齐海草云 CRM 的清晰中文排版，并整体放大一级。 */
textarea { font: inherit; }
.brand { font-size: 19px; }
.brand-title { display: block; max-width: none !important; font-size: 15px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.brand-title small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.brand-mark { width: 30px; height: 30px; font-size: 16px; flex-shrink: 0; }
.global-search input { font-size: 16px; }
.account { font-size: 14px; }
.nav-label { font-size: 13px; }
.nav-item { font-size: 15px; }
.nav-item { color: #3f4b5e; }
.nav-arrow { font-size: 13px; }
.quick-add-trigger { font-size: 14px; }
.quick-add-item strong { font-size: 16px; }
.quick-add-item small { font-size: 13px; }
.page-title { font-size: 24px; }
.page-subtitle { font-size: 14px; }
.btn { font-size: 14px; }
.card-title { font-size: 17px; }
.card-note { font-size: 14px; }
.tab { font-size: 15px; }
.filter-label { font-size: 14px; }
.control { font-size: 14px; }
.metric-label { font-size: 15px; }
.metric-help { font-size: 14px; }
.metric-foot { font-size: 13px; }
.secondary-label { color: #77869a; font-size: 14px; }
.view-badge { font-size: 13px; }
.bar-head { font-size: 14px; }
.bar-head strong { font-size: 15px; }
.bar-legend { font-size: 13px; }
.conversion-label { font-size: 14px; }
.conversion-label strong { font-size: 15px; }
.empty-note { font-size: 14px; }
.attention-head { font-size: 14px; }
.attention-content { font-size: 13px; }
.workbench-banner strong { font-size: 15px; }
.workbench-banner span { font-size: 13px; }
.task-copy strong { font-size: 14px; }
.task-copy span { font-size: 13px; }
.task-count { font-size: 14px; }
.focus-copy strong { font-size: 14px; }
.focus-copy span { font-size: 13px; }
.scope-tab { font-size: 12.5px; }
.pool-stats span { font-size: 12px; }
.pool-stats strong { font-size: 15px; }
.pool-stats .pool-rule { font-size: 12px; }
.list-tools { font-size: 14px; }
.sub-tab { font-size: 14px; }
th, td { color: #4d596b; font-size: 14px; }
.tag { font-size: 13px; }
.pagination { font-size: 13px; }
.modal-head h2 { font-size: 18px; }
.modal-section-title { font-size: 14px; }
.modal-field label { font-size: 14px; }
.lead-detail-person strong { font-size: 17px; }
.lead-detail-person small { font-size: 13px; }
.detail-meta-strip { font-size: 14px; }
.detail-tabs button { font-size: 15px; }
.followup-card-head strong, .order-detail-card strong { font-size: 15px; }
.followup-card-head span, .followup-card-foot, .followup-meta, .order-detail-card p { font-size: 13px; }
.followup-content { font-size: 15px; }
.followup-note-button { font-size: 15px; }
.log-kind-tabs button { font-size: 13px; }
.log-time { font-size: 13px; }
.log-entry strong { font-size: 14px; }
.log-action { font-size: 13px; }
.log-entry p { font-size: 14px; }
.followup-modal .modal-head h2 { font-size: 19px; }
.followup-form-field > label { font-size: 14px; }

/* 正文使用更深的蓝灰色，只有提示语和占位符保留浅色，减少阅读疲劳。 */
.page-subtitle, .card-note, .metric-foot, .pool-stats span, .pagination { color: #718096; }
.status-tab, .sub-tab, .list-tools { color: #4f5c70; }
.filter-label, .modal-field label, .followup-form-field > label { color: #465469; }
.control { color: #3f4e64; }
.control::placeholder { color: #a7b1bf; }
.secondary-value, .metric-value, .conversion-label strong { color: #26364d; }
.task-copy strong, .focus-copy strong, .conversion-label, .bar-head { color: #46556a; }
.task-copy span, .focus-copy span { color: #7a899c; }
.detail-meta-strip, .followup-card-head span, .followup-card-foot, .followup-meta, .order-detail-card p, .log-time { color: #718096; }
.followup-content, .log-entry p { color: #3d4c62; }

/* 苹方优先，正文与新增按钮统一沿用同一套全局字体。 */
body { color: #202d41; font-family: var(--font-family); font-weight: 400; }
button, input, select, textarea { font-family: var(--font-family); font-weight: 400; }
.btn, .quick-add-trigger, .quick-add-item, .quick-add-item strong, .attention-action,
.attention-config-trigger, .shortcut, .scope-tab, .sub-tab, .status-tab { font-family: var(--font-family); }
.brand, .brand-title, .nav-item, .quick-add-trigger, .page-title, .card-title,
.tab, .status-tab, .sub-tab, .filter-label, .modal-section-title, .modal-field label,
.followup-form-field > label, .detail-tabs button, th, .metric-label, .secondary-label,
.scope-tab, .list-tools, .lead-detail-person strong, .followup-card-head strong,
 .order-detail-card strong, .log-entry strong { font-family: PingFangSC-Medium, "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "Noto Sans SC", sans-serif; font-weight: 500; }
.page-title, .card-title, .lead-detail-person strong, .followup-card-head strong,
.order-detail-card strong, .metric-value, .secondary-value, .conversion-label strong { color: #202d41; }

/* 客资超时监控：只在存在超时客资时显示，摘要与操作保持单行对齐。 */
.attention-card {
  position: static;
  width: auto;
  margin: auto 10px 12px;
  padding: 12px 10px;
  border-radius: 10px;
}
.attention-head {
  min-height: 28px;
  align-items: flex-start;
  gap: 6px;
  font-size: 14px;
  line-height: 1.35;
}
.attention-head strong { color: #fff; font-weight: 600; }
.attention-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.attention-action {
  padding: 2px 0;
  color: #dbe5f2;
  background: transparent;
  font-size: 13px;
}
.attention-action:hover { color: #fff; }
.attention-count {
  min-width: 26px;
  height: 26px;
  margin-left: 6px;
  padding: 0 7px;
  font-size: 15px;
  font-weight: 600;
}
.attention-summary {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  color: #b7c2d1;
  font-size: 12px;
  line-height: 1.4;
}
.attention-summary strong { color: #d9e1eb; font-size: 13px; font-weight: 500; }
.attention-scope-label { color: #aab6c7; font-size: 12px; }
.attention-content {
  margin-top: 10px;
  padding: 10px 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  color: #c7d0dc;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}
.attention-content button {
  display: block;
  margin-top: 9px;
  padding: 0;
  color: #8db9ff;
  background: transparent;
  font-size: 12px;
}
.attention-content button:hover { color: #fff; }

.attention-config-trigger { min-height: 34px; color: #4b78ba; background: #f7faff; }

.attention-config-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(23, 37, 59, .42);
}
.attention-config-modal {
  width: min(520px, calc(100vw - 40px));
  overflow: hidden;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(22, 39, 66, .28);
}
.attention-config-modal .modal-head { min-height: 62px; padding: 0 24px; }
.attention-config-modal .modal-head h2 { color: #202d41; font-size: 19px; }
.attention-config-body { display: grid; gap: 20px; padding: 24px 28px; }
.config-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; border: 1px solid #e5edf8; border-radius: 7px; background: #f7faff; }
.config-toggle-row strong, .config-toggle-row small { display: block; }
.config-toggle-row strong { color: #26364d; font-size: 15px; font-weight: 500; }
.config-toggle-row small { margin-top: 5px; color: #718096; font-size: 13px; line-height: 1.45; }
.config-toggle-row input { flex: 0 0 auto; width: 19px; height: 19px; accent-color: var(--brand); }
.config-field { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 16px; }
.config-field > label { color: #465469; font-size: 14px; }
.config-input-suffix { position: relative; }
.config-input-suffix .control { padding-right: 55px; }
.config-input-suffix > span { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #718096; font-size: 14px; pointer-events: none; }
.attention-config-modal .control { height: 40px; font-size: 14px; }
.attention-config-modal .modal-foot { padding: 16px 24px; }

@media (max-width: 640px) {
  .attention-card { width: auto; margin: auto 10px 12px; }
  .config-field { grid-template-columns: 1fr; gap: 6px; }
}

/* 客资列表在窗口缩窄时，将状态标签与右侧操作拆成两行，避免互相挤压。 */
@container (max-width: 1080px) {
  .status-row { flex-wrap: wrap; }
  .status-tabs { flex: 1 1 100%; flex-wrap: wrap; }
  .list-tools { flex: 1 1 100%; justify-content: flex-end; min-height: 42px; padding-bottom: 9px; }
}

/* 所有业务按钮统一使用全局字体，避免新增按钮回退到浏览器默认字体。 */
.btn, .quick-add-trigger, .quick-add-item, .quick-add-item strong, .attention-action,
.attention-config-trigger, .shortcut, .scope-tab, .sub-tab, .status-tab,
.detail-tabs button, .followup-note-button { font-family: var(--font-family); }

/* 账号菜单与账号资料 */
.account-wrap { position: relative; }
.account-trigger {
  min-height: 40px;
  padding: 0 0 0 12px;
  border-left: 1px solid rgba(255,255,255,.2);
  color: #fff;
  background: transparent;
  font-size: 14px;
}
.account-trigger:hover { color: #fff; background: rgba(255,255,255,.08); }
.account-trigger .account-avatar { flex: 0 0 auto; }
.account-menu {
  position: absolute;
  top: 48px;
  right: 0;
  z-index: 36;
  width: 154px;
  padding: 8px;
  border: 1px solid #e5ebf3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(39, 64, 102, .18);
}
.account-menu button {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 5px;
  color: #2d3a50;
  background: #fff;
  text-align: left;
  font-size: 14px;
}
.account-menu button:hover { color: var(--brand); background: var(--brand-soft); }
.settings-top-button { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; color: rgba(255,255,255,.96); }
.settings-top-button:hover { color: #fff; background: rgba(255,255,255,.1); }
.settings-top-button { width: auto; min-width: 48px; padding: 0 6px; font-size: 15px; font-weight: 600; text-decoration: none; }
.mini-program-qr { position: relative; display: flex; align-items: center; min-height: 32px; }
.mini-program-qr-button { min-height: 28px; padding: 0 6px; border-radius: 6px; color: rgba(255,255,255,.96); background: transparent; font-size: 14px; font-weight: 600; }
.mini-program-qr-button:hover, .mini-program-qr:focus-within .mini-program-qr-button { color: #fff; background: rgba(255,255,255,.1); }
.mini-program-qr-popover { position: absolute; top: 100%; right: 0; z-index: 50; padding-top: 8px; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; }
.mini-program-qr:hover .mini-program-qr-popover, .mini-program-qr:focus-within .mini-program-qr-popover { visibility: visible; opacity: 1; transform: translateY(0); }
.mini-program-qr-popover img { display: block; width: 220px; height: auto; padding: 10px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(15,23,42,.22); }

.account-backdrop, .account-edit-backdrop, .company-edit-backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(23, 37, 59, .46);
}
.account-modal {
  display: flex;
  flex-direction: column;
  width: min(1060px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 10px;
  background: #f5f7fa;
  box-shadow: 0 20px 60px rgba(22, 39, 66, .3);
}
.account-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 30px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.account-modal-head h1 { margin: 0; color: #202d41; font-size: 25px; font-weight: 600; }
.account-modal-body { display: grid; gap: 18px; padding: 24px 30px 30px; }
.account-basic-card, .account-security-card {
  border: 1px solid #e8edf3;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 16px rgba(36, 64, 106, .045);
}
.account-basic-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 28px; padding: 28px 30px; }
.account-basic-avatar { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 8px; color: #fff; background: linear-gradient(145deg, #8dc9f5, #3975d7); font-size: 34px; font-weight: 600; }
.account-basic-copy h2 { margin: 2px 0 22px; color: #202d41; font-size: 21px; font-weight: 600; }
.account-basic-copy p { margin: 0 0 14px; color: #253249; font-size: 15px; }
.account-basic-copy > span { display: block; margin-top: 20px; color: #a1acb9; font-size: 13px; }
.account-security-card { padding: 0 30px; }
.account-security-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 94px; border-bottom: 1px dashed #e7ebf1; }
.account-security-row:last-child { border-bottom: 0; }
.account-security-icon { color: #8d98a6; font-size: 22px; text-align: center; }
.account-security-row strong, .account-security-row span, .account-security-row small { display: inline-block; }
.account-security-row strong { min-width: 42px; color: #34435b; font-size: 15px; font-weight: 500; }
.account-security-row > div > span { margin-left: 16px; color: #26364d; font-size: 15px; }
.account-security-row small { display: block; margin-top: 7px; color: #a1acb9; font-size: 13px; }
.account-edit-link { padding: 5px 0; color: var(--brand); background: transparent; font-size: 14px; }
.account-edit-link:hover { color: var(--brand-deep); }
.account-edit-backdrop, .company-edit-backdrop { z-index: 75; }
.account-edit-modal, .company-edit-modal { width: min(520px, calc(100vw - 40px)); overflow: hidden; border-radius: 9px; background: #fff; box-shadow: 0 20px 60px rgba(22, 39, 66, .3); }
.account-edit-body, .company-edit-body { display: grid; gap: 16px; padding: 24px 28px; }
.account-edit-body label, .company-edit-body label { display: grid; gap: 7px; color: #465469; font-size: 14px; }
.account-edit-body .control, .company-edit-body .control { height: 40px; font-size: 14px; }
.account-edit-hint { padding: 11px 13px; border-radius: 6px; color: #718096; background: #f7faff; font-size: 13px; line-height: 1.5; }

/* 企业设置子页面 */
.settings-fullscreen { min-height: 100vh; background: var(--page); }
.settings-fullbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 30px; color: #fff; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); box-shadow: 0 2px 8px rgba(33, 83, 155, .12); }
.settings-fullbrand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.settings-fullbrand .brand-mark { width: 36px; height: 36px; font-size: 19px; border: 1.5px solid rgba(255,255,255,.8); border-radius: 8px; background: rgba(255,255,255,.15); display: grid; place-items: center; flex-shrink: 0; }
.settings-fullbrand strong, .settings-fullbrand small { display: block; line-height: 1.1; }
.settings-fullbrand strong { font-size: 19px; font-weight: 700; }
.settings-fullbrand small { margin-top: 3px; font-size: 12px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.settings-full-actions { display: flex; align-items: center; gap: 18px; }
.settings-full-title { padding-right: 18px; border-right: 1px solid rgba(255,255,255,.25); font-size: 18px; font-weight: 600; }
.company-switcher { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.9); font-size: 12px; white-space: nowrap; }
.company-switcher select { max-width: 150px; height: 32px; padding: 0 26px 0 10px; border: 1px solid rgba(255,255,255,.36); border-radius: 5px; color: #fff; background: rgba(255,255,255,.12); font-size: 12px; }
.company-switcher option { color: #26364d; background: #fff; }
.settings-back-button { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 5px; color: #fff; background: transparent; font-size: 14px; }
.settings-back-button:hover { background: rgba(255,255,255,.12); }
.settings-fullbar .account { min-height: 40px; }
.settings-fullbody { min-height: calc(100vh - 72px); padding: 0 24px 28px; }
.settings-fullbody .settings-layout { min-height: calc(100vh - 106px); grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
.settings-fullbody .settings-sidebar { padding-top: 22px; }
.settings-fullbody .settings-content { padding-top: 30px; }
.settings-fullbody .settings-page-head h1 { font-size: 32px; }
.settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; min-height: calc(100vh - 110px); }
.settings-sidebar { padding: 8px 0; border-right: 1px solid var(--line); }
.settings-sidebar-title { padding: 10px 12px 18px; color: #26364d; font-size: 18px; font-weight: 600; }
.settings-nav-item { display: flex; align-items: center; gap: 0; width: calc(100% - 8px); min-height: 42px; margin-bottom: 4px; padding: 0 12px; border-radius: 0 22px 22px 0; color: #5d6b7f; background: transparent; text-align: left; font-size: 15px; }
.settings-nav-item > span { width: 20px; color: #7b8aa2; text-align: center; }
.settings-nav-item:hover { color: var(--brand); background: #f3f7ff; }
.settings-nav-item.is-active { color: #fff; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); }
.settings-nav-item.is-active > span { color: #fff; }
.settings-sidebar-child { display: grid; gap: 6px; padding: 8px 12px 18px 12px; color: #7e8da5; font-size: 14px; }
.settings-sidebar-child .is-current { color: var(--brand); }
.settings-content { min-width: 0; padding: 16px 8px 30px 0; }
.settings-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.settings-page-head h1 { margin: 0; color: #202d41; font-size: 28px; font-weight: 600; }
.settings-page-head p { margin: 8px 0 0; color: #718096; font-size: 14px; }
.company-info-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 34px 42px; border: 1px solid #e8edf3; border-radius: 10px; background: #fff; box-shadow: 0 3px 16px rgba(36, 64, 106, .045); }
.company-logo { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 24px; color: #fff; background: linear-gradient(145deg, #6aa5f8, var(--brand-deep)); font-size: 34px; font-weight: 600; }
.company-info-body h2 { margin: 6px 0 32px; color: #202d41; font-size: 24px; font-weight: 600; }
.company-info-grid { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 24px 22px; align-items: center; }
.company-info-grid span { color: #7b8aa2; font-size: 16px; }
.company-info-grid strong { color: #263249; font-size: 17px; font-weight: 400; }
.company-management-card { overflow: hidden; border: 1px solid #e8edf3; border-radius: 10px; background: #fff; box-shadow: 0 3px 16px rgba(36, 64, 106, .045); }
.company-management-head { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 22px; border-bottom: 1px solid #edf1f6; color: #7b8aa2; font-size: 13px; }
.company-management-head strong { color: #26364d; font-size: 16px; }
.company-management-list { display: grid; }
.company-management-item { display: flex; align-items: center; gap: 15px; min-height: 92px; padding: 17px 22px; border-bottom: 1px solid #edf1f6; }
.company-management-item:last-child { border-bottom: 0; }
.company-management-item.is-active { background: #f7fbff; }
.company-management-logo { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #73abf7, var(--brand-deep)); font-size: 19px; font-weight: 700; }
.company-management-copy { min-width: 0; flex: 1 1 auto; }
.company-management-copy h2 { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 6px; color: #26364d; font-size: 16px; font-weight: 600; }
.company-management-copy h2 span { padding: 3px 7px; border-radius: 10px; color: var(--brand); background: var(--brand-soft); font-size: 11px; font-weight: 500; white-space: nowrap; }
.company-management-copy p, .company-management-copy small { display: block; margin: 0; color: #718096; font-size: 12px; line-height: 1.6; }
.company-management-copy small { color: #9aa6b5; }
.settings-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.settings-section-heading h2 { margin: 0 0 6px; color: #26364d; font-size: 18px; }
.settings-section-heading p { margin: 0; color: #718096; font-size: 13px; }
.company-management-detail { margin-bottom: 18px; }
.company-detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 22px; }
.company-detail-stats > div { display: grid; gap: 7px; min-width: 0; padding: 14px; border: 1px solid #edf1f6; border-radius: 8px; }
.company-detail-stats span { color: #7b8aa2; font-size: 12px; }
.company-detail-stats strong { overflow: hidden; color: #26364d; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.company-management-item .company-management-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.company-create-modal { width: min(560px, calc(100vw - 40px)); }
.company-create-modal .settings-form-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.company-create-modal .settings-form-body > .department-modal-hint { grid-column: 1 / -1; }
.company-edit-button { min-width: 110px; min-height: 42px; margin-top: 38px; border-radius: 22px; color: #fff; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); font-size: 16px; }
.company-edit-button:hover { box-shadow: 0 5px 14px rgba(67, 137, 245, .22); }
.settings-placeholder { display: grid; place-items: center; min-height: 360px; padding: 30px; border: 1px solid #e8edf3; border-radius: 10px; background: #fff; text-align: center; }
.settings-placeholder > span { color: #9eacc0; font-size: 40px; }
.settings-placeholder h2 { margin: 12px 0 4px; color: #34435b; font-size: 20px; }
.settings-placeholder p { margin: 0; color: #718096; font-size: 14px; }

/* 登录页全新设计：客多多AI管理系统 */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px 20px;
  background: radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.08) 0%, transparent 45%),
              radial-gradient(circle at 88% 82%, rgba(29, 78, 216, 0.06) 0%, transparent 40%),
              linear-gradient(135deg, #f1f5f9 0%, #f8fafc 50%, #eff6ff 100%);
  box-sizing: border-box;
  overflow-x: hidden;
}

.login-container {
  display: flex;
  width: 100%;
  max-width: 840px;
  min-height: 490px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
  overflow: hidden;
  box-sizing: border-box;
}

/* 左侧品牌展示区 (桌面端) */
.login-brand-panel {
  flex: 0 0 380px;
  width: 380px;
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(145deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.login-brand-panel::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.login-brand-panel::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 23, 42, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.login-brand-header {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.login-brand-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.12) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.login-brand-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.login-brand-name {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
  line-height: 1.2;
  white-space: nowrap;
}

.login-brand-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
}

/* 价值主张列表 (桌面端) */
.login-value-props {
  display: grid;
  gap: 20px;
  margin: 32px 0 10px;
  position: relative;
  z-index: 1;
}

.login-value-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.login-value-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  flex-shrink: 0;
}

.login-value-content strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2px;
}

.login-value-content p {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}

/* 价值标签药丸 (移动端显示) */
.login-value-pills {
  display: none;
}

/* 右侧表单卡片 */
.login-card {
  flex: 1 1 auto;
  padding: 44px 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
  box-sizing: border-box;
  min-width: 0;
}

.login-card-head {
  margin-bottom: 24px;
}

.login-card-head .login-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.3px;
}

.login-card-head .login-subtitle {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-field {
  display: grid;
  gap: 6px;
}

.login-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.login-form .control {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  transition: all 0.18s ease;
  box-sizing: border-box;
}

.login-form .control:focus {
  background: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.login-password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.login-password-input-wrap .control {
  padding-right: 38px;
}

.login-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s ease;
}

.login-password-toggle:hover {
  color: #334155;
  background: rgba(15, 23, 42, 0.05);
}

.login-submit {
  width: 100%;
  height: 38px;
  min-height: 38px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  color: #ffffff;
  background: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
  transition: all 0.18s ease;
  cursor: pointer;
}

.login-submit:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.login-submit:active {
  background: #1e40af;
  transform: translateY(1px);
}

.login-tip {
  margin: 16px 0 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.login-footer {
  margin-top: 20px;
  color: #94a3b8;
  font-size: 12px;
  text-align: center;
}

/* H5 / 移动端自适应 (<=640px 以及 /h5 端) */
@media (max-width: 640px) {
  .login-page {
    padding: 20px 14px calc(24px + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
  }
  .login-container {
    flex-direction: column;
    max-width: 420px;
    min-height: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  .login-brand-panel {
    flex: 0 0 auto;
    width: 100%;
    padding: 16px 8px 20px;
    background: transparent;
    color: #0f172a;
    align-items: center;
    text-align: center;
  }
  .login-brand-panel::before,
  .login-brand-panel::after {
    display: none;
  }
  .login-brand-header {
    flex-direction: column;
    gap: 10px;
  }
  .login-brand-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: 0;
    color: #ffffff;
    font-size: 22px;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
  }
  .login-brand-name {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
  }
  .login-brand-tagline {
    font-size: 13px;
    color: #64748b;
  }
  .login-value-props {
    display: none;
  }
  .login-value-pills {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
  }
  .login-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #dbeafe;
  }
  .login-card {
    width: 100%;
    padding: 26px 20px 22px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
  }
  .login-card-head {
    margin-bottom: 20px;
    text-align: center;
  }
  .login-card-head .login-title {
    font-size: 20px;
  }
  .login-form .control {
    height: 44px;
    font-size: 15px;
    border-radius: 8px;
  }
  .login-password-input-wrap .control {
    padding-right: 44px;
  }
  .login-password-toggle {
    width: 36px;
    height: 36px;
    right: 4px;
  }
  .login-submit {
    height: 44px;
    min-height: 44px;
    font-size: 15px;
    border-radius: 8px;
  }
}

.login-page.is-h5 {
  padding: 20px 14px calc(24px + env(safe-area-inset-bottom, 0px));
  align-items: flex-start;
}
.login-page.is-h5 .login-container {
  flex-direction: column;
  max-width: 420px;
  min-height: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.login-page.is-h5 .login-brand-panel {
  flex: 0 0 auto;
  width: 100%;
  padding: 16px 8px 20px;
  background: transparent;
  color: #0f172a;
  align-items: center;
  text-align: center;
}
.login-page.is-h5 .login-brand-panel::before,
.login-page.is-h5 .login-brand-panel::after {
  display: none;
}
.login-page.is-h5 .login-brand-header {
  flex-direction: column;
  gap: 10px;
}
.login-page.is-h5 .login-brand-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: 0;
  color: #ffffff;
  font-size: 22px;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
}
.login-page.is-h5 .login-brand-name {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}
.login-page.is-h5 .login-brand-tagline {
  font-size: 13px;
  color: #64748b;
}
.login-page.is-h5 .login-value-props {
  display: none;
}
.login-page.is-h5 .login-value-pills {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.login-page.is-h5 .login-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}
.login-page.is-h5 .login-card {
  width: 100%;
  padding: 26px 20px 22px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
}
.login-page.is-h5 .login-card-head {
  margin-bottom: 20px;
  text-align: center;
}
.login-page.is-h5 .login-card-head .login-title {
  font-size: 20px;
}
.login-page.is-h5 .login-form .control {
  height: 44px;
  font-size: 15px;
  border-radius: 8px;
}
.login-page.is-h5 .login-password-input-wrap .control {
  padding-right: 44px;
}
.login-page.is-h5 .login-password-toggle {
  width: 36px;
  height: 36px;
  right: 4px;
}
.login-page.is-h5 .login-submit {
  height: 44px;
  min-height: 44px;
  font-size: 15px;
  border-radius: 8px;
}

@media (max-width: 900px) {
  .account-basic-card { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 22px; }
  .account-basic-avatar { width: 88px; height: 88px; }
  .company-info-card { grid-template-columns: 1fr; padding: 26px; }
  .settings-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 14px; }
  .settings-fullbar { padding: 0 18px; }
  .settings-fullbody { padding: 0 14px 20px; }
  .settings-fullbody .settings-layout { grid-template-columns: 178px minmax(0, 1fr); gap: 14px; }
  .allocation-rule-modal .settings-form-body { grid-template-columns: 1fr 1fr; }
  .allocation-rule-modal .settings-form-body > label:nth-child(2), .allocation-rule-modal .settings-form-body > label:nth-child(3), .allocation-rule-modal .settings-form-body > label:nth-child(4) { grid-column: auto; }
  .allocation-rule-people-list { overflow-x: auto; }
  .allocation-rule-people-list-head, .allocation-rule-person-row { min-width: 760px; }
}

@media (max-width: 640px) {
  .top-actions { gap: 5px; padding-right: 8px; }
  .account-trigger > span:not(.account-avatar) { display: none; }
  .account-trigger { padding-left: 7px; }
  .account-modal, .account-edit-modal, .company-edit-modal { width: calc(100vw - 20px); }
  .account-backdrop, .account-edit-backdrop, .company-edit-backdrop { padding: 10px; }
  .account-modal-head { padding: 18px 20px; }
  .account-modal-head h1 { font-size: 22px; }
  .account-modal-body { padding: 16px; }
  .account-basic-card { grid-template-columns: 1fr; }
  .account-security-card { padding: 0 16px; }
  .account-security-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .account-security-row > div > span { display: block; margin: 5px 0 0; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-fullbar { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px 16px; }
  .settings-full-actions { width: 100%; justify-content: space-between; gap: 8px; }
  .settings-full-title { margin-right: auto; padding-right: 0; border-right: 0; }
  .settings-fullbody { padding: 0 10px 18px; }
  .settings-fullbody .settings-layout { grid-template-columns: 1fr; }
  .allocation-page-card { padding: 0 14px 20px; }
  .allocation-page-tabs { margin: 0 -14px 6px; padding: 0 8px; overflow-x: auto; }
  .allocation-page-tab { flex: 0 0 auto; padding: 0 11px; font-size: 13px; }
  .allocation-page-tab.is-active::after { right: 10px; left: 10px; }
  .allocation-rule-modal .settings-form-body { grid-template-columns: 1fr; }
  .allocation-rule-modal .settings-form-body > label:nth-child(2), .allocation-rule-modal .settings-form-body > label:nth-child(3), .allocation-rule-modal .settings-form-body > label:nth-child(4) { grid-column: 1 / -1; }
  .allocation-rule-people-list { overflow-x: auto; }
  .allocation-rule-people-list-head, .allocation-rule-person-row { min-width: 760px; }
  .allocation-rule-people-head { align-items: flex-start; flex-direction: column; }
  .settings-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-sidebar-child { display: none; }
  .settings-content { padding-top: 4px; }
  .company-logo { width: 110px; height: 110px; }
  .company-info-body h2 { margin-bottom: 24px; }
  .company-info-grid { grid-template-columns: 92px minmax(0, 1fr); gap: 16px 12px; }
}
.nav-item, .status-tab, .sub-tab, .filter-label, .modal-field label, th, td,
.metric-label, .conversion-label, .bar-head, .scope-tab, .list-tools { color: #29384d; }
.control { color: #27374d; }

/* 部门和用户设置 */
.settings-head-actions { display: flex; align-items: center; gap: 10px; }
.settings-info-icon { color: var(--brand); font-size: 15px; }
.department-user-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 650px; overflow: hidden; border: 1px solid #e4eaf3; border-radius: 10px; background: #fff; box-shadow: 0 3px 16px rgba(36, 64, 106, .045); }
.department-directory-card { display: block; min-height: 0; overflow: visible; }
.department-directory-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; padding: 0 28px; border-bottom: 1px solid #eef2f7; color: #7b8aa2; font-size: 13px; }
.department-directory-head > div { display: flex; align-items: baseline; gap: 16px; }
.department-directory-head strong { color: #29384d; font-size: 16px; }
.department-directory-head span { color: #9aa6b5; }
.department-directory-table-wrap { overflow-x: auto; }
.department-directory-table { width: 100%; min-width: 820px; border-collapse: collapse; table-layout: fixed; }
.department-directory-table th, .department-directory-table td { height: 62px; padding: 0 28px; border-bottom: 1px solid #e7ebf1; text-align: left; }
.department-directory-table th { color: #29384d; background: #f5f7f9; font-size: 14px; font-weight: 600; }
.department-directory-table th:nth-child(1) { width: 42%; }
.department-directory-table th:nth-child(2) { width: 16%; }
.department-directory-table th:nth-child(3) { width: 22%; }
.department-directory-table th:nth-child(4) { width: 20%; }
.department-directory-row { transition: background .15s ease; }
.department-directory-row:hover, .department-directory-row.is-selected { background: #f7f9fb; }
.department-directory-name { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; color: #29384d; background: transparent; text-align: left; font-size: 15px; }
.department-directory-name:hover { color: var(--brand); }
.department-directory-name > span:last-child { padding-left: calc(var(--department-depth) * 24px); }
.department-directory-caret { width: 12px; color: #8a96a5; font-size: 14px; text-align: center; }
.department-directory-count { padding: 0; color: var(--brand); background: transparent; font-size: 15px; }
.department-directory-count:hover { color: var(--brand-deep); text-decoration: underline; }
.department-directory-manager { color: #536177; font-size: 14px; }
.department-directory-manager[type="button"] { padding: 0; background: transparent; cursor: pointer; }
.department-directory-manager[type="button"]:hover { color: var(--brand); }
.department-directory-manager-edit { margin-left: 5px; font-size: 12px; opacity: .72; }
.department-directory-manager.is-enterprise { color: #29384d; font-weight: 500; }
.department-directory-action-cell { position: relative; white-space: nowrap; }
.department-directory-action { margin-right: 20px; padding: 0; color: var(--brand); background: transparent; font-size: 14px; }
.department-directory-action:hover { color: var(--brand-deep); }
.department-directory-action:last-of-type { margin-right: 0; }
.department-directory-more { margin-right: 0; }
.department-members-modal { width: min(720px, calc(100vw - 40px)); }
.department-members-body { padding: 18px 22px 0; }
.department-members-table-wrap { max-height: 480px; overflow: auto; border: 1px solid #e5ebf3; border-radius: 8px; }
.department-members-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.department-members-table th, .department-members-table td { height: 62px; padding: 0 22px; border-bottom: 1px solid #e7ebf1; text-align: left; }
.department-members-table th { color: #29384d; background: #f5f7f9; font-size: 14px; font-weight: 600; }
.department-members-table td { color: #29384d; font-size: 15px; }
.department-members-table td:nth-child(2) { color: #536177; }
.department-members-table tr:last-child td { border-bottom: 0; }
.department-members-muted { color: #9aa6b5; }
.department-manager-modal { width: min(640px, calc(100vw - 40px)); }
.department-manager-body { display: grid; gap: 14px; padding: 18px 22px 0; }
.department-manager-field { display: grid; gap: 7px; color: #62738b; font-size: 13px; }
.department-manager-list { max-height: 420px; overflow: auto; border: 1px solid #e5ebf3; border-radius: 8px; }
.department-manager-option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; padding: 10px 16px; border-bottom: 1px solid #eef2f7; color: #29384d; background: #fff; text-align: left; }
.department-manager-option:last-child { border-bottom: 0; }
.department-manager-option:hover, .department-manager-option.is-selected { background: #f4f8ff; }
.department-manager-option > span { display: grid; gap: 4px; }
.department-manager-option strong { font-size: 15px; font-weight: 500; }
.department-manager-option small, .department-manager-option em { color: #8995a6; font-size: 12px; font-style: normal; }
.department-manager-option.is-selected em { color: var(--brand); }
.department-directory-card > .user-list-panel { border-top: 1px solid #e4eaf3; }
.department-tree-panel { min-width: 0; border-right: 1px solid #e7ebf1; background: #fff; }
.department-panel-head { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 18px; border-bottom: 1px solid #eef2f7; color: #29384d; font-size: 15px; }
.tree-add-button { width: 28px; height: 28px; border-radius: 5px; color: var(--brand); background: var(--brand-soft); font-size: 18px; }
.tree-add-button:hover { background: #deecff; }
.department-tree { padding: 12px 12px 8px; }
.department-tree-row { position: relative; display: flex; align-items: center; min-height: 40px; padding-left: calc(var(--tree-depth) * 24px); border-radius: 4px; }
.department-tree-row.is-selected { background: #eef5ff; }
.department-select { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; height: 34px; padding: 0 8px; overflow: hidden; color: #40516a; background: transparent; text-align: left; font-size: 14px; }
.department-select:hover { color: var(--brand); }
.department-select em { margin-left: auto; color: #a1acb9; font-size: 12px; font-style: normal; }
.department-expand { width: 12px; color: #65758c; font-size: 14px; text-align: center; }
.department-folder { color: #6f9ee7; font-size: 15px; }
.department-more { flex: 0 0 28px; height: 30px; color: #9aa6b5; background: transparent; font-size: 18px; }
.department-more:hover { color: var(--brand); }
.department-action-menu, .user-action-menu { position: absolute; z-index: 5; min-width: 126px; padding: 5px; border: 1px solid #e1e8f2; border-radius: 6px; background: #fff; box-shadow: 0 8px 22px rgba(32, 55, 90, .16); }
.department-action-menu { top: 34px; right: 5px; }
.department-action-menu button, .user-action-menu button { display: block; width: 100%; min-height: 32px; padding: 0 9px; border-radius: 4px; color: #3f4e64; background: #fff; text-align: left; font-size: 13px; }
.department-action-menu button:hover, .user-action-menu button:hover { color: var(--brand); background: var(--brand-soft); }
.department-tree-footer { padding: 10px 18px 18px; }
.department-tree-footer button { color: var(--brand); background: transparent; font-size: 13px; }
.department-tree-footer button:hover { color: var(--brand-deep); }
.user-list-panel { display: flex; min-width: 0; flex-direction: column; }
.user-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 0 22px; border-bottom: 1px solid #eef2f7; }
.user-list-toolbar > div { display: flex; align-items: center; gap: 10px; }
.user-list-toolbar > div > strong { color: #526077; font-size: 14px; font-weight: 400; white-space: nowrap; }
.user-list-toolbar > div > strong b { color: var(--brand); font-weight: 600; }
.user-list-toolbar .btn { min-height: 36px; font-size: 13px; }
.user-search { display: flex; align-items: center; gap: 8px; width: min(310px, 34vw); height: 38px; padding: 0 12px; border: 1px solid #dfe6ef; border-radius: 5px; color: #8694a8; background: #fff; }
.user-search:focus-within { border-color: #93bdf7; box-shadow: 0 0 0 2px rgba(67,137,245,.08); }
.user-search input { width: 100%; border: 0; outline: 0; color: #3f4e64; background: transparent; font-size: 13px; }
.user-search input::placeholder { color: #a7b1bf; }
.user-list-context { display: flex; align-items: center; gap: 14px; padding: 16px 22px 8px; color: #7b8aa2; font-size: 13px; }
.user-list-context strong { color: #35455e; font-weight: 500; }
.user-list-context span { color: #a1acb9; }
.user-table-wrap { overflow: auto; padding: 0 22px; }
.user-table { min-width: 680px; }
.user-table th, .user-table td { height: 51px; padding: 0 12px; border-bottom: 1px solid #e7ebf3; font-size: 14px; }
.user-table th { color: #29384d; background: #f0f3fb; font-weight: 600; }
.user-table td { color: #536177; }
.user-table .checkbox-cell { width: 46px; padding: 0 12px; }
.user-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--brand); }
.user-name-cell { color: var(--brand) !important; }
.user-name-cell small { display: block; margin-top: 4px; color: #9aa6b5; font-size: 12px; }
.quota-value { color: #3f80df; font-weight: 600; white-space: nowrap; }
.auth-status { color: #9aa6b5; }
.auth-status.is-on { color: #3a9b76; }
.user-operation { position: relative; }
.more-operation { padding: 4px 0; color: var(--brand); background: transparent; font-size: 13px; }
.more-operation:hover { color: var(--brand-deep); }
.user-action-menu { top: 38px; right: 10px; }
.work-handoff-modal { width: min(760px, calc(100vw - 40px)); }
.work-handoff-body { display: grid; gap: 14px; padding: 20px 24px 0; }
.work-handoff-recipient-field { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 14px; color: #465469; font-size: 15px; }
.work-handoff-recipient-trigger { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; border: 1px solid #dfe6ef; border-radius: 7px; color: #536177; background: #fff; text-align: left; font-size: 14px; }
.work-handoff-recipient-trigger:hover { border-color: #8db8f3; }
.work-handoff-recipient-trigger span:last-child { color: #8995a6; }
.work-handoff-picker { display: grid; gap: 10px; margin-left: 84px; padding: 12px; border: 1px solid #e1e8f2; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(32,55,90,.08); }
.work-handoff-search { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border: 1px solid #dfe6ef; border-radius: 6px; color: #8995a6; }
.work-handoff-search:focus-within { border-color: #8db8f3; }
.work-handoff-search .control { flex: 1; height: 34px; padding: 0; border: 0; box-shadow: none; }
.work-handoff-tabs { display: flex; gap: 22px; border-bottom: 1px solid #edf1f6; }
.work-handoff-tabs button { min-height: 34px; padding: 0 2px; border-bottom: 2px solid transparent; color: #56667e; background: transparent; font-size: 14px; }
.work-handoff-tabs button.is-active { border-bottom-color: var(--brand); color: var(--brand); }
.work-handoff-options { max-height: 270px; overflow: auto; }
.work-handoff-department-toggle, .work-handoff-user { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 0 8px; border-radius: 5px; color: #35455e; background: #fff; text-align: left; }
.work-handoff-department-toggle { padding-left: calc(8px + var(--work-handoff-depth) * 20px); }
.work-handoff-department-toggle:hover, .work-handoff-user:hover { background: #f2f7ff; }
.work-handoff-department-toggle strong { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.work-handoff-caret { width: 12px; color: #68778b; text-align: center; }
.work-handoff-department-toggle strong svg, .work-handoff-user-icon svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.work-handoff-department-toggle small { margin-left: auto; color: #9aa6b5; }
.work-handoff-user { padding-left: calc(30px + var(--work-handoff-depth) * 20px); color: #536177; }
.work-handoff-user-icon { color: #8a96a5; font-size: 16px; }
.work-handoff-user small { margin-left: auto; color: #9aa6b5; font-size: 12px; }
.work-handoff-empty { padding: 24px 8px; color: #9aa6b5; text-align: center; }
.work-handoff-items { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid #edf1f6; color: #536177; }
.work-handoff-items legend { width: 100%; margin-bottom: 2px; color: #465469; font-size: 15px; }
.work-handoff-items label { display: inline-flex; align-items: center; gap: 6px; }
.work-handoff-items input { width: 16px; height: 16px; accent-color: var(--brand); }
.work-handoff-items small { width: 100%; color: #9aa6b5; font-size: 12px; }
.user-list-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; padding: 18px 22px; color: #7b8aa2; font-size: 13px; }
.user-list-footer span { color: #a1acb9; }
.user-list-footer .user-total-count { margin-right: 10px; color: #7b8aa2; }
.user-list-footer button { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 4px; color: #7c8ba4; background: transparent; font-size: 14px; }
.user-list-footer button:not(:disabled):hover { color: var(--brand); background: #f3f7ff; }
.user-list-footer button.is-current { color: #fff; background: var(--brand); }
.user-list-footer button:disabled { color: #c5cdd8; cursor: not-allowed; }
.pagination-ellipsis { min-width: 16px; color: #8995a6 !important; text-align: center; }
.pagination-jump { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; color: #7b8aa2; }
.pagination-jump input { width: 38px; height: 30px; padding: 0 5px; border: 1px solid #dfe6ef; border-radius: 4px; color: #536177; background: #fff; text-align: center; font-size: 13px; }
.settings-table-empty { padding: 90px 20px; color: #9aa6b5; text-align: center; }
.settings-modal-backdrop { position: fixed; inset: 0; z-index: 82; display: grid; place-items: center; padding: 20px; background: rgba(23, 37, 59, .46); }
.settings-form-modal { width: min(540px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: auto; border-radius: 9px; background: #fff; box-shadow: 0 20px 60px rgba(22, 39, 66, .3); }
.settings-form-modal .modal-head { min-height: 62px; padding: 0 24px; }
.settings-form-modal .modal-head h2 { color: #202d41; font-size: 19px; }
.settings-form-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: 24px 28px; }
.settings-form-body > label { display: grid; gap: 7px; color: #465469; font-size: 14px; }
.settings-form-body > label:nth-child(1), .settings-form-body > label:nth-child(2), .settings-form-body > label:nth-child(3), .settings-form-body > label:nth-child(4), .settings-form-body > .settings-checkbox-label { grid-column: 1 / -1; }
.settings-form-body .control { height: 40px; font-size: 14px; }
.employee-modal { width: min(760px, calc(100vw - 40px)); }
.employee-edit-modal { width: min(980px, calc(100vw - 40px)); }
.employee-form-body > label, .employee-form-body > fieldset, .employee-permissions-section { grid-column: 1 / -1 !important; }
.employee-gender-field { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; border: 0; color: #465469; }
.employee-gender-field legend { margin-right: 8px; color: #465469; font-size: 14px; }
.employee-gender-field label { display: inline-flex; align-items: center; gap: 6px; color: #52647c; }
.employee-gender-field label:nth-of-type(3) { display: none; }
.employee-gender-field input { width: 17px; height: 17px; accent-color: var(--brand); }
.employee-permissions-section { display: grid; gap: 12px; margin-top: 4px; }
.employee-permissions-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.employee-permissions-head > div { display: grid; gap: 5px; }
.employee-permissions-head strong { color: #2c405b; font-size: 15px; }
.employee-permissions-head span { color: #8995a6; font-size: 12px; }
.employee-permissions-table-wrap { overflow: auto; border: 1px solid #e4ebf5; border-radius: 8px; }
.employee-permissions-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.employee-permissions-table th, .employee-permissions-table td { height: 58px; padding: 0 14px; border-bottom: 1px solid #e7edf5; color: #536177; text-align: left; font-size: 13px; }
.employee-permissions-table th { color: #34435b; background: #f4f7fc; font-weight: 700; }
.employee-permissions-table tr:last-child td { border-bottom: 0; }
.employee-permissions-table .control { height: 38px; min-width: 150px; }
.employee-permission-empty { padding: 28px 12px; }
.shop-edit-modal { width: min(720px, calc(100vw - 40px)); }
.shop-form-body > label { grid-column: auto !important; }
.shop-form-body > .settings-checkbox-label { grid-column: 1 / -1 !important; }
.shop-form-section-title { grid-column: 1 / -1; padding-bottom: 2px; border-bottom: 1px solid #eef2f7; color: #314b72; font-size: 13px; font-weight: 700; }
.settings-checkbox-label { display: flex !important; align-items: center; gap: 8px; }
.settings-checkbox-label input { width: 17px; height: 17px; accent-color: var(--brand); }
.bulk-import-modal { width: min(680px, calc(100vw - 40px)); }
.bulk-import-body { display: grid; gap: 12px; padding: 24px 28px; }
.bulk-import-body p, .bulk-import-body small { margin: 0; color: #718096; font-size: 13px; line-height: 1.55; }
.bulk-file-label { display: inline-flex !important; align-items: center; justify-content: center; width: fit-content; min-height: 34px; padding: 0 12px; border: 1px solid #cfe0fb; border-radius: 5px; color: var(--brand) !important; background: #f7faff; cursor: pointer; }
.bulk-file-label input { display: none; }
.bulk-import-textarea { min-height: 160px; padding-top: 10px; resize: vertical; line-height: 1.6; }
.department-modal-hint { grid-column: 1 / -1; padding: 11px 13px; border-radius: 6px; color: #718096; background: #f7faff; font-size: 13px; line-height: 1.5; }
.settings-option-card { max-width: 780px; padding: 26px 30px; border: 1px solid #e8edf3; border-radius: 10px; background: #fff; box-shadow: 0 3px 16px rgba(36, 64, 106, .045); }
.settings-option-form { display: grid; gap: 18px; }
.settings-option-form > label { display: grid; gap: 7px; max-width: 480px; color: #465469; font-size: 14px; }
.settings-option-form > label small { color: #9aa6b5; font-size: 12px; }
.settings-rule-note { display: block; max-width: 560px; margin-top: -8px; color: #718096; font-size: 13px; line-height: 1.6; }
.settings-option-form > label.settings-checkbox-label { display: flex; align-items: center; }
.settings-option-form .control { height: 40px; font-size: 14px; }
.settings-option-actions { display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid #eef2f7; }
.allocation-page-card { width: 100%; max-width: 1180px; padding: 0 28px 28px; }
.allocation-page-tabs { display: flex; align-items: center; gap: 4px; min-height: 64px; margin: 0 -28px 6px; padding: 0 24px; border-bottom: 1px solid #e7edf6; }
.allocation-page-tab { position: relative; min-height: 64px; padding: 0 18px; color: #718096; background: transparent; font-size: 15px; font-weight: 600; }
.allocation-page-tab:hover { color: var(--brand); }
.allocation-page-tab.is-active { color: var(--brand); }
.allocation-page-tab.is-active::after { position: absolute; right: 16px; bottom: -1px; left: 16px; height: 3px; border-radius: 2px 2px 0 0; background: var(--brand); content: ''; }
.allocation-rule-empty { display: grid; justify-items: center; gap: 10px; min-height: 270px; padding: 70px 20px; }
.allocation-rule-empty strong { color: #34435b; font-size: 18px; }
.allocation-rule-empty span { color: #8995a6; font-size: 13px; }
.allocation-rule-empty .btn { margin-top: 8px; }
.allocation-rule-table-wrap { overflow: auto; border: 1px solid #e4ebf5; border-radius: 8px; }
.allocation-rule-table { width: 100%; min-width: 920px; border-collapse: collapse; }
.allocation-rule-table th, .allocation-rule-table td { height: 58px; padding: 0 14px; border-bottom: 1px solid #e7edf5; color: #536177; text-align: left; font-size: 13px; white-space: nowrap; }
.allocation-rule-table th { color: #34435b; background: #f4f7fc; font-weight: 700; }
.allocation-rule-table tr:last-child td { border-bottom: 0; }
.allocation-rule-table td:first-child strong, .allocation-rule-table td:first-child small { display: block; }
.allocation-rule-table td:first-child strong { color: #2c3c54; font-size: 14px; }
.allocation-rule-table td:first-child small { margin-top: 4px; color: #9aa6b5; font-size: 11px; }
.allocation-rule-employees { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.allocation-rule-switch { display: inline-flex; align-items: center; gap: 7px; color: #718096; cursor: pointer; }
.allocation-rule-switch input { width: 17px; height: 17px; accent-color: var(--brand); }
.allocation-rule-switch input:checked + span { color: #3a9b76; }
.allocation-rule-actions { display: flex; align-items: center; gap: 6px; }
.allocation-rule-actions .btn { min-height: 30px; padding: 0 8px; font-size: 12px; }
.danger-text { color: var(--danger) !important; }
.allocation-focused-form { gap: 18px; padding-top: 22px; }
.allocation-focused-form .allocation-settings-section { padding-top: 0; border-top: 0; }
.allocation-focused-form .settings-option-actions { margin-top: 2px; }
.allocation-rule-modal { width: min(960px, calc(100vw - 40px)); }
.allocation-rule-modal .settings-form-body { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: calc(100vh - 190px); overflow: auto; }
.allocation-rule-modal .settings-form-body > label:nth-child(1) { grid-column: 1 / -1; }
.allocation-rule-modal .settings-form-body > label:nth-child(2), .allocation-rule-modal .settings-form-body > label:nth-child(3), .allocation-rule-modal .settings-form-body > label:nth-child(4) { grid-column: auto; }
.allocation-rule-people-field { grid-column: 1 / -1; display: grid; gap: 12px; }
.allocation-rule-people-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.allocation-rule-people-head strong { color: #29384d; font-size: 15px; }
.allocation-rule-people-head span { color: #8995a6; font-size: 12px; }
.allocation-rule-selection-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; white-space: nowrap; }
.allocation-rule-selection-actions label { display: inline-flex; align-items: center; gap: 5px; color: #536177; font-size: 12px; }
.allocation-rule-selection-actions input { width: 16px; height: 16px; accent-color: var(--brand); }
.allocation-rule-selection-actions .btn { min-height: 28px; padding: 0 9px; font-size: 12px; }
.allocation-rule-people-list { max-height: 360px; overflow: auto; border: 1px solid #e4ebf5; border-radius: 8px; background: #fff; }
.allocation-rule-people-list-head, .allocation-rule-person-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) 130px minmax(145px, .9fr) 130px minmax(130px, auto); align-items: center; gap: 12px; }
.allocation-rule-people-list-head { min-height: 42px; padding: 0 14px; border-bottom: 1px solid #e7edf5; color: #34435b; background: #f4f7fc; font-size: 12px; font-weight: 700; }
.allocation-rule-person-row { min-height: 68px; padding: 10px 14px; border-bottom: 1px solid #edf1f6; background: #fff; }
.allocation-rule-person-row:last-child { border-bottom: 0; }
.allocation-rule-person-row:hover { background: #fbfdff; }
.allocation-rule-person-row.is-paused { background: #f8f9fb; opacity: .7; }
.allocation-rule-person-row.is-dragging { opacity: .45; }
.allocation-rule-person-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.allocation-rule-employee-drag-handle { flex: 0 0 auto; padding: 4px; border: 0; color: #8492a6; background: transparent; cursor: grab; font-size: 18px; line-height: 1; }
.allocation-rule-employee-drag-handle:active { cursor: grabbing; }
.allocation-rule-person-identity > span:last-child { display: grid; gap: 3px; min-width: 0; }
.allocation-rule-person-identity strong { overflow: hidden; color: #34435b; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.allocation-rule-employee-number { color: var(--brand); font-style: normal; font-weight: 700; }
.allocation-rule-person-identity small { color: #8995a6; font-size: 11px; }
.allocation-rule-person-check { display: flex; align-items: center; gap: 9px; min-width: 0; cursor: pointer; }
.allocation-rule-person-check > input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--brand); }
.allocation-rule-person-check > span:last-child { display: grid; gap: 3px; min-width: 0; }
.allocation-rule-person-check strong { overflow: hidden; color: #34435b; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.allocation-rule-person-check small { color: #8995a6; font-size: 11px; }
.allocation-rule-person-department { overflow: hidden; color: #536177; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.allocation-rule-person-limit { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; }
.allocation-rule-person-limit .control { width: 100%; height: 36px; padding-right: 8px; font-size: 14px; text-align: center; }
.allocation-rule-person-limit em { color: #718096; font-size: 12px; font-style: normal; white-space: nowrap; }
.allocation-rule-current-hint { grid-column: 1 / -1; margin-top: -3px; color: #8995a6; font-size: 10px; line-height: 1; }
.allocation-rule-effective-select { width: 100%; min-width: 0; padding: 0 8px; font-size: 12px !important; }
.allocation-rule-person-actions { display: flex; align-items: center; gap: 4px; }
.allocation-rule-person-actions .btn { min-height: 30px; padding: 0 7px; font-size: 11px; }
.allocation-rule-enabled { grid-column: 1 / -1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.allocation-rule-modal .modal-foot { padding: 16px 28px; }
.allocation-add-employee-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(23, 37, 59, .42); }
.allocation-add-employee-backdrop[hidden] { display: none !important; }
.allocation-add-employee-modal { display: flex; flex-direction: column; width: min(900px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 48px)); overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 20px 60px rgba(22, 39, 66, .3); }
.allocation-add-employee-filters { display: grid; grid-template-columns: minmax(0, 1fr) 220px 160px; gap: 10px; padding: 16px 20px 10px; }
.allocation-add-employee-toolbar { display: flex; align-items: center; gap: 14px; padding: 0 20px 10px; color: #657185; font-size: 12px; }
.allocation-add-employee-toolbar label { display: flex; align-items: center; gap: 6px; }
.allocation-add-employee-toolbar input { accent-color: var(--brand); }
.allocation-add-employee-toolbar span { margin-left: auto; }
.allocation-add-employee-toolbar strong { color: var(--brand); }
.allocation-add-employee-picker { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr); min-height: 220px; flex: 1; overflow: hidden; margin: 0 20px; border: 1px solid #e5ebf3; border-radius: 8px; }
.allocation-add-employee-groups { overflow: auto; padding: 8px; }
.allocation-add-employee-group { margin-bottom: 6px; border: 1px solid #e9edf3; border-radius: 7px; }
.allocation-add-employee-group > summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #34435b; background: #f8faff; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.allocation-add-employee-group > summary::-webkit-details-marker { display: none; }
.allocation-add-employee-group > summary::before { margin-right: 8px; color: #74839a; content: '▸'; }
.allocation-add-employee-group[open] > summary::before { content: '▾'; }
.allocation-add-employee-group > summary small { margin-left: auto; color: #8995a6; font-size: 11px; font-weight: 400; }
.allocation-add-employee-group > div { display: grid; padding: 5px 10px 8px; }
.allocation-add-employee-option { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 7px; color: #465469; cursor: pointer; font-size: 13px; }
.allocation-add-employee-option input { accent-color: var(--brand); }
.allocation-add-employee-option small { margin-left: auto; color: #8995a6; font-size: 11px; }
.allocation-add-employee-picker aside { overflow: auto; padding: 13px; border-left: 1px solid #e5ebf3; color: #8995a6; font-size: 12px; }
.allocation-add-employee-picker aside > strong { display: block; padding-bottom: 9px; border-bottom: 1px solid #e9edf3; color: #536177; font-size: 13px; }
.allocation-add-employee-picker aside > div { display: grid; gap: 6px; padding-top: 10px; }
.allocation-add-employee-picker aside > div > div { padding: 5px 8px; border-radius: 5px; color: #34435b; background: #f5f8fd; }
.allocation-add-employee-selected-row { display: grid; gap: 7px; }
.allocation-add-employee-selected-row > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allocation-add-employee-selected-row label { display: grid; gap: 4px; color: #718096; font-size: 11px; }
.allocation-add-quota-input { display: flex; align-items: center; gap: 6px; }
.allocation-add-quota-input .control { width: 82px; height: 30px; padding: 0 7px; font-size: 12px; }
.allocation-add-quota-input em { color: #718096; font-style: normal; white-space: nowrap; }
.allocation-add-employee-modal .modal-foot { flex: 0 0 auto; }
.allocation-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.allocation-rule-card { display: flex; align-items: flex-start; gap: 12px; min-height: 88px; padding: 17px 18px; border: 1px solid #dfe8f6; border-radius: 8px; color: #29384d !important; background: #f8fbff; cursor: pointer; }
.allocation-rule-card:has(input:checked) { border-color: #8bb8f8; background: #eef6ff; box-shadow: 0 0 0 2px rgba(67,137,245,.08); }
.allocation-rule-card input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.allocation-rule-card span { display: grid; gap: 7px; }
.allocation-rule-card strong { color: #26364d; font-size: 15px; }
.allocation-rule-card small { color: #718096; font-size: 12px; line-height: 1.5; }
.allocation-rule-note { padding: 14px 16px; border-radius: 7px; color: #5d6b7f; background: #f7faff; font-size: 13px; line-height: 1.7; }
.allocation-config-card { max-width: 1180px; padding: 24px 28px; }
.allocation-settings-section { display: grid; gap: 14px; }
.allocation-settings-section + .allocation-settings-section { padding-top: 22px; border-top: 1px solid #eef2f7; }
.allocation-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.allocation-section-head h2 { margin: 0; color: #26364d; font-size: 18px; font-weight: 700; }
.allocation-section-head p { margin: 6px 0 0; color: #718096; font-size: 13px; line-height: 1.55; }
.allocation-select-all { display: inline-flex !important; align-items: center; align-self: center; gap: 7px; flex: 0 0 auto; color: var(--brand) !important; font-size: 13px; cursor: pointer; }
.allocation-select-all input { width: 17px; height: 17px; accent-color: var(--brand); }
.allocation-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.allocation-config-field { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px; border: 1px solid #e6edf6; border-radius: 8px; color: #465469 !important; background: #fbfcfe; }
.allocation-config-field > span:first-child { color: #465469; font-size: 14px; }
.allocation-config-field .control { min-width: 0; }
.allocation-input-suffix { position: relative; }
.allocation-input-suffix .control { padding-right: 48px; }
.allocation-input-suffix em { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #718096; font-size: 13px; font-style: normal; pointer-events: none; }
.allocation-tier-controls { display: flex; align-items: center; gap: 10px; min-width: 0; }
.allocation-tier-controls .allocation-input-suffix { flex: 1 1 100px; min-width: 0; }
.allocation-tier-controls .control { width: 100%; }
.allocation-tier-toggle { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: #526176; font-size: 12px; cursor: pointer; }
.allocation-tier-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }
.allocation-tier-field:has(.allocation-tier-toggle input:not(:checked)) .allocation-input-suffix { opacity: .55; }
.allocation-employee-count { flex: 0 0 auto; padding: 5px 10px; border-radius: 13px; color: var(--brand); background: var(--brand-soft); font-size: 13px; }
.allocation-employee-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.allocation-employee-row { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; min-height: 70px; padding: 11px 14px; border: 1px solid #e5ebf4; border-radius: 8px; background: #fff; cursor: default; }
.allocation-employee-row:hover { border-color: #c5daf8; background: #fbfdff; }
.allocation-employee-person { display: flex; align-items: center; flex: 1 1 auto; gap: 10px; min-width: 0; }
.allocation-employee-checkbox { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--brand); }
.allocation-employee-person > span:last-child { display: grid; gap: 4px; min-width: 0; }
.allocation-employee-person strong { overflow: hidden; color: #29384d; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.allocation-employee-person small { overflow: hidden; color: #8995a6; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.allocation-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: 15px; font-weight: 700; }
.allocation-quota-input { display: flex; align-items: center; flex: 0 0 250px; gap: 7px; }
.allocation-quota-control { display: grid; flex: 0 0 66px; gap: 2px; min-width: 0; }
.allocation-quota-control > .control { width: 66px; }
.allocation-quota-current { overflow: hidden; color: #8995a6; font-size: 10px; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.allocation-quota-input .control { height: 36px; text-align: center; font-size: 14px; }
.allocation-quota-input em { flex: 0 0 auto; color: #718096; font-size: 12px; font-style: normal; }
.allocation-effective-select { width: 104px; min-width: 104px; padding: 0 7px; font-size: 12px !important; }
.allocation-empty { padding: 30px 20px; border: 1px dashed #dfe7f2; border-radius: 8px; color: #8995a6; background: #fbfcfe; font-size: 13px; text-align: center; }
.douyin-config-card { max-width: 1180px; }
.douyin-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.douyin-config-grid label { display: grid; gap: 7px; color: #465469; font-size: 14px; }
.douyin-config-grid label small { color: #9aa6b5; font-size: 12px; }
.douyin-config-grid .control { height: 42px; }
.douyin-actions { justify-content: flex-start; gap: 10px; }
.douyin-actions .btn:last-child { margin-left: auto; }
.douyin-status-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; padding: 18px; border: 1px solid #e5edf7; border-radius: 8px; background: #fbfdff; }
.douyin-status-card > div { display: grid; gap: 7px; }
.douyin-status-card span { color: #7d8da5; font-size: 12px; }
.douyin-status-card strong { color: #2f4059; font-size: 15px; font-weight: 600; }
.douyin-status-card strong.is-success { color: #26986e; }
.douyin-status-card strong.is-error { color: #d9535d; }
.douyin-status-card p { grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 1px solid #edf2f8; color: #718096; font-size: 13px; line-height: 1.5; }
.douyin-runs { margin-top: 24px; padding-top: 20px; border-top: 1px solid #eef2f7; }
.douyin-runs h2 { margin: 0 0 12px; color: #26364d; font-size: 17px; }
.douyin-runs-list { display: grid; gap: 8px; }
.douyin-runs-list > div { display: grid; grid-template-columns: 180px 80px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid #edf1f6; border-radius: 6px; color: #718096; font-size: 12px; }
.douyin-runs-list strong { color: #2f4059; }
.douyin-runs-list em { color: #8995a6; font-style: normal; }

.organization-company-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 20px 24px; border: 1px solid #e8edf3; border-radius: 10px; background: #fff; box-shadow: 0 3px 16px rgba(36, 64, 106, .045); cursor: pointer; }
.organization-company-summary:hover, .organization-company-summary:focus-visible { border-color: #9ec2f4; box-shadow: 0 5px 18px rgba(36, 105, 206, .09); outline: none; }
.organization-company-logo { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #4e93f3, #266fd6); font-size: 24px; font-weight: 700; }
.organization-company-copy { min-width: 0; flex: 1 1 auto; }
.organization-company-copy h2 { margin: 0 0 6px; color: #26364d; font-size: 18px; }
.organization-company-copy p { margin: 0; color: #62738b; font-size: 13px; }
.organization-company-copy small { display: block; margin-top: 6px; color: #9aa6b5; font-size: 12px; }
.organization-company-edit { flex: 0 0 auto; padding: 8px 14px; border: 1px solid #d7e4f4; border-radius: 6px; color: var(--brand); font-size: 13px; }
.organization-card { overflow: hidden; border: 1px solid #e8edf3; border-radius: 10px; background: #fff; box-shadow: 0 3px 16px rgba(36, 64, 106, .045); }
.organization-tabs { display: flex; gap: 28px; min-height: 64px; padding: 0 26px; border-bottom: 1px solid #e8edf3; }
.organization-tab { position: relative; padding: 0 2px; color: #687991; background: transparent; font-size: 15px; font-weight: 600; }
.organization-tab.is-active { color: var(--brand); }
.organization-tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); content: ''; }
.organization-panel { padding: 22px 26px 26px; }
.organization-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.organization-filter-group, .organization-toolbar-actions { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.organization-toolbar label { display: grid; gap: 7px; color: #62738b; font-size: 13px; }
.organization-toolbar label .control { min-width: 160px; }
.organization-search .control { min-width: 250px; }
.organization-toolbar-actions { margin-left: auto; }
.organization-panel-title { display: block; color: #26364d; font-size: 17px; }
.organization-panel-note { display: block; margin-top: 6px; color: #9aa6b5; font-size: 12px; }
.organization-table-wrap { overflow-x: auto; }
.organization-table { width: 100%; min-width: 840px; border-collapse: collapse; }
.organization-table th, .organization-table td { height: 58px; padding: 0 16px; border-bottom: 1px solid #e9eef4; text-align: left; white-space: nowrap; }
.organization-table th { color: #51627a; background: #f6f8fa; font-size: 13px; font-weight: 600; }
.organization-table td { color: #52647c; font-size: 13px; }
.organization-table tbody tr:hover { background: #fbfdff; }
.organization-table td strong { color: #2d405a; font-weight: 600; }
.organization-action-cell { position: relative; white-space: nowrap; }
.organization-switch { display: inline-flex !important; position: relative; width: 36px; height: 20px; cursor: pointer; }
.organization-switch input { position: absolute; opacity: 0; }
.organization-switch span { width: 36px; height: 20px; border-radius: 20px; background: #cbd5e1; transition: .15s ease; }
.organization-switch span::after { display: block; width: 16px; height: 16px; margin: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .15s ease; content: ''; }
.organization-switch input:checked + span { background: var(--brand); }
.organization-switch input:checked + span::after { transform: translateX(16px); }
.organization-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 18px; color: #8391a6; font-size: 13px; }
.organization-pagination button { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid #e1e8f1; border-radius: 5px; color: #596b83; background: #fff; }
.organization-pagination button.is-current { color: #fff; border-color: var(--brand); background: var(--brand); }
.organization-pagination button:disabled { color: #c6ced9; background: #f8fafc; cursor: not-allowed; }
.organization-pagination input { width: 48px; height: 30px; margin: 0 4px; padding: 0 6px; border: 1px solid #dce5ef; border-radius: 5px; text-align: center; }
.organization-shop-stats { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.organization-shop-stats > div { display: grid; gap: 6px; min-width: 150px; padding: 14px 18px; border: 1px solid #e8eef5; border-radius: 8px; background: #fbfdff; }
.organization-shop-stats span { color: #8391a6; font-size: 12px; }
.organization-shop-stats strong { color: #2c405b; font-size: 23px; }
.organization-shop-stats .btn { margin-left: auto; }
.shop-search-toolbar { align-items: flex-end; justify-content: space-between; }
.shop-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.shop-card { padding: 20px; border: 1px solid #e5ebf3; border-radius: 9px; background: #fff; }
.shop-card:hover { border-color: #bdd4f5; box-shadow: 0 5px 16px rgba(36, 105, 206, .07); }
.shop-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.shop-card-head h2 { margin: 0 0 7px; color: #273950; font-size: 17px; }
.shop-card-head span { padding: 3px 8px; border-radius: 11px; color: #328d68; background: #eaf8f1; font-size: 12px; }
.shop-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.shop-card dl div { display: grid; gap: 5px; }
.shop-card dt { color: #9aa6b5; font-size: 12px; }
.shop-card dd { margin: 0; overflow: hidden; color: #52647c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.shop-card-actions { display: flex; gap: 18px; padding-top: 15px; border-top: 1px solid #eef2f6; }
.shop-card-actions .danger { color: #d9535d; }
.shop-products { display: grid; gap: 6px; margin-top: 15px; color: #8492a6; font-size: 12px; }
.icon-action { color: var(--brand); background: transparent; font-size: 16px; }
.seat-status { color: #d28a20; }
.seat-status.is-normal { color: #2d9b72; }
.seat-assignee-button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; color: var(--brand); background: transparent; font-size: 13px; }
.seat-assignee-button span:last-child { color: var(--brand); font-size: 14px; }
.seat-purchase-modal { max-width: 680px; }
.seat-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.seat-package-option { display: flex !important; align-items: center; gap: 8px; padding: 12px; border: 1px solid #e2eaf3; border-radius: 7px; color: #52647c !important; background: #fbfdff; cursor: pointer; }
.seat-package-option:has(input:checked) { border-color: #9cc1f5; color: var(--brand) !important; background: #f0f6ff; }
.seat-package-option input { accent-color: var(--brand); }
.seat-agreement { margin-top: 20px; }
.seat-assign-modal { width: min(640px, calc(100vw - 40px)); }
.seat-assign-body { display: grid; gap: 14px; padding: 18px 22px 0; }
.seat-assign-search { width: 100%; height: 42px; font-size: 14px; }
.seat-assign-tabs { display: flex; gap: 26px; border-bottom: 1px solid #e8edf3; }
.seat-assign-tab { position: relative; min-height: 42px; padding: 0 2px; color: #687991; background: transparent; font-size: 14px; font-weight: 600; }
.seat-assign-tab.is-active { color: var(--brand); }
.seat-assign-tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); content: ''; }
.seat-assign-list { max-height: 480px; overflow: auto; padding: 4px 2px 12px; }
.seat-department-row { min-height: 46px; padding-left: calc(12px + var(--seat-tree-depth, 0) * 28px); border-bottom: 1px solid #eef2f7; background: #fff; }
.seat-department-row.is-root { color: #8b96a5; }
.seat-department-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 0 12px 0 0; color: #31435c; background: transparent; text-align: left; }
.seat-department-row.is-root .seat-department-toggle { color: #8b96a5; }
.seat-department-toggle:disabled { cursor: default; }
.seat-department-arrow { width: 14px; color: #66778d; font-size: 16px; text-align: center; }
.seat-department-icon { color: var(--brand); font-size: 18px; }
.seat-tree-user { padding-left: 54px; }
.seat-user-option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; padding: 10px 14px; border-bottom: 1px solid #eef2f7; color: #2d405a; background: #fff; text-align: left; }
.seat-user-option:hover:not(:disabled), .seat-user-option.is-current { background: #f5f9ff; }
.seat-user-option:disabled { color: #b0bac8; cursor: not-allowed; }
.seat-user-copy { display: grid; gap: 4px; }
.seat-user-copy small { color: #8995a6; font-size: 12px; }
.seat-user-state { color: var(--brand); font-size: 12px; }
.seat-user-option:disabled .seat-user-state { color: #a7b2c0; }
.seat-assign-empty { padding: 60px 20px; }
.company-seat-quota-modal { width: min(520px, calc(100vw - 40px)); }
.company-management-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.team-sales-dashboard { margin-top: 14px; }
.team-sales-table-wrap { overflow-x: auto; }
.team-sales-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.team-sales-table th, .team-sales-table td { height: 52px; padding: 0 18px; border-bottom: 1px solid #e9eef4; text-align: left; }
.team-sales-table th { color: #51627a; background: #f6f8fa; font-size: 13px; font-weight: 500; }
.team-sales-table td { color: #52647c; font-size: 13px; }
.team-sales-table td strong { color: #2d405a; font-weight: 500; }

/* 组织架构页沿用首页字体，避免设置页局部字体和字重不一致。 */
.settings-fullscreen,
.settings-fullscreen button,
.settings-fullscreen input,
.settings-fullscreen select,
.settings-fullscreen textarea { font-family: var(--font-family); }
.settings-fullscreen .settings-page-head h1,
.settings-fullscreen .organization-company-copy h2,
.settings-fullscreen .organization-tab,
.settings-fullscreen .organization-panel-title,
.settings-fullscreen .department-directory-table th,
.settings-fullscreen .department-members-table th,
.settings-fullscreen .organization-table th,
.settings-fullscreen .organization-table td strong,
.settings-fullscreen .seat-assign-tab {
  font-family: PingFangSC-Medium, "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-weight: 500;
}

@media (max-width: 760px) {
  .organization-company-summary, .organization-toolbar, .organization-shop-stats { align-items: flex-start; flex-direction: column; }
  .organization-company-summary .btn, .organization-shop-stats .btn { margin-left: 0; }
  .organization-tabs { gap: 18px; overflow-x: auto; padding: 0 18px; }
  .organization-panel { padding: 18px; }
  .organization-toolbar-actions { margin-left: 0; }
  .organization-search .control { min-width: 220px; }
  .shop-card-grid, .seat-package-grid { grid-template-columns: 1fr; }
  .seat-assign-modal, .company-seat-quota-modal { width: calc(100vw - 20px); }
  .organization-pagination { justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 1180px) {
  .department-user-card { grid-template-columns: 220px minmax(0, 1fr); }
  .user-list-toolbar { align-items: flex-start; flex-direction: column; padding: 16px 18px; }
  .user-search { width: 100%; }
}

@media (max-width: 760px) {
  .settings-fullbar { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px 18px; }
  .settings-full-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .settings-full-title { padding-right: 10px; }
  .company-switcher { order: 3; width: 100%; }
  .company-switcher select { flex: 1 1 auto; max-width: none; }
  .settings-head-actions { flex-wrap: wrap; }
  .department-user-card { grid-template-columns: 1fr; }
  .department-tree-panel { border-right: 0; border-bottom: 1px solid #e7ebf1; }
  .department-tree { max-height: 280px; overflow: auto; }
  .user-list-toolbar > div { flex-wrap: wrap; }
  .user-list-footer { justify-content: flex-start; flex-wrap: wrap; padding: 16px 18px; }
  .settings-form-body { grid-template-columns: 1fr; }
  .settings-form-body > label { grid-column: 1 / -1 !important; }
  .employee-permissions-head { align-items: flex-start; flex-direction: column; }
  .allocation-rule-grid { grid-template-columns: 1fr; }
  .allocation-config-grid, .allocation-employee-list { grid-template-columns: 1fr; }
  .allocation-config-card { padding: 20px 16px; }
  .allocation-config-field { grid-template-columns: 82px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .allocation-tier-field > span:first-child { font-size: 12px; line-height: 1.4; }
  .allocation-tier-controls { gap: 7px; }
  .allocation-tier-toggle { gap: 4px; font-size: 11px; }
  .allocation-tier-toggle input { width: 14px; height: 14px; }
  .allocation-tier-controls .allocation-input-suffix .control { padding-left: 8px; padding-right: 40px; }
  .allocation-tier-controls .allocation-input-suffix em { right: 8px; font-size: 12px; }
  .allocation-employee-row { flex-wrap: wrap; }
  .allocation-quota-input { flex-basis: 100%; justify-content: flex-end; }
  .douyin-config-grid, .douyin-status-card { grid-template-columns: 1fr; }
  .company-management-item { align-items: flex-start; flex-wrap: wrap; }
  .company-management-item > .btn { margin-left: 61px; }
  .company-management-item .company-management-actions { width: 100%; margin-left: 61px; }
  .company-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
  .settings-section-heading { flex-direction: column; }
  .company-create-modal .settings-form-body { grid-template-columns: 1fr; }
  .douyin-status-card p { grid-column: auto; }
  .douyin-actions { flex-wrap: wrap; }
  .douyin-actions .btn:last-child { margin-left: 0; }
  .douyin-runs-list > div { grid-template-columns: 1fr; gap: 5px; }
}

/* 全局 UI 刷新：只收敛视觉层级，复用现有页面结构和组件。 */
:root {
  --page: #f4f7fb;
  --ink: #24344d;
  --muted: #74839a;
  --line: #e3eaf3;
  --shadow: 0 8px 24px rgba(36, 64, 106, .065);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(67, 137, 245, .22);
  outline-offset: 2px;
}

body { background: var(--page); }
.topbar { box-shadow: 0 4px 16px rgba(30, 67, 125, .15); }
.sidebar { background: #fbfcfe; box-shadow: 1px 0 0 rgba(224, 232, 242, .45); }
.nav-item { min-height: 44px; border-radius: 9px; transition: color .18s ease, background .18s ease, transform .18s ease; }
.nav-item:hover { transform: translateX(2px); }
.nav-item.is-active { box-shadow: inset 3px 0 0 var(--brand); }
.settings-nav-item { transition: color .18s ease, background .18s ease, transform .18s ease; }
.settings-nav-item:hover { transform: translateX(2px); }

.page-title { letter-spacing: -.25px; }
.page-subtitle { color: #8290a5; }
.btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:hover { box-shadow: 0 4px 12px rgba(67, 137, 245, .1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { box-shadow: 0 5px 14px rgba(67, 137, 245, .18); }
.control { height: 36px; border-color: #dce5f0; border-radius: 8px; }
.control:hover { border-color: #b9d1f3; }
.filter-card, .pool-card { padding: 10px 14px; border-radius: 10px; }
.filter-card .control { height: 32px; font-size: 12.5px; }
.filter-card .btn { min-height: 32px; padding: 0 13px; font-size: 12.5px; }
.filter-actions { margin-top: 8px; }

.card,
.organization-card,
.company-management-card,
.department-user-card,
.settings-option-card,
.organization-company-summary,
.shop-card,
.allocation-page-card,
.allocation-config-card,
.douyin-config-card,
.settings-placeholder {
  border-color: #e2e9f2;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.card-head { padding: 18px 20px 14px; }
.card-title { color: #2a3b55; }
.metric-card,
.secondary-card { border-radius: 12px; box-shadow: 0 6px 18px rgba(36, 64, 106, .055); }
.metric-card:hover,
.secondary-card:hover { box-shadow: 0 10px 26px rgba(36, 64, 106, .09); transform: translateY(-1px); transition: box-shadow .18s ease, transform .18s ease; }
.workbench-banner { border-radius: 12px; box-shadow: 0 5px 16px rgba(67, 137, 245, .06); }
.shortcut, .focus-item, .pool-stats > div { border-radius: 10px; }
.scope-tab, .view-badge, .tag { border-radius: 8px; }

table th,
.department-directory-table th,
.department-members-table th,
.organization-table th,
.team-sales-table th,
.employee-permissions-table th,
.allocation-rule-table th {
  color: #536783;
  background: #f7f9fc;
}
table td,
table th { border-bottom-color: #e9eef5; }
tbody tr:hover,
.organization-table tbody tr:hover,
.department-directory-row:hover,
.department-directory-row.is-selected { background: #f7fbff; }

.modal-backdrop,
.lead-detail-backdrop,
.followup-modal-backdrop,
.settings-modal-backdrop,
.account-backdrop,
.account-edit-backdrop,
.company-edit-backdrop {
  background: rgba(24, 39, 62, .48);
  backdrop-filter: blur(2px);
}
.modal,
.lead-detail-modal,
.lead-assignment-modal,
.followup-modal,
.settings-form-modal,
.account-modal,
.account-edit-modal,
.company-edit-modal,
.department-members-modal,
.department-manager-modal,
.seat-assign-modal,
.company-seat-quota-modal {
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(22, 39, 66, .24);
}
.modal-head { padding: 19px 22px; }
.modal-head h2 { color: #24344d; letter-spacing: -.15px; }
.modal-foot { padding: 16px 22px; }
.modal-close { border-radius: 7px; transition: color .15s ease, background .15s ease; }
.modal-close:hover { color: #405779; background: #f1f5fa; }
.toast { border-radius: 10px; box-shadow: 0 10px 28px rgba(23, 58, 41, .14); }

.settings-fullbar { box-shadow: 0 4px 16px rgba(33, 83, 155, .16); }
.settings-fullbody .settings-content { padding-top: 34px; }
.settings-page-head { margin-bottom: 24px; }
.settings-page-head h1 { letter-spacing: -.45px; }
.organization-tabs,
.allocation-page-tabs { background: #fcfdff; }
.organization-tab,
.allocation-page-tab { min-height: 68px; }
.organization-panel { padding: 24px 28px 28px; }
.organization-table th,
.organization-table td { height: 60px; }
.organization-pagination button { border-radius: 8px; }
.organization-switch span { box-shadow: inset 0 0 0 1px rgba(38, 64, 93, .05); }
.department-directory-head { min-height: 72px; }
.department-directory-table th,
.department-directory-table td { height: 64px; }
.department-directory-action,
.department-directory-manager,
.department-directory-count { transition: color .15s ease; }

.settings-form-body,
.account-edit-body,
.company-edit-body,
.bulk-import-body { padding: 26px 30px; }
.settings-form-body .control,
.account-edit-body .control,
.company-edit-body .control { border-radius: 8px; }
.settings-checkbox-label input,
.employee-gender-field input,
.allocation-rule-card input,
.allocation-employee-checkbox { accent-color: var(--brand); }
.seat-user-option:hover:not(:disabled),
.seat-user-option.is-current,
.department-manager-option:hover,
.department-manager-option.is-selected { background: #f4f8ff; }

.top-actions .settings-top-button,
.settings-top-button { text-decoration: none; border-radius: 7px; }
.top-actions .settings-top-button:hover { background: rgba(255,255,255,.14); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.trend-chart {
  min-height: 192px;
  padding: 6px 8px 0;
}
.trend-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 18px;
  height: 152px;
  padding: 0 18px;
  border-bottom: 1px solid #e7edf5;
}
.trend-bar-column {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
}
.trend-bar-value {
  min-height: 18px;
  color: #526783;
  font-size: 12px;
  font-weight: 700;
}
.trend-bar-track {
  display: flex;
  align-items: flex-end;
  width: min(46px, 65%);
  height: 108px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 9px 9px 3px 3px;
  background: #eef3f9;
}
.trend-bar-fill {
  display: block;
  width: 100%;
  min-height: 4px;
  border-radius: 9px 9px 3px 3px;
  background: linear-gradient(180deg, #70a9f7, var(--brand));
  box-shadow: 0 4px 10px rgba(67, 137, 245, .18);
  transition: height .24s ease;
}
.trend-bar-column:nth-child(2) .trend-bar-fill { background: linear-gradient(180deg, #8ed9bb, #35b782); }
.trend-bar-column:nth-child(3) .trend-bar-fill { background: linear-gradient(180deg, #b8a6f4, #8063d9); }
.trend-bar-label {
  max-width: 100%;
  margin-top: 8px;
  overflow: hidden;
  color: #718096;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trend-chart-note {
  padding-top: 11px;
  color: #a0adbd;
  font-size: 11px;
  text-align: center;
}

.app-boot {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  min-height: 100vh;
  color: #7b8da6;
  background: #f4f7fb;
  font-size: 14px;
}
.app-boot-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #dce8fb;
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: app-boot-spin .7s linear infinite;
}
@keyframes app-boot-spin { to { transform: rotate(360deg); } }

* { scrollbar-color: #c8d2df transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #c8d2df; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* 手机上复用同一套 CRM 页面，切换为可横滑的底部导航与单列布局。 */
@media (max-width: 760px) {
  html, body, #app { width: 100%; min-width: 0; }
  body { overflow-x: hidden; }
  .app-shell { min-width: 0; min-height: 100vh; min-height: 100dvh; }
  .topbar { height: 56px; padding: 0 10px; }
  .brand { flex: 0 0 auto; width: auto; height: 56px; padding: 0 4px; gap: 7px; }
  .brand-title { font-size: 14px; }
  .brand-title small { margin-top: 1px; font-size: 10px; max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-mark { width: 26px; height: 26px; font-size: 14px; flex-shrink: 0; }
  .global-search-wrap { flex: 1 1 auto; width: auto; min-width: 0; margin: 0 7px; }
  .global-search { height: 34px; padding: 0 7px; }
  .global-search input { font-size: 13px; }
  .global-search-submit { width: 24px; height: 26px; }
  .global-search-submit svg { width: 18px; height: 18px; }
  .global-search-suggest { max-height: 55vh; }
  .top-actions { flex: 0 0 auto; gap: 5px; margin-left: 0; padding-right: 0; }
  .company-switcher { gap: 0; }
  .company-switcher > span, .settings-top-button, .mini-program-qr { display: none; }
  .company-switcher select { width: 82px; max-width: 82px; height: 30px; padding: 0 18px 0 6px; font-size: 11px; }
  .account { gap: 0; padding-left: 6px; border-left: 0; }
  .account-trigger { padding: 0; }
  .account-trigger > span:not(.account-avatar) { display: none; }
  .account-avatar { width: 28px; height: 28px; }

  .sidebar {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid var(--line);
    border-right: 0;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -4px 16px rgba(36, 64, 106, .08);
  }
  .sidebar > .quick-add-area { flex: 0 0 64px; align-items: stretch; margin: 0; }
  .sidebar > .quick-add-area .quick-add-trigger {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 54px;
    min-height: 54px;
    padding: 3px;
    border-radius: 9px;
    font-size: 10px;
  }
  .quick-add-plus { width: 18px; height: 18px; font-size: 15px; }
  .quick-add-caret { display: none; }
  .sidebar > .quick-add-area .quick-add-menu {
    top: auto;
    right: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: 8px;
    width: min(320px, calc(100vw - 16px));
  }
  .nav-group {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .nav-group::-webkit-scrollbar { display: none; }
  .nav-item {
    flex: 1 0 62px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 62px;
    min-height: 54px;
    padding: 3px 4px;
    border-radius: 9px;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
  }
  .main { min-height: 100vh; min-height: 100dvh; margin-left: 0; padding: 68px 10px calc(82px + env(safe-area-inset-bottom)); }
  .page { width: 100%; max-width: none; min-width: 0; }
  .page-head { align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
  .page-title { font-size: 21px; }
  .head-actions { flex-wrap: wrap; gap: 6px; }
  .btn { min-height: 38px; padding: 0 11px; font-size: 13px; }
  .card { min-width: 0; border-radius: 10px; }
  .filter-card, .pool-card { padding: 13px; }
  .filter-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .filter-field, .filter-field.wide { grid-column: auto; min-width: 0; }
  .filter-label { min-width: 60px; }
  .control { min-width: 0; height: 40px; font-size: 14px; }
  .date-pair { min-width: 0; }
  .keyword-filter-row { flex-wrap: wrap; }
  .keyword-search-control { flex: 1 1 100%; min-width: 0; }
  .keyword-filter-actions { width: 100%; }
  .keyword-filter-actions .btn { flex: 1 1 0; }
  .lead-person-filter-control { grid-template-columns: minmax(88px, .42fr) minmax(0, 1fr); }
  .lead-person-filter-menu { width: min(410px, calc(100vw - 40px)); max-height: min(48vh, 360px); }
  .pool-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .scope-tabs { width: 100%; min-width: 0; }
  .scope-tabs { overflow-x: auto; }
  .scope-tab { flex: 1 0 auto; }
  .pool-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .metric-grid, .overview-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric-card { height: auto; min-height: 112px; padding: 14px; }
  .metric-value { font-size: 23px; }
  .secondary-card { min-width: 0; height: auto; min-height: 72px; padding: 12px; }
  .overview-grid, .workbench-grid { grid-template-columns: minmax(0, 1fr); }
  .overview-panel-card { height: auto; min-height: 0; }
  .focus-grid { grid-template-columns: minmax(0, 1fr); }
  .status-row { display: block; min-width: 0; }
  .status-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
  .status-tab { padding: 13px 14px 11px; font-size: 13px; }
  .list-tools { flex-wrap: nowrap; min-height: 42px; gap: 10px; padding: 0 10px; overflow-x: auto; }
  .sub-tabs { gap: 2px; padding: 8px 10px 0; overflow-x: auto; white-space: nowrap; }
  .sub-tab { flex: 0 0 auto; padding: 7px 9px; }
  .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pagination { justify-content: center; flex-wrap: wrap; gap: 7px; padding: 12px 8px; }
  .attention-card { right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); width: min(320px, calc(100vw - 16px)); max-height: 38vh; overflow: auto; }

  .modal-backdrop, .settings-modal-backdrop { padding: 10px; }
  .modal, .settings-form-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow: auto; }
  .modal-body, .lead-modal .modal-body { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  .lead-modal { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 10px; }
  .lead-modal .modal-field { grid-template-columns: 76px minmax(0, 1fr); gap: 7px; }
  .lead-modal .modal-field.full { grid-template-columns: 76px minmax(0, 1fr); }
  .lead-modal .lead-note-followup { padding: 9px; }
  .lead-next-follow-field { grid-template-columns: 76px minmax(0, 1fr); gap: 7px; }
  .lead-detail-backdrop { padding: 0; }
  .lead-detail-modal { width: 100vw; height: 100vh; height: 100dvh; min-height: 0; border-radius: 0; }
  .lead-detail-head { align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .lead-detail-actions { flex: 1 1 100%; justify-content: flex-end; gap: 6px; }
  .lead-detail-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 7px; }
  .lead-detail-columns { display: flex; flex: 1 1 auto; flex-direction: column; overflow-y: auto; }
  .lead-detail-left { flex: 0 0 auto; max-height: none; overflow: visible; padding: 0 12px 16px; }
  .lead-edit-form { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 12px; }
  .lead-detail-left .modal-field, .lead-detail-left .modal-field.full { grid-template-columns: 76px minmax(0, 1fr); gap: 7px; }
  .lead-detail-right { flex: 0 0 380px; min-height: 380px; border-top: 1px solid var(--line); border-left: 0; }

  .settings-fullbody { padding: 0 10px 18px; }
  .settings-layout, .settings-fullbody .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .settings-sidebar { display: flex; align-items: center; gap: 6px; padding: 8px 0; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .settings-sidebar-title, .settings-sidebar-child { display: none; }
  .settings-nav-item { flex: 0 0 auto; width: auto; min-height: 36px; margin: 0; padding: 0 12px; border-radius: 18px; }
  .settings-content { min-width: 0; padding: 14px 0 22px; }
  .settings-page-head { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .settings-page-head h1 { font-size: 23px; }
  .organization-panel { padding: 14px; }
  .organization-table-wrap, .department-directory-table-wrap, .user-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.h5-profile-card { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.h5-profile-avatar { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: #eaf2ff; color: var(--primary); font-size: 21px; font-weight: 700; }
.h5-profile-card > div:last-child { display: grid; gap: 5px; }
.h5-profile-card strong { color: var(--text); font-size: 17px; }
.h5-profile-card span { color: var(--muted); font-size: 13px; }
.h5-profile-links { display: grid; margin-top: 12px; padding: 0 16px; }
.h5-profile-links button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.h5-profile-links button:last-child { border-bottom: 0; color: var(--danger); }
.h5-profile-links button span:last-child { color: var(--muted); font-size: 13px; }

@media (max-width: 760px) {
  .h5-shell .quick-add-area { display: none; }
  .h5-shell .nav-group { width: 100%; }
  .h5-shell .nav-item { flex: 1 1 25%; min-width: 0; }
  .h5-profile-card { padding: 16px; }
  .h5-profile-links { padding: 0 14px; }
}

/* 超时跟进专属 Tab 与列表样式 */
.status-tab.is-overdue-tab.has-overdue {
  color: #dc2626 !important;
  font-weight: 700 !important;
}
.status-tab.is-overdue-tab.is-active {
  color: #dc2626 !important;
  border-bottom: 2px solid #ef4444 !important;
}
.status-tab.is-overdue-tab:hover {
  color: #ef4444 !important;
}
.overdue-list-banner {
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.08);
}

.dashboard-overview-grid-trend-only { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 640px) {
  .dashboard-overview-grid .overview-panel-card { height: auto; min-height: 0; }
  .today-allocation-staff-columns { grid-template-columns: minmax(0, 1fr); }
  .allocation-rule-people-list-head, .allocation-rule-person-row { min-width: 900px; }
  .allocation-add-employee-backdrop { place-items: end center; padding: 8px; }
  .allocation-add-employee-modal { width: 100%; max-height: calc(100dvh - 16px); }
  .allocation-add-employee-filters { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .allocation-add-employee-toolbar { flex-wrap: wrap; padding: 0 12px 10px; }
  .allocation-add-employee-toolbar span { margin-left: auto; }
  .allocation-add-employee-picker { grid-template-columns: minmax(0, 1fr); min-height: 0; margin: 0 12px; }
  .allocation-add-employee-groups { max-height: 40dvh; }
  .allocation-add-employee-picker aside { max-height: 18dvh; border-top: 1px solid #e5ebf3; border-left: 0; }
}

/* ========================================================
   客资 (Leads) 页良辰管家风格样式重构 (Server-Driven v2)
   ======================================================== */

/* 1. 统计卡片行 */
.leads-stats-section {
  margin-bottom: 14px;
}
.leads-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}
.leads-stats-title {
  margin: 0;
  color: #1e293b;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
.stat-cards-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.stat-cards-row.is-four-col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 94px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
}
.stat-card.clickable {
  cursor: pointer;
}
.stat-card.clickable:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: var(--shadow-lg);
}
.stat-card.clickable:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.stat-card.is-active {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), var(--shadow);
}
.stat-card.is-active .stat-card-value {
  color: var(--brand);
}
.stat-card.is-danger.is-active {
  border-color: #ef4444;
  background: #fef2f2;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2), var(--shadow);
}
.stat-card.is-danger.is-active .stat-card-value {
  color: var(--danger);
}
.stat-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.stat-card-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 13px;
}
.stat-card-icon.primary { background: #eff6ff; color: var(--brand); }
.stat-card-icon.success { background: #ecfdf5; color: var(--success); }
.stat-card-icon.warning { background: #fffbeb; color: var(--warning); }
.stat-card-icon.danger  { background: #fef2f2; color: var(--danger); }
.stat-card-value {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-card.is-danger .stat-card-title { color: var(--danger); }
.stat-card.is-danger .stat-card-value { color: var(--danger); }
.stat-card-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-card.is-active .stat-card-hint {
  color: #64748b;
}
.stat-card-link-hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--brand);
}

/* 2. 主卡片容器与 Tab */
.leads-main-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.leads-scope-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.leads-scope-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
}
.leads-scope-tab {
  position: relative;
  padding: 6px 4px 10px;
  font-size: 15px;
  font-weight: 500;
  color: #64748b;
  background: transparent;
  cursor: pointer;
  border: none;
  transition: color 0.15s ease;
}
.leads-scope-tab:hover {
  color: var(--brand);
}
.leads-scope-tab.is-active {
  color: var(--brand);
  font-weight: 700;
}
.leads-scope-tab.is-active::after {
  position: absolute;
  bottom: -11px;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--brand);
  content: "";
  border-radius: 2px;
}
.leads-scope-tab strong {
  font-weight: 600;
  font-size: 13px;
  margin-left: 3px;
}

/* 阶段分类 Tab (stage tabs) */
.leads-stage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.leads-stage-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
}
.leads-stage-tab {
  padding: 4px 2px;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.leads-stage-tab:hover {
  color: var(--brand);
}
.leads-stage-tab.is-active {
  color: var(--brand);
  font-weight: 700;
  border-bottom: 2px solid var(--brand);
}
.leads-stage-tab.is-overdue {
  color: #dc2626;
  font-weight: 600;
}
.leads-stage-tab.is-overdue.is-active {
  color: #dc2626;
  border-bottom: 2px solid #ef4444;
}

/* 口径说明 Popover */
.lead-definitions-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.lead-definitions-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--muted);
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lead-definitions-btn:hover {
  color: var(--brand);
  border-color: #93c5fd;
  background: #eff6ff;
}
.lead-definitions-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  width: 320px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15);
  z-index: 50;
  font-size: 12px;
  line-height: 1.6;
  color: #334155;
  display: none;
}
.lead-definitions-wrap:hover .lead-definitions-popover,
.lead-definitions-wrap.is-open .lead-definitions-popover {
  display: block;
}
.lead-definitions-popover h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.lead-definitions-popover ul {
  margin: 0;
  padding-left: 16px;
}
.lead-definitions-popover li {
  margin-bottom: 6px;
}
.lead-definitions-popover li:last-child {
  margin-bottom: 0;
}

/* 跟进状态 Sub-pills */
.sub-pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sub-pills-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.sub-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sub-pill {
  padding: 3px 12px;
  height: 26px;
  border-radius: 13px;
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.sub-pill:hover {
  background: #e2e8f0;
  color: var(--ink);
}
.sub-pill.is-active {
  background: #2563eb;
  color: #fff;
  font-weight: 600;
}

/* 3. 筛选栏 */
.leads-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.leads-filter-secondary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  width: 100%;
}
.leads-filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* 日期 Chips */
.lead-date-filter-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.date-chips-container {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.date-chips {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.date-chip {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.date-chip:hover {
  border-color: #93c5fd;
  color: var(--brand);
}
.date-chip.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  font-weight: 600;
}
.date-custom-inputs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.date-custom-inputs input {
  height: 30px;
  padding: 0 6px;
  font-size: 12px;
  width: 125px;
}
.date-resolved-range {
  font-size: 12px;
  color: #475569;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* 4. 加载中轻量蒙层 */
.leads-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px;
  color: var(--muted);
  font-size: 14px;
}

/* 5. 移动端 (H5 / <= 767px) 专属样式 */
@media (max-width: 767px) {
  .stat-cards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .stat-cards-row .stat-card:nth-child(5):last-child {
    grid-column: 1 / -1;
  }
  .stat-card {
    padding: 10px 12px;
    min-height: 74px;
  }
  .stat-card-value {
    font-size: 20px;
  }
  .stat-card-hint {
    font-size: 10.5px;
    margin-top: 4px;
  }
  .leads-scope-tabs,
  .leads-stage-tabs,
  .sub-pills,
  .date-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .leads-scope-tab,
  .leads-stage-tab,
  .sub-pill,
  .date-chip {
    flex: 0 0 auto;
  }
  .h5-leads-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
  }
  .h5-leads-search-bar .control {
    flex: 1;
    min-width: 0;
  }
  .mobile-leads-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .mobile-lead-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    cursor: pointer;
  }
  .mobile-lead-card:active {
    background: #f8fafc;
  }
  .mobile-lead-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .mobile-lead-card-name strong {
    font-size: 15px;
    color: var(--ink);
  }
  .mobile-lead-phone {
    font-size: 13px;
    color: var(--muted);
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
  }
  .mobile-lead-card-meta {
    font-size: 12px;
    color: #64748b;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-lead-card-meta .meta-row {
    display: flex;
    justify-content: space-between;
  }
}

/* H5 底部抽屉 (Bottom Sheet) */
.h5-bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  display: flex;
  align-items: flex-end;
}
.h5-bottom-sheet {
  width: 100%;
  max-height: 80vh;
  background: #fff;
  border-radius: 16px 16px 0 0;
  overflow-y: auto;
  padding: 16px 20px 24px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 客资 v2：同一组筛选控件服务桌面列表与 H5 筛选抽屉。 */
.stat-card {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
}
.leads-main-card {
  margin-bottom: 14px;
}
.leads-scope-row {
  gap: 12px;
}
.leads-scope-tabs {
  min-width: 0;
}
.leads-scope-tab {
  flex: 0 0 auto;
}
.leads-stage-row {
  align-items: flex-start;
}
.lead-definitions-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  color: var(--muted);
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.lead-definitions-trigger:hover,
.lead-definitions-wrap.is-open .lead-definitions-trigger {
  color: var(--brand);
  border-color: #93c5fd;
  background: #eff6ff;
}
.lead-definitions-popover {
  display: none;
}
.lead-definitions-wrap.is-open .lead-definitions-popover {
  display: block;
}
.lead-definitions-popover strong {
  display: block;
  margin-bottom: 6px;
  color: #0f172a;
  font-size: 13px;
}
.lead-definitions-popover p {
  margin: 6px 0 0;
}
.sub-pills {
  margin-bottom: 14px;
}
.leads-main-card > .leads-stage-row:last-child,
.leads-main-card > .sub-pills {
  margin-bottom: 0;
}
.sub-pills .filter-label {
  margin-right: 2px;
}
.sub-pill span,
.leads-stage-tab span {
  opacity: .78;
  font-size: 12px;
}
/* 客资筛选栏紧凑重构 (桌面端 & 通用) */
.leads-desktop-filters {
  margin-top: 0;
  margin-bottom: 14px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}
.leads-compact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 32px;
}
@media (max-width: 1279px) {
  .leads-compact-row {
    flex-wrap: wrap;
  }
}
.leads-compact-row .leads-keyword-box,
.leads-keyword-box {
  flex: 0 0 220px;
  width: 220px;
}
.leads-keyword-box .control {
  height: 32px;
  font-size: 12.5px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  width: 100%;
}
.leads-compact-row .lead-person-filter-control {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 0;
  height: 32px;
  width: 300px;
  flex: 0 0 auto;
}
.leads-compact-row .lead-person-filter-control > .control:first-child {
  height: 32px;
  font-size: 12px;
  padding: 0 6px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #cbd5e1;
  border-right: 0;
  background: #f8fafc;
}
.leads-compact-row .lead-person-filter-picker {
  position: relative;
  min-width: 0;
}
.leads-compact-row .lead-person-filter-picker > .control {
  height: 32px;
  font-size: 12px;
  padding: 0 24px 0 8px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border: 1px solid #cbd5e1;
}
.leads-compact-row .lead-person-filter-clear {
  width: 16px;
  height: 16px;
  font-size: 14px;
  right: 5px;
}
.leads-compact-row .lead-person-filter-menu {
  z-index: 40;
}
.leads-compact-row .leads-date-segmented-wrap,
.leads-date-segmented-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  flex-shrink: 0;
}
.leads-compact-row .leads-date-segmented,
.leads-date-segmented {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 2px;
  height: 32px;
  gap: 2px;
  flex-shrink: 0;
}
.leads-date-segmented .segmented-item {
  border: none;
  background: transparent;
  padding: 0 8px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  color: #64748b;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.leads-date-segmented .segmented-item:hover {
  color: var(--brand, #2563eb);
}
.leads-date-segmented .segmented-item.is-active {
  background: #fff;
  color: var(--brand, #2563eb);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.leads-date-more-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.leads-date-segmented .segmented-item.leads-date-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.leads-date-segmented .segmented-item.leads-date-more-btn.is-open {
  color: var(--brand, #2563eb);
}
.leads-date-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: none;
  min-width: 84px;
  padding: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
  flex-direction: column;
  gap: 2px;
}
.leads-date-menu.is-open {
  display: flex;
}
.leads-date-menu[hidden] {
  display: none;
}
.leads-date-menu-item {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 18px;
  color: #475569;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.leads-date-menu-item:hover {
  background: #f1f5f9;
  color: var(--brand, #2563eb);
}
.leads-date-menu-item.is-active {
  background: #eff6ff;
  color: var(--brand, #2563eb);
  font-weight: 600;
}
.date-pair-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.date-pair-inline .date-input-sm {
  height: 32px;
  width: 118px;
  font-size: 12px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
}
.date-pair-inline .date-separator {
  font-size: 12px;
  color: #64748b;
}
.leads-compact-row .leads-more-toggle,
.leads-more-toggle {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex: 0 0 auto;
}
.leads-more-toggle:hover {
  border-color: #93c5fd;
  color: var(--brand, #2563eb);
  background: #eff6ff;
}
.leads-more-toggle.is-open {
  border-color: #3b82f6;
  color: #2563eb;
  background: #eff6ff;
}
.leads-more-toggle .toggle-caret {
  font-size: 10px;
  line-height: 1;
}
.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--brand, #2563eb);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
.leads-compact-row .leads-reset-link,
.leads-reset-link {
  background: none;
  border: none;
  padding: 0 6px;
  height: 32px;
  font-size: 12px;
  color: #64748b;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.leads-reset-link:hover {
  color: #ef4444;
}

/* 更多筛选折叠面板 */
.leads-more-panel {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}
.leads-secondary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px 10px;
  align-items: end;
}
@media (max-width: 1200px) {
  .leads-secondary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .leads-secondary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.leads-secondary-grid .filter-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.leads-secondary-grid .filter-label {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}
.leads-secondary-grid .control {
  height: 30px;
  font-size: 12px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  width: 100%;
}

/* 已选筛选 Chips 标签行 */
.leads-filter-chips {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}
.leads-filter-chips-title {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
}
.leads-filter-chips-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.leads-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11.5px;
  color: #334155;
  line-height: 1.4;
  white-space: nowrap;
}
.leads-filter-chip-remove {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: all 0.15s;
}
.leads-filter-chip-remove:hover {
  color: #ef4444;
  background: #fee2e2;
}
.leads-filter-chips-clear {
  border: none;
  background: transparent;
  padding: 0 4px;
  font-size: 11.5px;
  color: #64748b;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.leads-filter-chips-clear:hover {
  color: #ef4444;
}

/* H5 移动端筛选容器 */
.h5-leads-filter-wrap {
  display: none;
  margin-bottom: 10px;
}
.h5-shell .h5-leads-filter-wrap {
  display: block;
}
.h5-shell .leads-desktop-filters {
  display: none !important;
}
.h5-leads-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.h5-search-input-wrap {
  flex: 1;
  min-width: 0;
}
.h5-search-input-wrap .control {
  height: 36px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  width: 100%;
  padding: 0 10px;
}
.leads-h5-filter-btn {
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.leads-h5-filter-btn:active {
  background: #f1f5f9;
}
.h5-date-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 6px;
}
.h5-date-pills-row::-webkit-scrollbar {
  display: none;
}
.h5-custom-date-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 6px;
}
.h5-custom-date-row .control {
  height: 32px;
  flex: 1;
  font-size: 12px;
}
.h5-custom-date-row span {
  font-size: 12px;
  color: #64748b;
}
.leads-filter-chips.is-h5 {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 6px;
  margin-top: 0;
}
.leads-filter-chips.is-h5::-webkit-scrollbar {
  display: none;
}
.leads-filter-chips.is-h5 .leads-filter-chips-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.leads-results-card {
  overflow: clip;
}
.leads-results-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 14px;
  color: #64748b;
  font-size: 13px;
}
.leads-results-head strong {
  color: #334155;
}
.leads-results-head > span:nth-child(2) {
  margin-left: auto;
}
.leads-results-head .btn {
  min-height: 30px;
  padding: 0 9px;
}
.overdue-list-banner {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #fecaca;
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  margin: 12px;
  background: linear-gradient(90deg, #fef2f2, #fff);
}
.overdue-list-banner strong {
  display: block;
  margin-bottom: 3px;
  color: #b91c1c;
}
.overdue-list-banner span {
  color: #dc2626;
  font-size: 12px;
}
.leads-query-error {
  padding: 12px 16px;
  color: #b91c1c;
  background: #fef2f2;
}
.loading-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid #cbd5e1;
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: leads-spin .7s linear infinite;
}
@keyframes leads-spin { to { transform: rotate(360deg); } }
.mobile-lead-card-name {
  display: flex;
  align-items: center;
  min-width: 0;
}
.mobile-lead-card-name input {
  flex: 0 0 auto;
  margin: 0 8px 0 0;
}
.mobile-lead-card-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-lead-overdue {
  display: inline-block;
  margin-left: 6px;
  color: #dc2626;
  font-weight: 700;
  white-space: nowrap;
}
.temp-password-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, .52);
}
.temp-password-modal {
  width: min(460px, 100%);
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
}
.temp-password-modal .modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.temp-password-modal h2 {
  margin: 0 0 5px;
  font-size: 18px;
}
.temp-password-value {
  display: flex;
  gap: 8px;
  margin: 20px 0 8px;
}
.temp-password-value .control {
  min-width: 0;
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  letter-spacing: .06em;
}
.temp-password-modal p {
  margin: 8px 0 18px;
  color: #718096;
  font-size: 12px;
}

@media (min-width: 768px) and (max-width: 1180px) {
  .leads-compact-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 767px) {
  .stat-cards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .stat-cards-row .stat-card:nth-child(5):last-child {
    grid-column: 1 / -1;
  }
  .stat-card {
    min-height: 78px;
    padding: 10px 12px;
  }
  .stat-card-value {
    font-size: 22px;
  }
  .stat-card-hint {
    font-size: 10.5px;
    margin-top: 4px;
  }
  .leads-main-card {
    padding: 12px;
  }
  .leads-scope-row {
    align-items: center;
    overflow: hidden;
  }
  .leads-scope-tabs,
  .leads-stage-tabs,
  .sub-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
  }
  .leads-scope-tabs {
    gap: 16px;
  }
  .leads-scope-tab,
  .leads-stage-tab,
  .sub-pill {
    flex: 0 0 auto;
  }
  .leads-stage-row {
    display: block;
  }
  .leads-stage-tabs {
    gap: 16px;
  }
  .lead-definitions-wrap {
    margin-top: 5px;
  }
  .lead-definitions-popover {
    left: 0;
    right: auto;
    width: min(320px, calc(100vw - 44px));
  }
  .leads-desktop-filters {
    display: none !important;
  }
  .h5-leads-filter-wrap {
    display: block !important;
  }
  .h5-bottom-sheet {
    width: 100%;
    max-height: 85vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    overflow: hidden;
  }
  .h5-bottom-sheet-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
  }
  .h5-bottom-sheet-head strong {
    font-size: 16px;
    color: #0f172a;
  }
  .h5-bottom-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px;
  }
  .leads-sheet-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .sheet-filter-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .sheet-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
  }
  .sheet-filter-section .control {
    height: 38px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    width: 100%;
    padding: 0 10px;
  }
  .h5-bottom-sheet .lead-person-filter-control {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0;
  }
  .h5-bottom-sheet .lead-person-filter-control > .control:first-child {
    height: 38px;
    border-radius: 8px 0 0 8px;
    border-right: 0;
    background: #f8fafc;
  }
  .h5-bottom-sheet .lead-person-filter-picker > .control {
    height: 38px;
    border-radius: 0 8px 8px 0;
  }
  .h5-bottom-sheet .lead-person-filter-menu {
    position: static;
    width: 100%;
    max-width: 100%;
    max-height: 220px;
    box-shadow: none;
    border: 1px solid #e2e8f0;
    margin-top: 6px;
    border-radius: 8px;
  }
  .h5-bottom-sheet-foot {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #f1f5f9;
    z-index: 10;
  }
  .h5-bottom-sheet-foot .btn {
    flex: 1;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
  }
  .leads-results-head {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 12px;
  }
  .leads-results-head > span:nth-child(2) {
    margin-left: 0;
  }
  .leads-results-head .btn {
    margin-left: auto;
  }
  .leads-results-card .status-row {
    display: none;
  }
  .mobile-leads-list {
    padding: 0 10px 12px;
  }
  .mobile-lead-card {
    padding: 13px;
  }
  .mobile-lead-card-head {
    gap: 8px;
  }
  .mobile-lead-card-name {
    flex: 1;
  }
  .mobile-lead-phone {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pagination {
    gap: 5px;
  }
  .temp-password-value {
    flex-wrap: wrap;
  }
}
.h5-bottom-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.filter-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--danger);
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}

/* H5: the sidebar becomes the bottom nav; float the 超时监控 card above it instead of inside it. */
@media (max-width: 760px) {
  .attention-card {
    position: fixed !important;
    left: auto !important;
    right: 10px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    width: min(300px, calc(100vw - 16px)) !important;
    max-height: 38vh;
    overflow: auto;
  }
  .attention-card.is-collapsed {
    width: auto !important;
    max-height: none;
    overflow: visible;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
  }
  .attention-card.is-collapsed .attention-head,
  .attention-card.is-collapsed .attention-summary,
  .attention-card.is-collapsed .attention-content { display: none; }
  .attention-card.is-collapsed .attention-pill { display: block; }
  .attention-pill {
    padding: 8px 12px;
    border: 1px solid #f0b8bd;
    border-radius: 999px;
    color: #c93442;
    background: #fff;
    box-shadow: 0 4px 14px rgba(19, 32, 54, .2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }
  .attention-card:not(.is-collapsed) .attention-collapse { display: block; }
}