/* ============================================================================
   昊海工作台 · 五档皮肤（skin layer）
   ----------------------------------------------------------------------------
   设计约束：
   1. 只覆盖颜色 / 圆角 / 阴影 / 装饰，不改布局尺寸、不改任何 DOM 结构。
   2. 不修改 common.css / app.css，本文件在其之后加载，靠 html[data-skin] 提高特异性。
   3. 移除渐变、发光、毛玻璃、立体凸起、脉冲动画等装饰性效果。
   4. 移除本文件 + skin.js 即可完全回到原状。
   ============================================================================ */

/* ---------- 变量映射：把原项目变量接到 sk-* 上，一处定义全局生效 ---------- */
html[data-skin] {
  --bg: var(--sk-bg);
  --bg-2: var(--sk-bg);
  --surface: var(--sk-surface);
  --surface-solid: var(--sk-surface);
  --surface-2: var(--sk-surface-2);

  --border: var(--sk-line);
  --border-strong: var(--sk-line-2);

  --text: var(--sk-ink);
  --text-2: var(--sk-ink-2);
  --text-3: var(--sk-ink-3);

  --primary: var(--sk-accent);
  --primary-2: var(--sk-accent);
  --primary-dark: var(--sk-accent-dark);
  --primary-soft: var(--sk-accent-soft);
  --primary-glow: var(--sk-accent-soft);
  --primary-glow-strong: var(--sk-accent-line);
  --accent: var(--sk-accent);
  --on-primary: var(--sk-on-accent);

  --green: var(--sk-ok);
  --amber: var(--sk-warn);
  --red: var(--sk-bad);
  --blue: var(--sk-info);
  --cyan: var(--sk-accent);
  --violet: var(--sk-violet);
  --green-text: var(--sk-ok);
  --amber-text: var(--sk-warn);
  --red-text: var(--sk-bad);
  --red-text-2: var(--sk-bad);

  --green-soft: var(--sk-ok-soft);
  --amber-soft: var(--sk-warn-soft);
  --red-soft: var(--sk-bad-soft);
  --blue-soft: var(--sk-info-soft);
  --violet-soft: var(--sk-violet-soft);
  --orange-soft: var(--sk-accent-soft);
  --gray-soft: var(--sk-surface-2);
  --cyan-soft: var(--sk-accent-soft);

  --green-border: var(--sk-ok-soft);
  --amber-border: var(--sk-warn-soft);
  --red-border: var(--sk-bad-soft);
  --indigo-border: var(--sk-accent-line);

  --sidebar-bg: var(--sk-side);
  --sidebar-text: var(--sk-side-ink);
  --sidebar-text-2: var(--sk-side-ink-2);
  --sidebar-muted: var(--sk-side-muted);
  --sidebar-item: var(--sk-side-item);
  --sidebar-item-strong: var(--sk-side-item-2);
  --sidebar-border: var(--sk-side-line);
  --topbar-bg: var(--sk-topbar);

  --skin-banner: var(--sk-banner);
  --glow-1: transparent;
  --glow-2: transparent;
  --glow-3: transparent;
  --mask: var(--sk-mask);

  --shadow-sm: var(--sk-shadow);
  --shadow: var(--sk-shadow);
  --shadow-lg: var(--sk-shadow);

  --radius: 8px;
  --radius-sm: 6px;
}

/* ============================================================================
   01 雾蓝 —— 明亮办公室，8 小时工位
   ============================================================================ */
html[data-skin="mist"] {
  --sk-bg: #E7ECF2;
  --sk-surface: #FFFFFF;
  --sk-surface-2: #F2F6F9;
  --sk-line: rgba(15, 32, 48, 0.13);
  --sk-line-2: rgba(15, 32, 48, 0.20);
  --sk-ink: #0E1D2A;
  --sk-ink-2: #4C6176;
  --sk-ink-3: #6E8092;
  --sk-accent: #0B7185;
  --sk-accent-dark: #084F5E;
  --sk-accent-soft: rgba(11, 113, 133, 0.085);
  --sk-accent-line: rgba(11, 113, 133, 0.30);
  --sk-on-accent: #FFFFFF;
  --sk-ok: #0E7A56;
  --sk-warn: #A1560F;
  --sk-bad: #B03A33;
  --sk-info: #1F5FA8;
  --sk-violet: #5B5AA8;
  --sk-ok-soft: rgba(14, 122, 86, 0.09);
  --sk-warn-soft: rgba(161, 86, 15, 0.10);
  --sk-bad-soft: rgba(176, 58, 51, 0.09);
  --sk-info-soft: rgba(31, 95, 168, 0.09);
  --sk-violet-soft: rgba(91, 90, 168, 0.09);
  --sk-side: #FBFCFE;
  --sk-side-ink: #0E1D2A;
  --sk-side-ink-2: #4C6176;
  --sk-side-muted: #8295A7;
  --sk-side-item: rgba(15, 32, 48, 0.045);
  --sk-side-item-2: rgba(15, 32, 48, 0.075);
  --sk-side-line: rgba(15, 32, 48, 0.10);
  --sk-topbar: rgba(251, 252, 254, 0.92);
  --sk-banner: #0E1D2A;
  --sk-mask: rgba(12, 24, 36, 0.38);
  --sk-shadow: 0 1px 2px rgba(15, 32, 48, 0.05);
}

/* ============================================================================
   02 石墨 —— 傍晚 / 背光工位
   ============================================================================ */
html[data-skin="graphite"] {
  --sk-bg: #161D26;
  --sk-surface: #1B2430;
  --sk-surface-2: #212B39;
  --sk-line: rgba(150, 190, 225, 0.13);
  --sk-line-2: rgba(150, 190, 225, 0.24);
  --sk-ink: #DDE7F1;
  --sk-ink-2: #93A6B9;
  --sk-ink-3: #7C8FA3;
  --sk-accent: #63D6EA;
  --sk-accent-dark: #9BE7F5;
  --sk-accent-soft: rgba(99, 214, 234, 0.12);
  --sk-accent-line: rgba(99, 214, 234, 0.34);
  --sk-on-accent: #05202A;
  --sk-ok: #57D3A2;
  --sk-warn: #E8B272;
  --sk-bad: #F08079;
  --sk-info: #7FB3F0;
  --sk-violet: #A99BE8;
  --sk-ok-soft: rgba(87, 211, 162, 0.13);
  --sk-warn-soft: rgba(232, 178, 114, 0.13);
  --sk-bad-soft: rgba(240, 128, 121, 0.13);
  --sk-info-soft: rgba(127, 179, 240, 0.13);
  --sk-violet-soft: rgba(169, 155, 232, 0.13);
  --sk-side: #101720;
  --sk-side-ink: #DDE7F1;
  --sk-side-ink-2: #A7B8C9;
  --sk-side-muted: #6C7F93;
  --sk-side-item: rgba(255, 255, 255, 0.05);
  --sk-side-item-2: rgba(255, 255, 255, 0.09);
  --sk-side-line: rgba(150, 190, 225, 0.14);
  --sk-topbar: rgba(18, 24, 32, 0.92);
  --sk-banner: #0B1119;
  --sk-mask: rgba(3, 7, 11, 0.60);
  --sk-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* ============================================================================
   03 深空 —— 会议室大屏 / 暗环境
   ============================================================================ */
html[data-skin="void"] {
  --sk-bg: #05080D;
  --sk-surface: #0B1119;
  --sk-surface-2: #101823;
  --sk-line: rgba(120, 170, 210, 0.14);
  --sk-line-2: rgba(120, 170, 210, 0.26);
  --sk-ink: #E6F0FA;
  --sk-ink-2: #8FA6BC;
  --sk-ink-3: #6E8399;
  --sk-accent: #4ED8FF;
  --sk-accent-dark: #8FE9FF;
  --sk-accent-soft: rgba(78, 216, 255, 0.11);
  --sk-accent-line: rgba(78, 216, 255, 0.36);
  --sk-on-accent: #03202B;
  --sk-ok: #4FD8A0;
  --sk-warn: #F0B35E;
  --sk-bad: #FF7A6E;
  --sk-info: #78B4F5;
  --sk-violet: #A895F0;
  --sk-ok-soft: rgba(79, 216, 160, 0.12);
  --sk-warn-soft: rgba(240, 179, 94, 0.12);
  --sk-bad-soft: rgba(255, 122, 110, 0.12);
  --sk-info-soft: rgba(120, 180, 245, 0.12);
  --sk-violet-soft: rgba(168, 149, 240, 0.12);
  --sk-side: #04070B;
  --sk-side-ink: #E6F0FA;
  --sk-side-ink-2: #9DB2C6;
  --sk-side-muted: #5E7387;
  --sk-side-item: rgba(255, 255, 255, 0.045);
  --sk-side-item-2: rgba(255, 255, 255, 0.085);
  --sk-side-line: rgba(120, 170, 210, 0.15);
  --sk-topbar: rgba(5, 9, 14, 0.90);
  --sk-banner: #0A1420;
  --sk-mask: rgba(2, 5, 8, 0.66);
  --sk-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ============================================================================
   04 玫瑰 —— 粉调，浅色
   ============================================================================ */
html[data-skin="rose"] {
  --sk-bg: #FAF2F4;
  --sk-surface: #FFFFFF;
  --sk-surface-2: #FBF3F5;
  --sk-line: rgba(96, 44, 60, 0.13);
  --sk-line-2: rgba(96, 44, 60, 0.20);
  --sk-ink: #2C1B22;
  --sk-ink-2: #6E525B;
  --sk-ink-3: #8B7079;
  --sk-accent: #A8445F;
  --sk-accent-dark: #7E2F45;
  --sk-accent-soft: rgba(168, 68, 95, 0.075);
  --sk-accent-line: rgba(168, 68, 95, 0.28);
  --sk-on-accent: #FFFFFF;
  --sk-ok: #2F7A5C;
  --sk-warn: #9E5A12;
  --sk-bad: #B03546;
  --sk-info: #2A5F96;
  --sk-violet: #7A4E86;
  --sk-ok-soft: rgba(47, 122, 92, 0.09);
  --sk-warn-soft: rgba(158, 90, 18, 0.10);
  --sk-bad-soft: rgba(176, 53, 70, 0.09);
  --sk-info-soft: rgba(42, 95, 150, 0.09);
  --sk-violet-soft: rgba(122, 78, 134, 0.09);
  --sk-side: #FFFBFB;
  --sk-side-ink: #2C1B22;
  --sk-side-ink-2: #6E525B;
  --sk-side-muted: #A2878F;
  --sk-side-item: rgba(96, 44, 60, 0.045);
  --sk-side-item-2: rgba(96, 44, 60, 0.075);
  --sk-side-line: rgba(96, 44, 60, 0.10);
  --sk-topbar: rgba(255, 251, 252, 0.92);
  --sk-banner: #7E2F45;
  --sk-mask: rgba(58, 24, 34, 0.34);
  --sk-shadow: 0 1px 2px rgba(96, 44, 60, 0.05);
}

/* ============================================================================
   05 马卡龙 —— 奶油白 + 薰衣草
   ============================================================================ */
html[data-skin="macaron"] {
  --sk-bg: #F7F5FA;
  --sk-surface: #FFFFFF;
  --sk-surface-2: #FBFAFD;
  --sk-line: rgba(64, 52, 92, 0.12);
  --sk-line-2: rgba(64, 52, 92, 0.19);
  --sk-ink: #241F2E;
  --sk-ink-2: #5E5670;
  --sk-ink-3: #7E7691;
  --sk-accent: #6B5E9C;
  --sk-accent-dark: #544883;
  --sk-accent-soft: rgba(107, 94, 156, 0.075);
  --sk-accent-line: rgba(107, 94, 156, 0.26);
  --sk-on-accent: #FFFFFF;
  --sk-ok: #3E8A78;
  --sk-warn: #A87B1E;
  --sk-bad: #BB5A6C;
  --sk-info: #4B6FA8;
  --sk-violet: #7A63A8;
  --sk-ok-soft: rgba(62, 138, 120, 0.09);
  --sk-warn-soft: rgba(168, 123, 30, 0.10);
  --sk-bad-soft: rgba(187, 90, 108, 0.09);
  --sk-info-soft: rgba(75, 111, 168, 0.09);
  --sk-violet-soft: rgba(122, 99, 168, 0.10);
  --sk-side: #FDFCFF;
  --sk-side-ink: #241F2E;
  --sk-side-ink-2: #5E5670;
  --sk-side-muted: #948CA6;
  --sk-side-item: rgba(64, 52, 92, 0.04);
  --sk-side-item-2: rgba(64, 52, 92, 0.07);
  --sk-side-line: rgba(64, 52, 92, 0.09);
  --sk-topbar: rgba(253, 252, 255, 0.92);
  --sk-banner: #4A3F63;
  --sk-mask: rgba(38, 30, 54, 0.32);
  --sk-shadow: 0 1px 2px rgba(64, 52, 92, 0.05);
}

/* ============================================================================
   基础层
   ============================================================================ */
html[data-skin] body {
  background: var(--sk-bg);
  color: var(--sk-ink);
  transition: background-color .28s var(--ease-out), color .28s var(--ease-out);
}
html[data-skin] ::-webkit-scrollbar-thumb { background: var(--sk-line-2); border-radius: 999px; }
html[data-skin] ::-webkit-scrollbar-thumb:hover { background: var(--sk-ink-3); }

/* ============================================================================
   外壳：侧边栏
   ============================================================================ */
html[data-skin] .sidebar {
  background: var(--sk-side) !important;
  box-shadow: 1px 0 0 var(--sk-side-line) !important;
  color: var(--sk-side-ink);
  transition: background-color .28s var(--ease-out);
}
html[data-skin] .sidebar-head { border-bottom: 1px solid var(--sk-side-line); }
html[data-skin] .sidebar-head .logo-mark {
  background: var(--sk-accent) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  color: var(--sk-on-accent) !important;
  font-weight: 700;
}
html[data-skin] .sidebar-head .logo-text h1 { font-weight: 600; letter-spacing: 0; }
html[data-skin] .sidebar-head .logo-text p { letter-spacing: .02em; }

/* 导航项：去掉渐变胶囊、发光指示条、图标投影 */
html[data-skin] .nav-item,
html[data-skin] .nav-group-head { border-radius: 5px !important; font-weight: 450 !important; }
html[data-skin] .nav-item::before {
  left: 0 !important;
  width: 2px !important;
  border-radius: 0 2px 2px 0 !important;
  background: var(--sk-accent) !important;
  box-shadow: none !important;
}
html[data-skin] .nav-item:hover { background: var(--sk-side-item) !important; color: var(--sk-side-ink) !important; }
html[data-skin] .nav-item.active {
  background: var(--sk-accent-soft) !important;
  color: var(--sk-accent) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
html[data-skin] .nav-item.active .nav-icon svg { filter: none !important; }
html[data-skin] .nav-item.active .nav-icon { transform: none !important; }
html[data-skin] .nav-dot { box-shadow: none !important; }

html[data-skin] .nav-group-head:hover { background: var(--sk-side-item) !important; }
html[data-skin] .nav-group.has-active .nav-group-head {
  background: var(--sk-accent-soft) !important;
  color: var(--sk-accent) !important;
  box-shadow: inset 2px 0 0 var(--sk-accent) !important;
}
html[data-skin] .nav-group-menu {
  background: var(--sk-surface) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
  padding: 4px !important;
}
html[data-skin] .nav-group-menu .nav-item { border-radius: 4px !important; }
html[data-skin] .nav-group-menu .nav-item.active {
  background: var(--sk-accent-soft) !important;
  color: var(--sk-accent) !important;
  box-shadow: none !important;
}

html[data-skin] .sidebar-user { border-bottom: 1px solid var(--sk-side-line); }
html[data-skin] .sidebar-user .avatar {
  border-radius: 5px !important;
  background: var(--sk-accent-soft) !important;
  color: var(--sk-accent) !important;
  box-shadow: none !important;
}
html[data-skin] .sidebar-user .boss-login-btn {
  background: var(--sk-accent) !important;
  color: var(--sk-on-accent) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  font-weight: 600;
}
html[data-skin] .sidebar-user .boss-login-btn:hover { filter: brightness(1.06) !important; box-shadow: none !important; }
html[data-skin] .logout-btn {
  border: 1px solid var(--sk-side-line) !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--sk-side-ink-2) !important;
}
html[data-skin] .logout-btn:hover {
  background: var(--sk-bad-soft) !important;
  border-color: var(--sk-bad-soft) !important;
  color: var(--sk-bad) !important;
}

/* ============================================================================
   外壳：顶栏
   ============================================================================ */
html[data-skin] .topbar {
  background: var(--sk-topbar) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
html[data-skin] .topbar .page-title { font-weight: 600 !important; letter-spacing: -.01em; }
html[data-skin] .topbar-right { font-size: 12.5px; }

/* 顶栏提醒：去凸起立体、去脉冲、去电光扫过 */
html[data-skin] .topbar-alert {
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  border-color: var(--sk-line) !important;
}
html[data-skin] .topbar-alert:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}
html[data-skin] .topbar-alert:active { transform: none !important; box-shadow: none !important; }
html[data-skin] .topbar-alert.danger { background: var(--sk-bad) !important; color: #fff !important; }
html[data-skin] .topbar-alert .alert-dot {
  animation: none !important;
  box-shadow: none !important;
  font-weight: 700;
}
html[data-skin] .topbar-alert.task-running {
  background: var(--sk-accent) !important;
  animation: none !important;
  color: var(--sk-on-accent) !important;
}
html[data-skin] .topbar-alert.task-running::after { display: none !important; }
html[data-skin] .topbar-alert.task-running svg { animation: none !important; filter: none !important; }

/* 主题按钮：隐藏 emoji，改画一个色环 */
html[data-skin] .theme-toggle {
  border: 1px solid var(--sk-line) !important;
  background: transparent !important;
  border-radius: 6px !important;
  font-size: 0 !important;
  color: transparent !important;
}
html[data-skin] .theme-toggle:hover { background: var(--sk-accent-soft) !important; border-color: var(--sk-accent-line) !important; }
html[data-skin] .theme-toggle::before {
  content: "";
  width: 13px; height: 13px; border-radius: 50%;
  background: conic-gradient(var(--sk-accent) 0 50%, transparent 50% 100%);
  box-shadow: inset 0 0 0 1px var(--sk-accent);
}

/* ============================================================================
   组件：按钮
   ============================================================================ */
html[data-skin] .btn { border-radius: 5px !important; font-weight: 500 !important; }
html[data-skin] .btn-primary {
  background: var(--sk-accent) !important;
  color: var(--sk-on-accent) !important;
  box-shadow: none !important;
}
html[data-skin] .btn-primary:hover {
  background: var(--sk-accent-dark) !important;
  box-shadow: none !important;
  filter: none !important;
}
html[data-skin] .btn-ghost {
  background: transparent !important;
  border: 1px solid var(--sk-line-2) !important;
  color: var(--sk-ink-2) !important;
}
html[data-skin] .btn-ghost:hover { background: var(--sk-surface-2) !important; border-color: var(--sk-ink-3) !important; }
html[data-skin] .btn-danger { border-radius: 5px !important; }
html[data-skin] .btn:active { transform: none !important; }

html[data-skin] .icon-btn { border-radius: 4px !important; }
html[data-skin] .icon-btn:hover { background: var(--sk-accent-soft) !important; color: var(--sk-accent) !important; }

/* ============================================================================
   组件：表单
   ============================================================================ */
html[data-skin] .input,
html[data-skin] .select,
html[data-skin] .textarea {
  border: 1px solid var(--sk-line-2) !important;
  border-radius: 5px !important;
  background: var(--sk-surface) !important;
  color: var(--sk-ink) !important;
}
html[data-skin] .input:focus,
html[data-skin] .select:focus,
html[data-skin] .textarea:focus {
  border-color: var(--sk-accent) !important;
  box-shadow: 0 0 0 2px var(--sk-accent-soft) !important;
}

/* ============================================================================
   组件：卡片 / 面板
   ============================================================================ */
html[data-skin] .stat-card,
html[data-skin] .panel,
html[data-skin] .card,
html[data-skin] .table-wrap,
html[data-skin] .home-tabs {
  border-radius: var(--radius) !important;
  border: 1px solid var(--sk-line) !important;
  background: var(--sk-surface) !important;
  box-shadow: none !important;
}
html[data-skin] .stat-card:hover {
  transform: none !important;
  border-color: var(--sk-line-2) !important;
  box-shadow: var(--sk-shadow) !important;
}
html[data-skin] .stat-card .stat-icon {
  border-radius: 5px !important;
  background: var(--sk-accent-soft) !important;
  color: var(--sk-accent) !important;
  box-shadow: none !important;
}
html[data-skin] .stat-card:hover .stat-icon { transform: none !important; }
html[data-skin] .stat-card .stat-num { font-weight: 600 !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html[data-skin] .stat-card .stat-label { color: var(--sk-ink-3) !important; }

html[data-skin] .panel-head {
  background: transparent !important;
  border-bottom: 1px solid var(--sk-line) !important;
  padding: 12px 16px !important;
}
html[data-skin] .panel-head h3 { font-weight: 600 !important; font-size: 14px !important; }
html[data-skin] .role-hint { border-radius: 5px !important; }

/* ============================================================================
   组件：横幅
   ============================================================================ */
html[data-skin] .hero-banner {
  background: var(--sk-banner) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  padding: 22px 24px !important;
}
html[data-skin] .hero-banner::before,
html[data-skin] .hero-banner::after { display: none !important; }
html[data-skin] .hero-banner .hero-text h2 { font-weight: 600 !important; letter-spacing: -.01em; }
html[data-skin] .hero-banner .hero-badge {
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 4px !important;
  backdrop-filter: none !important;
  font-weight: 500 !important;
}

/* ============================================================================
   组件：页签（胶囊 → 下划线）
   ============================================================================ */
html[data-skin] .home-tabs {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sk-line) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 4px !important;
  box-shadow: none !important;
}
html[data-skin] .home-tabs [data-home-tab] {
  border-radius: 0 !important;
  padding: 9px 14px !important;
  font-weight: 500 !important;
  color: var(--sk-ink-3) !important;
  box-shadow: inset 0 -2px 0 transparent !important;
}
html[data-skin] .home-tabs [data-home-tab]:hover {
  background: transparent !important;
  color: var(--sk-ink) !important;
}
html[data-skin] .home-tabs [data-home-tab].btn-primary {
  background: transparent !important;
  color: var(--sk-accent) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 -2px 0 var(--sk-accent) !important;
}
html[data-skin] .home-tabs [data-home-tab].btn-primary svg { filter: none !important; }

/* ============================================================================
   组件：表格
   ============================================================================ */
/* 注意：不要在这里改 .table-wrap 的 overflow —— 吸顶表头依赖 .sticky-thead{overflow:visible} */
html[data-skin] .table th {
  background: var(--sk-surface-2) !important;
  border-bottom: 1px solid var(--sk-line-2) !important;
  color: var(--sk-ink-2) !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}
html[data-skin] .table-wrap.sticky-thead thead th {
  background: var(--sk-surface-2) !important;
  color: var(--sk-ink-2) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 -1px 0 var(--sk-line-2) !important;
}
html[data-skin] .table td { border-bottom: 1px solid var(--sk-line) !important; color: var(--sk-ink-2) !important; }
html[data-skin] .table tbody tr:hover { background: var(--sk-accent-soft) !important; }
html[data-skin] .table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--sk-accent) !important; }
html[data-skin] .table-wrap.table-wrap-round th:first-child,
html[data-skin] .table-wrap.table-wrap-round th:last-child { border-radius: 0 !important; }

/* ============================================================================
   业务页：主播跟进（原本是一整套马卡龙粉紫变量，这里接回皮肤）
   ============================================================================ */
html[data-skin] .fu-page,
html[data-skin] .fu-card-modal {
  --fu-pink: var(--sk-accent);
  --fu-pink-deep: var(--sk-accent);
  --fu-pink-soft: var(--sk-accent-soft);
  --fu-purple: var(--sk-ink-3);
  --fu-purple-deep: var(--sk-ink-2);
  --fu-purple-soft: var(--sk-surface-2);
  --fu-teal: var(--sk-ok);
  --fu-teal-deep: var(--sk-ok);
  --fu-teal-soft: var(--sk-ok-soft);
  --fu-coral: var(--sk-warn);
  --fu-coral-deep: var(--sk-warn);
  --fu-coral-soft: var(--sk-warn-soft);
  --fu-ink: var(--sk-ink);
  --fu-ink-2: var(--sk-ink-3);
  --fu-card-bg: var(--sk-surface);

  --primary: var(--sk-accent);
  --primary-2: var(--sk-accent);
  --accent: var(--sk-accent);
  --bg: var(--sk-bg);
  --surface: var(--sk-surface);
  --surface-2: var(--sk-surface-2);
  --border: var(--sk-line);
  --border-strong: var(--sk-line-2);
  --text: var(--sk-ink);
  --text-2: var(--sk-ink-2);
  --text-3: var(--sk-ink-3);
  --amber-text: var(--sk-warn);
  --amber-border: var(--sk-line-2);
  --orange-soft: var(--sk-accent-soft);
  --green: var(--sk-ok);
  --red: var(--sk-bad);
}

html[data-skin] .fu-cards {
  background: var(--sk-surface-2) !important;
  border-radius: var(--radius) !important;
  padding: 14px !important;
  gap: 16px !important;
}
html[data-skin] .fu-card {
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
html[data-skin] .fu-card:hover {
  border-color: var(--sk-accent-line) !important;
  box-shadow: var(--sk-shadow) !important;
  transform: none !important;
}
html[data-skin] .fu-schedule-box,
html[data-skin] .fu-modal-head,
html[data-skin] .stage-tabs,
html[data-skin] .search-box {
  border-radius: var(--radius) !important;
  border: 1px solid var(--sk-line) !important;
  background: var(--sk-surface) !important;
  box-shadow: none !important;
}
html[data-skin] .fu-modal-head { background: var(--sk-surface-2) !important; }
html[data-skin] .fu-tip-badge {
  background: var(--sk-accent) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}
html[data-skin] .fu-page .stage-tabs .btn,
html[data-skin] .fu-page .stage-tabs .btn-ghost,
html[data-skin] .fu-page .stage-tabs .btn-primary,
html[data-skin] .fu-page .toolbar .btn-primary {
  border-radius: 4px !important;
  box-shadow: none !important;
  background-image: none !important;
}
html[data-skin] .fu-page .stage-tabs .btn-ghost { background: transparent !important; color: var(--sk-ink-2) !important; }
html[data-skin] .fu-page .stage-tabs .btn-primary { background: var(--sk-accent) !important; color: var(--sk-on-accent) !important; }

/* ============================================================================
   业务页：实时战况（原为硬编码深色面板，接回皮肤）
   ============================================================================ */
html[data-skin] .bhs-wrap {
  background: var(--sk-surface) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--radius) !important;
  color: var(--sk-ink) !important;
}
html[data-skin] .bhs-top { border-bottom: 1px solid var(--sk-line) !important; }
html[data-skin] .bhs-live {
  background: var(--sk-ok-soft) !important;
  color: var(--sk-ok) !important;
  border-color: var(--sk-ok-soft) !important;
}
html[data-skin] .bhs-dot { background: var(--sk-ok) !important; box-shadow: none !important; animation: none !important; }
html[data-skin] .bhs-meta,
html[data-skin] .bhs-kpi-l,
html[data-skin] .bhs-sec-t span,
html[data-skin] .bhs-fsub { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-daytabs { background: var(--sk-surface-2) !important; border-color: var(--sk-line) !important; }
html[data-skin] .bhs-daytabs button { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-daytabs button.on {
  background: var(--sk-surface) !important;
  color: var(--sk-ink) !important;
  box-shadow: inset 0 0 0 1px var(--sk-line-2) !important;
}
html[data-skin] .bhs-kpi,
html[data-skin] .bhs-sec {
  background: var(--sk-surface) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--radius-sm) !important;
}
html[data-skin] .bhs-kpi-v small { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-sec-t { color: var(--sk-ink) !important; }
html[data-skin] .bhs-fn { color: var(--sk-accent) !important; }
html[data-skin] .bhs-fl { color: var(--sk-ink-2) !important; }
html[data-skin] .bhs-fstep:not(:last-child)::after { color: var(--sk-line-2) !important; }

/* ============================================================================
   皮肤切换面板
   ============================================================================ */
.skin-pop {
  position: fixed;
  z-index: 2147483000;
  width: 252px;
  padding: 6px;
  background: var(--sk-surface, #fff);
  border: 1px solid var(--sk-line-2, rgba(20, 28, 38, .14));
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(12, 20, 30, .18);
  font-family: var(--font);
  display: none;
}
.skin-pop.on { display: block; animation: skinPop .16s var(--ease-out); }
@keyframes skinPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.skin-pop .sp-head {
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--sk-ink-3, #8b95a3);
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--sk-line, rgba(20, 28, 38, .08));
  margin-bottom: 4px;
}
.skin-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background .14s var(--ease-out);
}
.skin-opt:hover { background: var(--sk-accent-soft, rgba(20, 28, 38, .05)); }
.skin-opt.on { background: var(--sk-accent-soft, rgba(20, 28, 38, .07)); }
.skin-opt .sw {
  width: 24px; height: 24px; border-radius: 3px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(20, 28, 38, .16);
}
.skin-opt .nm { font-size: 12.5px; font-weight: 600; color: var(--sk-ink, #1d2530); line-height: 1.3; }
.skin-opt .ds { font-size: 10.5px; color: var(--sk-ink-3, #8b95a3); margin-top: 1px; }
.skin-opt .ck { margin-left: auto; font-size: 11px; color: var(--sk-accent, #1d2530); opacity: 0; }
.skin-opt.on .ck { opacity: 1; }

.skin-opt[data-skin="mist"] .sw { background: linear-gradient(135deg, #E7ECF2 0 50%, #0B7185 50% 100%); }
.skin-opt[data-skin="graphite"] .sw { background: linear-gradient(135deg, #161D26 0 50%, #63D6EA 50% 100%); }
.skin-opt[data-skin="void"] .sw { background: linear-gradient(135deg, #05080D 0 50%, #4ED8FF 50% 100%); }
.skin-opt[data-skin="rose"] .sw { background: linear-gradient(135deg, #FAF2F4 0 50%, #A8445F 50% 100%); }
.skin-opt[data-skin="macaron"] .sw { background: linear-gradient(135deg, #F7F5FA 0 50%, #6B5E9C 50% 100%); }

.skin-pop .sp-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 5px;
  margin-top: 4px;
  border-top: 1px solid var(--sk-line, rgba(20, 28, 38, .08));
  font-size: 10px;
  color: var(--sk-ink-3, #9aa3b0);
}
.skin-pop .sp-foot kbd {
  border: 1px solid var(--sk-line-2, rgba(20, 28, 38, .18));
  border-radius: 3px;
  padding: 0 4px;
  font-size: 9.5px;
  font-family: var(--mono, monospace);
  color: var(--sk-ink-2, #6b7684);
}

/* ============================================================================
   细节：统一数字与对齐
   ============================================================================ */
html[data-skin] .stat-num,
html[data-skin] .table .cell-strong { font-variant-numeric: tabular-nums; }
html[data-skin] .table th.r,
html[data-skin] .table td.r { text-align: right; }


/* ============================================================================
   大盘「实时战况」：排名卡 / 抽屉明细（原为整套硬编码深色）
   ============================================================================ */
html[data-skin] .bhs-rankcol {
  background: var(--sk-surface) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--radius-sm) !important;
}
html[data-skin] .bhs-rankcol-h {
  background: var(--sk-surface-2) !important;
  border-bottom: 1px solid var(--sk-line) !important;
  color: var(--sk-ink-2) !important;
  font-weight: 600 !important;
}
html[data-skin] .bhs-rankrow { border-bottom: 1px dashed var(--sk-line) !important; }
html[data-skin] .bhs-rankrow.champ {
  background: var(--sk-accent-soft) !important;
  border-radius: 4px !important;
}
html[data-skin] .bhs-rk { background: var(--sk-surface-2) !important; color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-rankrow.champ .bhs-rk { background: var(--sk-accent) !important; color: var(--sk-on-accent) !important; }
html[data-skin] .bhs-rk-n { color: var(--sk-ink) !important; }
html[data-skin] .bhs-rk-n em { color: var(--sk-accent) !important; background: var(--sk-accent-soft) !important; }
html[data-skin] .bhs-rk-p { color: var(--sk-ok) !important; }
html[data-skin] .bhs-rk-c { color: var(--sk-warn) !important; }
html[data-skin] .bhs-rankg { background: var(--sk-surface) !important; border: 1px solid var(--sk-line) !important; }
html[data-skin] .bhs-rankg-h { color: var(--sk-ink-2) !important; }
html[data-skin] .bhs-rankg-h em { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-rk-name { color: var(--sk-ink-2) !important; }
html[data-skin] .bhs-rankrow.slim.champ .bhs-rk-name { color: var(--sk-ink) !important; }
html[data-skin] .bhs-rk-v { color: var(--sk-accent) !important; }
html[data-skin] .bhs-rankrow.slim.champ .bhs-rk-v { color: var(--sk-accent) !important; }
html[data-skin] .bhs-mini,
html[data-skin] .bhs-empty { color: var(--sk-ink-3) !important; }

html[data-skin] .bhs-adv {
  background: var(--sk-surface-2) !important;
  border: 1px solid var(--sk-line) !important;
  border-left: 3px solid var(--sk-accent) !important;
  border-radius: var(--radius-sm) !important;
}
html[data-skin] .bhs-adv .h { color: var(--sk-ink) !important; }
html[data-skin] .bhs-adv .b { color: var(--sk-ink-2) !important; }
html[data-skin] .bhs-adv.bad { border-left-color: var(--sk-bad) !important; }
html[data-skin] .bhs-adv.bad .h { color: var(--sk-bad) !important; }
html[data-skin] .bhs-adv.warn { border-left-color: var(--sk-warn) !important; }
html[data-skin] .bhs-adv.warn .h { color: var(--sk-warn) !important; }
html[data-skin] .bhs-adv.ok { border-left-color: var(--sk-ok) !important; }
html[data-skin] .bhs-adv.ok .h { color: var(--sk-ok) !important; }

/* 抽屉 */
html[data-skin] .bhs-drawer,
html[data-skin] .bhs-dh {
  background: var(--sk-surface) !important;
  border-color: var(--sk-line) !important;
  color: var(--sk-ink) !important;
}
html[data-skin] .bhs-dx { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-dx:hover { color: var(--sk-ink) !important; }
html[data-skin] .bhs-ava {
  background: var(--sk-accent-soft) !important;
  border-color: var(--sk-accent-line) !important;
  color: var(--sk-accent) !important;
}
html[data-skin] .bhs-hname { color: var(--sk-ink) !important; }
html[data-skin] .bhs-hsub { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-hsub b { color: var(--sk-ink-2) !important; }
html[data-skin] .bhs-hstat {
  background: var(--sk-surface-2) !important;
  border-color: var(--sk-line) !important;
}
html[data-skin] .bhs-hstat > div { border-right-color: var(--sk-line) !important; }
html[data-skin] .bhs-hstat-l { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-hstat-v { color: var(--sk-ink) !important; }
html[data-skin] .bhs-hstat-v small { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-tabs {
  background: var(--sk-surface-2) !important;
  border-color: var(--sk-line) !important;
}
html[data-skin] .bhs-tabs button { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-tabs button.on {
  background: var(--sk-surface) !important;
  color: var(--sk-accent) !important;
  box-shadow: inset 0 0 0 1px var(--sk-line-2) !important;
}
html[data-skin] .bhs-item {
  background: var(--sk-surface-2) !important;
  border-color: var(--sk-line) !important;
}
html[data-skin] .bhs-item .t { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-item .m { color: var(--sk-ink-2) !important; }
html[data-skin] .bhs-more {
  background: transparent !important;
  border-color: var(--sk-line-2) !important;
  color: var(--sk-ink-2) !important;
}
html[data-skin] .bhs-more:hover { background: var(--sk-accent-soft) !important; border-color: var(--sk-accent) !important; color: var(--sk-accent) !important; }
html[data-skin] .bhs-click:hover { background: var(--sk-accent-soft) !important; border-color: var(--sk-line-2) !important; }
html[data-skin] .bhs-msgs { background: var(--sk-surface-2) !important; border-color: var(--sk-line) !important; }
html[data-skin] .bhs-msg { border-color: var(--sk-line) !important; }
html[data-skin] .bhs-msg.geek { background: var(--sk-surface) !important; color: var(--sk-ink-2) !important; }
html[data-skin] .bhs-msg.me { background: var(--sk-accent-soft) !important; border-color: var(--sk-accent-line) !important; color: var(--sk-ink) !important; }
html[data-skin] .bhs-msg.card { background: var(--sk-violet-soft) !important; border-color: var(--sk-line) !important; color: var(--sk-ink-2) !important; }
html[data-skin] .bhs-msg.sys { background: transparent !important; border-color: var(--sk-line-2) !important; color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-msg .t { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-chips span,
html[data-skin] .bhs-chips button {
  background: var(--sk-surface-2) !important;
  border-color: var(--sk-line) !important;
  color: var(--sk-ink-2) !important;
}
html[data-skin] .bhs-chips button.on { background: var(--sk-accent-soft) !important; box-shadow: inset 0 0 0 1px var(--sk-accent-line) !important; color: var(--sk-accent) !important; }
html[data-skin] .bhs-chip { background: var(--sk-surface-2) !important; color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-scoretag { background: var(--sk-surface-2) !important; color: var(--sk-ink-2) !important; }
html[data-skin] .bhs-scoretag.bad { background: var(--sk-bad-soft) !important; color: var(--sk-bad) !important; }
html[data-skin] .bhs-scoretag.good { background: var(--sk-ok-soft) !important; color: var(--sk-ok) !important; }
html[data-skin] .bhs-sc { background: var(--sk-surface-2) !important; color: var(--sk-ink-2) !important; }
html[data-skin] .bhs-scope button { background: transparent !important; border-color: var(--sk-line) !important; color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-scope button.on { background: var(--sk-accent-soft) !important; color: var(--sk-accent) !important; border-color: var(--sk-accent-line) !important; }
html[data-skin] .bhs-scorebar { border-top-color: var(--sk-line) !important; }
html[data-skin] .bhs-scorebar button { background: transparent !important; border-color: var(--sk-line-2) !important; color: var(--sk-ink-2) !important; }
html[data-skin] .bhs-scorereport { background: var(--sk-surface-2) !important; border-color: var(--sk-line) !important; color: var(--sk-ink-2) !important; }
html[data-skin] .bhs-mgs-h { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-f8i { background: var(--sk-surface-2) !important; border-color: var(--sk-line) !important; }
html[data-skin] .bhs-f8i b { color: var(--sk-accent) !important; }
html[data-skin] .bhs-f8i span { color: var(--sk-ink-3) !important; }
html[data-skin] .bhs-sec-t { color: var(--sk-ink) !important; }

/* ============================================================================
   登录页
   ============================================================================ */
html[data-skin] .login-card {
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .10) !important;
}
html[data-skin] .login-brand { border-right: 1px solid rgba(255, 255, 255, .12) !important; }
html[data-skin] .login-brand::before,
html[data-skin] .login-brand::after { border-color: rgba(255, 255, 255, .10) !important; }
html[data-skin] .login-brand .logo-mark {
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
}
html[data-skin] .login-brand .feat .dot { background: rgba(255, 255, 255, .55) !important; }
html[data-skin] .tabs { border-radius: 6px !important; }
html[data-skin] .tabs .tab { border-radius: 4px !important; }
html[data-skin] .pwd-toggle { border-radius: 4px !important; }
html[data-skin] .error-msg { border-radius: 5px !important; }

/* ============================================================================
   内联残留清理：JS 里有约 200 处内联色值，这里只处理最显眼的一类
   —— 浅紫渐变底块（透明度 ≤ .2，块内文字是深色，替换后仍可读）
   ============================================================================ */
html[data-skin] [style*="linear-gradient"][style*="127,119,221,.1"],
html[data-skin] [style*="linear-gradient"][style*="127,119,221,.2"],
html[data-skin] [style*="linear-gradient"][style*="166,107,207,.1"],
html[data-skin] [style*="linear-gradient"][style*="166,107,207,.2"] {
  background: var(--sk-accent-soft) !important;
}


/* ============================================================================
   设计令牌（Design Tokens）
   全站 25 个页面共用一把尺子：字号 6 档 / 圆角 4 档 / 间距 5 档 / 动效 1 条曲线
   目的：把「每处都写一个数」变成「每处只选一档」
   ============================================================================ */
html[data-skin] {
  --r-xs: 3px;   /* 标签、角标 */
  --r-sm: 5px;   /* 按钮、输入框、小卡 */
  --r-md: 8px;   /* 卡片、面板、表格容器 */
  --r-lg: 12px;  /* 弹窗、抽屉、大面板 */
  --r-pill: 999px;

  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 14px;
  --sp-4: 18px;
  --sp-5: 24px;

  --fs-1: 10px;    /* 角标、辅助 */
  --fs-2: 11.5px;  /* 次要说明 */
  --fs-3: 13px;    /* 正文 */
  --fs-4: 15px;    /* 小标题 */
  --fs-5: 20px;    /* 页面标题 */
  --fs-num: 26px;  /* 指标数字 */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 140ms;
  --t-mid: 220ms;
  --t-slow: 320ms;
}

/* ----------------------------------------------------------------------------
   1) 圆角归一：内联写了 7/9/10/12/14/16/18/20px，全部收到 4 档
      胶囊与圆形（999px / 50%）不动
   ---------------------------------------------------------------------------- */
html[data-skin] [style*="border-radius:20px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 20px"]:not([style*="999"]),
html[data-skin] [style*="border-radius:18px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 18px"]:not([style*="999"]),
html[data-skin] [style*="border-radius:16px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 16px"]:not([style*="999"]),
html[data-skin] [style*="border-radius:14px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 14px"]:not([style*="999"]),
html[data-skin] [style*="border-radius:12px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 12px"]:not([style*="999"]) {
  border-radius: var(--r-md) !important;
}
html[data-skin] [style*="border-radius:11px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 11px"]:not([style*="999"]),
html[data-skin] [style*="border-radius:10px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 10px"]:not([style*="999"]),
html[data-skin] [style*="border-radius:9px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 9px"]:not([style*="999"]),
html[data-skin] [style*="border-radius:8px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 8px"]:not([style*="999"]) {
  border-radius: var(--r-sm) !important;
}
html[data-skin] [style*="border-radius:7px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 7px"]:not([style*="999"]),
html[data-skin] [style*="border-radius:6px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 6px"]:not([style*="999"]),
html[data-skin] [style*="border-radius:5px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 5px"]:not([style*="999"]),
html[data-skin] [style*="border-radius:4px"]:not([style*="999"]),
html[data-skin] [style*="border-radius: 4px"]:not([style*="999"]) {
  border-radius: var(--r-xs) !important;
}

/* 组件级圆角：卡片/弹窗统一，不再各自 18/16/12 */
html[data-skin] .card,
html[data-skin] .suggestion-card,
html[data-skin] .announce-banner,
html[data-skin] .fu-card,
html[data-skin] .panel,
html[data-skin] .box {
  border-radius: var(--r-md) !important;
}
html[data-skin] .modal,
html[data-skin] .modal-box,
html[data-skin] .drawer,
html[data-skin] .fu-card-modal {
  border-radius: var(--r-lg) !important;
}
html[data-skin] .btn { border-radius: var(--r-sm) !important; }
html[data-skin] .input,
html[data-skin] .textarea,
html[data-skin] .select { border-radius: var(--r-sm) !important; }
html[data-skin] .avatar,
html[data-skin] .chip-pill { border-radius: var(--r-pill) !important; }

/* ----------------------------------------------------------------------------
   2) 字号归一：去掉 .5 这种没有理由的半像素
   ---------------------------------------------------------------------------- */
html[data-skin] [style*="font-size:12.5px"],
html[data-skin] [style*="font-size: 12.5px"] { font-size: 12px !important; }
html[data-skin] [style*="font-size:13.5px"],
html[data-skin] [style*="font-size: 13.5px"] { font-size: 13px !important; }
html[data-skin] [style*="font-size:14.5px"],
html[data-skin] [style*="font-size: 14.5px"] { font-size: 14px !important; }
html[data-skin] [style*="font-size:10.5px"],
html[data-skin] [style*="font-size: 10.5px"] { font-size: 10px !important; }
html[data-skin] [style*="font-size:11.5px"],
html[data-skin] [style*="font-size: 11.5px"] { font-size: 11px !important; }

/* ----------------------------------------------------------------------------
   3) 动效：全站一条曲线、三档时长；只动颜色与透明度，不做位移抖动
   ---------------------------------------------------------------------------- */
html[data-skin] .btn,
html[data-skin] .btn-ghost,
html[data-skin] .btn-primary,
html[data-skin] .tab,
html[data-skin] .chip,
html[data-skin] .nav-item,
html[data-skin] .bhs-daytabs button,
html[data-skin] .bhs-tabs button,
html[data-skin] .bhs-chips button {
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease) !important;
}
html[data-skin] .card,
html[data-skin] .bhs-sec,
html[data-skin] .bhs-kpi,
html[data-skin] .bhs-rankg,
html[data-skin] .announce-banner,
html[data-skin] .suggestion-card {
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease) !important;
}
html[data-skin] .card:hover,
html[data-skin] .bhs-sec:hover {
  border-color: var(--sk-line-2) !important;
}
html[data-skin] table tbody tr {
  transition: background-color 120ms var(--ease) !important;
}

/* 页面进场：内容区首屏元素淡入 + 6px 上浮，320ms，不做逐条错开（避免长列表像在排队） */
@keyframes skPageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
html[data-skin] .content > .page-head,
html[data-skin] .content > .page-head + * {
  animation: skPageIn var(--t-slow) var(--ease) both;
}

/* 数字：变化时闪一次底色，不做滚动（滚动在 4 个指标上同时发生会很吵） */
@keyframes skNumFlash {
  0%   { background-color: var(--sk-accent-soft); }
  100% { background-color: transparent; }
}
html[data-skin] .sk-num-flash { animation: skNumFlash 900ms var(--ease) 1; border-radius: 3px; }

/* 焦点可见：键盘操作时给一圈 2px，鼠标点击不触发 */
html[data-skin] .btn:focus-visible,
html[data-skin] .nav-item:focus-visible,
html[data-skin] button:focus-visible {
  outline: 2px solid var(--sk-accent-line);
  outline-offset: 2px;
}

/* ============================================================================
   无障碍 / 低配机
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html[data-skin] *,
  .skin-pop { animation: none !important; transition: none !important; }
}