:root {
  --primary: #1a73e8;
  --primary-dark: #1557b0;
  --success: #34a853;
  --warning: #fbbc04;
  --danger: #ea4335;
  --sidebar-bg: #1e293b;
  --sidebar-link: #94a3b8;
  --sidebar-active: #3b82f6;
  --body-bg: #f1f5f9;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--body-bg); color: #334155; min-height: 100vh; display: flex; }
.sidebar { width: 240px; height: 100vh; background: var(--sidebar-bg); color: #fff; position: fixed; left: 0; top: 0; display: flex; flex-direction: column; z-index: 100; overflow-y: auto; }
.sidebar-brand { padding: 20px; font-size: 18px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 10px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: var(--sidebar-link); text-decoration: none; font-size: 14px; transition: all .15s; }
.sidebar-nav a:hover, .sidebar-nav a.active { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-nav a.active { border-left: 3px solid var(--sidebar-active); }
.sidebar-nav .nav-label { padding: 16px 20px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #64748b; }
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: var(--sidebar-link); }
.main { margin-left: 240px; flex: 1; min-height: 100vh; }
.topbar { background: #fff; padding: 12px 24px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
.topbar h2 { font-size: 18px; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 8px; }
.content { padding: 24px; }
.card { background: #fff; border-radius: 8px; border: 1px solid #e2e8f0; margin-bottom: 16px; }
.card-header { padding: 14px 20px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: space-between; }
.card-body { padding: 20px; }
.card-body:only-child { border-bottom: none; }
table { width: 100%; border-collapse: collapse; }
table th { background: #f8fafc; text-align: left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #64748b; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; font-size: 14px; vertical-align: middle; }
table tr:hover td { background: #f8fafc; }
/* E1: 全局斑马纹（隔行变色）；逾期行 bg-danger-light 保留红色，hover 优先 */
table:not(.no-stripe) tbody tr:nth-child(even):not(.bg-danger-light) td { background: #f8fafc; }
table tbody tr:hover td { background: #eef2f7; }
tr.bg-danger-light td { background: #fef2f2; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.badge-a { background: #dbeafe; color: #1d4ed8; }
.badge-b { background: #fef3c7; color: #b45309; }
.badge-c { background: #f1f5f9; color: #64748b; }
.badge-active { background: #dcfce7; color: #16a34a; }
.badge-closed { background: #fef2f2; color: #dc2626; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; border: none; font-size: 14px; cursor: pointer; text-decoration: none; transition: all .15s; font-family: inherit; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); color: #fff; }
.btn-warning { background: var(--warning); color: #1e293b; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; color: #475569; }
form input, form select, form textarea { width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; font-family: inherit; transition: border-color .15s; background: #fff; }
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,115,232,.15); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0; }
.stat-card .stat-value { font-size: 28px; font-weight: 700; color: #1e293b; }
.stat-card .stat-label { font-size: 13px; color: #64748b; margin-top: 4px; }
.stat-card .stat-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.funnel { display: flex; flex-direction: column; gap: 4px; }
.funnel-item { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.funnel-item .funnel-label { width: 140px; font-size: 13px; flex-shrink: 0; }
.funnel-item .funnel-bar { flex: 1; height: 24px; background: #e2e8f0; border-radius: 4px; position: relative; overflow: hidden; }
.funnel-item .funnel-fill { height: 100%; border-radius: 4px; transition: width .3s; display: flex; align-items: center; padding: 0 8px; font-size: 11px; color: #fff; font-weight: 500; }
.funnel-item .funnel-num { font-size: 12px; color: #64748b; width: 100px; text-align: right; }
.flash { padding: 12px 20px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.flash-success { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.flash-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.flash-warning { background: #fef9c3; color: #a16207; border: 1px solid #fde68a; }
.search-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.search-bar input, .search-bar select { width: auto; min-width: 150px; }
.search-bar input { flex: 1; min-width: 200px; }
.empty-state { text-align: center; padding: 60px 20px; color: #94a3b8; }
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 15px; }
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: #e2e8f0; }
.timeline-item { padding: 8px 0 16px 16px; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -12px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; }
.timeline-item .tl-date { font-size: 12px; color: #94a3b8; }
.timeline-item .tl-title { font-weight: 500; font-size: 14px; }
.timeline-item .tl-desc { font-size: 13px; color: #64748b; margin-top: 2px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.detail-grid .field { }
.detail-grid .field-label { font-size: 12px; color: #94a3b8; display: block; }
.detail-grid .field-value { font-size: 14px; font-weight: 500; color: #1e293b; }
.stage-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 16px; font-size: 12px; font-weight: 600; }
.stage-lead { background: #f1f5f9; color: #475569; }
.stage-demand { background: #dbeafe; color: #1d4ed8; }
.stage-solution { background: #e0e7ff; color: #4338ca; }
.stage-sampling { background: #fef3c7; color: #b45309; }
.stage-quotation { background: #fce7f3; color: #be185d; }
.stage-trial { background: #dcfce7; color: #16a34a; }
.stage-rampup { background: #d1fae5; color: #059669; }
.stage-won { background: #10b981; color: #fff; }
.stage-lost { background: #fef2f2; color: #dc2626; }
@media(max-width:768px) {
  .sidebar { width: 200px; }
  .main { margin-left: 200px; }
  .form-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
}


/* Ȩ�޹��ˣ�ֻ���ҵİ�ť����״̬ */
.btn-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ─── 拜访 Drawer（同页抽屉） ─── */
.drawer-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 2000;
  display: flex; justify-content: flex-end;
}
.drawer-panel {
  width: 600px; max-width: 92vw; height: 100vh;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
  animation: drawer-slide-in .25s ease-out;
}
@keyframes drawer-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 15px; font-weight: 600; color: #1e293b;
  flex-shrink: 0;
}
.drawer-close {
  border: none; background: #f1f5f9; color: #475569;
  width: 32px; height: 32px; border-radius: 6px;
  font-size: 16px; cursor: pointer; line-height: 1;
  transition: all .15s;
}
.drawer-close:hover { background: #e2e8f0; color: #1e293b; }
.drawer-body { flex: 1; overflow-y: auto; background: #f1f5f9; position: relative; }
@media (max-width: 768px) {
  .drawer-panel { width: 100vw; max-width: 100vw; }
}

/* Customer 360 Tabs */
.crm360-tabs{display:flex;gap:4px;border-bottom:1px solid #e5e7eb;margin:18px 0 16px;flex-wrap:wrap;}
.crm360-tab{padding:10px 16px;border:none;background:none;cursor:pointer;font-size:14px;color:#64748b;border-bottom:2px solid transparent;}
.crm360-tab.active{color:#1d4ed8;border-bottom-color:#1d4ed8;font-weight:600;}
.crm360-count{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:10px;background:#e2e8f0;color:#475569;font-size:11px;}
.crm360-tab.active .crm360-count{background:#dbeafe;color:#1d4ed8;}

/* 语义颜色工具类 */
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-primary { color: var(--primary); }
.text-muted { color: #64748b; }
.text-warning { color: #d97706; }
.bg-danger-light { background: #fef2f2; }
.bg-success-light { background: #dcfce7; }
.bg-primary-light { background: #dbeafe; }
.bg-warning-light { background: #fff7ed; }

/* B1: 质量标签实心底色（修复 customers/list.html 中 badge bg-primary/bg-success/bg-warning/bg-danger 未定义导致无底色） */
.badge.bg-primary { background: var(--primary); color: #fff; }
.badge.bg-success { background: var(--success); color: #fff; }
.badge.bg-warning { background: var(--warning); color: #1e293b; }
.badge.bg-danger  { background: var(--danger);  color: #fff; }

/* O2: 状态胶囊 / 信息条工具类（替代列表、详情页内联 style，统一色彩） */
.pill { display: inline-block; border-radius: 4px; padding: 2px 6px; font-size: 11px; line-height: 1.4; white-space: nowrap; margin-left: 4px; }
.pill-unfollowed { background: #fef3c7; color: #92400e; }
.pill-active     { background: #d1fae5; color: #065f46; }
.pill-claimed    { background: #dbeafe; color: #1d4ed8; }
.pill-pool2      { background: #f5f3ff; color: #5b21b6; }
.pill-pool       { background: #fef3c7; color: #92400e; }
.pill-danger     { background: #fee2e2; color: #dc2626; }
.pill-warn       { background: #fef3c7; color: #d97706; }
.pill-info       { background: #e0f2fe; color: #0369a1; }
.infobox { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 12px; border-radius: 6px; font-size: 13px; flex-wrap: wrap; }
.infobox--pool    { background: #fefce8; border: 1px solid #fde68a; color: #92400e; }
.infobox--claimed { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }

/* FAB 移动端悬浮操作按钮（≤768px 显示），复用现有 data-drawer 触发器 */
.fab-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: none; }
.fab { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: #fff; border: none; font-size: 26px; line-height: 1; box-shadow: 0 4px 16px rgba(0,0,0,.25); cursor: pointer; }
.fab-menu { position: absolute; right: 0; bottom: 68px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.fab-item { display: block; text-align: left; padding: 10px 14px; border: none; background: none; border-radius: 8px; font-size: 14px; color: #334155; cursor: pointer; text-decoration: none; }
.fab-item:hover { background: #f1f5f9; }
@media (max-width: 768px) { .fab-wrap { display: block; } }


/* ══════════════════════════════════════════════════════════
   UI 优化追加（移动端导航 / 表格滚动 / 加载态 / 统一类）
   ══════════════════════════════════════════════════════════ */

/* P1-5: 补全被使用但未定义的按钮类 */
.btn-secondary { background: #64748b; color: #fff; }
.btn-secondary:hover { background: #475569; }
.btn-info { background: #0ea5e9; color: #fff; }
.btn-info:hover { background: #0284c7; }

/* P1-6: btn-back 从 base.html 内联迁移到此处（统一） */
.btn-back {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; background: #f1f5f9; color: #334155;
  border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer;
  font-size: 13px; line-height: 1.2; font-family: inherit;
}
.btn-back:hover { background: #e2e8f0; color: #1e293b; }

/* P2-9: 分页信息文本 */
.page-info { font-size: 13px; color: #64748b; }

/* P0-2: 响应式表格容器 */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* P0-3: 加载态（抽屉 iframe / 表单提交） */
.drawer-panel { position: relative; }
.drawer-loading {
  position: absolute; inset: 0; background: #fff; z-index: 20;
  display: flex; align-items: center; justify-content: center;
}
.spinner, .mini-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid #e2e8f0; border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}
.mini-spinner { width: 14px; height: 14px; border-width: 2px; display: inline-block; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* P0-1: 移动端导航（汉堡 + 抽屉式侧边栏） */
.sidebar-backdrop { display: none; }
.hamburger {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-right: 4px;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px;
  font-size: 18px; cursor: pointer; color: #334155; line-height: 1;
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 240px;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
  }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .hamburger { display: inline-flex; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(15,23,42,.45); z-index: 150;
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  /* 宽表格在移动端横向滚动，避免挤压布局 */
  .card-body > table, .content > table {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  table { min-width: 640px; }
  /* E3: 栅格在移动端塌列，避免窄屏挤压/溢出 */
  .grid-2, .grid-2-1, .grid-2-20, .grid-3 { grid-template-columns: 1fr; }
  .grid-4, .grid-4-12 { grid-template-columns: 1fr 1fr; }
}

/* P2-11: 尊重用户的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* P1-6: 顶栏左侧布局（从 base 内联迁移） */
.topbar-left { display: flex; align-items: center; gap: 12px; }

/* ===== P1-#4 Dashboard 工具类 / 组件类（值保持，替代内联 style） ===== */
/* 间距 */
.mb-2{margin-bottom:2px}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-28{margin-bottom:28px}
.mt-2{margin-top:2px}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.p-0{padding:0}.p-20{padding:20px}.p-24{padding:24px}.p-40{padding:40px}.p-16-8{padding:16px 16px 8px}.px-4{padding-left:4px;padding-right:4px}
/* Flex */
.flex{display:flex}.flex-center{display:flex;align-items:center}.items-center{align-items:center}.items-end{align-items:flex-end}.flex-wrap{flex-wrap:wrap}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.pointer{cursor:pointer}.block{display:block}
/* 字号 / 字重 */
.text-xs{font-size:11px}.text-sm{font-size:12px}.text-13{font-size:13px}.text-base{font-size:14px}.text-15{font-size:15px}
.fw-400{font-weight:400}.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}.text-center{text-align:center}
/* 文字颜色 */
.text-muted-2{color:#94a3b8}
.c-danger{color:var(--danger)}.c-success{color:var(--success)}.c-primary{color:var(--primary)}
.c-warning{color:#d97706}.c-amber{color:#b45309}.c-amber-dk{color:#92400e}.c-orange{color:#ea580c}.c-blue{color:#2563eb}
.c-violet{color:#9333ea}.c-purple{color:#7c3aed}.c-cyan{color:#0891b2}.c-gold{color:#ca8a04}.c-slate{color:#374151}.c-475{color:#475569}
/* 背景色 */
.bg-f0fdf4{background:#f0fdf4}.bg-fff7ed{background:#fff7ed}.bg-f0f9ff{background:#f0f9ff}.bg-faf5ff{background:#faf5ff}.bg-f5f3ff{background:#f5f3ff}
.bg-ecfeff{background:#ecfeff}.bg-fefce8{background:#fefce8}.bg-fef2f2{background:#fef2f2}.bg-eff6ff{background:#eff6ff}.bg-f8fafc{background:#f8fafc}
/* 圆角 / 杂项 */
.rounded{border-radius:8px}.rounded-sm{border-radius:6px}.rounded-pill{border-radius:12px}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none}.w-full{width:100%}.h-160{height:160px}.size-16{width:16px;height:16px}
.link-plain{text-decoration:none}.border-collapse{border-collapse:collapse}
/* 栅格 */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.grid-2-20{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.grid-4-12{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
/* Dashboard 实心胶囊标 */
.dash-badge{display:inline-block;border-radius:12px;padding:2px 10px;font-size:12px}
.dash-badge--warning{background:#d97706;color:#fff}.dash-badge--danger{background:#dc2626;color:#fff}.dash-badge--success{background:#16a34a;color:#fff}
/* Dashboard 预警框 */
.dash-notice{padding:10px 12px;border-radius:8px;background:#fff7ed;border:1px solid #fed7aa;margin-bottom:8px}
.dash-notice__title{font-size:13px;font-weight:600;color:#92400e;margin-bottom:4px}
.dash-notice__body{font-size:12px;color:#b45309;margin-bottom:6px;line-height:1.4}
.dash-notice__row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dash-notice__meta{font-size:11px;color:#92400e}.dash-notice__link{font-size:11px;color:#d97706;text-decoration:none}
.dash-notice__btn{font-size:11px;color:#fff;background:#d97706;border:none;border-radius:4px;padding:2px 8px;cursor:pointer;margin-left:auto}
/* Dashboard KPI 卡片 */
.dash-card{padding:12px;border-radius:8px}
.dash-card--alert{background:#fef2f2;border:1px solid #fecaca}
.dash-card--warning{background:#fff7ed;border:1px solid #fed7aa}
.dash-card--info{background:#eff6ff;border:1px solid #bfdbfe}
.dash-card--muted{background:#f8fafc;border:1px solid #e2e8f0}
.dash-card__label{font-size:11px;color:#64748b;margin-bottom:4px}
.dash-card__value{font-size:24px;font-weight:700}
.dash-card__value--danger{color:var(--danger)}.dash-card__value--warning{color:#d97706}
.dash-card__value--primary{color:var(--primary)}.dash-card__value--muted{color:#94a3b8}
.dash-card__sub--danger{font-size:11px;color:var(--danger);margin-top:4px}
.dash-card__sub--warning{font-size:11px;color:#b45309;margin-top:4px}
.dash-card__sub--primary{font-size:11px;color:var(--primary);margin-top:4px}
.dash-card__sub--muted{font-size:11px;color:#94a3b8;margin-top:4px}
/* Dashboard alerts 统计块 / 大数字 */
.alert-stat--danger{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;text-align:center}
.alert-stat--warning{background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:16px;text-align:center}
.alert-stat--info{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:16px;text-align:center}
.alert-stat--violet{background:#faf5ff;border:1px solid #e9d5ff;border-radius:8px;padding:16px;text-align:center}
.alert-value{font-size:28px;font-weight:700}
/* Dashboard 表格 / 输入 */
.th-left{padding:8px 10px;text-align:left;color:#64748b;font-weight:500}
.th-center{padding:8px 10px;text-align:center;color:#64748b;font-weight:500}
.tfoot{padding:10px;border-top:2px solid #e2e8f0;margin-top:4px}
.dash-input{width:100%;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px}

/* ===== P1-#4 Batch B: JS 渲染区补充工具类 ===== */
.flex-1{flex:1}.flex-col{flex-direction:column}.gap-4{gap:4px}
.text-9{font-size:9px}.text-10{font-size:10px}.text-16{font-size:16px}
.lh-1{line-height:1}.lh-12{line-height:1.2}
.c-white{color:#fff}.break-all{word-break:break-all}
.p-7-10{padding:7px 10px}
.bb-1-muted{border-bottom:1px solid #f1f5f9}
.ml-8{margin-left:8px}
.justify-between{justify-content:space-between}.items-start{align-items:flex-start}.nowrap{white-space:nowrap}

/* ─── 通用弹窗 / 下拉（替代内联实现，统一风格） ─── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000; }
.modal-box { background: #fff; max-width: 460px; width: 92%; margin: 12% auto; padding: 24px; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.15); }
.modal-box h3 { margin: 0 0 16px; font-size: 16px; }
.dropdown-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.12); z-index: 100; min-width: 180px; overflow: hidden; }
.dropdown-menu button, .dropdown-menu a { width: 100%; text-align: left; padding: 8px 14px; border: none; background: none; cursor: pointer; font-size: 13px; color: #374151; text-decoration: none; display: block; }
.dropdown-menu button:hover, .dropdown-menu a:hover { background: #f8fafc; }

/* P1-#4 global utility classes (auto-generated) */
.u-background-0891b2 { background:#0891b2; }
.u-background-7c3aed { background:#7c3aed; }
.u-background-ca8a04 { background:#ca8a04; }
.u-background-f1f5f9 { background:#f1f5f9; }
.u-background-fff { background:#fff; }
.u-border-1px-solid--d1d5db { border:1px solid #d1d5db; }
.u-border-1px-solid--e2e8f0 { border:1px solid #e2e8f0; }
.u-border-bottom-1px-solid--e2e8f0 { border-bottom:1px solid #e2e8f0; }
.u-border-bottom-1px-solid--e5e7eb { border-bottom:1px solid #e5e7eb; }
.u-border-bottom-2px-solid--e5e7eb { border-bottom:2px solid #e5e7eb; }
.u-border-color-0891b2 { border-color:#0891b2; }
.u-border-color-7c3aed { border-color:#7c3aed; }
.u-border-color-ca8a04 { border-color:#ca8a04; }
.u-border-color-fca5a5 { border-color:#fca5a5; }
.u-border-color-fde68a { border-color:#fde68a; }
.u-border-left-4px-solid--ea580c { border-left:4px solid #ea580c; }
.u-border-none { border:none; }
.u-border-radius-8px { border-radius:8px; }
.u-border-top-1px-solid--e2e8f0 { border-top:1px solid #e2e8f0; }
.u-color-059669 { color:#059669; }
.u-color-1e293b { color:#1e293b; }
.u-color-1e40af { color:#1e40af; }
.u-color-334155 { color:#334155; }
.u-color-6b7280 { color:#6b7280; }
.u-color-888 { color:#888; }
.u-color-999 { color:#999; }
.u-color-9a3412 { color:#9a3412; }
.u-color-9ca3af { color:#9ca3af; }
.u-color-c2410c { color:#c2410c; }
.u-color-ccc { color:#ccc; }
.u-color-inherit { color:inherit; }
.u-display-contents { display:contents; }
.u-display-flex { display:flex; }
.u-display-grid { display:grid; }
.u-display-inline { display:inline; }
.u-display-inline-block { display:inline-block; }
.u-flex-1 { flex:1; }
.u-font-size-11px { font-size:11px; }
.u-font-size-18px { font-size:18px; }
.u-font-size-20px { font-size:20px; }
.u-font-size-24px { font-size:24px; }
.u-font-size-32px { font-size:32px; }
.u-font-size-48px { font-size:48px; }
.u-font-size-4rem { font-size:4rem; }
.u-font-weight-800 { font-weight:800; }
.u-gap-0 { gap:0; }
.u-gap-10px { gap:10px; }
.u-grid-column-1--1 { grid-column:1/-1; }
.u-grid-template-columns-repeat-4-1fr { grid-template-columns:repeat(4,1fr); }
.u-height-100 { height:100%; }
.u-justify-content-center { justify-content:center; }
.u-justify-content-flex-end { justify-content:flex-end; }
.u-margin-0 { margin:0; }
.u-margin-0-0-16px { margin:0 0 16px; }
.u-margin-0-auto { margin:0 auto; }
.u-margin-3px-0-0 { margin:3px 0 0; }
.u-margin-4px-0-12px { margin:4px 0 12px; }
.u-margin-bottom-0 { margin-bottom:0; }
.u-margin-bottom-10px { margin-bottom:10px; }
.u-margin-bottom-14px { margin-bottom:14px; }
.u-margin-bottom-20px { margin-bottom:20px; }
.u-margin-bottom-6px { margin-bottom:6px; }
.u-margin-left-12px { margin-left:12px; }
.u-margin-left-4px { margin-left:4px; }
.u-margin-left-6px { margin-left:6px; }
.u-margin-left-auto { margin-left:auto; }
.u-margin-top-20px { margin-top:20px; }
.u-max-height-500px { max-height:500px; }
.u-max-width-1100px { max-width:1100px; }
.u-max-width-200px { max-width:200px; }
.u-max-width-640px { max-width:640px; }
.u-max-width-700px { max-width:700px; }
.u-max-width-800px { max-width:800px; }
.u-max-width-900px { max-width:900px; }
.u-max-width-960px { max-width:960px; }
.u-opacity-0-9 { opacity:0.9; }
.u-opacity-4 { opacity:.4; }
.u-overflow-hidden { overflow:hidden; }
.u-overflow-x-auto { overflow-x:auto; }
.u-overflow-y-auto { overflow-y:auto; }
.u-padding-10px-20px { padding:10px 20px; }
.u-padding-10px-32px { padding:10px 32px; }
.u-padding-12px-16px { padding:12px 16px; }
.u-padding-14px { padding:14px; }
.u-padding-16px-20px { padding:16px 20px; }
.u-padding-2px-6px { padding:2px 6px; }
.u-padding-4px-12px { padding:4px 12px; }
.u-padding-4px-8px { padding:4px 8px; }
.u-padding-60px { padding:60px; }
.u-padding-6px-10px { padding:6px 10px; }
.u-padding-6px-12px { padding:6px 12px; }
.u-padding-8px { padding:8px; }
.u-padding-8px-12px { padding:8px 12px; }
.u-padding-8px-14px-6px { padding:8px 14px 6px; }
.u-padding-9px-28px { padding:9px 28px; }
.u-padding-left-36px { padding-left:36px; }
.u-padding-right-12px { padding-right:12px; }
.u-padding-top-16px { padding-top:16px; }
.u-padding-top-8px { padding-top:8px; }
.u-pointer-events-none { pointer-events:none; }
.u-position-relative { position:relative; }
.u-resize-vertical { resize:vertical; }
.u-text-align-left { text-align:left; }
.u-text-align-right { text-align:right; }
.u-text-overflow-ellipsis { text-overflow:ellipsis; }
.u-white-space-pre-wrap { white-space:pre-wrap; }
.u-width-100px { width:100px; }
.u-width-120px { width:120px; }
.u-width-130px { width:130px; }
.u-width-140px { width:140px; }
.u-width-160px { width:160px; }
.u-width-32px { width:32px; }
.u-width-36px { width:36px; }
.u-width-40px { width:40px; }
.u-width-60px { width:60px; }
.u-width-80px { width:80px; }
.u-width-90px { width:90px; }
.u-width-auto { width:auto; }

/* P0-#3 form-save spinner */
.btn-loading { pointer-events: none; opacity: .65; position: relative; }
.btn-loading::after {
  content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #cbd5e1; border-top-color: #fff;
  animation: spin .6s linear infinite;
  margin-left: 8px; vertical-align: -2px;
}
.btn-loading--dark::after { border-color: #94a3b8; border-top-color: #fff; }


/* ═════════════════════════════════════════════════════════════
   Phase 5: 看板增强 — 周期切换 Tab + 趋势箭头
   ═════════════════════════════════════════════════════════════ */

/* ── 周期切换 Tab ── */
.period-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.period-tab {
  padding: 5px 15px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  background: #f1f5f9;
  color: #475569;
  border: none;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.period-tab:hover { background: #e2e8f0; }
.period-tab--active {
  background: var(--primary, #3b82f6);
  color: #fff;
}

/* ── 趋势箭头 ── */
.trend-info {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
.trend-up   { color: #16a34a; }
.trend-down { color: #dc2626; }
.trend-flat { color: #94a3b8; }

/* ── 周期统计附行（L2C 数字下方） ── */
.period-sub-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.period-sub-item {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
}

/* ═════════════════════════════════════════════════════════════
   Phase 6: KPI 趋势图容器样式
   ═════════════════════════════════════════════════════════════ */

.kpi-charts-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.mini-chart-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 4px 4px;
}
.mini-chart {
  width: 100%;
  height: 100px;
}
.mini-chart-label {
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .kpi-charts-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .kpi-charts-row {
    grid-template-columns: 1fr;
  }
}