/* ===== Material Design 3 Theme Tokens ===== */
:root {
  --sidebar-w: 280px;
  --sidebar-collapsed-w: 88px;
  --topbar-h: 72px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --transition: .24s cubic-bezier(.2,0,0,1);
  --font: "Segoe UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --surface-tint: rgba(103, 80, 164, 0.08);
}

[data-theme="light"] {
  --bg-primary: #f7f2fa;
  --bg-secondary: #f3edf7;
  --bg-tertiary: #ece6f0;
  --bg-card: #fff8ff;
  --bg-elevated: #ffffff;
  --bg-sidebar: #f3edf7;
  --bg-sidebar-hover: #e8def8;
  --bg-topbar: rgba(255,248,255,0.88);
  --text-primary: #1d1b20;
  --text-secondary: #49454f;
  --text-muted: #79747e;
  --text-sidebar: #49454f;
  --text-sidebar-active: #21005d;
  --border: #cac4d0;
  --border-soft: rgba(121,116,126,.22);
  --shadow: 0 1px 2px rgba(29,27,32,.08), 0 1px 3px 1px rgba(29,27,32,.06);
  --shadow-lg: 0 8px 20px rgba(29,27,32,.12), 0 12px 32px rgba(29,27,32,.10);
  --accent: #6750a4;
  --accent-light: #7f67be;
  --accent-bg: rgba(103,80,164,.12);
  --accent-container: #eaddff;
  --success: #2e7d32;
  --warning: #b26a00;
  --danger: #b3261e;
  --info: #00639a;
  --orange: #c25e00;
  --glass: rgba(255,248,255,.82);
  --glass-border: rgba(121,116,126,.18);
}

[data-theme="dark"] {
  --bg-primary: #141218;
  --bg-secondary: #211f26;
  --bg-tertiary: #2b2930;
  --bg-card: #1d1b20;
  --bg-elevated: #211f26;
  --bg-sidebar: #1d1b20;
  --bg-sidebar-hover: #2b2930;
  --bg-topbar: rgba(29,27,32,.88);
  --surface-contrast: rgba(255,255,255,.92);
  --surface-contrast-soft: rgba(255,255,255,.12);
  --surface-contrast-border: rgba(255,255,255,.14);
  --surface-contrast-text: #334155;
  --surface-contrast-title: #0f172a;
  --surface-contrast-muted: #64748b;
  --text-primary: #e6e0e9;
  --text-secondary: #cac4d0;
  --text-muted: #938f99;
  --text-sidebar: #cac4d0;
  --text-sidebar-active: #eaddff;
  --border: #49454f;
  --border-soft: rgba(202,196,208,.18);
  --shadow: 0 1px 2px rgba(0,0,0,.24), 0 1px 3px 1px rgba(0,0,0,.18);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.36), 0 14px 42px rgba(0,0,0,.3);
  --accent: #d0bcff;
  --accent-light: #eaddff;
  --accent-bg: rgba(208,188,255,.14);
  --accent-container: #4f378b;
  --success: #81c784;
  --warning: #f2b66d;
  --danger: #f2b8b5;
  --info: #7dc3ff;
  --orange: #ffb77a;
  --glass: rgba(29,27,32,.82);
  --glass-border: rgba(202,196,208,.12);
}

/* ===== Reset & Base ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background:
    radial-gradient(circle at top left, rgba(103,80,164,.12), transparent 28%),
    radial-gradient(circle at top right, rgba(98,91,113,.08), transparent 24%),
    var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
  overflow-y: auto;
}

body.is-app-shell {
  overflow: hidden;
}
button, input, select, textarea { font: inherit; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

#siteRoot {
  min-height: 100vh;
}

.hidden-shell {
  display: none !important;
}

.marketing-shell {
  min-height: 100vh;
}

.app-shell {
  margin-left: var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
  overflow-x: clip; /* clip 不创建层叠上下文，fixed 子元素仍相对 viewport 定位 */
}

.sidebar.collapsed ~ .app-shell {
  margin-left: var(--sidebar-collapsed-w);
}

.app-page-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}


/* ===== Sidebar ===== */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: linear-gradient(180deg, rgba(234,221,255,.32), transparent 18%), var(--bg-sidebar);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  transition: width var(--transition), transform var(--transition);
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  overflow: hidden;
  padding: 16px 12px 12px;
}
.sidebar.collapsed { width: var(--sidebar-collapsed-w); }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-item .nav-item-meta,
.sidebar.collapsed .sidebar-footer-label { display:none; }
.sidebar.collapsed .nav-item { justify-content:center; padding-inline: 0; }
.sidebar.collapsed .sidebar-brand { justify-content:center; }

.sidebar-brand {
  display:flex;
  align-items:center;
  gap:12px;
  min-height: 64px;
  padding:14px 16px;
  font-size:18px;
  font-weight:700;
  color:var(--text-primary);
  border-radius: 24px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  white-space:nowrap;
  margin-bottom: 16px;
}
.sidebar-brand i {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--accent-container);
  color: var(--accent);
  font-size:18px;
  min-width:40px;
  text-align:center;
}

.sidebar-nav {
  flex:1;
  padding:6px 0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:0 16px;
  border-radius: 18px;
  color:var(--text-sidebar);
  text-decoration:none;
  transition:all var(--transition);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}
.nav-item i {
  width: 32px;
  text-align:center;
  font-size:18px;
  flex-shrink: 0;
}
.nav-item:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-primary);
}
.nav-item.active {
  background: var(--accent-container);
  color: var(--text-sidebar-active);
  box-shadow: inset 0 0 0 1px rgba(103,80,164,.08);
}
.nav-divider {
  height:1px;
  background:var(--border-soft);
  margin:8px 8px;
}

.sidebar-footer {
  padding:12px 6px 6px;
  display:flex;
  justify-content:center;
}
.theme-btn {
  min-width:56px;
  height:56px;
  border-radius:18px;
  border:1px solid var(--border-soft);
  background: var(--glass);
  color:var(--text-primary);
  font-size:18px;
  cursor:pointer;
  transition:all var(--transition);
  box-shadow: var(--shadow);
}
.theme-btn:hover {
  background: var(--accent-container);
  color: var(--accent);
}

/* ===== Main Content ===== */
.main-content {
  flex:1;
  margin-left:var(--sidebar-w);
  transition:margin-left var(--transition);
  display:flex;
  flex-direction:column;
  height:100vh;
}
.sidebar.collapsed ~ .main-content { margin-left:var(--sidebar-collapsed-w); }

/* ===== Topbar ===== */
.topbar {
  height:var(--topbar-h);
  background:var(--bg-topbar);
  backdrop-filter: blur(18px);
  border-bottom:1px solid var(--border-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  gap:16px;
  position:sticky;
  top:0;
  z-index:50;
}

.topbar-left {
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.app-shell-breadcrumb {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.app-shell-badge {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  background:var(--accent-bg);
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.app-shell-breadcrumb strong {
  display:block;
  font-size:14px;
  line-height:1.3;
}

.app-shell-breadcrumb p {
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.5;
}

.app-shell-exit {
  min-height:40px;
}
.menu-toggle {
  width:48px;
  height:48px;
  border:none;
  border-radius:16px;
  background:transparent;
  color:var(--text-secondary);
  font-size:18px;
  cursor:pointer;
  transition:all var(--transition);
}
.menu-toggle:hover { background:var(--accent-bg); color:var(--accent); }

.topbar-search {
  flex:1;
  max-width:560px;
  position:relative;
}
.topbar-search i {
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  font-size:14px;
}
.topbar-search input {
  width:100%;
  height:52px;
  padding:0 18px 0 44px;
  border:1px solid transparent;
  border-radius:28px;
  background:var(--bg-secondary);
  color:var(--text-primary);
  font-size:14px;
  outline:none;
  transition:all var(--transition);
}
.topbar-search input:focus {
  border-color:var(--accent);
  background: var(--bg-card);
  box-shadow:0 0 0 4px var(--accent-bg);
}

.topbar-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.topbar-btn {
  width:48px;
  height:48px;
  border:none;
  border-radius:16px;
  background:transparent;
  color:var(--text-secondary);
  font-size:18px;
  cursor:pointer;
  position:relative;
  transition:all var(--transition);
}
.topbar-btn:hover { background:var(--accent-bg); color:var(--accent); }
.topbar-btn .badge {
  position:absolute;
  top:6px;
  right:6px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  background:var(--danger);
  color:#fff;
  font-size:10px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.user-avatar {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 16px 0 8px;
  border-radius:26px;
  cursor:pointer;
  transition:all var(--transition);
  font-size:13px;
  font-weight:600;
}
.user-avatar:hover { background:var(--accent-bg); }
.user-avatar i {
  width:36px;
  height:36px;
  border-radius:14px;
  background:var(--accent-container);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

/* ===== Page Container ===== */
.page-container {
  flex:1;
  padding:24px;
  overflow-y:auto;
  animation:fadeIn .3s ease;
}

.marketing-container {
  overflow: visible;
  padding: 0;
}

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


/* ===== Cards ===== */
.card {
  background:var(--bg-card);
  border-radius:var(--radius);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow);
  padding:20px;
  transition:all var(--transition);
  overflow:hidden;
  min-width:0;
}
.card:hover { box-shadow:var(--shadow-lg); }
.card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom:16px;
}
.card-title { font-size:16px; font-weight:700; letter-spacing:.01em; }

/* ===== Grid System ===== */
.grid { display:grid; gap:16px; }
.grid > * { min-width:0; overflow:hidden; }
.grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.grid-1-2 { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.grid-2-1 { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.grid-1-3 { grid-template-columns:minmax(280px,1fr) minmax(0,3fr); }
.grid-3-1 { grid-template-columns:minmax(0,3fr) minmax(280px,1fr); }

/* ===== Page Header / Surfaces ===== */
.page-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}
.page-header h1,
.page-header h2,
.page-header h3 {
  font-size:28px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.01em;
}
.page-header p { margin-top:6px; }
.page-section { margin-bottom:20px; }
.surface {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
}

/* ===== KPI Cards ===== */
.kpi-card {
  background:var(--bg-card);
  border-radius:24px;
  border:1px solid var(--border-soft);
  padding:20px;
  display:flex;
  align-items:center;
  gap:16px;
  transition:all var(--transition);
  cursor:default;
  box-shadow: var(--shadow);
}
.kpi-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.kpi-icon {
  width:56px;
  height:56px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  flex-shrink:0;
}
.kpi-icon.blue { background:rgba(0,99,154,.12); color:var(--info); }
.kpi-icon.green { background:rgba(46,125,50,.12); color:var(--success); }
.kpi-icon.purple { background:var(--accent-container); color:var(--accent); }
.kpi-icon.orange { background:rgba(194,94,0,.12); color:var(--orange); }
.kpi-icon.red { background:rgba(179,38,30,.12); color:var(--danger); }
.kpi-icon.yellow { background:rgba(178,106,0,.12); color:var(--warning); }
.kpi-info { flex:1; }
.kpi-value { font-size:28px; font-weight:800; line-height:1.2; }
.kpi-label { font-size:12px; color:var(--text-secondary); margin-top:4px; }
.kpi-trend { font-size:12px; font-weight:600; margin-top:6px; }
.kpi-trend.up { color:var(--success); }
.kpi-trend.down { color:var(--danger); }

/* ===== Buttons ===== */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:10px 18px;
  border:none;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition);
  white-space:nowrap;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary {
  background:var(--accent);
  color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.14);
}
.btn-primary:hover { filter:brightness(1.05); box-shadow:var(--shadow); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { filter:brightness(1.05); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { filter:brightness(1.05); }
.btn-outline {
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-primary);
}
.btn-outline:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.btn-sm { min-height:32px; padding:6px 12px; font-size:12px; }

/* ===== Tables ===== */
.table-wrap {
  overflow-x:auto;
  border-radius: 18px;
  border:1px solid var(--border-soft);
}
table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; background: var(--bg-card); }
thead { background:var(--bg-secondary); }
th {
  padding:14px 16px;
  text-align:left;
  font-weight:700;
  color:var(--text-secondary);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
td {
  padding:14px 16px;
  border-top:1px solid var(--border-soft);
}
tr:hover td { background:var(--accent-bg); }

/* ===== Badges & Tags ===== */
.badge-tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}
.badge-tag.green { background:rgba(46,125,50,.12); color:var(--success); }
.badge-tag.red { background:rgba(179,38,30,.12); color:var(--danger); }
.badge-tag.blue { background:rgba(0,99,154,.12); color:var(--info); }
.badge-tag.orange { background:rgba(194,94,0,.12); color:var(--orange); }
.badge-tag.purple { background:var(--accent-container); color:var(--accent); }
.badge-tag.yellow { background:rgba(178,106,0,.12); color:var(--warning); }

/* ===== Progress Bar ===== */
.progress-bar { height:8px; background:var(--bg-secondary); border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; border-radius:999px; transition:width .6s ease; }
.progress-fill.blue { background:var(--info); }
.progress-fill.green { background:var(--success); }
.progress-fill.orange { background:var(--orange); }
.progress-fill.purple { background:var(--accent); }
.progress-fill.red { background:var(--danger); }
.progress-fill.yellow { background:var(--warning); }

/* ===== Tabs ===== */
.tabs {
  display:flex;
  gap:8px;
  padding:6px;
  background: var(--bg-secondary);
  border-radius: 999px;
  width:max-content;
  max-width:100%;
  overflow:auto;
  margin-bottom:16px;
}
.tab-btn {
  min-height:36px;
  padding:8px 16px;
  border:none;
  background:transparent;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border-radius:999px;
  transition:all var(--transition);
}
.tab-btn.active {
  color:var(--accent);
  background:var(--bg-card);
  box-shadow: var(--shadow);
}
.tab-btn:hover { color:var(--accent); }

/* ===== Forms ===== */
.form-group { margin-bottom:16px; }
.form-label {
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--text-secondary);
  margin-bottom:8px;
}
.form-input, .form-select, .form-textarea {
  width:100%;
  min-height:52px;
  padding:0 16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--bg-secondary);
  color:var(--text-primary);
  font-size:13px;
  outline:none;
  transition:all var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--accent);
  background: var(--bg-card);
  box-shadow:0 0 0 4px var(--accent-bg);
}
.form-textarea { min-height:120px; padding:14px 16px; resize:vertical; }

/* ===== Modal ===== */
.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(29,27,32,.44);
  backdrop-filter: blur(4px);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:fadeIn .2s ease;
}
.modal {
  background:var(--bg-card);
  border-radius:28px;
  width:90%;
  max-width:720px;
  max-height:85vh;
  overflow-y:auto;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-lg);
  animation:slideUp .3s ease;
}
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:none;opacity:1} }
.modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--border-soft);
}
.modal-header h3 { font-size:18px; }
.modal-close {
  width:40px;
  height:40px;
  border:none;
  border-radius:14px;
  background:transparent;
  font-size:20px;
  cursor:pointer;
  color:var(--text-secondary);
}
.modal-close:hover { background: var(--accent-bg); color: var(--accent); }
.modal-body { padding:24px; }
.modal-footer {
  padding:16px 24px 24px;
  border-top:1px solid var(--border-soft);
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* ===== Notification Panel ===== */
.notif-panel {
  position:fixed;
  top:calc(var(--topbar-h) + 8px);
  right:16px;
  width:360px;
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:24px;
  box-shadow:var(--shadow-lg);
  z-index:9000;
  animation:slideLeft .2s ease;
  overflow: hidden;
}
@keyframes slideLeft { from{transform:translateX(100%)} to{transform:none} }
.notif-panel.hidden { display:none; }
.notif-header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border-soft); }
.notif-header h3 { font-size:15px; }
.notif-header button { border:none; background:none; font-size:18px; cursor:pointer; color:var(--text-secondary); }
.notif-list { padding:10px; }
.notif-item {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border-radius:18px;
  font-size:13px;
  cursor:pointer;
  transition:background var(--transition);
}
.notif-item:hover { background:var(--accent-bg); }
.notif-item.unread { background:rgba(103,80,164,.08); }
.notif-item i { margin-top:2px; flex-shrink:0; }
.notif-body { flex:1; min-width:0; }
.notif-msg { font-size:13px; color:var(--text-primary); line-height:1.4; word-break:break-all; }
.notif-time { font-size:11px; color:var(--text-muted); margin-top:3px; }
.notif-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:32px 0;
  color:var(--text-muted);
  font-size:13px;
}
.notif-empty i { font-size:28px; opacity:.4; }

/* ===== Map Container ===== */
.map-container {
  width:100%;
  height:calc(100vh - var(--topbar-h) - 48px);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
}
.map-container #mapDiv { width:100%; height:100%; }

/* ===== Utility ===== */
.text-green { color:var(--success); }
.text-red { color:var(--danger); }
.text-blue { color:var(--info); }
.text-orange { color:var(--orange); }
.text-purple { color:var(--accent); }
.text-yellow { color:var(--warning); }
.text-muted { color:var(--text-secondary); }
.text-sm { font-size:12px; }
.text-xs { font-size:11px; }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.mt-2 { margin-top:8px; }
.mt-4 { margin-top:16px; }
.mb-2 { margin-bottom:8px; }
.mb-4 { margin-bottom:16px; }
.gap-2 { gap:8px; }
.gap-4 { gap:16px; }
.flex { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.flex-1 { flex:1; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hidden { display:none !important; }

/* ===== Chart Container ===== */
.chart-box {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;   /* fallback when no inline height is set */
  overflow: visible;   /* allow tooltip to overflow the box */
  flex-shrink: 0;
}
.chart-box canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: inherit;
}
.chart-box-sm {
  min-height: 220px;
}
.chart-box-md {
  min-height: 260px;
}
.chart-box-lg {
  min-height: 280px;
}

/* ===== Premium Chart.js Tooltip ===== */
/* The chart-box parent must be position:relative (already set above) */
.chartjs-tooltip {
  position: absolute;
  z-index: 999;
  pointer-events: none;
  min-width: 120px;
  max-width: 220px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary, #111);
  transition: opacity .15s ease, left .08s ease, top .08s ease;
  opacity: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .chartjs-tooltip {
  background: rgba(30,32,48,.92);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  color: #e8eaf0;
}
.chartjs-tooltip .ct-title {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary, #666);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.07));
}
.chartjs-tooltip .ct-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
}
.chartjs-tooltip .ct-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chartjs-tooltip .ct-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
}


/* ===== Bklit-style Visualization System ===== */
.viz-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.viz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 88%, white 12%) 0%, var(--bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--border-soft) 78%, var(--accent) 22%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.viz-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%);
  opacity: .45;
}
.viz-card > * {
  position: relative;
  z-index: 1;
}
.viz-card.compact {
  padding: 18px;
  border-radius: 24px;
}
.viz-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.viz-card-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.viz-overline {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
}
.viz-card-title h3,
.viz-card-title h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
.viz-card-desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.viz-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.viz-actions .btn {
  border-radius: 999px;
}
.viz-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.viz-metric {
  padding: 14px 16px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-secondary) 82%, white 18%);
  border: 1px solid var(--border-soft);
}
.viz-metric-label {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.viz-metric-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
.viz-metric-meta {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}
.viz-panel {
  position: relative;
  padding: 16px 18px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-secondary) 78%, white 22%);
  border: 1px solid var(--border-soft);
}
.viz-panel.soft {
  background: color-mix(in srgb, var(--accent-bg) 72%, var(--bg-secondary) 28%);
}
.viz-chart-wrap {
  padding: 14px 14px 6px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg-secondary) 74%, white 26%);
  border: 1px solid var(--border-soft);
}
.viz-chart-wrap .chart-box {
  min-height: 220px;
}
.competition-threat-card {
  min-height: 100%;
}
.competition-threat-layout {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) minmax(220px, .9fr);
  gap: 16px;
  align-items: stretch;
}
.competition-threat-chart {
  display: flex;
  align-items: center;
  justify-content: center;
}
.competition-threat-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.competition-threat-item {
  padding: 14px 16px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-secondary) 78%, white 22%);
  border: 1px solid var(--border-soft);
}
.competition-threat-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.competition-threat-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.competition-threat-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}
.competition-threat-value {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
}
.competition-threat-bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-soft) 70%, var(--bg-secondary) 30%);
  overflow: hidden;
  margin-bottom: 10px;
}
.competition-threat-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.competition-threat-item p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.viz-legend {

  display: flex;
  flex-direction: column;
  gap: 10px;
}
.viz-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-secondary) 82%, white 18%);
  border: 1px solid var(--border-soft);
}
.viz-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
}
.viz-legend-label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}
.viz-legend-value {
  font-size: 13px;
  font-weight: 800;
}
.viz-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.viz-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg-secondary) 78%, white 22%);
  transition: all var(--transition);
}
.viz-list-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft) 62%);
  box-shadow: var(--shadow);
}
.viz-list-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  color: var(--accent);
  flex-shrink: 0;
}
.viz-list-body {
  flex: 1;
  min-width: 0;
}
.viz-list-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.viz-list-subtitle {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.viz-list-meta {
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
}
.viz-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg-secondary) 80%, white 20%);
  border: 1px solid var(--border-soft);
}
.viz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-bg) 76%, white 24%);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.viz-table-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 12px;
}
.viz-grid-hero {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  min-height: calc(100vh - 170px);
}
.viz-side-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.viz-scroll {
  overflow-y: auto;
  min-height: 0;
}
.viz-compact-label {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}
.viz-map-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.viz-map-surface {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-card) 84%, white 16%);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
}
.viz-floating-panel {
  position: absolute;
  z-index: 20;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border-soft) 80%, white 20%);
  background: color-mix(in srgb, var(--bg-card) 82%, white 18%);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}
.viz-floating-panel.soft {
  background: color-mix(in srgb, var(--accent-bg) 70%, var(--bg-card) 30%);
}
.viz-floating-top-left {
  top: 14px;
  left: 14px;
  padding: 10px;
}
.viz-floating-top-right {
  top: 14px;
  right: 14px;
  width: 280px;
  padding: 16px;
}
.viz-floating-bottom-left {
  left: 14px;
  bottom: 14px;
  padding: 14px;
}
.viz-toggle-group {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-secondary) 84%, white 16%);
  border: 1px solid var(--border-soft);
}
.viz-toggle-pill {
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
.viz-toggle-pill.active {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, white 30%));
  color: #fff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 32%, transparent 68%);
}
.viz-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.viz-stat-tile {
  padding: 12px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-secondary) 82%, white 18%);
  border: 1px solid var(--border-soft);
}
.viz-stat-tile .label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.viz-stat-tile .value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
.viz-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.viz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-secondary) 84%, white 16%);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}
.viz-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-secondary) 82%, white 18%);
  border: 1px solid var(--border-soft);
}
.viz-switch-row input {
  accent-color: var(--accent);
}
.viz-rank-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.viz-rank-pill {
  min-width: 58px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  transition: all var(--transition);
}
.viz-rank-pill.active {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 68%, white 32%));
  color: #fff;
  border-color: transparent;
}
.viz-score-band {
  display: flex;
  gap: 6px;
  margin-bottom: 5px;
}
.viz-score-band span {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  opacity: .2;
}
.viz-score-pointer {
  position: relative;
  height: 8px;
}
.viz-score-pointer::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}
.viz-dimension-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.viz-dimension-item {
  padding: 12px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-card) 84%, white 16%);
  border: 1px solid var(--border-soft);
}
.viz-progress {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 72%, white 28%);
  overflow: hidden;
}
.viz-progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.viz-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.viz-photo-tile {
  height: 68px;
  border-radius: 16px;
  border: 1px dashed var(--border-soft);
  background: color-mix(in srgb, var(--bg-secondary) 82%, white 18%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 11px;
}
.viz-photo-tile.add {
  color: var(--accent);
  font-size: 22px;
  cursor: pointer;
}
.viz-report-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.viz-report-nav {
  position: sticky;
  top: 0;
}
.viz-report-hero {
  padding: 28px;
  border-radius: 30px;
  color: #fff;
  background: linear-gradient(135deg, #111827, #312e81 56%, #4338ca);
  box-shadow: 0 28px 60px rgba(49, 46, 129, 0.22);
}
.viz-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1280px) {
  .viz-grid-hero {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .viz-grid-hero > .viz-side-stack:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 960px) {

  .viz-card {
    padding: 18px;
    border-radius: 24px;
  }
  .viz-card-header {
    flex-direction: column;
  }
  .viz-chart-wrap {
    padding: 12px;
  }
  .competition-threat-layout {
    grid-template-columns: 1fr;
  }
}



/* ===== Score Ring ===== */
.score-ring {
  width:88px;
  height:88px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.score-ring svg { position:absolute; top:0; left:0; transform:rotate(-90deg); }
.score-ring .score-value { font-size:22px; font-weight:800; z-index:1; }

/* ===== Rating Stars ===== */
.stars { color:var(--warning); font-size:12px; letter-spacing:1px; }

/* ===== Kanban Board ===== */
.kanban { display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; }
.kanban-col {
  min-width:280px;
  flex:1;
  background:var(--bg-secondary);
  border-radius:24px;
  padding:14px;
  border: 1px solid var(--border-soft);
}
.kanban-col-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  font-size:13px;
  font-weight:700;
}
.kanban-col-header .count {
  background:var(--bg-card);
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
}
.kanban-item {
  background:var(--bg-card);
  border-radius:18px;
  padding:14px;
  margin-bottom:10px;
  border:1px solid var(--border-soft);
  cursor:grab;
  transition:all var(--transition);
}
.kanban-item:hover { box-shadow:var(--shadow); transform:translateY(-1px); }

/* ===== Additional MD3 Helpers ===== */
.card-grid { display:grid; gap:16px; }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section-stack { display:flex; flex-direction:column; gap:20px; }
.surface-tonal { background: var(--bg-secondary); border:1px solid var(--border-soft); border-radius: var(--radius); }

/* ===== Settings Nav Item ===== */
.settings-nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:0 14px;
  border-radius:16px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  transition:all .2s;
  color:var(--text-primary);
}
.settings-nav-item:hover { background:var(--accent-bg); color:var(--accent); }
.settings-nav-item.active { background:var(--accent-container); color:var(--accent); font-weight:700; }

/* ===== Page Loading Skeleton ===== */
.page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 60vh;
  color: var(--text-secondary);
  font-size: 15px;
}
.page-loading .fa-spinner {
  font-size: 32px;
  color: var(--accent);
  opacity: .75;
}

/* ===== Toast ===== */
.toast-host {
  position: fixed;
  top: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
  pointer-events: none;
}
.toast-chip {
  min-width: 220px;
  max-width: 360px;
  padding: 14px 18px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--toast-color) 88%, #ffffff 12%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .22s ease, transform .22s ease;
}
.toast-chip.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===== Settings Helpers ===== */
.settings-range {
  width: 100%;
  accent-color: var(--accent);
}
.settings-template-card {
  position: relative;
  text-align: left;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 18px;
  cursor: pointer;
  transition: all var(--transition);
}
.settings-template-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.settings-template-card.active {
  background: var(--accent-bg);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border) 55%);
}
.settings-template-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  color: var(--accent);
}
.settings-list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
}
.settings-rank {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-container);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.settings-channel-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-channel-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.settings-channel-chip.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.settings-channel-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ===== Project Workspace ===== */
.project-kanban-board {
  align-items: stretch;
}
.project-kanban-column {
  background: color-mix(in srgb, var(--bg-secondary) 82%, white 18%);
  border-radius: 24px;
}
.project-kanban-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.project-kanban-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.project-kanban-dot.blue { background: var(--info); }
.project-kanban-dot.orange { background: var(--orange); }
.project-kanban-dot.purple { background: var(--accent); }
.project-kanban-dot.green { background: var(--success); }
.project-kanban-item {
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-card) 88%, white 12%);
}
.project-kanban-head,
.project-kanban-foot,
.project-progress-cell,
.project-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.project-kanban-foot {
  margin-top: 12px;
  flex-wrap: wrap;
}
.project-progress-cell {
  justify-content: flex-start;
}
.project-progress-bar {
  width: 88px;
}
.project-table-wrap {
  background: color-mix(in srgb, var(--bg-card) 90%, white 10%);
}
.project-stage-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 0 22px;
}
.project-stage-step {
  min-width: 108px;
  padding: 14px 18px;
  border-radius: 20px;
  text-align: center;
  background: color-mix(in srgb, var(--bg-secondary) 84%, white 16%);
  border: 1px solid var(--border-soft);
}
.project-stage-step.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft) 45%);
  background: color-mix(in srgb, var(--accent-bg) 76%, white 24%);
}
.project-stage-step.done {
  border-color: color-mix(in srgb, var(--success) 50%, var(--border-soft) 50%);
  background: color-mix(in srgb, rgba(46,125,50,.12) 72%, white 28%);
}
.project-stage-index {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
}
.project-stage-name {
  font-size: 12px;
  font-weight: 700;
}
.project-stage-arrow {
  color: var(--text-muted);
  font-size: 12px;
}
.project-gantt {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.project-gantt-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.project-gantt-label {
  width: 90px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
}
.project-gantt-track {
  position: relative;
  flex: 1;
  height: 24px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-secondary) 82%, white 18%);
}
.project-gantt-fill {
  height: 100%;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.project-gantt-date {
  width: 54px;
  flex-shrink: 0;
  text-align: right;
  font-size: 11px;
  color: var(--text-secondary);
}
.project-modal-card {
  border-radius: 24px;
}

/* ===== Project Board Layout Fixes ===== */
.project-board-grid {
  align-items: start;
}
.project-pipeline-card {
  min-width: 0;
}
/* 看板列最小宽度适配 2/3 空间 */
.project-pipeline-card .kanban-col {
  min-width: 160px;
}
.project-kanban-name {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  word-break: break-all;
}
.project-score-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, transparent 86%);
  color: var(--accent);
}
.badge-sm {
  font-size: 10px;
  padding: 2px 6px;
}
.project-kanban-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 0;
  color: var(--text-muted);
  font-size: 12px;
}
.project-kanban-empty i { font-size: 20px; opacity: .4; }

/* 右侧侧栏撑满 */
.project-side-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: stretch;
}
.project-rhythm-card {
  flex: 1;
}
.project-health-card {
  flex-shrink: 0;
}

/* 待办列表 */
.project-todo-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: background var(--transition);
}
.project-todo-item:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent 94%);
}
.project-todo-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.project-todo-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.project-todo-icon.urgent { background: color-mix(in srgb, var(--danger) 14%, transparent 86%); color: var(--danger); }
.project-todo-icon.warn   { background: color-mix(in srgb, var(--warning) 14%, transparent 86%); color: var(--warning); }
.project-todo-icon.info   { background: color-mix(in srgb, var(--info) 14%, transparent 86%); color: var(--info); }
.project-todo-icon.success{ background: color-mix(in srgb, var(--success) 14%, transparent 86%); color: var(--success); }
.project-todo-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.project-todo-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.project-priority-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.project-priority-tag.urgent { background: color-mix(in srgb, var(--danger) 14%, transparent 86%); color: var(--danger); }
.project-priority-tag.warn   { background: color-mix(in srgb, var(--warning) 14%, transparent 86%); color: var(--warning); }
.project-priority-tag.info   { background: color-mix(in srgb, var(--info) 14%, transparent 86%); color: var(--info); }
.project-priority-tag.success{ background: color-mix(in srgb, var(--success) 14%, transparent 86%); color: var(--success); }

/* 健康进度条 */
.project-health-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.project-health-row {}
.project-health-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.project-health-name {
  font-size: 12px;
  font-weight: 600;
}
.project-health-pct {
  font-size: 12px;
  font-weight: 700;
}
.project-health-bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-secondary) 80%, white 20%);
  overflow: hidden;
}
.project-health-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .6s cubic-bezier(.16,1,.3,1);
}
.project-health-fill.success { background: var(--success); }
.project-health-fill.warning { background: var(--warning); }
.project-health-fill.danger  { background: var(--danger); }
.project-health-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }

/* ===== Settings Workspace ===== */
.settings-shell {
  gap: 20px;
}
.settings-header {
  align-items: center;
}
.settings-action-row {
  flex-wrap: wrap;
}
.settings-workspace {
  align-items: start;
}
.settings-overview-card {
  min-height: 168px;
}
.settings-overview-top {
  margin-bottom: 14px;
}
.settings-nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-nav-item {
  width: 100%;
  min-height: 62px;
  justify-content: flex-start;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--bg-secondary) 84%, white 16%);
}
.settings-nav-item:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-soft) 70%);
  transform: translateY(-1px);
}
.settings-nav-item.active {
  box-shadow: var(--shadow);
}
.settings-nav-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  color: var(--accent);
  flex-shrink: 0;
}
.settings-nav-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.settings-span-full {
  grid-column: 1 / -1;
}
.settings-inline-note {
  text-align: right;
}
.settings-inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-inline-row .form-input {
  flex: 1;
}
.settings-key-toggle {
  min-width: 52px;
}
.settings-info-panel {
  margin-bottom: 16px;
}
.settings-stack-xs {
  margin-bottom: 4px;
}
.settings-stack-sm {
  margin-top: 10px;
}
.settings-template-icon {
  font-size: 24px;
}
.settings-tight-stack {
  gap: 10px;
}

/* ===== Team Management Module ===== */
.team-page {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.team-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.team-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-back:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.team-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Toolbar */
.team-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.team-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.team-search-wrap > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
}
.team-search {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}
.team-search:focus {
  border-color: var(--accent);
}
.team-filters {
  display: flex;
  gap: 8px;
}
.team-select {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
}
.team-select:focus {
  border-color: var(--accent);
}
.team-count {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 0 4px;
}

/* Member Grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.team-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.team-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--success));
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.member-info {
  flex: 1;
  min-width: 0;
}
.member-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.member-role {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.member-city {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.member-city i {
  color: var(--accent);
  margin-right: 3px;
}
.member-status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-active {
  background: color-mix(in srgb, var(--success) 14%, transparent 86%);
  color: var(--success);
}
.status-leave {
  background: color-mix(in srgb, var(--warning) 14%, transparent 86%);
  color: var(--warning);
}
.status-inactive {
  background: color-mix(in srgb, var(--text-muted) 14%, transparent 86%);
  color: var(--text-muted);
}
.member-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.member-tag {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent 80%);
}
.team-card-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 0;
}
.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-right: 1px solid var(--border-soft);
}
.stat-item:last-child {
  border-right: none;
}
.stat-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.stat-lbl {
  font-size: 11px;
  color: var(--text-muted);
}
.team-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}
.card-view-detail {
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
}
.team-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.team-empty i {
  font-size: 40px;
  display: block;
  margin-bottom: 12px;
  opacity: .4;
}

/* Detail View */
.team-detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.detail-profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.detail-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--success));
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.detail-profile-info {
  flex: 1;
  min-width: 200px;
}
.detail-profile-info h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.detail-role {
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 8px;
}
.detail-bio {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 12px;
}
.detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.detail-meta-row i {
  color: var(--accent);
  margin-right: 4px;
}
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.detail-kpi-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  align-self: flex-start;
  flex-shrink: 0;
}
.detail-kpi {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-right: 1px solid var(--border-soft);
}
.detail-kpi:last-child {
  border-right: none;
}
.kpi-val {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}
.kpi-lbl {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Media Section */
.media-section {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.media-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.media-section-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.media-section-header h3 i {
  color: var(--accent);
}
.btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  white-space: nowrap;
}
.btn-upload:hover {
  opacity: .88;
  transform: translateY(-1px);
}
.media-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.media-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.media-group-title i {
  color: var(--accent);
}
.media-count {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-bg);
  color: var(--accent);
}
.media-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-muted);
  font-size: 13px;
  border: 2px dashed var(--border-soft);
  border-radius: var(--radius-sm);
}
.media-empty i {
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
  opacity: .4;
}

/* Photo Grid */
.media-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.photo-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}
.photo-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.photo-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-placeholder-icon {
  font-size: 32px;
  color: var(--text-muted);
  opacity: .4;
}
.photo-meta {
  padding: 10px 12px;
}
.photo-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-info {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.photo-note {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.photo-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-card:hover .photo-delete {
  opacity: 1;
}
.photo-actions-row {
  display: flex;
  gap: 6px;
  padding: 6px 10px 10px;
  justify-content: flex-end;
}
.photo-note-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.photo-note-btn:hover {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}

/* Video List */
.media-video-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.video-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.video-card:hover {
  border-color: var(--accent);
}
.video-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--accent) 14%, transparent 86%);
  color: var(--accent);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.video-meta {
  flex: 1;
  min-width: 0;
}
.video-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-info {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.video-note {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.video-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.btn-icon-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.btn-icon-sm:hover {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}
.btn-danger-sm:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent 88%);
  color: var(--danger);
  border-color: var(--danger);
}

/* Lightbox */
.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(8px);
}
.media-lightbox.hidden {
  display: none;
}
.lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  z-index: 1;
}
.lightbox-close:hover {
  background: rgba(255,255,255,.3);
}
.lightbox-img {
  max-width: 85vw;
  max-height: 80vh;
  border-radius: var(--radius-sm);
  object-fit: contain;
}
.lightbox-video {
  max-width: 85vw;
  max-height: 80vh;
  border-radius: var(--radius-sm);
}
#lightboxCaption {
  color: rgba(255,255,255,.7);
  font-size: 13px;
  text-align: center;
  max-width: 600px;
}
.settings-list-copy {
  flex: 1;
  min-width: 0;
}
.settings-list-row-wrap {
  flex-wrap: wrap;
}
.settings-weight-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-weight-input {
  width: 76px;
  text-align: center;
}
.settings-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-table-wrap {
  background: color-mix(in srgb, var(--bg-card) 92%, white 8%);
}
.settings-approval-copy-grid {
  align-items: stretch;
}
.settings-approval-copy-panel {
  min-height: 100%;
}
.settings-template-copy-item {
  align-items: flex-start;
  gap: 10px;
}
.settings-template-copy-textarea {
  min-height: 108px;
}
.report-diff-grid {
  align-items: stretch;
}
.report-diff-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.report-diff-row {
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
}
.report-diff-row.added {
  border-color: rgba(46,125,50,.24);
  background: rgba(46,125,50,.06);
}
.report-diff-row.removed {
  border-color: rgba(179,38,30,.24);
  background: rgba(179,38,30,.06);
}
.report-diff-row.updated {
  border-color: rgba(194,94,0,.24);
  background: rgba(194,94,0,.07);
}
.report-diff-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
}
.report-diff-values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.report-diff-value {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.report-diff-value.old {
  background: rgba(179,38,30,.08);
}
.report-diff-value.new {
  background: rgba(46,125,50,.10);
}
.report-diff-version {
  flex: 0 0 44px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}
.report-summary-panel {
  border-style: dashed;
}
.report-summary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report-summary-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card) 90%, white 10%);
  border: 1px solid var(--border-soft);
}
.report-summary-row.added {
  border-color: rgba(46,125,50,.24);
}
.report-summary-row.removed {
  border-color: rgba(179,38,30,.24);
}
.report-summary-row.updated {
  border-color: rgba(194,94,0,.24);
}
.report-summary-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.report-summary-copy {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.theme-surface-contrast {
  background: var(--surface-contrast);
  border-color: var(--surface-contrast-border);
  color: var(--surface-contrast-text);
}
.theme-surface-contrast-title {
  color: var(--surface-contrast-title);
}
.theme-surface-contrast-muted {
  color: var(--surface-contrast-muted);
}

/* ===== Team Module — Lightbox counter & nav ===== */
#lightboxCounter {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.65);
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  z-index: 2;
}
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  z-index: 2;
}
.lightbox-prev { left: -60px; }
.lightbox-next { right: -60px; }
.lightbox-nav:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,.35); }
@media (max-width: 768px) {
  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
}

/* ===== Team Module — Detail Tab Switch ===== */
.team-detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-soft);
  margin-bottom: 0;
}
.team-detail-tab {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.team-detail-tab:hover {
  color: var(--text-primary);
}
.team-detail-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ===== Team Module — Task List ===== */
.tasks-section {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* alias — renderTasksTab 使用 team-tasks-section */
.team-tasks-section {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tasks-section-header,
.team-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.tasks-section-header h3,
.team-tasks-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tasks-section-header h3 i,
.team-tasks-header h3 i {
  color: var(--accent);
}
.task-list,
.team-task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.task-item,
.team-task-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}
.task-item:hover,
.team-task-item:hover {
  border-color: var(--accent);
}
.task-item.done,
.team-task-item.task-item-done {
  opacity: .65;
}
.task-item.done .task-title,
.team-task-item.task-item-done .task-title {
  text-decoration: line-through;
  color: var(--text-muted);
}
.task-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-soft);
  background: var(--bg-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all var(--transition);
  font-size: 11px;
  color: transparent;
}
.task-item.done .task-check {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.task-check:hover {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent 88%);
}
/* task-status-icon 替代 task-check（renderTasksTab 使用） */
.task-status-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.task-status-icon.task-todo     { background: color-mix(in srgb, var(--text-muted) 14%, transparent 86%); color: var(--text-muted); }
.task-status-icon.task-progress { background: color-mix(in srgb, var(--warning) 14%, transparent 86%);    color: var(--warning); }
.task-status-icon.task-done     { background: color-mix(in srgb, var(--success) 14%, transparent 86%);    color: var(--success); }
.task-body {
  flex: 1;
  min-width: 0;
}
.task-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.task-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}
.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  align-items: center;
}
.task-meta i {
  margin-right: 3px;
  color: var(--accent);
}
/* task-badge：状态徽章 */
.task-badge {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.task-badge.task-todo     { background: color-mix(in srgb, var(--text-muted) 14%, transparent 86%); color: var(--text-muted); }
.task-badge.task-progress { background: color-mix(in srgb, var(--warning) 14%, transparent 86%);    color: var(--warning); }
.task-badge.task-done     { background: color-mix(in srgb, var(--success) 14%, transparent 86%);    color: var(--success); }
/* task-priority-badge */
.task-priority-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.task-priority-badge.priority-high { background: color-mix(in srgb, var(--danger) 14%, transparent 86%);  color: var(--danger); }
.task-priority-badge.priority-mid  { background: color-mix(in srgb, var(--warning) 14%, transparent 86%); color: var(--warning); }
.task-priority-badge.priority-low  { background: color-mix(in srgb, var(--success) 14%, transparent 86%); color: var(--success); }
.task-priority {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.task-priority.high { background: color-mix(in srgb, var(--danger) 14%, transparent 86%);  color: var(--danger); }
.task-priority.medium { background: color-mix(in srgb, var(--warning) 14%, transparent 86%); color: var(--warning); }
.task-priority.low  { background: color-mix(in srgb, var(--success) 14%, transparent 86%); color: var(--success); }
.task-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.task-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-muted);
  font-size: 13px;
  border: 2px dashed var(--border-soft);
  border-radius: var(--radius-sm);
}
.task-empty i {
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
  opacity: .4;
}
/* btn-success-sm */
.btn-success-sm:hover {
  background: color-mix(in srgb, var(--success) 12%, transparent 88%);
  color: var(--success);
  border-color: var(--success);
}

/* ===== Team Module — KPI Chart ===== */
.kpi-chart-section,
.team-kpi-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kpi-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.kpi-chart-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kpi-chart-header h3 i {
  color: var(--accent);
}
.kpi-chart-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.kpi-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.kpi-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kpi-chart-box {
  width: 100%;
  height: 280px;
  min-height: 280px;
}
/* KPI 图表双列网格 */
.team-kpi-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}
/* 绩效摘要行 */
.perf-summary-row,
.team-kpi-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.perf-summary-card,
.kpi-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.kpi-summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.perf-summary-label,
.kpi-summary-lbl {
  font-size: 12px;
  color: var(--text-muted);
}
.perf-summary-value,
.kpi-summary-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.perf-summary-sub {
  font-size: 11px;
  color: var(--text-secondary);
}
.perf-summary-trend {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}
.perf-summary-trend.up   { color: var(--success); }
.perf-summary-trend.down { color: var(--danger); }

/* ===== Team Module — Modal ===== */
.team-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.team-modal-overlay.hidden {
  display: none;
}
.team-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
}
.team-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.team-modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.team-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
.team-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.note-modal-file {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-soft);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {


  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-1-3, .grid-3-1 { grid-template-columns: 1fr; }
}
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.mobile-open { transform:translateX(0); }
  .main-content { margin-left:0 !important; }
  .page-container { padding:16px; }
  .topbar { padding:0 16px; }
  .grid-2, .grid-1-2, .grid-2-1, .grid-1-3, .grid-3-1 { grid-template-columns:1fr; }
  .kanban { flex-direction:column; }
  .kanban-col { min-width:auto; }
  .notif-panel { width: calc(100vw - 24px); right: 12px; }
  .project-stage-flow { justify-content: flex-start; }
  .project-gantt-row { flex-wrap: wrap; }
}
@media (max-width:480px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; }
  .kpi-card { padding:16px; }
  .kpi-value { font-size:22px; }
  .page-header h1, .page-header h2, .page-header h3 { font-size:24px; }
}

/* ===== Scorecard Module ===== */
.sc-page { padding: 24px; max-width: 1400px; margin: 0 auto; }
.sc-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.sc-header .sc-title { flex: 1; margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.sc-header-actions { display: flex; gap: 8px; }
.sc-subtitle { color: var(--text-secondary); font-size: 0.88rem; margin: 2px 0 0; }

.sc-template-info {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 16px; font-size: 0.85rem;
  color: var(--text-secondary); margin-bottom: 20px;
}
.sc-template-info strong { color: var(--text-primary); }

/* List table */
.sc-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); }
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table th { background: var(--surface-2); padding: 12px 16px; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); text-align: left; border-bottom: 1px solid var(--border); }
.sc-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-light, var(--border)); font-size: 0.9rem; vertical-align: middle; }
.sc-table tr:last-child td { border-bottom: none; }
.sc-table tr:hover td { background: var(--surface-hover, var(--surface-2)); }
.sc-loc-name { font-weight: 600; color: var(--text-primary); }
.sc-score-badge { padding: 3px 10px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; }
.sc-actions { display: flex; gap: 6px; }
.sc-empty { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
.sc-empty i { font-size: 2.5rem; opacity: 0.3; display: block; margin-bottom: 12px; }

/* Score form layout */
.sc-score-layout { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
@media(max-width:900px){ .sc-score-layout { grid-template-columns: 1fr; } }

.sc-info-panel, .sc-scoring-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
}
.sc-panel-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; }

.sc-form-group { margin-bottom: 14px; }
.sc-form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.sc-form-group label .required { color: var(--danger); }
.sc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-input {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-primary); font-size: 0.88rem;
  transition: border-color 0.2s; box-sizing: border-box;
}
.sc-input:focus { outline: none; border-color: var(--accent); }
.sc-textarea { min-height: 72px; resize: vertical; }
select.sc-input { cursor: pointer; }

.sc-total-preview {
  margin-top: 20px; padding: 20px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  text-align: center;
}
.sc-total-label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; }
.sc-total-score { font-size: 2.8rem; font-weight: 800; line-height: 1; transition: color 0.3s; }
.sc-total-decision { font-size: 0.95rem; font-weight: 600; margin-top: 6px; transition: color 0.3s; }

/* Module sections */
.sc-module-section { margin-bottom: 24px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sc-module-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.sc-module-name { font-weight: 700; font-size: 0.95rem; flex: 1; }
.sc-module-weight { font-size: 0.8rem; color: var(--text-secondary); background: var(--surface); padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); }
.sc-module-preview { font-size: 0.82rem; color: var(--text-secondary); }
.sc-module-preview strong { color: var(--accent); }
.sc-indicators { padding: 0 18px; }

.sc-indicator-row {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--border-light, var(--border));
}
.sc-indicator-row:last-child { border-bottom: none; }
.sc-ind-info { flex: 1; min-width: 0; }
.sc-ind-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 4px; }
.sc-ind-hint { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
.sc-ind-datahint { font-size: 0.75rem; color: var(--accent); margin-top: 3px; }
.sc-ind-datahint i { margin-right: 3px; }
.sc-ind-score { width: 240px; flex-shrink: 0; }
.sc-ind-weight { font-size: 0.75rem; color: var(--text-secondary); text-align: right; margin-top: 4px; }

.sc-score-slider-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sc-score-slider { flex: 1; accent-color: var(--accent); cursor: pointer; }
.sc-score-display { font-size: 1.1rem; font-weight: 700; color: var(--accent); min-width: 24px; text-align: center; }

.sc-score-btns { display: flex; gap: 3px; flex-wrap: wrap; }
.sc-score-btn {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-secondary);
  font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
  padding: 0; display: flex; align-items: center; justify-content: center;
}
.sc-score-btn:hover { border-color: var(--accent); color: var(--accent); }
.sc-score-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Report */
.sc-report-page { padding: 0; }
.sc-report-page .sc-header { padding: 20px 32px 0; }
.no-print { }
.sc-report-body { padding: 32px; }

.sc-report-cover {
  text-align: center; padding: 48px 32px;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
  border-radius: 16px; margin-bottom: 32px; border: 1px solid var(--border);
}
.sc-report-logo { font-size: 2.5rem; color: var(--accent); margin-bottom: 12px; }
.sc-report-main-title { font-size: 1.1rem; color: var(--text-secondary); font-weight: 400; margin: 0 0 8px; }
.sc-report-loc-title { font-size: 1.8rem; font-weight: 800; color: var(--text-primary); margin: 0 0 16px; }
.sc-report-meta { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 28px; }
.sc-report-meta i { margin-right: 5px; }

.sc-report-score-hero { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 20px; }
.sc-report-score-ring {
  width: 120px; height: 120px; border-radius: 50%;
  border: 6px solid var(--ring-color, var(--accent));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface);
}
.sc-ring-score { font-size: 2rem; font-weight: 800; color: var(--ring-color, var(--accent)); line-height: 1; }
.sc-ring-label { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; }
.sc-report-decision {
  padding: 14px 28px; border-radius: 12px; font-size: 1.1rem; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.sc-threshold-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sc-threshold-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }

.sc-report-section { margin-bottom: 32px; }
.sc-report-section-title {
  font-size: 1.05rem; font-weight: 700; color: var(--text-primary);
  padding-bottom: 10px; border-bottom: 2px solid var(--accent);
  margin-bottom: 16px;
}
.sc-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sc-info-item { background: var(--surface-2); border-radius: 8px; padding: 12px 14px; }
.sc-info-item label { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 4px; }
.sc-info-item span { font-weight: 600; font-size: 0.9rem; }

.sc-summary-table, .sc-detail-table {
  width: 100%; border-collapse: collapse; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border);
}
.sc-summary-table th, .sc-detail-table th {
  background: var(--surface-2); padding: 10px 14px; font-size: 0.8rem;
  font-weight: 600; color: var(--text-secondary); text-align: left;
  border-bottom: 1px solid var(--border);
}
.sc-summary-table td, .sc-detail-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--border-light, var(--border));
  font-size: 0.88rem; vertical-align: middle;
}
.sc-total-row td { background: var(--surface-2); font-weight: 700; }
.sc-hint-cell { font-size: 0.78rem; color: var(--text-secondary); max-width: 160px; }

.sc-bar-wrap { background: var(--border); border-radius: 4px; height: 8px; overflow: hidden; min-width: 80px; }
.sc-bar-sm { height: 6px; }
.sc-bar { height: 100%; border-radius: 4px; transition: width 0.4s ease; }

.sc-report-module { margin-bottom: 20px; }
.sc-report-mod-title {
  font-size: 0.9rem; font-weight: 700; color: var(--text-primary);
  margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.sc-report-mod-title span { font-size: 0.78rem; color: var(--text-secondary); font-weight: 400; }

.sc-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.sc-pros-block, .sc-cons-block {
  padding: 16px; border-radius: 10px; border: 1px solid var(--border);
}
.sc-pros-block { background: #10b98110; border-color: #10b98130; }
.sc-cons-block { background: #ef444410; border-color: #ef444430; }
.sc-pros-block h4 { color: #10b981; margin: 0 0 8px; font-size: 0.9rem; }
.sc-cons-block h4 { color: #ef4444; margin: 0 0 8px; font-size: 0.9rem; }
.sc-pros-block p, .sc-cons-block p { margin: 0; font-size: 0.88rem; color: var(--text-primary); }
.sc-solution-block { background: var(--surface-2); border-radius: 10px; padding: 16px; border: 1px solid var(--border); }
.sc-solution-block h4 { color: var(--accent); margin: 0 0 8px; font-size: 0.9rem; }
.sc-solution-block p { margin: 0; font-size: 0.88rem; }

.sc-decision-section { }
.sc-decision-box {
  display: flex; align-items: center; gap: 20px;
  padding: 24px 28px; border-radius: 14px; border: 2px solid;
  margin-bottom: 20px; max-width: 400px;
}
.sc-decision-label { font-size: 1.3rem; font-weight: 800; }
.sc-decision-score { font-size: 0.9rem; color: var(--text-secondary); margin-top: 4px; }
.sc-decision-score strong { font-size: 1.1rem; }
.sc-sign-row { display: flex; gap: 40px; font-size: 0.9rem; color: var(--text-secondary); margin-top: 20px; }

/* Template editor */
.sc-tpl-meta { background: var(--surface-2); border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--border); }
.sc-tpl-weight-check {
  margin-top: 12px; padding: 8px 14px; border-radius: 8px; font-size: 0.85rem;
  display: flex; align-items: center; gap: 8px;
}
.sc-tpl-weight-check.ok { background: #10b98115; color: #10b981; }
.sc-tpl-weight-check.warn { background: #f59e0b15; color: #f59e0b; }

.sc-tpl-thresholds { background: var(--surface-2); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; border: 1px solid var(--border); }
.sc-tpl-thresholds h4 { margin: 0 0 12px; font-size: 0.9rem; }
.sc-tpl-threshold-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sc-tpl-threshold-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-tpl-threshold-row label { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }

.sc-tpl-modules { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.sc-tpl-module { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sc-tpl-mod-header {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.sc-tpl-mod-name { flex: 1; min-width: 160px; font-weight: 600; }
.sc-tpl-mod-weight { width: 80px; }
.sc-tpl-weight-label { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }

.sc-tpl-ind-header {
  display: grid; grid-template-columns: 1.5fr 0.5fr 2fr 1.5fr 36px;
  gap: 8px; padding: 8px 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
}
.sc-tpl-indicators { padding: 8px 16px; display: flex; flex-direction: column; gap: 6px; }
.sc-tpl-ind-row {
  display: grid; grid-template-columns: 1.5fr 0.5fr 2fr 1.5fr 36px;
  gap: 8px; align-items: center;
}
.sc-tpl-input { font-size: 0.82rem; padding: 6px 10px; }
.sc-tpl-weight { text-align: center; }
.sc-tpl-add-ind { margin: 8px 0 12px; }
.sc-tpl-add-mod { margin-top: 4px; }

/* Scorecard 统计概览 */
.sc-stats-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px;
}
@media(max-width:900px){ .sc-stats-row { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:600px){ .sc-stats-row { grid-template-columns: repeat(2, 1fr); } }
.sc-stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; text-align: center;
}
.sc-stat-card.sc-stat-green { border-color: #10b98130; background: #10b98108; }
.sc-stat-card.sc-stat-amber { border-color: #f59e0b30; background: #f59e0b08; }
.sc-stat-card.sc-stat-red   { border-color: #ef444430; background: #ef444408; }
.sc-stat-num { font-size: 1.8rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.sc-stat-green .sc-stat-num { color: #10b981; }
.sc-stat-amber .sc-stat-num { color: #f59e0b; }
.sc-stat-red   .sc-stat-num { color: #ef4444; }
.sc-stat-label { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; }

/* Scorecard 搜索筛选栏 */
.sc-filter-bar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.sc-search-wrap {
  flex: 1; min-width: 200px; position: relative; display: flex; align-items: center;
}
.sc-search-wrap i { position: absolute; left: 10px; color: var(--text-secondary); font-size: 0.85rem; }
.sc-search-input { padding-left: 32px !important; }
.sc-filter-select { width: auto; min-width: 120px; flex-shrink: 0; }
.sc-filter-count { font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; }

/* 点位地址副标题 */
.sc-loc-addr { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }

/* Buttons */
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  padding: 9px 18px; border-radius: 8px; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.88; }
.btn-outline {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border); padding: 8px 16px; border-radius: 8px;
  font-size: 0.88rem; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: border-color 0.2s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 5px 10px; font-size: 0.8rem; border-radius: 6px; }
.btn-danger-ghost {
  background: transparent; color: var(--danger, #ef4444); border: 1px solid transparent;
  padding: 5px 8px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; transition: all 0.15s;
}
.btn-danger-ghost:hover { background: #ef444415; border-color: #ef444430; }

@media print {
  .no-print { display: none !important; }
  .sc-report-body { padding: 0; }
  .app-shell { overflow: visible !important; }
  .app-page-container { overflow: visible !important; }
}

/* ===== ROI Scheme Archive Bar ===== */
.roi-scheme-bar { flex-direction: row !important; }
.roi-scheme-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color var(--transition);
}
.roi-scheme-chip:hover { border-color: var(--accent); }
.roi-scheme-chip-name {
  padding: 5px 10px 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition);
}
.roi-scheme-chip-name:hover { color: var(--accent); }
.roi-scheme-chip-del {
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-muted);
  background: none;
  border: none;
  border-left: 1px solid var(--border-soft);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.roi-scheme-chip-del:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent 92%);
}

/* ===== Location Compare Module ===== */

/* 线索库行内勾选按钮 */
.loc-compare-toggle {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  transition: all var(--transition);
}
.loc-compare-toggle:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent 92%); }
.loc-compare-toggle.active { border-color: var(--accent); color: #fff; background: var(--accent); }
.loc-row-in-compare { background: color-mix(in srgb, var(--accent) 4%, transparent 96%) !important; }

/* 对比页空态 */
.compare-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 24px; text-align: center; gap: 16px;
}
.compare-empty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent 90%);
  color: var(--accent); font-size: 28px;
  display: flex; align-items: center; justify-content: center;
}
.compare-empty h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.compare-empty p { color: var(--text-secondary); margin: 0; max-width: 380px; line-height: 1.6; }

/* 对比表格 */
.cmp-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  min-width: 600px;
}
.cmp-table th, .cmp-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left; vertical-align: middle;
}
.cmp-table thead th {
  background: var(--bg-secondary);
  font-weight: 700; font-size: 12px;
  position: sticky; top: 0; z-index: 1;
}
.cmp-row-label-th { width: 140px; min-width: 120px; color: var(--text-secondary); }
.cmp-row-label {
  font-size: 12px; color: var(--text-secondary); font-weight: 600;
  white-space: nowrap; background: var(--bg-secondary);
  position: sticky; left: 0; z-index: 1;
}
.cmp-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 3%, transparent 97%); }
.cmp-cell-best {
  color: #10b981; font-weight: 700;
  background: color-mix(in srgb, #10b981 6%, transparent 94%) !important;
}

/* 表头点位名 */
.cmp-th-name { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.cmp-th-sub  { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.cmp-remove-btn {
  margin-top: 6px; padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--border-soft); background: none;
  color: var(--text-muted); font-size: 10px; cursor: pointer;
  transition: all var(--transition);
}
.cmp-remove-btn:hover { border-color: var(--danger); color: var(--danger); }

/* 综合排名 */
.cmp-rank-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.cmp-rank-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-secondary);
  transition: all var(--transition);
}
.cmp-rank-item:hover { border-color: var(--accent); }
.cmp-rank-first {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-secondary) 95%);
}
.cmp-rank-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--text-secondary);
  flex-shrink: 0;
}
.cmp-rank-first .cmp-rank-num { background: var(--accent); color: #fff; border-color: var(--accent); }
.cmp-rank-info { flex: 1; min-width: 0; }
.cmp-rank-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.cmp-rank-sub  { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.cmp-rank-score { text-align: center; flex-shrink: 0; }
.cmp-rank-score-val   { font-size: 1.4rem; font-weight: 800; color: var(--accent); line-height: 1; }
.cmp-rank-score-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cmp-rank-tags { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

/* ===== Compare Table (compare.js) ===== */
.compare-table {
  width: 100%; border-collapse: collapse; font-size: 13px; min-width: 500px;
}
.compare-table th,
.compare-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left; vertical-align: middle;
}
.compare-table thead th {
  background: var(--bg-secondary);
  font-weight: 700; font-size: 12px;
  position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
.compare-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 3%, transparent 97%);
}
.compare-dim-label {
  font-size: 12px; color: var(--text-secondary); font-weight: 600;
  white-space: nowrap; background: var(--bg-secondary);
  position: sticky; left: 0; z-index: 1;
}
.compare-cell-best {
  color: #10b981 !important; font-weight: 700;
  background: color-mix(in srgb, #10b981 8%, transparent 92%) !important;
}
.compare-cell-worst {
  color: #ef4444 !important; font-weight: 700;
  background: color-mix(in srgb, #ef4444 6%, transparent 94%) !important;
}

/* danger outline button */
.btn-danger-outline {
  border: 1px solid color-mix(in srgb, #ef4444 40%, transparent 60%);
  color: #ef4444; background: transparent;
}
.btn-danger-outline:hover {
  background: color-mix(in srgb, #ef4444 8%, transparent 92%);
  border-color: #ef4444;
}

/* ===== Scorecard AI Insight Card ===== */
.sc-insight-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 4px;
}
.sc-ins-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.sc-ins-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--on-surface);
}
.sc-ins-title .fas { color: var(--primary); font-size: 16px; }
.sc-ins-powered {
  font-size: 11px;
  font-weight: 400;
  color: var(--on-surface-variant);
  background: var(--surface-3);
  padding: 2px 8px;
  border-radius: 20px;
}
.sc-ins-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.sc-ins-badge.badge-pos    { background: #10b98120; color: #10b981; }
.sc-ins-badge.badge-neg    { background: #ef444420; color: #ef4444; }
.sc-ins-badge.badge-risk   { background: #ef444420; color: #ef4444; }
.sc-ins-badge.badge-ok     { background: #10b98120; color: #10b981; }
.sc-ins-badge.badge-neutral{ background: var(--surface-3); color: var(--on-surface-variant); }
.sc-ins-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.sc-ins-summary-icon { font-size: 20px; margin-top: 1px; flex-shrink: 0; }
.sc-ins-summary-text { font-size: 14px; line-height: 1.6; color: var(--on-surface); margin: 0; }
.sc-ins-section { margin-bottom: 16px; }
.sc-ins-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--on-surface-variant);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-ins-drivers { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.sc-ins-driver-row {
  display: grid;
  grid-template-columns: 120px 1fr 90px;
  align-items: center;
  gap: 10px;
}
.sc-ins-driver-name { font-size: 12px; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ins-driver-bar-wrap { height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.sc-ins-driver-bar { height: 100%; border-radius: 4px; transition: width .4s ease; }
.sc-ins-driver-val { font-size: 12px; font-weight: 600; text-align: right; }
.sc-ins-driver-delta { font-size: 11px; font-weight: 400; opacity: .8; }
.sc-ins-mod-row { display: flex; gap: 16px; flex-wrap: wrap; }
.sc-ins-mod-group { display: flex; flex-direction: column; gap: 6px; }
.sc-ins-mod-label { font-size: 11px; color: var(--on-surface-variant); }
.sc-ins-mod-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
}
.sc-ins-mod-chip strong { font-weight: 700; }
.sc-ins-mod-top    { background: #10b98118; color: #10b981; }
.sc-ins-mod-bottom { background: #f59e0b18; color: #f59e0b; }
.sc-ins-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) { .sc-ins-two-col { grid-template-columns: 1fr; } }
.sc-ins-star-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-ins-star-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  background: #f59e0b18;
  color: #f59e0b;
  padding: 4px 10px;
  border-radius: 20px;
}
.sc-ins-star-chip .fas { font-size: 10px; }
.sc-ins-no-star { font-size: 12px; color: var(--on-surface-variant); }
.sc-ins-risk-list { display: flex; flex-direction: column; gap: 8px; }
.sc-ins-risk-item { display: flex; align-items: flex-start; gap: 10px; }
.sc-ins-risk-score {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.sc-ins-risk-name { font-size: 13px; font-weight: 600; color: var(--on-surface); }
.sc-ins-risk-mod  { font-size: 11px; color: var(--on-surface-variant); margin-top: 1px; }
.sc-ins-no-risk {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #10b981;
  padding: 8px 12px;
  background: #10b98112;
  border-radius: var(--radius-xs);
}
.sc-ins-compact {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--surface-3);
  border-radius: var(--radius-xs);
  border-left: 3px solid var(--primary);
}
.sc-ins-compact .sc-ins-summary-text {
  font-size: 12px;
  color: var(--on-surface-variant);
  line-height: 1.5;
  margin: 0 0 6px;
}
.sc-ins-compact .sc-ins-icon { color: var(--primary); margin-right: 4px; }
.sc-ins-badges-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Nearby Analysis 三圈层 ─────────────────────────── */
.nearby-ring-tabs {
  display: flex;
  gap: 6px;
  margin: 12px 0 10px;
}
.nearby-ring-tab {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: .2s;
  text-align: center;
}
.nearby-ring-tab.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg, rgba(99,102,241,.08));
  font-weight: 600;
}
.nearby-ring-tab:hover:not(.active) {
  border-color: var(--accent);
  color: var(--accent);
  opacity: .8;
}
.nearby-overview-row {
  display: flex;
  gap: 16px;
  margin: 4px 0 0;
  align-items: flex-start;
}
.nearby-radar-wrap {
  flex: 1;
  min-width: 0;
}
.nearby-ring-summary {
  width: 140px;
  flex-shrink: 0;
}
.nearby-ring-summary-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 28px;
}
.nearby-ring-stat {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nearby-ring-stat-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-shrink: 0;
}
.nearby-ring-stat-val {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.nearby-ring-stat-unit {
  font-size: 10px;
  color: var(--text-secondary);
}
.nearby-ring-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.nearby-ring-stat-delta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.nearby-ring-label {
  font-size: 11px;
  color: var(--text-muted);
  margin: 8px 0 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Compare 品牌标准线 ──────────────────────────────── */
.bm-panel {
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-bg, rgba(99,102,241,.04));
  padding: 16px 20px;
  margin-bottom: 16px;
}
.bm-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.bm-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bm-panel-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.bm-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
}
.bm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  transition: .2s;
}
.bm-row-active {
  border-color: var(--accent);
  background: var(--accent-bg, rgba(99,102,241,.06));
}
.bm-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.bm-toggle-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.bm-dim-name {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-inputs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.bm-input-label {
  font-size: 11px;
  color: var(--text-muted);
}
.bm-input {
  width: 60px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 12px;
  text-align: center;
}
.bm-input:focus {
  outline: none;
  border-color: var(--accent);
}
/* 表格中的标准线列 */
.bm-std-col {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  background: var(--surface-2) !important;
  border-left: 2px dashed var(--border) !important;
}
/* 已激活标准线的行 */
.bm-row-highlight > td:first-child {
  font-weight: 600;
}
.bm-active-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: middle;
}
/* 达标/不达标 badge */
.bm-pass-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(16,185,129,.15);
  color: #10b981;
  vertical-align: middle;
}
.bm-fail-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(239,68,68,.15);
  color: #ef4444;
  vertical-align: middle;
}

/* ── ROI 蚕食风险卡 ──────────────────────────────────── */
.roi-cannibalization-card {
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-left-width: 4px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.roi-cannibalization-safe {
  border-left-color: #10b981 !important;
  background: rgba(16,185,129,.03);
}
.roi-cann-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.roi-cann-icon {
  font-size: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}
.roi-cann-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.roi-cann-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.roi-cann-badge {
  margin-left: auto;
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.roi-cann-badge-safe   { background: rgba(16,185,129,.15); color: #10b981; }
.roi-cann-badge-low    { background: rgba(132,204,22,.15); color: #84cc16; }
.roi-cann-badge-warn   { background: rgba(245,158,11,.15); color: #f59e0b; }
.roi-cann-badge-danger { background: rgba(239,68,68,.15);  color: #ef4444; }
.roi-cann-impact-bar {
  margin-bottom: 14px;
}
.roi-cann-impact-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.roi-cann-bar-bg {
  height: 8px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
}
.roi-cann-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .5s ease;
}
.roi-cann-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.roi-cann-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: 8px;
}
.roi-cann-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.roi-cann-item-body {
  flex: 1;
  min-width: 0;
}
.roi-cann-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.roi-cann-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.roi-cann-item-tier {
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.roi-cann-footer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 10px 12px;
  background: rgba(245,158,11,.06);
  border-radius: 8px;
  border: 1px solid rgba(245,158,11,.2);
  line-height: 1.5;
}

/* ── City 空白机会热力图 ──────────────────────────────── */
.ws-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ws-chart-wrap {
  flex: 1;
  min-width: 0;
}
.ws-legend-wrap {
  width: 130px;
  flex-shrink: 0;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ws-legend-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}
.ws-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-secondary);
}
.ws-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ws-tier-row {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.ws-tier-card {
  flex: 1;
  min-width: 140px;
  padding: 12px 16px;
  border-radius: var(--radius-xs);
  border: 1.5px solid;
}
.ws-tier-count {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 3px;
}
.ws-tier-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.ws-tier-names {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── 时间轴甘特图 ─────────────────────────────────── */
.gantt-wrap { overflow-x: auto; min-width: 0; }
.gantt-header { display: flex; align-items: center; }
.gantt-label-col { width: 180px; flex-shrink: 0; padding: 0 12px 0 0; }
.gantt-timeline-col { flex: 1; min-width: 0; }
.gantt-months { display: flex; border-bottom: 1px solid var(--border); }
.gantt-month-cell { flex: 1; text-align: center; font-size: 11px; color: var(--text-muted); padding: 4px 0; }
.gantt-row { display: flex; align-items: center; margin: 6px 0; }
.gantt-lead-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-lead-meta { font-size: 11px; color: var(--text-muted); }
.gantt-track { position: relative; height: 48px; display: flex; }
.gantt-bg-cell { flex: 1; border-right: 1px dashed var(--border); }
.gantt-bg-cell.even { background: var(--surface-2, rgba(0,0,0,.03)); }
.gantt-bar { position: absolute; top: 8px; height: 32px; border-radius: 6px; display: flex; align-items: center; padding: 0 8px; }
.gantt-bar-label { font-size: 11px; font-weight: 600; white-space: nowrap; }
.gantt-milestone { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; width: 20px; }
.gantt-milestone-dot { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; }
.gantt-milestone-label { font-size: 9px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; }
.gantt-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #ef4444; opacity: .6; pointer-events: none; }

/* ── 开业清单 ─────────────────────────────────────── */
.ocl-panel { background: var(--surface-2, var(--bg-secondary)); border-radius: 12px; padding: 20px; border: 1px solid var(--border); }
.ocl-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.ocl-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.ocl-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.ocl-overall { text-align: center; }
.ocl-overall-pct { font-size: 28px; font-weight: 800; }
.ocl-overall-label { font-size: 11px; color: var(--text-muted); }
.ocl-phases { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ocl-phase { background: var(--bg-card); border-radius: 10px; padding: 14px; border: 1px solid var(--border); }
.ocl-phase-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-left: 8px; border-left: 3px solid; }
.ocl-phase-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.ocl-phase-title { font-size: 13px; font-weight: 700; flex: 1; }
.ocl-phase-progress { display: flex; align-items: center; gap: 6px; }
.ocl-progress-bar-bg { width: 48px; height: 5px; background: var(--border); border-radius: 3px; }
.ocl-progress-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.ocl-progress-text { font-size: 11px; font-weight: 700; }
.ocl-items { display: flex; flex-direction: column; gap: 6px; }
.ocl-item { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 8px; border-radius: 6px; transition: .15s; }
.ocl-item:hover { background: var(--surface-2, var(--bg-secondary)); }
.ocl-item-done .ocl-item-label { text-decoration: line-through; color: var(--text-muted); }
.ocl-item-label { font-size: 12px; flex: 1; }
.ocl-required { font-size: 10px; background: #ef444420; color: #ef4444; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; }
.ocl-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ── Scorecard 得分分解卡 (Score Breakdown) ─────────── */
.sc-bd-card {
  background: var(--surface-2, var(--bg-secondary));
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 20px 24px;
}
.sc-bd-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.sc-bd-pie-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.sc-bd-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sc-bd-tip {
  flex: 1;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 14px 16px;
}
.sc-bd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sc-bd-table th {
  background: var(--surface-2, var(--bg-secondary));
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sc-bd-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.sc-bd-mod-row:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent 96%); }
.sc-bd-mod-row td:first-child .sc-bd-expand-icon { transition: transform .2s; }
.sc-bd-mod-row:not(.sc-bd-open) + .sc-bd-detail-row .sc-bd-expand-icon { transform: rotate(0deg); }
.sc-bd-hidden { display: none; }
.sc-bd-ind-row td { background: var(--surface-2, var(--bg-secondary)); }
.sc-bd-ind-row:last-child td { border-bottom: 1px solid var(--border); }

/* ── AI 智能问答面板 ─────────────────────────────────── */
.ai-query-panel {
  position: fixed;
  top: 72px;
  right: 16px;
  width: 400px;
  max-height: calc(100vh - 96px);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  z-index: 8500;
  overflow: hidden;
  transition: opacity .2s, transform .2s;
}
.ai-query-panel.hidden { display: none; }
.ai-query-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.ai-query-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.ai-query-powered {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 1px 6px;
  border-radius: 20px;
}
.ai-query-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--text-muted);
  line-height: 1;
  padding: 0 4px;
  transition: color var(--transition);
}
.ai-query-close:hover { color: var(--text-primary); }
.ai-query-suggestions {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.ai-query-suggestions-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.ai-query-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ai-query-chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.ai-query-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent 94%);
}
.ai-query-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 160px;
}
.ai-msg { display: flex; gap: 8px; }
.ai-msg-user { flex-direction: row-reverse; }
.ai-msg-user .ai-msg-bubble {
  background: var(--accent);
  color: #fff;
  border-radius: 14px 14px 2px 14px;
  padding: 8px 12px;
  font-size: 13px;
  max-width: 80%;
  word-break: break-word;
}
.ai-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent 88%);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}
.ai-msg-content { flex: 1; min-width: 0; }
.ai-ans-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
}
.ai-ans-card.ai-ans-empty {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ai-ans-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.ai-ans-summary {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.ai-ans-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-soft);
}
.ai-ans-row:last-child { border-bottom: none; }
.ai-ans-rank { font-size: 14px; flex-shrink: 0; width: 22px; }
.ai-ans-name { flex: 1; font-size: 12px; color: var(--text-primary); font-weight: 500; }
.ai-ans-val { font-size: 12px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.ai-thinking-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px 0;
}
.ai-thinking-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: aiDotBounce .9s infinite;
  opacity: .5;
}
.ai-thinking-dots span:nth-child(2) { animation-delay: .15s; }
.ai-thinking-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes aiDotBounce {
  0%, 80%, 100% { transform: scale(.8); opacity: .4; }
  40% { transform: scale(1.2); opacity: 1; }
}
.ai-query-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.ai-query-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
}
.ai-query-input:focus { border-color: var(--accent); }
.ai-query-send {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.ai-query-send:hover { opacity: .85; }
#aiQueryBtn.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent 90%); }
@media (max-width: 480px) {
  .ai-query-panel { width: calc(100vw - 16px); right: 8px; }
}