/* ============================================================
   主播数据预警看板 · Apple Human Interface Design
   设计系统: SF Pro 系统字体 / Apple 系统色板 /
   毛玻璃导航栏 / 纯白卡片 / 细腻阴影 / 大圆角
   ============================================================ */

:root {
  /* ---------- 基础色板 (Liquid Glass · 冷灰白) ---------- */
  --bg:          #F6F8FB;   /* page background */
  --surface:     rgba(255,255,255,.62);   /* frosted glass card */
  --surface-2:   rgba(255,255,255,.45);   /* inset glass */
  --surface-3:   rgba(255,255,255,.78);   /* frosted overlay/popup */
  --border:      rgba(255,255,255,.78);   /* glass border — white edge */
  --border-soft: rgba(255,255,255,.45);
  --border-ink:  rgba(20,30,50,.08);      /* subtle dark border for contrast */
  --divider:     rgba(35,45,65,.07);      /* hairline divider */
  --glass-hi:    rgba(255,255,255,.90);   /* glass top edge highlight */

  --ink:         #171A1F;   /* primary text */
  --ink-2:       #31363F;   /* body text */
  --muted:       #707884;   /* secondary text */
  --faint:       #9AA2AD;   /* tertiary text */

  /* ---------- 系统主色 ---------- */
  --primary:        #1677FF;
  --primary-hover:  #4096FF;
  --primary-ink:    #0E63D9;  /* blue text on light (≥4.5:1) */
  --primary-soft:   rgba(22,119,255,.07);
  --primary-border: rgba(22,119,255,.20);

  /* ---------- 状态色 ---------- */
  --red:           #FF4D4F;
  --red-ink:       #CF1322;
  --red-soft:      rgba(255,77,79,.08);
  --red-border:    rgba(255,77,79,.22);

  --amber:         #FA8C16;
  --amber-ink:     #D46B08;
  --amber-soft:    rgba(250,140,22,.08);
  --amber-border:  rgba(250,140,22,.22);

  --green:         #34C759;
  --green-ink:     #248A3D;
  --green-soft:    rgba(52,199,89,.08);
  --green-border:  rgba(52,199,89,.20);

  /* ---------- 阴影 (glass · 冷灰蓝, 克制) ---------- */
  --shadow-sm: 0 6px 22px rgba(30,50,80,.05);
  --shadow-md: 0 10px 30px rgba(30,50,80,.075);
  --shadow-lg: 0 16px 44px rgba(30,50,80,.10);

  /* ---------- 毛玻璃 (frosted glass) ---------- */
  --blur: blur(22px) saturate(135%);
  --blur-strong: blur(28px) saturate(150%);

  /* ---------- 圆角 (面板 18 / 卡片 16 / 控件 9-10 / 标签 7-8) ---------- */
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-panel: 18px;
  --r-pill: 980px;

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

  /* ---------- 字体 (SF Pro system stack) ---------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", "PingFang SC", "Fira Sans", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "Fira Code", SFMono-Regular, Menlo, Consolas, monospace;

  --dur: .22s;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* ---------- Element Plus → 主题色 ---------- */
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-color-primary: #1677FF;
  --el-color-primary-light-3: #5CA0FF;
  --el-color-primary-light-5: #8ABBFF;
  --el-color-primary-light-7: #B9D6FF;
  --el-color-primary-light-8: #D0E4FF;
  --el-color-primary-light-9: #E8F1FF;
  --el-color-primary-dark-2: #125FCC;

  --el-color-danger: #FF4D4F;
  --el-color-danger-light-3: #FF8284;
  --el-color-danger-light-5: #FFA6A7;
  --el-color-danger-light-7: #FFC9CA;
  --el-color-danger-light-8: #FFDBDC;
  --el-color-danger-light-9: #FFEDEE;
  --el-color-danger-dark-2: #CC3E3F;
  --el-color-error: #FF4D4F;
  --el-color-error-light-3: #FF8284;
  --el-color-error-light-5: #FFA6A7;
  --el-color-error-light-7: #FFC9CA;
  --el-color-error-light-8: #FFDBDC;
  --el-color-error-light-9: #FFEDEE;
  --el-color-error-dark-2: #CC3E3F;

  --el-color-warning: #FA8C16;
  --el-color-warning-light-3: #FAAF5C;
  --el-color-warning-light-5: #FAC58B;
  --el-color-warning-light-7: #FADCB9;
  --el-color-warning-light-8: #FAE8D0;
  --el-color-warning-light-9: #FAF3E7;
  --el-color-warning-dark-2: #C87012;

  --el-color-success: #34C759;
  --el-color-success-light-3: #6DD98C;
  --el-color-success-light-5: #9AE0B0;
  --el-color-success-light-7: #C5E8D2;
  --el-color-success-light-8: #D9EFE2;
  --el-color-success-light-9: #ECF7F0;
  --el-color-success-dark-2: #248A3D;

  --el-text-color-primary: #171A1F;
  --el-text-color-regular: #31363F;
  --el-text-color-secondary: #707884;
  --el-text-color-placeholder: #9AA2AD;
  --el-text-color-disabled: #B8BEC7;

  --el-border-color: rgba(0,0,0,.12);
  --el-border-color-light: rgba(0,0,0,.08);
  --el-border-color-lighter: rgba(0,0,0,.06);
  --el-border-color-extra-light: rgba(0,0,0,.04);
  --el-border-radius-base: 10px;
  --el-border-radius-small: 8px;
  --el-border-radius-round: 980px;

  --el-fill-color: rgba(0,0,0,.06);
  --el-fill-color-light: rgba(0,0,0,.04);
  --el-fill-color-lighter: rgba(0,0,0,.03);
  --el-fill-color-extra-light: rgba(0,0,0,.02);
  --el-fill-color-dark: rgba(0,0,0,.08);
  --el-fill-color-darker: rgba(0,0,0,.10);
  --el-fill-color-blank: #FFFFFF;

  --el-bg-color: #FFFFFF;
  --el-bg-color-page: #F6F8FB;
  --el-bg-color-overlay: #FFFFFF;
  --el-mask-color: rgba(246,248,251,.55);
  --el-mask-color-extra-light: rgba(246,248,251,.35);

  --el-font-family: var(--font);
  --el-font-size-base: 14px;
  --el-box-shadow-light: var(--shadow-sm);
  --el-box-shadow: var(--shadow-md);
  --el-box-shadow-dark: var(--shadow-lg);
  --el-disabled-bg-color: rgba(0,0,0,.05);
  --el-disabled-text-color: #AEAEB2;
  --el-disabled-border-color: rgba(0,0,0,.06);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Author styles such as `display: block/flex` must never reveal hidden UI. */
[hidden] { display: none !important; }
/* scrollbar-gutter: stable — 始终为纵向滚动条预留位置,
   避免折叠/展开面板时页面高度跨过视口临界, 滚动条出现/消失
   导致整个画面横向抽动 8px */
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 页面背景 — 冷灰白 #F6F8FB + 极轻环境光(渐变仅作环境反射, 不形成可见色块) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 75% 35%, rgba(90, 160, 255, .06), transparent 28%),
    radial-gradient(circle at 25% 70%, rgba(255, 120, 120, .035), transparent 30%);
  pointer-events: none;
  z-index: -1;
}

 [v-cloak] { display: none; }
::selection { background: rgba(22,119,255,.16); }

/* 屏幕阅读器专用文本 */
.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;
}

/* 键盘跳转链接 */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 滚动条 — Apple 细滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   顶部导航栏 — Apple 毛玻璃吸顶
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.72);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--border-soft);
}

.topbar-inner {
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 32px;
  height: 52px;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.brand-logo {
  width: 30px; height: 30px;
  flex: none;
  object-fit: contain;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  color: var(--ink);
}
.brand-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--faint);
  white-space: nowrap;
}

/* 水平标签导航 — 选中态: 浅蓝底 + 蓝色 indicator, 其余保持中性灰 */
.topbar-nav { flex: 1; min-width: 0; }
.nav-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
.topbar-nav button {
  position: relative;
  appearance: none;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  min-height: 32px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #6E7681;
  cursor: pointer;
  border-radius: 9px;
  touch-action: manipulation;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.topbar-nav button:hover {
  color: var(--ink);
  background: rgba(20,30,50,.035);
}
.topbar-nav button.active {
  color: var(--primary);
  background: rgba(22,119,255,.07);
  font-weight: 600;
}
.topbar-nav button.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 1px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
}
.topbar-nav button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nav-ico { display: inline-flex; flex: none; opacity: .7; }
.nav-ico svg { width: 15px; height: 15px; }
.topbar-nav button.active .nav-ico { opacity: 1; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-badge {
  flex: none;
  min-width: 16px;
  height: 16px;
  padding: 0 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--red);
}

/* 状态呼吸灯 */
.live-dot {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(52,199,89,.45);
  animation: pulse 2.4s var(--ease) infinite;
}
.live-dot.sm { width: 7px; height: 7px; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,199,89,.4); }
  70%  { box-shadow: 0 0 0 7px rgba(52,199,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}

/* ============================================================
   主区域布局
   ============================================================ */
.main {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px 32px 48px;
}

/* 不做透明度淡入: opacity<1 会形成 Backdrop Root, 导致内部玻璃模糊在动画期间失效 */
.pane { animation: tab-in .22s var(--ease); }
@keyframes tab-in {
  from { transform: translateY(4px); }
  to   { transform: none; }
}

/* 页头 — 左: 标题/说明/数据日期; 右: 操作控件, 底部对齐 */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-head-text { min-width: 0; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.page-title {
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -.5px;
  color: var(--ink);
  line-height: 1.15;
}
.page-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.5;
}
/* 页头说明文字 — 二级辅助信息 */
.page-desc {
  font-size: 13px;
  color: #7A828E;
  margin-top: 6px;
  line-height: 1.5;
}
/* 页头数据日期 — 辅助信息, 不抢视觉焦点 */
.page-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 8px;
}
.meta-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
}
.page-head-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(30,50,80,.04), inset 0 1px 0 rgba(255,255,255,.85);
}
.page-head-actions .el-button { height: 36px; padding: 0 18px; }

/* 面板卡片 — Liquid Glass 数据面板 */
.panel {
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: 22px 24px;
  margin-bottom: 24px;
  /* 与 KPI 卡同一静态阴影层级, 避免一深一浅 */
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-sm);
  transform: translateZ(0);
}

/* 规则卡片头 */
.rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.rule-head-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rule-head h2 {
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rule-head h2::before {
  content: "";
  width: 3px; height: 15px;
  border-radius: 2px;
  background: var(--rule-c, var(--primary));
  flex: none;
}
.rule-red   { --rule-c: var(--red); }
.rule-amber { --rule-c: var(--amber); }
.rule-green { --rule-c: var(--green); }

.rule-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px var(--sp-3);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  background: var(--surface-2);
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  border: 1px solid var(--border-soft);
  color: var(--muted);
}
.rule-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.rule-note-body {
  font-size: 12.5px;
  font-weight: 400;
  opacity: .9;
  padding-left: 26px;
}
.note-ico {
  flex: none;
  width: 18px;
  height: 18px;
}
.note-ico-ok { color: var(--green); }
.note-ico-warn { color: var(--amber); }
.rule-note.ok   { color: var(--green-ink); background: var(--green-soft); }
.rule-note.warn { color: var(--amber-ink); background: var(--amber-soft); }

.rule-desc { font-size: 12.5px; color: var(--muted); font-weight: 400; }

/* 规则说明图标 — 悬浮展示完整规则描述 */
.rule-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  color: var(--muted);
  cursor: help;
  transition: color .15s ease, background .15s ease;
}
.rule-info:hover, .rule-info:focus-visible { color: var(--primary); background: var(--primary-soft); outline: none; }
/* 规则说明气泡 — 全局样式把深色气泡改成了白玻璃底, 这里补回深色文字与白色箭头 */
.rule-tip.el-popper.is-dark {
  max-width: 340px;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.7;
}
.rule-tip.el-popper.is-dark .el-popper__arrow::before {
  background: rgba(255,255,255,.70) !important;
  border-color: var(--border) !important;
}
.rule-tip .tip-h { font-weight: 650; margin-bottom: 3px; }
.rule-tip .tip-p { margin: 0 0 6px; }
.rule-tip .tip-p:last-child { margin-bottom: 0; }
.rule-tip .tip-muted { color: var(--muted); }

/* 折叠按钮 — 与列设置按钮一致的轻玻璃质感 */
.rule-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.rule-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(20,30,50,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.6);
  color: var(--muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.rule-toggle:hover {
  color: var(--ink);
  background: rgba(255,255,255,.85);
}
.rule-toggle:active {
  transform: translateY(0);
}
.rule-toggle .chev { transition: transform .22s var(--ease); }
.rule-toggle .chev.flip { transform: rotate(180deg); }

/* 折叠/展开动画:
   使用 grid-template-rows 让容器高度跟随内容自然过渡，避免 max-height 硬编码值
   造成的瞬间跳变。内容 opacity/transform 与高度同步动画，消除"内容先消失、
   高度延迟收回"导致的下面卡片向上抽动。 */
.rule-body-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s var(--ease);
  overflow: hidden;
}
.rule-body-wrap.collapsed {
  grid-template-rows: 0fr;
}
.rule-body-wrap > .rule-body {
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.rule-body-wrap.collapsed > .rule-body {
  opacity: 0;
  transform: translateY(-6px);
}

/* 表格上方工具行:筛选 + 计数 */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.table-count {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
}
.table-count b { color: var(--ink); font-weight: 600; }

/* 表格自定义列选择器 */
.table-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.col-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(20,30,50,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.6);
  color: var(--ink-2);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.col-btn:hover {
  color: var(--ink);
  background: rgba(255,255,255,.85);
}
/* 页头工具栏内的列设置按钮 — 与旁边 36px 的 el-button 对齐,
   白色幽灵风格, 与实心蓝主按钮形成轻重反差 */
.page-head-actions .col-btn {
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.6);
  box-shadow: 0 0 0 1px rgba(20,30,50,.08) inset;
  color: var(--ink);
  font-size: 13px;
}
.page-head-actions .col-btn:hover {
  background: rgba(255,255,255,.85);
  color: var(--ink);
}
.col-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.col-pop-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.col-pop-reset {
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--primary-ink);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.col-pop-reset:hover { text-decoration: underline; }
.col-pop-search { margin-bottom: 6px; }
.col-pop-list {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow-y: auto;
}
.col-pop-list .el-checkbox {
  margin-right: 0;
  height: 30px;
  flex: none;
}
.col-pop-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-ink);
  font-size: 12px;
  color: var(--faint);
}

/* ============================================================
   自定义筛选条件构建器
   ============================================================ */
.cf-builder { padding-bottom: var(--sp-4); }
.cf-cond {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.cf-cond-x {
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: 2px;
  border: 1px solid var(--border-ink);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.55);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.cf-cond-x:hover {
  color: var(--red-ink);
  border-color: var(--red-border);
  background: var(--red-soft);
}
.cf-builder-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
/* 筛选构建器操作按钮 — 主(浅蓝填充) / 次(灰边文字) 层级分明 */
.cf-add-btn {
  background: var(--primary-soft) !important;
  color: var(--primary-ink) !important;
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--primary-border) inset !important;
}
.cf-add-btn:hover,
.cf-add-btn:focus {
  background: rgba(0,122,255,.14) !important;
  color: var(--primary-ink) !important;
}
.cf-add-btn.is-disabled,
.cf-add-btn.is-disabled:hover {
  background: var(--primary-soft) !important;
  color: var(--primary-ink) !important;
  opacity: .45;
  box-shadow: 0 0 0 1px var(--primary-border) inset !important;
}
.cf-reset-btn {
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: 0 0 0 1px var(--border-ink) inset !important;
}
.cf-reset-btn:hover,
.cf-reset-btn:focus {
  background: rgba(0,0,0,.04) !important;
  color: var(--ink) !important;
}
/* 字段下拉选项: 名称 + 类型标识 */
.cf-field-name { float: left; }

/* 筛选输入框: 只保留外层圆角边框, 去掉内层长方形 outline/发光环 */
.cf-cond .el-input__inner,
.cf-cond .el-select__input,
.cf-cond input:focus,
.cf-cond input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================================
   KPI 指标卡 — Liquid Glass, 数字为视觉中心
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
/* 主卡更宽, 体现场次卡之间的量级差异 */
.stats-lead { grid-template-columns: 1.25fr 1fr; }
.stat {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-sm);
  display: flex;
  align-items: center;
  transition: box-shadow .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1);
}
.stat:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 12px 34px rgba(30,50,80,.08);
  transform: translateY(-2px);
}
/* 环境色反光 — 仅右上角极轻一层, 不染色整卡 */
.stat-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 90% 20%, var(--c-glow, rgba(22,119,255,.06)), transparent 40%);
  pointer-events: none;
}
.stat-body { min-width: 0; flex: 1; position: relative; }
.stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 600;
}
.stat-num {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  margin-top: 6px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.stat-foot { font-size: 12px; color: var(--faint); line-height: 1.4; margin-top: 8px; }
/* 卡内辅助信息行(如 经纪人数 · 较昨日 delta) */
.stat-meta {
  font-size: 12px;
  color: var(--faint);
  line-height: 1.4;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.stat-meta b { font-weight: 600; }
.stat-meta b.up   { color: var(--c, var(--red)); }
.stat-meta b.down { color: var(--green-ink); }
.stat-meta b.flat { color: var(--faint); }
/* 图标容器 — 左侧精致风险标识, 数字与文字列于右 */
.stat-icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--c, var(--primary));
  background: var(--c-soft, var(--primary-soft));
}
.stat-icon svg { width: 22px; height: 22px; }
/* 主卡: 核心指标更大的字号与图标, 拉开视觉重量 */
.stat-hero { padding: 22px var(--sp-5); }
.stat-hero .stat-num { font-size: 46px; }
.stat-hero .stat-icon { width: 54px; height: 54px; border-radius: 14px; }
.stat-hero .stat-icon svg { width: 27px; height: 27px; }
.stat-red   { --c: var(--red);   --c-soft: rgba(255,70,70,.09);  --c-border: var(--red-border);   --c-glow: rgba(255,76,76,.07); }
.stat-amber { --c: var(--amber); --c-soft: rgba(255,160,40,.10); --c-border: var(--amber-border); --c-glow: rgba(255,160,40,.08); }
.stat-green { --c: var(--green); --c-soft: var(--green-soft);    --c-border: var(--green-border); --c-glow: rgba(52,199,89,.07); }

/* ============================================================
   Element Plus — Apple 风格组件覆盖
   ============================================================ */

/* 表单 */
.el-form--inline .el-form-item { margin-right: var(--sp-4); margin-bottom: var(--sp-2); margin-top: var(--sp-2); }
.el-form-item__label { font-weight: 500; color: var(--muted); }

/* 输入框 */
.el-input__wrapper {
  border-radius: var(--r-md) !important;
  background: rgba(255,255,255,.58) !important;
  backdrop-filter: blur(10px) saturate(1.35);
  -webkit-backdrop-filter: blur(10px) saturate(1.35);
  box-shadow: 0 0 0 1px rgba(20,30,50,.07) inset !important;
  transition: box-shadow var(--dur) var(--ease) !important;
}
.el-input__wrapper:hover {
  box-shadow: 0 0 0 1px rgba(20,30,50,.16) inset !important;
}
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 3px rgba(22,119,255,.07), 0 0 0 1px rgba(22,119,255,.35) inset !important;
}
.el-input__inner { color: var(--ink); }
.el-textarea__inner {
  border-radius: var(--r-md) !important;
  background: rgba(255,255,255,.45) !important;
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: 0 0 0 1px var(--border) inset !important;
}

/* 下拉 */
.el-select .el-select__wrapper { border-radius: var(--r-md) !important; }
.el-select__popper.el-popper {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-lg) !important;
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.el-select-dropdown__item { border-radius: var(--r-sm); margin: 0 6px; padding: 0 10px; color: var(--muted); }
.el-select-dropdown__item.is-hovering { background: rgba(0,0,0,.04) !important; color: var(--ink); }
.el-select-dropdown__item.is-selected { color: var(--primary-ink) !important; font-weight: 600 !important; }

.el-popper.is-light, .el-popper.is-dark {
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-color: var(--border) !important;
}
.el-popper.is-light .el-popper__arrow::before { background: rgba(255,255,255,.70) !important; border-color: var(--border) !important; }

/* 日期选择 */
.el-date-editor.el-input, .el-date-editor.el-input__wrapper { height: 36px; }
.el-date-editor .el-input__wrapper { height: 36px; }
.el-picker__popper.el-popper {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-lg) !important;
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.el-date-picker { border-radius: var(--r-lg) !important; }
.el-date-table td.in-range .el-date-table-cell { background: var(--primary-soft) !important; }
.el-date-table td.today .el-date-table-cell__text { color: var(--primary-ink) !important; font-weight: 700 !important; }
.el-date-table td.current:not(.disabled) .el-date-table-cell__text {
  background: var(--primary) !important;
  color: #fff !important;
}
.el-date-table td .el-date-table-cell__text { border-radius: 50%; color: var(--ink); }
.el-date-table td.available:hover .el-date-table-cell__text { background: var(--primary-soft) !important; color: var(--primary-ink) !important; }
.el-date-table td.disabled .el-date-table-cell__text { color: var(--faint) !important; }
.el-date-table td.next-month .el-date-table-cell__text,
.el-date-table td.prev-month .el-date-table-cell__text { color: var(--faint); }
.el-date-table th { color: var(--muted) !important; font-weight: 600 !important; border-bottom-color: var(--border-soft) !important; }
.el-date-picker__header button { color: var(--muted) !important; }
.el-date-picker__header .el-date-picker__header-label { color: var(--ink) !important; font-weight: 600 !important; }
.el-date-picker__header-label:hover { color: var(--primary-ink) !important; }
.el-picker-panel { background: rgba(255,255,255,.70) !important; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); color: var(--ink); }
.el-picker-panel__footer { background: transparent !important; border-top-color: var(--border-soft) !important; }
.el-picker-panel__icon-btn { color: var(--muted) !important; }
.el-picker-panel__icon-btn:hover { color: var(--primary-ink) !important; }
.el-date-range-picker__content.is-left { border-right-color: var(--border-soft) !important; }
.el-date-range-picker__header div { color: var(--ink); }
.el-month-table td .cell { color: var(--ink); }
.el-month-table td.current:not(.disabled) .cell { color: var(--primary-ink) !important; font-weight: 700; }
.el-month-table td .cell:hover { color: var(--primary-ink) !important; }
.el-month-table td.disabled .cell { color: var(--faint) !important; }
.el-year-table td .cell { color: var(--ink); }
.el-year-table td.current:not(.disabled) .cell { color: var(--primary-ink) !important; font-weight: 700; }
.el-is-editable .el-time-panel { border-radius: var(--r-md) !important; border: 1px solid var(--border) !important; }
.el-input__prefix, .el-input__suffix { color: var(--faint); }
.el-range-input { color: var(--ink) !important; background: transparent !important; }
.el-range-separator { color: var(--faint) !important; }

/* 按钮 — Apple 风格 */
.el-button {
  font-weight: 500;
  border-radius: var(--r-md) !important;
  border: none !important;
  touch-action: manipulation;
  transition: all var(--dur) var(--ease) !important;
}
.el-button:active { transform: scale(.97); }
.el-button--primary {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(22,119,255,.2);
}
.el-button--primary:hover,
.el-button--primary:focus {
  background: var(--primary-hover) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(22,119,255,.25);
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover {
  background: var(--primary) !important;
  opacity: .4;
  box-shadow: none;
}
/* 页头全局主操作按钮 — 蓝色仅用于全局主操作, 带轻微玻璃高光 */
.el-button.btn-solid {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(22,119,255,.24);
}
.el-button.btn-solid:hover,
.el-button.btn-solid:focus {
  background: var(--primary-hover) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 10px rgba(22,119,255,.28);
}
.el-button.btn-solid.is-disabled,
.el-button.btn-solid.is-disabled:hover {
  background: var(--primary) !important;
  opacity: .4;
  box-shadow: none;
}
/* 页头次要操作 — 玻璃次级按钮, 与实心蓝主按钮形成轻重反差 */
.el-button.btn-ghost {
  background: rgba(255,255,255,.6) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 0 1px rgba(20,30,50,.08) inset !important;
}
.el-button.btn-ghost:hover,
.el-button.btn-ghost:focus {
  background: rgba(255,255,255,.85) !important;
  color: var(--ink) !important;
}
.el-button--default {
  background: rgba(0,0,0,.05) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.el-button--default:hover {
  background: rgba(0,0,0,.08) !important;
  color: var(--ink) !important;
}
.el-button--danger {
  background: var(--red) !important;
  color: #fff !important;
}
.el-button--danger:hover {
  background: var(--red-ink) !important;
  color: #fff !important;
}
.el-button--danger.is-plain {
  background: var(--red-soft) !important;
  color: var(--red-ink) !important;
  box-shadow: 0 0 0 1px var(--red-border) inset !important;
}
.el-button--danger.is-plain:hover {
  background: var(--red) !important;
  color: #fff !important;
}
.el-button--small {
  height: 28px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}
.el-button.is-text, .el-button.is-link { color: var(--primary-ink) !important; }
/* link 按钮应透明背景、无边框, 否则 type="primary" link 会叠加主色填充导致蓝底蓝字 */
.el-button.is-link,
.el-button--primary.is-link,
.el-button.is-text,
.el-button--primary.is-text {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.el-button.is-link:hover,
.el-button--primary.is-link:hover,
.el-button.is-text:hover,
.el-button--primary.is-text:hover {
  color: var(--primary-hover) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 表格操作列按钮: 垂直居中、避免过宽 */
.el-table .el-table-column--center .cell .el-button.is-link {
  vertical-align: middle;
}

/* 表格 — Apple 风格高密度数据表 */
.el-table {
  --el-table-border-color: var(--border-soft);
  --el-table-header-bg-color: transparent;
  --el-table-header-text-color: var(--muted);
  --el-table-row-hover-bg-color: rgba(255,255,255,.42);
  --el-table-tr-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-text-color: var(--ink-2);
  font-size: 13.5px;
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.el-table th.el-table__cell {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent !important;
  border-bottom: 1px solid var(--divider) !important;
}
.el-table td.el-table__cell {
  padding: 13px 0;
  border-bottom: 1px solid rgba(30,40,60,.055) !important;
  color: var(--ink-2);
}
.el-table tr:last-child td.el-table__cell { border-bottom: none !important; }
/* 悬停高亮: 便于长表格横向定位行; 玻璃上的白色提亮 */
.el-table .el-table__body tr:hover > td.el-table__cell {
  background: rgba(255,255,255,.42) !important;
}
.el-table .num-cell,
.el-table .num-cell .cell {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink);
}
/* 主播名称 Emoji 对齐 */
.name-with-emoji {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.name-emoji {
  display: inline-flex;
  align-items: center;
  font-size: .92em;
  line-height: 1;
}
.el-table .el-table__empty-text { color: var(--faint); font-size: 13.5px; }
.el-table .el-table__empty-block { background: transparent; }
.el-table .el-table__inner-wrapper::before { display: none; }
.el-table__body-wrapper, .el-table__header-wrapper { background: transparent; }
/* 字段(列)较多的树表: 横向滚动条常显, 不再只在悬停时出现;
   配合表格 max-height, 横滚条始终落在可见区域底部, 一眼可见可拖 */
.rule-body .el-table .el-scrollbar__bar.is-horizontal,
.cf-table-panel .el-table .el-scrollbar__bar.is-horizontal {
  display: block !important;
}
.rule-body .el-table .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb,
.cf-table-panel .el-table .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
  opacity: .45;
}

/* 分页 */
.el-pagination {
  --el-pagination-button-color: var(--muted);
  --el-pagination-button-bg-color: transparent;
  --el-pagination-hover-color: var(--primary-ink);
  --el-pagination-text-color: var(--muted);
  color: var(--muted);
}
.el-pagination .el-pager li {
  border-radius: var(--r-sm);
  font-weight: 500;
  margin: 0 2px;
  color: var(--muted);
  background: transparent !important;
}
.el-pagination .el-pager li:hover { color: var(--primary-ink); }
.el-pagination .el-pager li.is-active {
  background: var(--primary) !important;
  color: #fff !important;
}
.el-pagination button { border-radius: var(--r-sm) !important; background: transparent !important; color: var(--muted) !important; }
.el-pagination button:hover { color: var(--primary-ink) !important; }
.el-pagination.is-background .el-pager li.is-active { background-color: var(--primary) !important; }
.el-pagination .el-pagination__total { color: var(--muted); }

/* 提示条 */
.el-alert {
  border-radius: var(--r-md) !important;
  border: none !important;
}
.el-alert--success { background: var(--green-soft) !important; }
.el-alert--error { background: var(--red-soft) !important; }
.el-alert--error .el-alert__title,
.el-alert--error .el-alert__description { color: var(--red-ink) !important; }
.el-alert--success .el-alert__title,
.el-alert--success .el-alert__description { color: var(--green-ink) !important; }
.el-alert .el-alert__icon { color: inherit; }

/* 进度条 */
.el-progress-bar__outer { background-color: rgba(0,0,0,.06) !important; }

/* 气泡确认 / 弹层 */
.el-popconfirm.el-popover.el-popper,
.el-popover.el-popper {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-lg) !important;
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--ink);
}
.el-popconfirm__main { color: var(--ink); }

/* 全局消息 */
.el-message {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-lg) !important;
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.el-message .el-message__content { color: var(--ink) !important; }

/* 加载遮罩 */
.el-loading-mask { background: rgba(255,255,255,.50) !important; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.el-loading-spinner .circular { width: 28px !important; height: 28px !important; }
.el-loading-spinner .path { stroke: var(--primary) !important; }
.el-loading-spinner .el-loading-text { color: var(--muted) !important; }

/* 标签 */
.el-tag { border-radius: var(--r-pill) !important; border: none !important; }

/* 文字提示气泡 */
.el-tooltip__trigger { outline: none; }
.el-popper.is-dark, .el-tooltip__popper { background: rgba(255,255,255,.70) !important; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }

.pager-row {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-4);
}

/* ============================================================
   上传面板
   ============================================================ */
.el-upload { display: block; }
.el-upload-dragger {
  border: none !important;
  border-radius: var(--r-lg) !important;
  background: transparent !important;
  padding: var(--sp-7) var(--sp-5) !important;
}
.el-upload-dragger:hover,
.el-upload-dragger.is-dragover {
  background: transparent !important;
}
.el-upload:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-lg); }
.dz-icon {
  width: 52px; height: 52px;
  margin: 0 auto var(--sp-3);
  display: grid;
  place-items: center;
  color: var(--muted);
}
.dz-icon svg { width: 24px; height: 24px; }
.dz-title { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.dz-title .rule-info { vertical-align: middle; margin-left: 6px; }

.file-chip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  border: 1px solid var(--border-soft);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.file-chip.bad {
  background: var(--red-soft);
  border-color: var(--red-border);
  color: var(--red-ink);
}
.file-chip .chip-date {
  font-weight: 400;
  color: var(--muted);
  font-size: 12.5px;
}
.file-chip .chip-err { font-weight: 400; font-size: 12.5px; }
.file-chip .chip-x {
  margin-left: auto;
  appearance: none;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: var(--faint);
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
  margin-top: -6px;
  margin-bottom: -6px;
  border-radius: var(--r-sm);
  touch-action: manipulation;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.file-chip .chip-x:hover { color: var(--red-ink); background: var(--red-soft); }

/* 批量上传文件队列 */
.file-queue {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.file-queue .file-chip { margin-top: 0; }
.file-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
  padding: 0 var(--sp-1);
}
.file-queue-head .queue-clear {
  appearance: none;
  border: none;
  background: none;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--faint);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.file-queue-head .queue-clear:hover:not(:disabled) { color: var(--red-ink); background: var(--red-soft); }
.file-queue-head .queue-clear:disabled { opacity: .5; cursor: not-allowed; }
.file-chip.ok {
  background: var(--green-soft);
  border-color: var(--green-border);
}
.file-chip.wait {
  background: var(--amber-soft);
  border-color: var(--amber-border);
}
.file-chip .chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-chip .chip-status {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--muted);
}
.file-chip.bad .chip-status { color: var(--red-ink); }
.file-chip.wait .chip-status { color: var(--amber-ink); }
.file-chip.ok .chip-status { color: var(--green-ink); }

.upload-actions { margin-top: var(--sp-4); display: flex; justify-content: center; }
.upload-result { margin-top: var(--sp-4); }
.err-list { margin: 4px 0 0 18px; font-size: 12px; line-height: 1.8; }

.overwrite-ask { margin-top: var(--sp-4); }
.overwrite-ask .overwrite-ask-desc { font-size: 12.5px; }
.overwrite-ask .overwrite-ask-btns { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); }

/* 上传页双栏 */
.upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--sp-5);
  align-items: stretch;
}
@media (max-width: 1024px) {
  .upload-grid { grid-template-columns: 1fr; }
}

/* 上传页居中, 留足拖拽区域空间 */
.pane-narrow {
  max-width: 1100px;
  margin-inline: auto;
}

.upload-panel {
  display: flex;
  flex-direction: column;
}
/* el-upload 组件根包裹层(无 class 的 div[role=button])需撑满, 否则 flex 链断裂 */
.upload-panel > [role="button"] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.upload-panel .el-upload {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.upload-panel .el-upload-dragger {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 360px;
  transition: min-height var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
/* 完成状态下折叠上传区，弱化再次上传入口 */
.upload-panel > [role="button"].is-done .el-upload-dragger {
  min-height: 110px;
  opacity: .7;
}
.upload-panel > [role="button"].is-done .el-upload-dragger:hover { opacity: 1; }
.upload-panel > [role="button"].is-done .dz-icon { display: none; }
.dz-title-done { display: none; }
.upload-panel > [role="button"].is-done .dz-title-default { display: none; }
.upload-panel > [role="button"].is-done .dz-title-done { display: inline; }
.upload-aside {
  display: flex;
  flex-direction: column;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--border-soft);
}
.upload-aside .aside-list {
  flex: 1;
  justify-content: center;
}

/* 上传进度面板 — 步骤条样式 */
.up-progress {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  border: 1px solid var(--border-soft);
}

.up-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.up-progress-status {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.up-progress-ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--primary);
  flex: none;
  box-shadow: 0 0 0 4px rgba(0,122,255,.12);
}
.up-progress-ico svg { width: 22px; height: 22px; }
.up-progress-ico.spin svg { animation: up-spin 1.2s linear infinite; }
@keyframes up-spin { to { transform: rotate(360deg); } }

.up-progress-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.up-progress-kicker {
  font-size: 12px;
  color: var(--muted);
}
.up-progress-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}

.up-progress-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.up-stat b { color: var(--ink); font-weight: 600; }

.up-progress-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.up-progress-file svg { flex: none; opacity: .7; }

.up-progress-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
  flex: 1;
  flex-wrap: wrap;
}

.btn-result {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-lg);
  box-shadow: 0 4px 12px rgba(0, 122, 255, .28);
}

/* 步骤条 */
.up-steps {
  display: flex;
  align-items: flex-start;
  margin-top: var(--sp-5);
  padding: 0 var(--sp-3);
  position: relative;
}
.up-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  min-width: 60px;
}
.up-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(0,0,0,.06);
  border: 2px solid transparent;
  transition: all var(--dur) var(--ease);
  position: relative;
  z-index: 1;
}
.up-step.active .up-step-dot {
  background: var(--primary);
  color: #fff;
}
.up-step.current .up-step-dot {
  box-shadow: 0 0 0 4px rgba(0,122,255,.15);
}
.up-step.error .up-step-dot {
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255,59,48,.15);
}
.up-step-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}
.up-step.active .up-step-label {
  color: var(--ink);
  font-weight: 600;
}

/* 步骤连线 */
.up-step::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: rgba(0,0,0,.08);
  z-index: 0;
}
.up-step:last-child::after { display: none; }
.up-step.active:not(.current)::after { background: var(--primary); }

@media (max-width: 640px) {
  .up-progress-head { flex-direction: column; align-items: flex-start; }
  .up-progress-meta { width: 100%; justify-content: flex-start; }
  .up-progress-stats { width: 100%; }
  .btn-result { width: 100%; justify-content: center; }
  .up-step-label { font-size: 11px; }
  .up-step-dot { width: 24px; height: 24px; font-size: 11px; }
  .up-step::after { top: 12px; }
}

/* 上传须知侧栏 */
@media (max-width: 1024px) {
  .upload-aside {
    padding-left: 0;
    padding-top: var(--sp-5);
    border-left: none;
    border-top: 1px solid var(--border-soft);
  }
}
.aside-title {
  margin: 0 0 var(--sp-3);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.aside-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.aside-list li {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  padding-left: var(--sp-4);
  padding-bottom: var(--sp-2);
  position: relative;
  border-bottom: 1px solid var(--border-soft);
  overflow-wrap: anywhere;
}
.aside-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.aside-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,.28);
}
.aside-k {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
}
.aside-list code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: rgba(0,0,0,.05);
  border-radius: var(--r-sm);
  padding: 1px 5px;
}

/* ============================================================
   焦点可见性 & 入场动效 & 响应式
   ============================================================ */
:focus-visible { outline: 2px solid rgba(22,119,255,.45); outline-offset: 2px; }

/* 卡片入场 — 只位移不淡入, 原因同上方 tab-in: opacity 动画会让毛玻璃短暂失效 */
.stats .stat, .pane .panel { animation: rise .24s var(--ease) backwards; }
.stats .stat:nth-child(2) { animation-delay: .04s; }
.pane .panel:nth-of-type(2) { animation-delay: .03s; }
.pane .panel:nth-of-type(3) { animation-delay: .06s; }
@keyframes rise {
  from { transform: translateY(6px); }
  to   { transform: none; }
}

/* 1024~1440: 收窄左右留白; <1024: 统计卡单列, 页头操作区允许换行 */
@media (max-width: 1440px) {
  .main { padding: 24px 24px 44px; }
}

@media (max-width: 1024px) {
  .main { padding: 20px 20px 40px; }
  .stats { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .topbar-inner {
    flex-wrap: wrap;
    height: auto;
    gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
  }
  .topbar-brand { flex: 1; }
  .topbar-nav { order: 3; flex-basis: 100%; }
  .nav-inner { width: 100%; }
  .topbar-nav button { flex: 1; justify-content: center; min-height: 44px; }
}

@media (max-width: 860px) {
  .main { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
  .stats { grid-template-columns: 1fr; }
  .page-title { font-size: 23px; }
  .page-head { align-items: flex-start; }
  .page-head-actions { width: 100%; }
  .stat-num { font-size: 28px; }
  .stat-hero .stat-num { font-size: 32px; }
  .stat-hero .stat-icon { width: 48px; height: 48px; }
  .panel { padding: var(--sp-4); }
  .rule-head { flex-direction: column; align-items: flex-start; }
  .eyebrow { font-size: 10px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .live-dot { animation: none; }
}

/* ============================================================
   登录页 — ghostlamp 风格表单卡片, 保留原有背景图
   ============================================================ */
.login-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vh, 32px) var(--sp-5);
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(245,245,247,.06) 100%),
    url("background.webp") center / cover no-repeat fixed;
}
.login-body::before { display: none; }

/* 白色卡片 */
.login-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 24px;
  padding: clamp(32px, 4vh, 40px) clamp(32px, 5vw, 56px) clamp(36px, 4.5vh, 48px);
  margin: auto;
  box-shadow: 0 24px 64px rgba(20, 40, 60, .18), 0 4px 16px rgba(20, 40, 60, .08);
  animation: login-card-in .5s var(--ease) both;
}
@keyframes login-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-brand { display: flex; margin-bottom: clamp(24px, 3vh, 32px); }
.login-brand-logo { width: 176px; height: auto; display: block; }

.login-panel {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 48px;
  align-items: stretch;
}

/* 左侧插画 */
.login-art { display: flex; align-items: center; justify-content: center; }
.login-art img { width: 100%; max-width: 430px; height: auto; display: block; }

/* 右侧表单列 — 内容组与插画光学对中; 底部多留 padding, 整体略上移, 避免标题上方留白过重 */
.login-side { display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; }
.login-side-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 4px 0 8px; }

/* 右侧表单 */
.login-title {
  margin: 0 0 28px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #333333;
}

.login-error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--red-ink);
  background: var(--red-soft);
  border: 1px solid var(--red-border);
}
.login-error svg { flex: none; }
/* 登录失败反馈: 轻抖动, 重复触发时重播 */
@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.login-error.shake { animation: login-shake .4s var(--ease); }

/* 输入框 — 标签在上, 框内单行: 图标 + 输入 + 眼睛 */
.login-label {
  display: block;
  margin: 0 0 8px 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #666666;
}
.login-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 4px 4px 4px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #ffffff;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.login-field:focus-within {
  border-color: #2196F3;
  box-shadow: 0 0 0 4px rgba(33, 150, 243, .13);
}
.login-field-icon { flex: none; color: #bdbdbd; transition: color var(--dur) var(--ease); }
.login-field:focus-within .login-field-icon { color: #2196F3; }
.login-input {
  appearance: none;
  flex: 1;
  min-width: 0;
  align-self: stretch;
  box-sizing: border-box;
  padding: 0;
  font-size: 15px;
  font-family: var(--font);
  color: #555555;
  background: transparent;
  border: none;
  outline: none;
}
.login-input::placeholder { color: #9e9e9e; }

/* 密码可见性切换 */
.login-eye {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: #bdbdbd;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.login-eye:hover { color: #555555; background: rgba(0,0,0,.04); }
.login-eye:focus-visible { outline: 2px solid rgba(33,150,243,.5); outline-offset: -2px; }
.login-eye .icon-eye-off { display: none; }
.login-eye.is-on .icon-eye { display: none; }
.login-eye.is-on .icon-eye-off { display: block; }

/* 登录按钮 — 蓝色胶囊, 通栏宽度作为表单底部锚点 */
.login-btn {
  appearance: none;
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 42px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: .12em;
  color: #ffffff;
  background: #2196F3;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  box-shadow: 0 10px 22px -6px rgba(33, 150, 243, .48);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.login-btn:hover {
  background: #1E88E5;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -6px rgba(33, 150, 243, .52);
}
.login-btn:active { transform: translateY(0); box-shadow: 0 6px 14px -6px rgba(33, 150, 243, .42); }
.login-btn:focus-visible { outline: 2px solid #2196F3; outline-offset: 3px; }
.login-btn svg { flex: none; }
.login-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* 登录 <-> 修改凭证 切换链接 */
.login-switch { margin-top: var(--sp-5); text-align: center; }
.login-switch-link {
  appearance: none;
  padding: 4px 8px;
  font-size: 13px;
  font-family: var(--font);
  color: #2196F3;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.login-switch-link:hover { color: #1E88E5; background: rgba(33, 150, 243, .08); }
.login-switch-link:focus-visible { outline: 2px solid rgba(33,150,243,.5); outline-offset: 1px; }

/* 修改凭证表单: 提示与消息条 */
.login-label-optional { font-weight: 400; color: #9e9e9e; }
.login-hint {
  margin: var(--sp-4) 0 0 2px;
  font-size: 12px;
  line-height: 1.6;
  color: #9e9e9e;
}
.login-msg {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-4);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--red-ink);
  background: var(--red-soft);
  border: 1px solid var(--red-border);
}
.login-msg.is-ok {
  color: var(--green-ink);
  background: var(--green-soft);
  border-color: var(--green-border);
}

/* 修改账号密码 — 独立模态窗口, 与登录页插画布局彻底分离 */
.credential-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(20, 40, 60, .28), 0 8px 24px rgba(20, 40, 60, .12);
}
.credential-dialog[open] { animation: credential-dialog-in .28s var(--ease) both; }
.credential-dialog::backdrop {
  background: rgba(25, 36, 52, .42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@keyframes credential-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.credential-dialog-card { padding: 32px 36px 30px; }
.credential-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.credential-dialog-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .01em;
  color: #333333;
}
.credential-dialog-desc {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.credential-dialog-close {
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -6px -8px 0 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.credential-dialog-close:hover { color: var(--ink); background: rgba(0, 0, 0, .05); }
.credential-dialog-close:focus-visible { outline: 2px solid rgba(33, 150, 243, .55); outline-offset: 1px; }
.credential-dialog-actions { margin-top: var(--sp-4); text-align: center; }

@media (max-width: 860px) {
  .login-body { align-items: flex-start; }
  .login-shell { max-width: 560px; padding: 32px 32px 40px; }
  .login-panel { grid-template-columns: 1fr; gap: 0; }
  .login-art { display: none; }
  .login-side-main { padding: 0; }
}

@media (max-width: 480px) {
  .login-body { padding: var(--sp-3); }
  .login-shell { padding: 28px 24px; }
  .login-brand { justify-content: center; }
  .login-brand-logo { width: 150px; }
  .login-title { font-size: 25px; }
  .credential-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 18px;
  }
  .credential-dialog-card { padding: 26px 22px 24px; }
  .credential-dialog-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-shell { animation: none; }
  .credential-dialog[open] { animation: none; }
}

/* 顶栏账号设置与退出登录按钮 */
.topbar-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.topbar-account,
.topbar-logout {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.topbar-account:hover,
.topbar-logout:hover {
  color: var(--ink);
  background: rgba(0,0,0,.05);
}
.topbar-account:focus-visible,
.topbar-logout:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.topbar-account svg,
.topbar-logout svg { width: 14px; height: 14px; }

/* ---------- 上传记录 · 按月归纳文件列表 ---------- */
.up-total {
  font-size: 13px;
  color: var(--muted);
  padding: 0 var(--sp-2);
  align-self: center;
}
.up-total b { color: var(--ink); font-weight: 600; }

.up-panel { padding: var(--sp-3) var(--sp-4); overflow-x: auto; }

/* 列头与文件行共用同一栅格: 文件名 / 大小 / 上传时间 / 操作 */
.up-grid-head,
.up-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) 90px 170px 116px;
  align-items: center;
  gap: var(--sp-3);
  min-width: 620px;
}
.up-grid-head {
  padding: 6px var(--sp-2) 10px;
  font-size: 12.5px;
  color: var(--faint);
  border-bottom: 1px solid var(--border-ink);
}

.up-month + .up-month { border-top: 1px solid var(--border-ink); margin-top: var(--sp-2); }

.up-month-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2) 6px;
}
.up-month-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.up-month-badge {
  font-size: 12px;
  font-weight: 500;
  color: var(--amber-ink);
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  border-radius: var(--r-pill);
  padding: 1px 9px;
}
.up-month-missing { font-size: 12.5px; color: var(--red-ink); }
.up-month-missing b { font-weight: 600; }

.up-row {
  padding: 9px var(--sp-2);
  border-radius: var(--r-md);
  transition: background var(--dur) var(--ease);
}
.up-row:hover { background: var(--surface-2); }
.up-row + .up-row { border-top: 1px dashed rgba(0,0,0,.05); }

.up-row .up-col-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.up-row .up-col-size,
.up-row .up-col-time { font-size: 13px; color: var(--muted); }
.up-row .up-col-time { font-family: var(--mono); font-size: 12.5px; }
.up-grid-head .up-col-op,
.up-row .up-col-op { text-align: right; }

@media (max-width: 720px) {
  .up-grid-head { display: none; }
  .up-row {
    grid-template-columns: minmax(0, 1fr) 116px;
    grid-template-areas:
      "name op"
      "meta op";
    row-gap: 2px;
  }
  .up-row .up-col-name { grid-area: name; }
  .up-row .up-col-size { grid-area: meta; font-size: 12px; }
  .up-row .up-col-time { display: none; }
  .up-row .up-col-op { grid-area: op; }
}

.up-history-panel { margin-top: var(--sp-4); padding: var(--sp-4); }
.up-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-ink);
}
.up-history-head h2 { margin: 0; font-size: 17px; color: var(--ink); }
.up-history-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.up-history-count {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--border-ink);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
}
.up-history-list { display: grid; }
.up-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main action" "meta action";
  align-items: center;
  gap: 4px var(--sp-3);
  padding: 12px var(--sp-2);
}
.up-history-row + .up-history-row { border-top: 1px dashed rgba(0,0,0,.07); }
.up-history-main {
  grid-area: main;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.up-history-row > .el-popconfirm,
.up-history-row > .el-button { grid-area: action; }
.up-history-date { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.up-history-action,
.up-history-restored {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  color: var(--amber-ink);
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
}
.up-history-restored {
  color: var(--green-ink);
  background: var(--green-soft);
  border-color: var(--green-border);
}
.up-history-file {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
}
.up-history-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--faint);
}

@media (max-width: 640px) {
  .up-history-head { flex-direction: column; }
  .up-history-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: 0;
  }
  .up-history-main { flex-wrap: wrap; }
  .up-history-file { flex-basis: 100%; }
  .up-history-meta span:nth-child(3) { display: none; }
}

/* ============================================================
   主播个人详情抽屉
   ============================================================ */

/* 表格内可点击的主播名(打开个人详情) */
.streamer-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 500;
  color: var(--primary-ink);
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  border-radius: 4px;
  transition: color var(--dur) var(--ease);
}
.streamer-link:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.streamer-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.streamer-link .name-emoji { font-size: .85em; }

/* el-drawer 面板: 毛玻璃 + 去掉默认内边距(由内部 .sd 控制) */
.sd-wrap .el-drawer {
  background: rgba(250, 250, 252, .92);
  backdrop-filter: var(--blur-strong);
  -webkit-backdrop-filter: var(--blur-strong);
  box-shadow: var(--shadow-lg);
}
.sd-wrap .el-drawer__body { padding: 0; }

.sd { padding: var(--sp-5) var(--sp-5) var(--sp-6); }

.sd-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.sd-avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-ink);
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
}
.sd-head-text { flex: 1; min-width: 0; }
.sd-name {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--faint); font-family: var(--mono); }
.sd-close {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: rgba(0,0,0,.05);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sd-close:hover { background: rgba(0,0,0,.09); color: var(--ink); }

/* 顶部汇总 KPI */
.sd-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.sd-kpi {
  background: var(--surface-3);
  border: 1px solid var(--border-ink);
  border-radius: var(--r-lg);
  padding: 10px var(--sp-3);
  min-width: 0;
}
.sd-kpi-num {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-kpi-label { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); }

/* 抽屉内分区块 */
.sd-block {
  background: var(--surface-3);
  border: 1px solid var(--border-ink);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.sd-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.sd-block-head h3 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.sd-block-sub { font-size: 11.5px; color: var(--faint); text-align: right; }
/* 趋势图区块头部右侧: 日期说明 + 绘图字段按钮 */
.sd-chart-tools { display: flex; align-items: center; gap: var(--sp-3); }

/* 月度达标进度条 */
.sd-progress-row + .sd-progress-row { margin-top: var(--sp-3); }
.sd-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 5px;
}
.sd-progress-val { font-variant-numeric: tabular-nums; color: var(--faint); }
.sd-progress-val b { color: var(--ink); font-weight: 600; }
.sd-progress {
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.06);
  overflow: hidden;
}
.sd-progress-bar {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--primary);
  transition: width .5s var(--ease);
}
.sd-progress-bar.ok { background: var(--green); }

.sd-verdict {
  margin: var(--sp-3) 0 0;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--r-md);
  padding: 7px var(--sp-3);
}
.sd-verdict.ok  { color: var(--green-ink); background: var(--green-soft); }
.sd-verdict.bad { color: var(--red-ink);   background: var(--red-soft); }

/* 趋势曲线 */
.sd-chart + .sd-chart { margin-top: var(--sp-4); }
.sd-chart-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.sd-chart-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.sd-chart-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.sd-chart-latest { margin-left: auto; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.lc { display: block; width: 100%; height: auto; }
.lc-grid { stroke: rgba(0,0,0,.06); stroke-width: 1; }
.lc-ylab, .lc-xlab { font-size: 10.5px; fill: var(--faint); font-variant-numeric: tabular-nums; }
.lc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 悬浮热区与提示卡片 */
.lc-hot { fill: transparent; cursor: crosshair; }
.lc-hover-dot { fill: #fff; stroke-width: 2.5; pointer-events: none; }
.lc-tip { pointer-events: none; }
.lc-tip-box { fill: rgba(255,255,255,.98); stroke: rgba(0,0,0,.08); stroke-width: 1; }
.lc-tip-date { font-size: 12px; fill: var(--faint); font-variant-numeric: tabular-nums; }
.lc-tip-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 命中预警记录 */
.sd-alerts { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.sd-alert {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 2px;
  font-size: 12.5px;
}
.sd-alert + .sd-alert { border-top: 1px dashed rgba(0,0,0,.06); }
.sd-alert-date { flex: none; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sd-alert-tag {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 1px 8px;
}
.sd-alert-tag.rule1 { color: var(--red-ink);   background: var(--red-soft);   border: 1px solid var(--red-border); }
.sd-alert-tag.rule2 { color: var(--amber-ink); background: var(--amber-soft); border: 1px solid var(--amber-border); }
.sd-alert-meta {
  min-width: 0;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-empty { margin: 0; padding: var(--sp-3) 0 2px; font-size: 12.5px; color: var(--faint); text-align: center; }

@media (max-width: 640px) {
  .sd-wrap .el-drawer { width: 100% !important; }
  .sd { padding: var(--sp-4); }
  .sd-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   登录页表单补充(字段组/表单容器/底部切换链接)
   ============================================================ */
.login-form { display: block; }
.login-field-group { margin-bottom: 20px; }
.login-field-group:last-of-type { margin-bottom: 0; }
#changeForm .login-field-group { margin-bottom: var(--sp-4); }
#changeForm .login-field-group:last-of-type { margin-bottom: 0; }
#changeForm .login-field { min-height: 48px; }
#changeForm .login-btn { margin-top: var(--sp-5); }
.login-switch {
  margin: var(--sp-5) 0 0;
  font-size: 13px;
  color: var(--faint);
  text-align: center;
}
.login-switch a { color: var(--primary-ink); text-decoration: none; font-weight: 500; }
.login-switch a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   预警表 · 树形首列(经纪人/新老主播分组行 + 主播行标识)
   ============================================================ */
.agent-cell {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
  max-width: 100%;
}
.agent-cell-name {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-count { flex: none; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

.idgroup-cell {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
}
.idgroup-name { font-weight: 600; }
.idgroup-count { font-size: 11.5px; opacity: .85; font-variant-numeric: tabular-nums; }
.idgroup-cell.idgroup-new { color: var(--green-ink); background: var(--green-soft); border: 1px solid var(--green-border); }
.idgroup-cell.idgroup-old { color: var(--muted); background: rgba(0,0,0,.045); border: 1px solid var(--border-ink); }
.idgroup-cell.idgroup-unk { color: var(--primary-ink); background: var(--primary-soft); border: 1px solid var(--primary-border); }

/* 主播行的新老标识小圆标 */
.id-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  border-radius: var(--r-pill);
  vertical-align: 1px;
}
.id-tag.id-new { color: var(--green-ink); background: var(--green-soft); border: 1px solid var(--green-border); }
.id-tag.id-old { color: var(--muted); background: rgba(0,0,0,.045); border: 1px solid var(--border-ink); }

/* ============================================================
   自定义显示字段弹层(col-pop) 与触发按钮
   ============================================================ */
.col-pop { display: flex; flex-direction: column; gap: 8px; }
.col-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.col-pop-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.col-pop-reset {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--primary-ink);
  cursor: pointer;
}
.col-pop-reset:hover { text-decoration: underline; text-underline-offset: 3px; }
.col-pop-search { width: 100%; }
.col-pop-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 0 2px;
}
.col-pop-note { font-size: 11.5px; color: var(--faint); }

/* ============================================================
   开播率 · 汇总卡副数字 + 表格内进度条
   ============================================================ */
.stat-num-sub {
  font-size: .52em;
  font-weight: 600;
  color: var(--faint);
  margin-left: 2px;
}
.rate-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.rate-bar {
  flex: 1;
  min-width: 60px;
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.07);
  overflow: hidden;
}
.rate-bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--primary);
  transition: width .5s var(--ease);
}
.rate-bar-fill.rate-ok  { background: var(--green); }
.rate-bar-fill.rate-mid { background: var(--amber); }
.rate-bar-fill.rate-low { background: var(--red); }
.rate-val {
  flex: none;
  min-width: 46px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.rate-val.rate-ok  { color: var(--green-ink); }
.rate-val.rate-mid { color: var(--amber-ink); }
.rate-val.rate-low { color: var(--red-ink); }

/* ============================================================
   自定义筛选 · 日期单元格与表面板
   ============================================================ */
.cf-day { font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cf-table-panel { padding-bottom: var(--sp-2); }
.streamer-days {
  display: inline-block;
  margin-left: 6px;
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* 上传页整体容器 */
.upload-wrap { padding-bottom: var(--sp-3); }

/* 页头操作区允许换行(筛选页控件较多) */
.page-head-actions-wrap { flex-wrap: wrap; row-gap: var(--sp-2); }

/* 经纪人账号管理页说明文字 */
.agents-note {
  margin: var(--sp-4) 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--faint);
}

/* 管理员账号管理面板 */
.admin-account-panel { margin-bottom: var(--sp-4); }
.admin-account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.admin-account-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.admin-account-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.admin-account-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.admin-account-name {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(0,0,0,.04);
  padding: 4px 10px;
  border-radius: var(--r-md);
}

/* ============================================================
   连续预警页 (.pane-consec) — 页面级精修
   视觉优先级: 标题 > 核心指标数字 > 预警类型 > 经纪人列表
   ============================================================ */
/* 统计卡: 图标居左, 文字列为右, 高度约 130~150px */
.pane-consec .stat { padding: 20px 22px; }

/* 面板头: 标题与计数同一行(计数弱化, 垂直居中对齐) */
.pane-consec .rule-head-left {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 经纪人行 — 轻量表格结构: 名称在左, 计数绝对定位右对齐(不挤占树形图标行) */
.pane-consec td.tree-first-col .cell { position: relative; padding-right: 84px; }
.pane-consec .agent-count {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

/* 行高 ~50px, 分隔线极细 */
.pane-consec .el-table td.el-table__cell { padding: 14px 0; }

/* 主播行(二级层级): 浅底与经纪人行分层, hover 时由全局白色提亮覆盖 */
.pane-consec .el-table__row:not(.agent-row):not(.idgroup-row) > td.el-table__cell {
  background: rgba(245,248,252,.55);
}