/* ============================================================
   促销团队管理后台 · admin.css v2（华润三九 OTC）
   ------------------------------------------------------------
   与 v1 类名完全兼容，可直接替换。令牌体系与 H5 端 style.css 一致。
   核心变化：
     1. 补齐 v1 完全缺失的响应式（v1 只有一条 1100px 断点，手机/平板不可用）
        < 768px  顶部横向滚动导航 + 表格横向滚动
        ≥ 992px  固定侧栏（带文字标签）
        ≥ 1200px 宽版布局
     2. 语义色改用 700 级，徽章全部 ≥4.5:1
     3. 15 种字号 → 11 级刻度
     4. 键盘焦点可见 / 减弱动效 / dvh
   ============================================================ */

/* ============================================================
   1. 设计令牌（与 H5 端保持一致）
   ============================================================ */
:root {
  /* 主色 */
  --c-primary-50:  #F0F6FF;
  --c-primary-100: #E0EBFE;
  --c-primary-200: #C7DBFC;
  --c-primary-300: #A3C2F8;
  --c-primary-500: #3B7BE0;
  --c-primary-600: #2B6DE5;
  --c-primary-700: #1E5FC9;
  --c-primary-800: #164BAD;
  --c-primary-900: #133C8A;

  /* 中性 */
  --c-ink-900: #101828;  --c-ink-800: #1D2939;  --c-ink-700: #344054;
  --c-ink-600: #475467;  --c-ink-500: #667085;  --c-ink-400: #86909C;
  --c-ink-300: #D0D5DD;  --c-ink-200: #E4E7EC;  --c-ink-100: #F2F4F7;
  --c-ink-50:  #F9FAFB;

  /* 侧栏深色 */
  --c-nav-bg:   #16283F;
  --c-nav-text: #C9D6E8;   /* 10.12:1 on --c-nav-bg */

  /* 语义 */
  --c-success-700: #15803D; --c-success-600: #16A34A; --c-success-50: #F0FDF4;
  --c-warning-700: #B45309; --c-warning-600: #F59E0B; --c-warning-50: #FFFBEB;
  --c-danger-700:  #B42318; --c-danger-600:  #E5484D; --c-danger-50:  #FEF3F2;
  --c-violet-700:  #6D28D9; --c-violet-50:  #F5F3FF;
  --c-teal-700:    #0F766E; --c-teal-50:    #F0FDFA;

  /* 底色 */
  --bg: #F4F6FA;
  --card: #FFFFFF;

  /* 字体刻度 */
  --fs-micro:   10px;
  --fs-note:    11px;
  --fs-caption: 12px;
  --fs-sm:      13px;
  --fs-base:    14px;
  --fs-lg:      15px;
  --fs-title-sm:17px;
  --fs-title:   20px;
  --fs-title-lg:24px;
  --fs-display: 28px;

  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-base:  1.6;

  /* 间距 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* 圆角 */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px;
  --r-xl: 14px; --r-2xl: 16px; --r-full: 999px;

  /* 阴影 */
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-2: 0 2px 8px rgba(31, 55, 110, .06);
  --sh-3: 0 8px 24px rgba(15, 35, 90, .18);
  --sh-brand: 0 4px 14px rgba(43, 109, 229, .28);

  /* 动效 */
  --dur-fast: .15s; --dur: .22s; --dur-slow: .3s;
  --ease-out: cubic-bezier(.32, .72, .34, 1);
  --press: scale(.96);

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC",
               "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;

  /* 布局 */
  --sidebar-w: 0px;        /* 由断点覆盖 */
  --topbar-h: 56px;

  /* ---- v1 变量别名（向后兼容） ---- */
  --primary:      var(--c-primary-600);
  --primary-deep: var(--c-primary-800);
  --primary-soft: var(--c-primary-100);
  --line:         var(--c-ink-300);
  --line-soft:    var(--c-ink-200);
  --text:         var(--c-ink-900);
  --text-sub:     var(--c-ink-600);
  /* ★ admin-console.js 有 2 处内联 style="color:var(--gray)"，但 admin.css
       从未定义 --gray，这两处文字颜色一直是继承来的。此处补上定义。
       注意：--gray 取 ink-500（4.97:1），不是原始的 #8A94A6（3.06:1 不达标）。 */
  --gray:         var(--c-ink-500);
  --gray-soft:    var(--c-ink-100);
  --green:        var(--c-success-700);
  --red:          var(--c-danger-700);
  --amber:        var(--c-warning-700);
  --shadow:       var(--sh-1);
}

/* ============================================================
   2. 基础
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  background: var(--bg);
  color: var(--c-ink-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
body { min-height: 100vh; min-height: 100dvh; }

h1, h2, h3, h4 { font-weight: 700; line-height: var(--lh-tight); color: var(--c-ink-900); }
h1 { font-size: var(--fs-title); }
h2 { font-size: var(--fs-title-sm); }
h3 { font-size: var(--fs-lg); }
a { color: var(--c-primary-700); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--c-primary-700); outline-offset: 2px; border-radius: var(--r-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card:hover, .btn:hover { transform: none; }
}

/* 数字列对齐不抖动 */
.tbl .num, .stat .v, .mono, .info-grid .v, .pager { font-variant-numeric: tabular-nums; }


/* ============================================================
   3. 登录层
   ============================================================ */
.login-layer {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--c-primary-800), var(--c-primary-600));
  padding: var(--sp-4);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.login-box {
  width: 100%; max-width: 400px;
  background: #fff; border-radius: var(--r-2xl);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  box-shadow: 0 20px 60px rgba(15, 35, 90, .3);
  text-align: center;
}
.login-logo {
  width: 56px; height: 56px; border-radius: var(--r-2xl);
  background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-800));
  color: #fff; font-size: var(--fs-title-lg); font-weight: 800;
  margin: 0 auto var(--sp-3);
  display: flex; align-items: center; justify-content: center;
}
.login-box h1 { font-size: var(--fs-title); }
.login-sub { font-size: var(--fs-caption); color: var(--c-ink-600); margin: var(--sp-2) 0 var(--sp-5); }
.form-row { text-align: left; margin-bottom: var(--sp-3); }
.form-row label { display: block; font-size: var(--fs-caption); color: var(--c-ink-600); margin-bottom: var(--sp-1); font-weight: 600; }
.form-row input {
  width: 100%; min-height: 46px;
  border: 1.5px solid var(--c-ink-400); border-radius: var(--r-md);
  padding: 0 var(--sp-3); font-size: 16px; outline: none;
  color: var(--c-ink-900); background: #fff;
  transition: border var(--dur), box-shadow var(--dur);
}
.form-row input::placeholder { color: var(--c-ink-500); }
.form-row input:focus { border-color: var(--c-primary-700); box-shadow: 0 0 0 3px var(--c-primary-100); }
.login-tip {
  color: var(--c-danger-700); font-size: var(--fs-caption); font-weight: 600;
  min-height: 18px; margin: var(--sp-2) 0 var(--sp-1); line-height: var(--lh-base);
}
.login-tip:not(:empty) { padding: var(--sp-2) var(--sp-3); background: var(--c-danger-50); border-radius: var(--r-sm); margin-bottom: var(--sp-3); }
.login-foot { font-size: var(--fs-caption); color: var(--c-ink-600); border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-2); line-height: var(--lh-base); }

.login-hint-box {
  margin-top: var(--sp-4);
  background: var(--c-warning-50);
  border: 1.5px solid #F5C36E;
  border-radius: var(--r-md);
  padding: var(--sp-3);
  text-align: left;
}
.login-hint-title { font-size: var(--fs-caption); font-weight: 700; color: var(--c-warning-700); margin-bottom: var(--sp-2); }
/* v1 里 .login-hint-body 只有类名没有样式（纯包裹层），此处补上 */
.login-hint-body { display: block; }
.login-hint-row { font-size: var(--fs-note); color: #6A4500; line-height: 1.75; display: flex; gap: var(--sp-2); }
.login-hint-row + .login-hint-row { margin-top: var(--sp-1); }
.login-hint-key {
  flex-shrink: 0; background: var(--c-warning-700); color: #FFF;
  border-radius: var(--r-xs); padding: 1px var(--sp-2);
  font-size: var(--fs-micro); font-weight: 700;
  height: 18px; line-height: 16px; align-self: flex-start; margin-top: 2px;
}
.login-hint-val { flex: 1; min-width: 0; }
.login-hint-val code {
  background: #FFE9B8; color: #8A5200; padding: 1px 5px; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-note); font-weight: 700;
  overflow-wrap: anywhere;
}
.login-hint-val b { color: var(--c-warning-700); }

.login-dev-toggle {
  display: block; width: 100%; margin-top: var(--sp-4); min-height: 44px;
  background: transparent; border: 1px dashed var(--c-primary-200); border-radius: var(--r-md);
  color: var(--c-primary-700); font-size: var(--fs-caption); padding: var(--sp-3);
  cursor: pointer; text-align: left; font-family: inherit;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.login-dev-toggle:hover { background: var(--c-primary-50); border-color: var(--c-primary-700); }
.login-dev-toggle:active { transform: scale(.985); }
.login-dev-toggle span { font-weight: 700; margin-right: var(--sp-1); }

.login-dev-panel {
  margin-top: var(--sp-3); padding: var(--sp-3);
  background: var(--c-primary-50); border: 1px solid var(--c-primary-200);
  border-radius: var(--r-md); max-height: 360px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.login-dev-title { font-size: var(--fs-note); color: var(--c-ink-600); margin-bottom: var(--sp-3); line-height: var(--lh-base); }
.login-dev-title code {
  background: var(--c-primary-100); color: var(--c-primary-700);
  padding: 1px var(--sp-2); border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-note);
}
.login-dev-section { margin-bottom: var(--sp-3); }
.login-dev-section:last-child { margin-bottom: 0; }
.login-dev-h {
  font-size: var(--fs-note); font-weight: 700; color: var(--c-primary-800);
  margin-bottom: var(--sp-2); padding-bottom: var(--sp-1);
  border-bottom: 1px dashed var(--c-primary-200);
}
.login-dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-2); }
.login-dev-grid button {
  background: #fff; border: 1.5px solid var(--c-ink-200); border-radius: var(--r-sm);
  min-height: 40px; padding: var(--sp-2); font-size: var(--fs-caption); color: var(--c-ink-700);
  cursor: pointer; transition: all var(--dur-fast); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: inherit;
}
.login-dev-grid button:hover { border-color: var(--c-primary-700); background: var(--c-primary-50); }
.login-dev-grid button:active { transform: var(--press); }
.login-dev-grid button.super {
  background: #FFF5E6; border-color: var(--c-warning-600);
  font-weight: 700; color: var(--c-warning-700);
}


/* ============================================================
   4. 框架 · 移动优先
   ============================================================ */
.layout { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  background: var(--c-nav-bg); color: var(--c-nav-text);
  display: flex; flex-direction: column;
  position: static; flex: none;
}
/* 移动端：品牌行 + 横向滚动导航 */
.brand { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); }
.brand-logo {
  width: 38px; height: 38px; border-radius: var(--r-lg); flex: none;
  background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-800));
  color: #fff; font-weight: 800; font-size: var(--fs-lg);
  display: flex; align-items: center; justify-content: center;
}
.brand-text strong { color: #fff; font-size: var(--fs-base); display: block; line-height: 1.3; }
.brand-text small { font-size: var(--fs-note); color: #8FA3BF; line-height: 1.4; }

.nav {
  display: flex; gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-3);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 42px; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); color: var(--c-nav-text);
  cursor: pointer; font-size: var(--fs-sm);
  white-space: nowrap; flex: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nav-item i { font-style: normal; font-size: var(--fs-lg); line-height: 1; }
.nav-item:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.nav-item.active { background: var(--c-primary-600); color: #fff; font-weight: 600; }

.side-foot {
  display: flex; gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-3);
}
.side-foot .btn { flex: 1; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  min-height: var(--topbar-h); background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  position: sticky; top: 0; z-index: 50;
  flex-wrap: wrap;
}
.crumb { font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink-900); }
.who { font-size: var(--fs-sm); color: var(--c-ink-600); margin-left: auto; }
.who b { color: var(--c-ink-900); }
.content { padding: var(--sp-4) var(--sp-4) var(--sp-10); flex: 1; }

/* 顶栏地域胶囊（v1 只给了 class 没写样式，此处补齐） */
.region-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 34px; padding: 0 var(--sp-3);
  background: var(--c-primary-50);
  border: 1.5px solid var(--c-primary-200);
  color: var(--c-primary-700);
  border-radius: var(--r-full);
  font-size: var(--fs-caption); font-weight: 600;
  cursor: pointer; transition: all var(--dur-fast);
  white-space: nowrap;
}
.region-chip:hover { background: var(--c-primary-100); border-color: var(--c-primary-700); }
.region-chip:active { transform: var(--press); }


/* ============================================================
   5. 通用组件
   ============================================================ */
.btn {
  border: none; border-radius: var(--r-md); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; font-family: inherit;
  min-height: 40px; padding: var(--sp-2) var(--sp-4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  transition: background var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
  background: var(--c-ink-100); color: var(--c-ink-700);
}
.btn:hover { background: var(--c-ink-200); }
.btn:active { transform: var(--press); }
.btn.primary { background: var(--c-primary-600); color: #fff; box-shadow: var(--sh-brand); }
.btn.primary:hover { background: var(--c-primary-800); }
.btn.ghost { background: transparent; border: 1.5px solid var(--line); color: var(--c-ink-600); }
.btn.ghost:hover { border-color: var(--c-primary-700); color: var(--c-primary-700); background: var(--c-primary-50); }
.btn.danger { background: var(--c-danger-50); color: var(--c-danger-700); }
.btn.danger:hover { background: #FCE7E6; }
.btn.block { width: 100%; padding: var(--sp-3); font-size: var(--fs-lg); }
.btn.sm { min-height: 34px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-caption); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

.card {
  background: var(--card); border-radius: var(--r-xl);
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.card-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.card-title h3 { font-size: var(--fs-lg); }
.card-title .sub { font-size: var(--fs-caption); color: var(--c-ink-600); font-weight: 400; }

/* 表格：窄屏横向滚动，不挤压列宽 */
.tbl { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl thead, .tbl tbody { display: table; width: 100%; min-width: max-content; }
.tbl th {
  text-align: left; font-size: var(--fs-caption); color: var(--c-ink-600); font-weight: 600;
  padding: var(--sp-2) var(--sp-3); border-bottom: 1.5px solid var(--line);
  white-space: nowrap; background: var(--c-ink-50); position: sticky; top: 0; z-index: 1;
}
.tbl td {
  padding: var(--sp-3); border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); vertical-align: middle; color: var(--c-ink-700);
}
.tbl tr:hover td { background: var(--c-primary-50); }
.tbl .num { text-align: right; }

/* 状态徽章（颜色 + 文字双通道） */
.badge {
  display: inline-block; padding: 3px var(--sp-2);
  border-radius: var(--r-xs); font-size: var(--fs-caption); font-weight: 600;
  line-height: 1.4; white-space: nowrap;
}
.badge.pending   { background: var(--c-ink-100);     color: var(--c-ink-600); }      /* 6.98:1 */
.badge.running   { background: var(--c-primary-100); color: var(--c-primary-700); }  /* 4.95:1 */
.badge.reviewing { background: var(--c-warning-50);  color: var(--c-warning-700); }  /* 4.84:1 */
.badge.passed    { background: var(--c-success-50);  color: var(--c-success-700); }  /* 4.79:1 */
.badge.rejected  { background: var(--c-danger-50);   color: var(--c-danger-700); }   /* 6.05:1 */
.badge.on        { background: var(--c-success-50);  color: var(--c-success-700); }
.badge.off       { background: var(--c-ink-100);     color: var(--c-ink-500); text-decoration: line-through; }
.badge.role-m    { background: var(--c-violet-50);   color: var(--c-violet-700); }
.badge.role-p    { background: var(--c-primary-100); color: var(--c-primary-700); }

/* 概览统计：窄屏自动落 2 列 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-4); box-shadow: var(--sh-1); }
.stat .k { font-size: var(--fs-caption); color: var(--c-ink-600); }
.stat .v { font-size: var(--fs-display); font-weight: 800; margin-top: var(--sp-1); line-height: 1.15; color: var(--c-ink-900); }
.stat .v.blue  { color: var(--c-primary-700); }
.stat .v.green { color: var(--c-success-700); }
.stat .v.red   { color: var(--c-danger-700); }
.stat .v.amber { color: var(--c-warning-700); }

/* 花名册双栏 */
.roster-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; }
.mono { font-family: var(--font-mono); font-size: var(--fs-caption); }
.invite-code { font-family: var(--font-mono); font-size: var(--fs-base); font-weight: 700; letter-spacing: .5px; color: var(--c-primary-700); }
.hint { font-size: var(--fs-caption); color: var(--c-ink-600); line-height: 1.7; }
.mini-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.mini-form textarea {
  width: 100%; border: 1.5px solid var(--c-ink-400); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); font-size: 16px; font-family: inherit;
  resize: vertical; color: var(--c-ink-900); line-height: var(--lh-base);
}
.mini-form textarea::placeholder { color: var(--c-ink-500); }
.mini-form textarea:focus { outline: none; border-color: var(--c-primary-700); box-shadow: 0 0 0 3px var(--c-primary-100); }

/* 筛选条 */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin-bottom: var(--sp-4); }
.f-item { min-width: 0; }
.f-item label { display: block; font-size: var(--fs-note); color: var(--c-ink-600); margin-bottom: var(--sp-1); font-weight: 600; }
.f-item select, .f-item input {
  min-height: 40px; border: 1.5px solid var(--c-ink-400); border-radius: var(--r-sm);
  padding: 0 var(--sp-3); font-size: 16px; background: #fff; outline: none;
  min-width: 100px; color: var(--c-ink-900); font-family: inherit;
}
.f-item input::placeholder { color: var(--c-ink-500); }
.f-item select:focus, .f-item input:focus { border-color: var(--c-primary-700); box-shadow: 0 0 0 3px var(--c-primary-100); }
.f-item input[type=date] { min-width: 140px; }

select {
  -webkit-appearance: none; appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-2) center; background-size: 13px;
  padding-right: 30px; cursor: pointer;
}
select:focus { outline: none; }

.pager { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--c-ink-600); flex-wrap: wrap; }


/* ============================================================
   6. 弹层
   ============================================================ */
.modal-mask {
  position: fixed; inset: 0; background: rgba(16, 24, 40, .52); z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-slow) ease, visibility 0s linear var(--dur-slow);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: 0;
}
.modal-mask.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-slow) ease; }
.modal {
  background: #fff; border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  width: 100%; max-height: 88vh; max-height: 88dvh; overflow-y: auto;
  padding: var(--sp-5) var(--sp-4);
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  transform: translateY(4%) scale(.99); opacity: .4;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) ease;
  box-shadow: 0 -10px 44px rgba(15, 35, 90, .2);
}
.modal-mask.show .modal { transform: none; opacity: 1; }
.modal h2 { font-size: var(--fs-title-sm); display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.modal .close {
  margin-left: auto; background: var(--c-ink-100); border: none;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: var(--fs-title-sm); cursor: pointer; color: var(--c-ink-600);
  display: flex; align-items: center; justify-content: center; flex: none;
  transition: background var(--dur-fast);
}
.modal .close:hover { background: var(--c-ink-200); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3) var(--sp-5); margin: var(--sp-4) 0; }
.info-grid .k { font-size: var(--fs-note); color: var(--c-ink-600); }
.info-grid .v { font-size: var(--fs-sm); font-weight: 600; margin-top: 2px; color: var(--c-ink-900); }
.sec-title {
  font-size: var(--fs-base); font-weight: 700; margin: var(--sp-5) 0 var(--sp-3);
  padding-left: var(--sp-2); border-left: 3px solid var(--c-primary-600);
  color: var(--c-ink-900);
}
.photos { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.photo-box { width: 150px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--c-ink-100); position: relative; }
.photo-box img { width: 100%; height: 112px; object-fit: cover; display: block; }
.photo-box .ph-cap { font-size: var(--fs-note); padding: var(--sp-1) var(--sp-2); color: var(--c-ink-600); background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-box img:not([src]) { opacity: 0; }
.trail { border-left: 2px solid var(--c-ink-200); margin-left: var(--sp-1); padding-left: var(--sp-4); }
.trail li { list-style: none; font-size: var(--fs-caption); color: var(--c-ink-600); padding: var(--sp-1) 0; position: relative; line-height: var(--lh-base); }
.trail li::before {
  content: ''; position: absolute; left: -21px; top: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-primary-100); border: 2px solid var(--c-primary-600);
}
.trail li b { color: var(--c-ink-900); font-weight: 600; }


/* ============================================================
   7. Toast / 加载 / 空态 / 进度条
   ============================================================ */
.toast {
  position: fixed; top: var(--sp-5); left: 50%;
  transform: translateX(-50%) translateY(-80px);
  background: var(--c-ink-900); color: #fff;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md);
  font-size: var(--fs-sm); z-index: 400; opacity: 0;
  transition: all var(--dur); pointer-events: none; max-width: 80vw;
  box-shadow: var(--sh-3); text-align: center; line-height: var(--lh-snug);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--c-danger-700); }
.toast.ok { background: var(--c-success-700); }
.boot-loading {
  position: fixed; inset: 0; z-index: 400; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-600); font-size: var(--fs-base);
}
.boot-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--c-primary-100); border-top-color: var(--c-primary-600);
  animation: spin .9s linear infinite; margin-right: var(--sp-3);
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; color: var(--c-ink-500); padding: var(--sp-8) 0; font-size: var(--fs-sm); line-height: var(--lh-base); }
.bar { height: 8px; border-radius: var(--r-full); background: var(--c-primary-100); overflow: hidden; margin-top: var(--sp-1); }
.bar i { display: block; height: 100%; background: var(--c-primary-600); border-radius: var(--r-full); }


/* ============================================================
   8. 物料管理
   ============================================================ */
.pm-thumb {
  width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--c-primary-50), var(--c-primary-100));
  display: flex; align-items: center; justify-content: center;
  color: var(--c-primary-700); font-weight: 700; font-size: var(--fs-base); flex-shrink: 0;
}
.pm-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-thumb.big { width: 84px; height: 84px; border-radius: var(--r-lg); font-size: var(--fs-title-lg); border: 1.5px dashed var(--line); }
.pm-slogan { font-size: var(--fs-note); color: var(--c-primary-700); margin-top: 2px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-spec-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pm-spec-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--c-primary-100); color: var(--c-primary-700);
  font-size: var(--fs-caption); font-weight: 600;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm);
}
.pm-spec-tag b { cursor: pointer; font-size: var(--fs-lg); line-height: 1; opacity: .7; padding: 0 2px; }
.pm-spec-tag b:hover { opacity: 1; }
.pm-spec-empty { font-size: var(--fs-caption); color: var(--c-ink-500); padding: 2px 0 var(--sp-2); }
.pm-spec-add { display: flex; gap: var(--sp-2); }
.pm-spec-add input { min-width: 0; }


/* ============================================================
   9. 数据概览 · 多维度组合筛选
   ============================================================ */
.aof-card { padding: var(--sp-4); }
.aof-bar { margin-bottom: 0; }
.aof-bar .btn { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }

.aof-echo { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line-soft); }
.aof-echochip {
  display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 260px;
  background: var(--c-primary-100); color: var(--c-primary-900);
  border-radius: var(--r-full); padding: 5px 6px 5px var(--sp-3);
  font-size: var(--fs-caption); font-weight: 600;
}
.aof-echochip i {
  font-style: normal; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(30, 95, 201, .16);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-base); line-height: 1; cursor: pointer;
}
.aof-echochip i:hover { background: rgba(30, 95, 201, .3); }
.aof-echoclear { align-self: center; font-size: var(--fs-caption); color: var(--c-danger-700); padding: var(--sp-1) var(--sp-2); cursor: pointer; font-weight: 600; }
.aof-echoclear:hover { text-decoration: underline; }

.aof-grp { padding: var(--sp-4) 0; border-top: 1px dashed var(--line-soft); }
.aof-grp:first-of-type { border-top: none; padding-top: var(--sp-1); }
.aof-grp-h { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.aof-grp-h b { font-size: var(--fs-sm); }
.aof-grp-n { margin-left: auto; font-size: var(--fs-note); color: var(--c-ink-600); }
.aof-sub { font-size: var(--fs-note); color: var(--c-ink-600); margin: var(--sp-3) 0 var(--sp-2); }
.aof-search {
  width: 100%; min-height: 40px; border: 1.5px solid var(--c-ink-400);
  border-radius: var(--r-sm); padding: 0 var(--sp-3); font-size: 16px;
  outline: none; margin-bottom: var(--sp-3); font-family: inherit;
  color: var(--c-ink-900); background: #fff;
}
.aof-search::placeholder { color: var(--c-ink-500); }
.aof-search:focus { border-color: var(--c-primary-700); box-shadow: 0 0 0 3px var(--c-primary-100); }
.aof-opts { max-height: 210px; overflow-y: auto; padding: 2px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.aof-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.aof-chip {
  border: 1.5px solid var(--c-ink-200); background: #fff; border-radius: var(--r-full);
  min-height: 36px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm);
  cursor: pointer; color: var(--c-ink-600); font-family: inherit;
  transition: all var(--dur-fast);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aof-chip:hover { border-color: var(--c-primary-700); color: var(--c-primary-700); }
.aof-chip.on { background: var(--c-primary-600); color: #fff; border-color: var(--c-primary-600); font-weight: 600; }
.aof-none { font-size: var(--fs-caption); color: var(--c-ink-600); padding: var(--sp-2) 2px; line-height: 1.7; }
.aof-more { font-size: var(--fs-note); color: var(--c-ink-600); padding: var(--sp-2) 2px 2px; }

.aof-foot {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: var(--sp-3); align-items: center;
  margin: var(--sp-4) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5));
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.aof-foot .btn { flex: 1; }


/* ============================================================
   10. 断点：渐进增强（移动优先）
   ============================================================ */

/* --- ≥ 768px 平板 --- */
@media (min-width: 768px) {
  .content { padding: var(--sp-5) var(--sp-6) var(--sp-10); }
  .topbar { padding: 0 var(--sp-6); flex-wrap: nowrap; }
  .card { padding: var(--sp-5) var(--sp-6); }
  .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); }
  .modal-mask { align-items: center; padding: var(--sp-5); }
  .modal { border-radius: var(--r-2xl); max-width: min(760px, 94vw); padding: var(--sp-6); transform: translateY(14px) scale(.97); box-shadow: 0 20px 60px rgba(15, 35, 90, .24); }
  .modal-mask.show .modal { transform: none; }
  .aof-foot { margin: var(--sp-4) calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)); padding: var(--sp-3) var(--sp-6); }
  .roster-grid { grid-template-columns: 1fr 320px; }
}

/* --- ≥ 992px 笔记本：固定侧栏 --- */
@media (min-width: 992px) {
  :root { --sidebar-w: 200px; }
  .layout { flex-direction: row; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); }
  .brand { padding: var(--sp-5) var(--sp-4) var(--sp-3); }
  .nav { flex-direction: column; overflow: visible; padding: var(--sp-2) var(--sp-3); flex: 1; }
  .nav-item { width: 100%; min-height: 44px; font-size: var(--fs-base); }
  .nav-item + .nav-item { margin-top: var(--sp-1); }
  .side-foot { padding: var(--sp-3) var(--sp-3) var(--sp-4); flex-direction: column; }
  .main { margin-left: var(--sidebar-w); }
  .topbar { padding: 0 var(--sp-6); }
  .roster-grid { grid-template-columns: 1fr 340px; }
  .tbl { display: table; overflow: visible; }
  .tbl thead, .tbl tbody { display: table-row-group; min-width: 0; }
  .tbl thead { display: table-header-group; }
  .tbl thead tr, .tbl tbody tr { display: table-row; }
  .tbl th, .tbl td { display: table-cell; }
}

/* --- ≥ 1200px 桌面：宽版 --- */
@media (min-width: 1200px) {
  :root { --sidebar-w: 224px; }
  .content { padding: var(--sp-6) var(--sp-8) var(--sp-10); }
  .stats { gap: var(--sp-5); }
}

/* --- ≥ 1440px 大屏：限制行宽，避免超宽表格阅读困难 --- */
@media (min-width: 1440px) {
  .content { max-width: 1600px; }
}

/* --- 超小屏兜底 --- */
@media (max-width: 480px) {
  .content { padding: var(--sp-3) var(--sp-3) var(--sp-8); }
  .card { padding: var(--sp-3); border-radius: var(--r-lg); }
  .brand { padding: var(--sp-2) var(--sp-3); }
  .nav { padding: 0 var(--sp-2) var(--sp-2); }
  .nav-item { padding: var(--sp-2); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .stat { padding: var(--sp-3); }
  .stat .v { font-size: var(--fs-title-lg); }
  .aof-echochip { max-width: 100%; }
  .filters { gap: var(--sp-2); }
  .f-item { flex: 1 1 46%; }
  .f-item select, .f-item input { width: 100%; min-width: 0; }
}

/* ============================================================
   11. 兼容补全：JS 运行时生成、旧 CSS 从未定义的类
   ------------------------------------------------------------
   下列类名由 admin-console.js / cloud.js 动态生成，旧版
   admin.css 里全都没有对应规则 —— 属于历史遗留缺口，不是本次
   样式替换引入的回归。这里按设计令牌补齐，全部为新增规则，
   不覆盖任何既有选择器。
   ============================================================ */

/* --- 权限不足空态：锁图标 + 标题 + 说明 -------------------
   H5 端 .em-ico / .em-t / .em-s 三件套在 style.css 里有完整
   定义；管理端这里只有 .em-ico / .em-t 靠 JS 内联字号字重撑着，
   .em-s 则完全没有内联样式 —— 是原 admin.css 的真实缺口。
   内联优先级最高，所以下面只补内联没覆盖到的部分（颜色、间距、
   透明度），比例与 H5 端对齐，两端空态观感一致。 */
.em-ico { line-height: 1; margin-bottom: var(--sp-2); opacity: .45; }
.em-t { color: var(--c-ink-600); }
.em-s {
  display: block; max-width: 46ch;
  margin: var(--sp-2) auto 0;
  font-size: var(--fs-caption); line-height: var(--lh-base);
  color: var(--c-ink-500);
}

/* --- 必填标记 <span class="req">*</span> -------------------
   原 CSS 无定义，星号一直跟正文一样是黑色，完全读不出"必填"。
   用 700 级做文字色（白底 6.05:1），不用 600 级（仅 3.91:1）。 */
.req { color: var(--c-danger-700); font-weight: 600; margin-left: 2px; }

/* --- 普通管理员权限复选框 --------------------------------
   仅设置 accent-color，不改宽高：它所在 label 是 flex +
   align-items:flex-start，改尺寸会影响对齐。 */
.emPerm { accent-color: var(--c-primary-600); }

/* --- 产品缩略图无图态 .noimg ------------------------------
   JS 在图片加载失败时给 .pm-thumb 加 .noimg。旧 CSS 里这个类
   没有任何规则，图裂了就露出浏览器默认的破图图标。
   .pm-thumb 是固定 44/84px 定尺寸盒，所以直接 display:none
   不会塌陷布局，底下那层渐变底会自动显出来。 */
.pm-thumb.noimg > img { display: none; }

/* --- 照片签名 URL 失效 .load-fail -------------------------
   admin/cloud.js 在签名链接失效时给 .photo-box 加 .load-fail，
   旧 admin.css 同样没有这条规则，用户只看到一片空白框。
   H5 端已有同名提示，这里对齐，保持两端一致。
   img 用 opacity:0 而非 display:none：.photo-box 靠 img 的内联
   height:112px 撑高，去掉会让整个盒子塌成一条。 */
.photo-box.load-fail > img { opacity: 0; }
.photo-box.load-fail::before {
  content: "照片加载失败";
  position: absolute; left: 0; right: 0; top: 0; height: 112px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); color: var(--c-danger-700);
  background: var(--c-danger-50);
}


/* ============================================================
   12. 内联样式防御层
   ------------------------------------------------------------
   iOS 聚焦自动缩放兜底：admin-console.js 的 #stCsvText 内联了
   font-size:12px，手机上会被 Safari 强制放大。管理端虽以 PC 为主，
   但区域经理有可能用手机临时处理，这里一并兜住。
   ============================================================ */
@media (max-width: 991px) {
  input, select, textarea { font-size: 16px !important; }
}

@media print {
  .sidebar, .topbar, .btn, .pager, .filters { display: none !important; }
  .main { margin-left: 0; }
  .card { box-shadow: none; border: 1px solid var(--c-ink-300); break-inside: avoid; }
  body { background: #fff; }
}

/* ============================================================
   13. 团队看板（达哥 2026-09-16）
   ============================================================ */
.bd-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.bd-tab {
  padding: 9px 20px; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--card);
  cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--gray);
  transition: all .15s; user-select: none;
}
.bd-tab:hover { border-color: var(--c-primary-600); color: var(--c-primary-700); }
.bd-tab.on { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #fff; }
.bd-tab small { font-weight: 400; opacity: .75; font-size: var(--fs-note); }
.bd-tab.bd-add { border-style: dashed; color: var(--c-ink-500); }
.bd-bar { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-sel {
  height: 36px; border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 0 10px; font-size: var(--fs-sm); background: var(--card); color: var(--c-ink-900);
}
.bd-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px; align-items: start;
}
.bd-panel {
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 16px; position: relative; min-width: 0;
}
.bd-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.bd-ph h3 { margin: 0; font-size: var(--fs-base); font-weight: 700; color: var(--c-ink-900); }
.bd-tools { display: flex; gap: 5px; }
.bd-tools button {
  width: 28px; height: 28px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); cursor: pointer; font-size: 13px; line-height: 1;
  color: var(--gray); transition: all .15s;
}
.bd-tools button:hover { border-color: var(--c-primary-600); color: var(--c-primary-700); }
.bd-tools button:last-child:hover { border-color: var(--red); color: var(--red); }
.bd-editing .bd-panel { outline: 2px dashed var(--c-primary-600); outline-offset: 2px; }
.bd-add-panel {
  display: flex; min-height: 140px; cursor: pointer;
  border: 2px dashed var(--line); box-shadow: none; background: #FAFBFF;
  transition: border-color .15s;
}
.bd-add-panel:hover { border-color: var(--c-primary-600); }
.bd-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; min-width: 0; }
.bd-lb {
  flex: none; width: 168px; font-size: var(--fs-sm); color: var(--c-ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-track {
  flex: 1; height: 18px; min-width: 0;
  background: var(--c-primary-100); border-radius: var(--r-full); overflow: hidden;
}
.bd-fill { height: 100%; border-radius: var(--r-full); min-width: 2px; transition: width .3s; }
.bd-val { flex: none; min-width: 72px; text-align: right; font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.bd-val small { display: block; font-weight: 400; color: var(--gray); font-size: var(--fs-note); line-height: 1.4; }
.bd-panel .stats { margin-bottom: -6px; }
.bd-bar .btn { white-space: nowrap; }

/* ---------- 物料管理：卡片头按钮组 + 看板面板包裹层（2026-09-16） ---------- */
.mat-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.bd-body { min-width: 0; }

/* ============================================================
   14. 团队看板 · 通用图表 + 全局筛选条（达哥 2026-09-16 第一期）
   ------------------------------------------------------------
   ① 12 列栅格：面板宽度可选 1/3、1/2、2/3、整行
   ② 全局筛选条：顶部平铺候选值，点选 → 所有面板同步刷新
   ③ 图表容器 / 表格 / 指标卡 / 降级条形图
   ④ 图表配置器弹层：左配置 · 右实时预览（加宽弹层）
   ============================================================ */

/* ---------- ① 栅格与面板宽度 ---------- */
.bd-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bd-panel { grid-column: span 4; }
.bd-panel.w6 { grid-column: span 6; }
.bd-panel.w8 { grid-column: span 8; }
.bd-panel.w12 { grid-column: span 12; }
.bd-add-panel { grid-column: span 4; }
@media (max-width: 1359px) {
  .bd-panel { grid-column: span 6; }
  .bd-panel.w8 { grid-column: span 12; }
  .bd-add-panel { grid-column: span 6; }
}
@media (max-width: 999px) {
  .bd-panel, .bd-panel.w6, .bd-panel.w8, .bd-panel.w12, .bd-add-panel { grid-column: span 12; }
}

/* ---------- ② 全局筛选条 ---------- */
.bd-slicer {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: var(--sp-4); margin-bottom: var(--sp-4); box-shadow: var(--shadow);
}
.bd-sl-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.bd-sl-title {
  font-size: var(--fs-base); font-weight: 700; color: var(--c-ink-900);
  padding-left: var(--sp-2); border-left: 3px solid var(--c-primary-600);
}
.bd-sl-head .btn { margin-left: auto; }
.bd-sl-grp { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 8px 0; border-top: 1px dashed var(--c-ink-200); }
.bd-sl-name {
  flex: none; width: 92px; padding-top: 6px; font-size: var(--fs-sm);
  font-weight: 600; color: var(--c-ink-700); display: flex; align-items: center; gap: 5px;
}
.bd-sl-badge {
  background: var(--c-primary-600); color: #fff; font-size: var(--fs-micro);
  font-weight: 700; border-radius: var(--r-full); padding: 1px 6px;
}
.bd-sl-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bd-sl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 250px; padding: 5px 12px; border-radius: var(--r-full);
  border: 1.5px solid var(--line); background: var(--card);
  font-size: var(--fs-caption); color: var(--c-ink-700); cursor: pointer;
  transition: all var(--dur-fast); font-weight: 500; font-family: inherit;
}
.bd-sl-chip:hover { border-color: var(--c-primary-600); color: var(--c-primary-700); }
.bd-sl-chip.on { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #fff; font-weight: 600; }
.bd-sl-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-sl-chip small { flex: none; font-size: var(--fs-micro); opacity: .62; font-variant-numeric: tabular-nums; }
.bd-sl-chip.on small { opacity: .85; }
.bd-sl-more {
  padding: 5px 12px; border-radius: var(--r-full); border: 1.5px dashed var(--line);
  background: transparent; font-size: var(--fs-caption); color: var(--c-ink-500);
  cursor: pointer; font-family: inherit; transition: all var(--dur-fast);
}
.bd-sl-more:hover { border-color: var(--c-primary-600); color: var(--c-primary-700); }
.bd-sl-nonepick { margin-left: auto; }
.bd-filter-on {
  font-size: var(--fs-caption); color: var(--c-primary-800); background: var(--c-primary-50);
  border: 1px solid var(--c-primary-200); border-radius: var(--r-md);
  padding: 8px 13px; margin-bottom: var(--sp-4);
}
.bd-filter-on b { font-weight: 700; }

/* 全量候选值弹层 */
.bd-sl-all {
  max-height: 320px; overflow-y: auto; margin-top: 4px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--card);
}
.bd-sl-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px;
  border-bottom: 1px solid var(--c-ink-100); cursor: pointer; font-size: var(--fs-sm);
  color: var(--c-ink-700); transition: background var(--dur-fast);
}
.bd-sl-row:last-child { border-bottom: none; }
.bd-sl-row:hover { background: var(--c-primary-50); }
.bd-sl-row.on { background: var(--c-primary-100); font-weight: 600; color: var(--c-primary-800); }
.bd-sl-row-lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-sl-row small { flex: none; font-size: var(--fs-note); color: var(--c-ink-500); font-variant-numeric: tabular-nums; }
.bd-sl-row-ok { flex: none; color: var(--c-primary-600); font-weight: 700; }
.bd-ck-row { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 5px 16px 5px 0; font-size: var(--fs-sm); }

/* ---------- ③ 图表 / 表格 / 指标卡 / 文本 ---------- */
.bd-chart { width: 100%; height: 280px; }
.bd-text { font-size: var(--fs-sm); color: var(--c-ink-700); line-height: var(--lh-base); word-break: break-word; }
.bd-tblwrap { max-height: 340px; overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.bd-tblwrap .tbl { display: table; overflow: visible; }
.bd-tblwrap .tbl th { position: sticky; top: 0; background: var(--c-ink-50); z-index: 1; }
.bd-stat-wrap { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) 0; }
.bd-stat-main { background: var(--c-primary-50); border-radius: var(--r-md); padding: var(--sp-4); text-align: center; }
.bd-stat-main .k { font-size: var(--fs-note); color: var(--c-ink-600); }
.bd-stat-main .v {
  font-size: var(--fs-display); font-weight: 800; color: var(--c-primary-700);
  line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums;
}
.bd-stat-sub { font-size: var(--fs-sm); color: var(--c-ink-600); }
.bd-stat-sub b { color: var(--c-ink-900); }

/* ---------- ④ 图表配置器 ---------- */
#modalBox.modal-wide { max-width: min(1180px, 96vw); }
.bd-cfg-tip {
  background: var(--c-warning-50); color: var(--c-warning-700);
  border-radius: var(--r-md); padding: 10px 13px; font-size: var(--fs-sm);
  line-height: 1.55; margin-bottom: var(--sp-4);
}
.bd-cfg { display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.bd-cfg-l { min-width: 0; }
.bd-cfg-r { min-width: 0; }
.bd-cfg-sec { margin-bottom: var(--sp-3); }
.bd-cfg-sec > label {
  display: block; font-size: var(--fs-note); font-weight: 600;
  color: var(--c-ink-600); margin-bottom: 5px;
}
.bd-cfg-sec select,
.bd-cfg-sec input,
.bd-cfg-sec textarea {
  width: 100%; height: 38px; border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 0 10px; font-size: var(--fs-sm); background: var(--card);
  color: var(--c-ink-900); font-family: inherit;
}
.bd-cfg-sec textarea { height: auto; padding: 9px 10px; line-height: 1.5; resize: vertical; }
.bd-cfg-sec select:focus,
.bd-cfg-sec input:focus,
.bd-cfg-sec textarea:focus {
  outline: none; border-color: var(--c-primary-600);
  box-shadow: 0 0 0 3px var(--c-primary-100);
}
.bd-two { display: flex; gap: var(--sp-2); }
.bd-two select { flex: 1; min-width: 0; }
.bd-cfg-ro {
  height: 38px; display: flex; align-items: center; padding: 0 10px;
  border-radius: var(--r-md); background: var(--c-ink-50);
  border: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--c-ink-700);
}
.bd-cfg-ro-sub { font-size: var(--fs-note); color: var(--c-ink-500); margin-top: 4px; }
.bd-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bd-type-btn {
  height: 36px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); font-size: var(--fs-note); color: var(--c-ink-700);
  cursor: pointer; transition: all var(--dur-fast); font-family: inherit;
  padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-type-btn:hover { border-color: var(--c-primary-600); color: var(--c-primary-700); }
.bd-type-btn.on { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #fff; font-weight: 600; }
.bd-color-row { display: flex; gap: 9px; flex-wrap: wrap; }
.bd-color-dot {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform var(--dur-fast);
}
.bd-color-dot:hover { transform: scale(1.12); }
.bd-color-dot.on { border-color: var(--c-ink-900); }
.bd-prev-hd {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-900); margin-bottom: var(--sp-2);
}
.bd-prev-hd .hint { font-weight: 400; }
.bd-prev {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--card);
  padding: var(--sp-4); min-height: 352px;
  display: flex; flex-direction: column; justify-content: center;
}
.bd-prev .bd-body { width: 100%; }
.bd-prev-ft { font-size: var(--fs-note); color: var(--c-ink-500); margin-top: var(--sp-2); line-height: 1.6; }
@media (max-width: 900px) {
  .bd-cfg { grid-template-columns: minmax(0, 1fr); }
  .bd-prev { min-height: 240px; }
}