@layer legacy {
/* ============================================================
   就业通 - 全站样式
   基于设计系统 kaogong-info-site.design 统一实现
   ============================================================ */

/* ===== 字体加载 ===== */

/* ===== Token 系统（与设计系统 colors_and_type.css 保持一致）===== */
:root {
  /* Brand — 赤陶色主色 #c96442 */
  --brand-50: #fbf2ed;
  --brand-100: #f4e0d5;
  --brand-200: #ebc6b6;
  --brand-300: #e0a892;
  --brand-400: #d6866a;
  --brand-500: #c96442;
  --brand-600: #b0562f;
  --brand-700: #934828;
  --brand-800: #753a22;
  --brand-900: #582e1d;

  /* Text — 暖棕文字 #3d3929 */
  --text-50: #f6f5f0;
  --text-100: #ece9de;
  --text-200: #dad9d4;
  --text-300: #c2c0b6;
  --text-400: #9b988c;
  --text-500: #6e6d68;
  --text-600: #535146;
  --text-700: #46443b;
  --text-800: #3d3929;
  --text-900: #28261b;

  /* Background — 纸感米白 #faf9f5 */
  --bg-50: #ffffff;
  --bg-100: #faf9f5;
  --bg-200: #f5f4ef;
  --bg-300: #ede9de;
  --bg-400: #e3e0d4;
  --bg-500: #dad9d4;
  --bg-600: #cdcabf;
  --bg-700: #b4b2a7;
  --bg-800: #8a887e;
  --bg-900: #535146;

  /* Icon */
  --icon-50: #ffffff;
  --icon-100: #dad9d4;
  --icon-200: #c2c0b6;
  --icon-300: #9b988c;
  --icon-400: #6e6d68;
  --icon-500: #535146;
  --icon-600: #46443b;
  --icon-700: #3d3929;
  --icon-800: #28261b;
  --icon-900: #141413;

  /* Border */
  --border-50: #f0efe9;
  --border-100: #ebebeb;
  --border-200: #e3e0d4;
  --border-300: #dad9d4;
  --border-400: #cdcabf;
  --border-500: #b4b2a7;
  --border-600: #9b988c;
  --border-700: #6e6d68;
  --border-800: #535146;
  --border-900: #3d3929;

  /* Success — 橄榄绿 #788c5d */
  --success-50: #f0f3ea;
  --success-100: #e7ecdd;
  --success-200: #d3dcc1;
  --success-300: #b8c69e;
  --success-400: #9aac79;
  --success-500: #788c5d;
  --success-600: #647649;
  --success-700: #4f5d3a;
  --success-800: #3d482d;
  --success-900: #2b331f;

  /* Error — 砖红 #d64545 */
  --error-50: #fcecea;
  --error-100: #f7dedb;
  --error-200: #f3c4bf;
  --error-300: #eb9d96;
  --error-400: #e0716a;
  --error-500: #d64545;
  --error-600: #b83636;
  --error-700: #962c2c;
  --error-800: #732222;
  --error-900: #531818;

  /* VIP 金色 #e8a830 */
  --vip-50: #fff9e6;
  --vip-100: #fff3c4;
  --vip-200: #ffe891;
  --vip-300: #ffd964;
  --vip-400: #f5c346;
  --vip-500: #e8a830;
  --vip-600: #d48c1a;
  --vip-700: #b06e12;
  --vip-800: #8a5412;
  --vip-900: #754a00;

  /* ===== Semantic tokens ===== */
  --background: var(--bg-100);
  --surface: var(--bg-50);
  --card: var(--bg-50);
  --card-foreground: var(--text-900);
  --muted: var(--bg-300);
  --muted-foreground: var(--text-500);
  --foreground: var(--text-800);
  --primary: var(--brand-500);
  --primary-hover: var(--brand-600);
  --primary-foreground: #ffffff;
  --secondary: var(--bg-200);
  --secondary-foreground: var(--text-700);
  --accent: var(--brand-50);
  --accent-foreground: var(--brand-700);
  --destructive: var(--error-500);
  --destructive-foreground: #ffffff;
  --border: var(--border-300);
  --input: var(--border-300);
  --ring: var(--brand-500);
  --success: var(--success-500);
  --success-foreground: #ffffff;

  /* Sidebar */
  --sidebar: var(--bg-200);
  --sidebar-foreground: var(--text-800);

  /* ===== Fonts ===== */
  --font-display: Newsreader, Georgia, ui-serif, serif;
  --font-sans: Poppins, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Lora, Georgia, ui-serif, serif;
  --font-mono: Geist Mono, ui-monospace, monospace;

  /* ===== Radius ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ===== Shadow ===== */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
}

/* ===== 暗色模式 ===== */
[data-theme="dark"] {
  /* Brand — 赤陶色主色（暗色微调更亮） */
  --brand-50: #3a2318;
  --brand-100: #583322;
  --brand-200: #7a4630;
  --brand-300: #9c5a3f;
  --brand-400: #be6f4f;
  --brand-500: #d88560;
  --brand-600: #e09a7a;
  --brand-700: #e8b095;
  --brand-800: #f0c7b0;
  --brand-900: #f7decc;

  /* Text — 浅色文字 */
  --text-50: #1a1a1a;
  --text-100: #252525;
  --text-200: #2e2e2e;
  --text-300: #3d3d3d;
  --text-400: #5a5a5a;
  --text-500: #888888;
  --text-600: #a8a8a8;
  --text-700: #c4c4c4;
  --text-800: #e0e0e0;
  --text-900: #f0f0f0;

  /* Background — 深纸感 */
  --bg-50: #1c1c1a;
  --bg-100: #161614;
  --bg-200: #1f1f1d;
  --bg-300: #2a2a28;
  --bg-400: #363634;
  --bg-500: #454543;
  --bg-600: #585856;
  --bg-700: #70706e;
  --bg-800: #90908e;
  --bg-900: #b0b0ae;

  /* Icon */
  --icon-50: #1a1a1a;
  --icon-100: #2e2e2e;
  --icon-200: #3d3d3d;
  --icon-300: #5a5a5a;
  --icon-400: #888888;
  --icon-500: #a8a8a8;
  --icon-600: #c4c4c4;
  --icon-700: #e0e0e0;
  --icon-800: #f0f0f0;
  --icon-900: #ffffff;

  /* Border */
  --border-50: #1f1f1d;
  --border-100: #252525;
  --border-200: #2a2a28;
  --border-300: #363634;
  --border-400: #454543;
  --border-500: #585856;
  --border-600: #70706e;
  --border-700: #90908e;
  --border-800: #b0b0ae;
  --border-900: #d0d0ce;

  /* Success — 橄榄绿 */
  --success-50: #1a1f15;
  --success-100: #252d1d;
  --success-200: #344028;
  --success-300: #4a5a36;
  --success-400: #66784a;
  --success-500: #829860;
  --success-600: #9eb07a;
  --success-700: #b8c694;
  --success-800: #d0d8b8;
  --success-900: #e5ead6;

  /* Error — 砖红 */
  --error-50: #2a1515;
  --error-100: #3d1c1c;
  --error-200: #552626;
  --error-300: #773636;
  --error-400: #a04a4a;
  --error-500: #c95f5f;
  --error-600: #d87878;
  --error-700: #e59595;
  --error-800: #eeb4b4;
  --error-900: #f7d4d4;

  /* VIP 金色 */
  --vip-50: #2a2010;
  --vip-100: #3d2e15;
  --vip-200: #554020;
  --vip-300: #755628;
  --vip-400: #9a7230;
  --vip-500: #c29038;
  --vip-600: #d8a848;
  --vip-700: #ebc060;
  --vip-800: #f2d484;
  --vip-900: #f7e6b0;

  /* Semantic tokens */
  --background: var(--bg-100);
  --surface: var(--bg-50);
  --card: var(--bg-50);
  --card-foreground: var(--text-100);
  --muted: var(--bg-300);
  --muted-foreground: var(--text-500);
  --foreground: var(--text-800);
  --primary: var(--brand-500);
  --primary-hover: var(--brand-400);
  --primary-foreground: #1a1a1a;
  --secondary: var(--bg-200);
  --secondary-foreground: var(--text-700);
  --accent: var(--brand-900);
  --accent-foreground: var(--brand-200);
  --destructive: var(--error-500);
  --destructive-foreground: #1a1a1a;
  --border: var(--border-300);
  --input: var(--border-300);
  --ring: var(--brand-500);
  --success: var(--success-500);
  --success-foreground: #1a1a1a;

  /* Sidebar */
  --sidebar: var(--bg-200);
  --sidebar-foreground: var(--text-800);

  /* Shadow — 暗色更深 */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

/* 暗色模式下的特殊组件调整 */
[data-theme="dark"] .data-table tbody tr:hover {
  background: var(--bg-200);
}

[data-theme="dark"] .data-table tbody tr:nth-child(even) {
  background: var(--bg-50);
}

[data-theme="dark"] .tag {
  background: var(--bg-300);
  color: var(--text-700);
}

[data-theme="dark"] .vip-hero,
[data-theme="dark"] .watch-ad-cta {
  background: linear-gradient(135deg, var(--bg-200), var(--brand-50));
  border-color: var(--brand-400);
}

[data-theme="dark"] .benefit-card:hover {
  background: var(--bg-200);
}

[data-theme="dark"] .auth-card {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea {
  background: var(--bg-200);
  border-color: var(--border-400);
  color: var(--foreground);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--primary);
  background: var(--bg-50);
}

[data-theme="dark"] .sidebar-item-active {
  background-color: var(--brand-50);
  color: var(--brand-800);
}

[data-theme="dark"] .sidebar-item-active .sidebar-badge {
  color: var(--brand-800);
  background: rgba(190, 111, 79, 0.2);
}

/* 深色下文字链接也要提亮：brand-700 在深色底上只有 4.15:1，
   12px 的「查看公告」达不到 AA。 */
[data-theme="dark"] .btn-link { color: var(--brand-800); }
[data-theme="dark"] .btn-link:hover { color: var(--brand-900); }

[data-theme="dark"] .view-switch-btn-active {
  background: var(--bg-50);
  color: var(--text-800);
}

[data-theme="dark"] .btn-outline {
  border-color: var(--border-400);
  color: var(--text-700);
}

[data-theme="dark"] .btn-outline:hover {
  background: var(--bg-200);
  border-color: var(--primary);
  color: var(--primary);
}

[data-theme="dark"] .btn-ghost:hover {
  background: var(--bg-200);
}

[data-theme="dark"] .faq-item {
  border-color: var(--border-300);
}

[data-theme="dark"] .faq-item[open] {
  background: var(--bg-200);
}

[data-theme="dark"] .profile-section {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .admin-card {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .drop-zone {
  border-color: var(--border-400);
  background: var(--bg-200);
}

[data-theme="dark"] .drop-zone:hover {
  border-color: var(--primary);
  background: var(--brand-50);
}

[data-theme="dark"] .import-success {
  background: var(--success-50);
  border-color: var(--success-300);
  color: var(--success-400);
}

[data-theme="dark"] .import-error {
  background: var(--error-50);
  border-color: var(--error-300);
  color: var(--error-400);
}

[data-theme="dark"] .vip-feature-lock {
  background: rgba(22, 22, 20, 0.85);
}

/* ===== 全局重置 ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--primary-hover);
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-900);
  margin: 0;
}

/* ===== 自定义滚动条 ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-400); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-500); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== 顶部导航栏 ===== */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  box-shadow: var(--shadow-xs);
}

.top-nav .nav-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.top-nav .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-900);
}

.top-nav .logo-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.top-nav .nav-link {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-600);
  transition: all 0.15s ease;
}

.top-nav .nav-link:hover {
  background: var(--bg-200);
  color: var(--text-800);
}

.top-nav .nav-link.active {
  background: var(--brand-50);
  color: var(--brand-600);
}

.top-nav .nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-nav .user-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle-nav {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-600);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-toggle-nav:hover {
  color: var(--text-800);
  border-color: var(--text-400);
  background: var(--bg-200);
}

.theme-toggle-nav .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle-nav .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle-nav .theme-icon-moon { display: block; }

.top-nav .user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.top-nav .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  position: relative;
}

/* ===== VIP 标识 ===== */
.vip-crown {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--vip-400), var(--vip-600));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  color: #fff;
}

.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--vip-400), var(--vip-600));
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* ===== 按钮 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--primary-foreground);
}

.btn-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--bg-300);
  color: var(--text-800);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-outline:hover {
  background: var(--brand-50);
  color: var(--primary-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text-600);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--bg-200);
  color: var(--text-800);
}

.btn-danger {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: var(--destructive);
}
.btn-danger:hover {
  background: var(--error-600);
  border-color: var(--error-600);
  color: var(--destructive-foreground);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  background: var(--brand-50);
  transition: all 0.15s ease;
}
.btn-link:hover {
  background: var(--brand-100);
  color: var(--primary-hover);
}

/* 🔴 2026-10-06 删除 .btn-link.vip-source-lock 样式。
   公告链接已对所有普通用户开放，前端不再渲染锁图标按钮，
   留着这段只会让后来加样式的人误以为还有锁要配。 */

.btn-lg { padding: 12px 28px; font-size: 15px; border-radius: var(--radius-sm); }
.btn-sm { padding: 6px 14px; font-size: 13px; border-radius: 6px; }
.btn-xs { padding: 4px 10px; font-size: 12px; border-radius: 6px; }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== 主布局容器 ===== */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px;
}

/* ===== 表格页面布局 ===== */
.layout-with-sidebar {
  display: flex;
  height: calc(100vh - 64px);
  max-width: 1600px;
  margin: 0 auto;
}

/* ===== 左侧筛选栏 ===== */
.filter-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px 16px;
}

.filter-group {
  margin-bottom: 24px;
}

.filter-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-500);
  margin-bottom: 12px;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-700);
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-option:hover {
  background: var(--bg-200);
}

.filter-option.active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 500;
}

.filter-option input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

/* ===== 主内容区 ===== */
.main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== 工具栏 ===== */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== 搜索框 ===== */
.search-box {
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
  flex: 1;
  max-width: 480px;
  min-width: 240px;
}

.search-box:focus-within {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.1);
}

.search-box svg.search-icon {
  width: 16px;
  height: 16px;
  margin-left: 12px;
  color: var(--text-400);
  flex-shrink: 0;
}

.search-box input {
  flex: 1;
  height: 100%;
  padding: 0 12px;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--text-800);
  background: transparent;
  min-width: 0;
}

.search-box input::placeholder {
  color: var(--text-400);
}

.search-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 6px;
  border-radius: 4px;
  color: var(--text-400);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.15s ease;
}

.search-clear-btn:hover {
  background: var(--bg-200);
  color: var(--text-600);
}

/* ===== 表格卡片 ===== */
.table-card {
  flex: 1;
  overflow: auto;
  padding: 16px;
  position: relative;
}

.table-inner {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

/* ===== 数据表格 ===== */
.data-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
  line-height: 1.4;
  /* ⭐ 必须 fixed：不设的话默认是 auto，浏览器会**按单元格内容重新分配宽度**，
     用户拖出来的 colgroup 宽度会被内容"顶"回去（实测设 420px 实际渲染 587px）。
     fixed 之后 colgroup 的 width 才是最终值。
     代价：内容不再自动撑宽，长文本靠下面 td 的 text-overflow:ellipsis 截断
     —— 那些规则本来就已经写了，正好生效。 */
  table-layout: fixed;
}

.data-table thead th {
  height: 44px;
  padding: 0 14px;
  background: var(--bg-100);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-500);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 5;
}

.data-table thead th .th-content {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.data-table thead th .sort-icon {
  opacity: 0;
  transition: opacity 0.15s ease;
  width: 12px;
  height: 12px;
}

.data-table thead th:hover .sort-icon { opacity: 1; color: var(--primary); }
.data-table thead th.sort-active .sort-icon { opacity: 1; color: var(--primary); }

.data-table tbody td {
  height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-200);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) td { background-color: var(--bg-50); }
.data-table tbody tr:hover td { background-color: var(--brand-50); }
.data-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.data-table tbody tr.row-selected td { background-color: var(--brand-100); }

.job-title {
  font-weight: 500;
  color: var(--text-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 标签 ===== */
.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.tag-guokao { background: var(--brand-100); color: var(--brand-700); }
.tag-shengkao { background: var(--success-100); color: var(--success-700); }
.tag-shiye { background: var(--bg-300); color: var(--text-700); }
.tag-xuandiao { background: #e0d5f0; color: #5c4a8a; }
.tag-linxuan { background: #d5e8f0; color: #3a6a80; }

/* ===== 竞争比进度条=====
 * 2026-10-06 已删除：竞争比字段整体移除（真实库 99.94% 无数据）。
 * 连带删掉 .compete-bar / .compete-low|mid|high / .job-ratio。
 * 如果将来要恢复竞争比，这些样式要一起回来，不然表格会没有条。
 */

/* ===== 状态点 ===== */
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ===== 招聘类别标签（2026-10-05 导入事业单位招聘数据后新增）===== */
.cat-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.5;
}
.cat-gongkao   { background: #fdece7; color: #b0562f; }
.cat-edu       { background: #e6f1fb; color: #185fa5; }
.cat-gaoxiao   { background: #eaf3de; color: #3b6d11; }
.cat-yiliao    { background: #fceaea; color: #a32d2d; }
.cat-yangongqi { background: #eeedfe; color: #534ab7; }
.cat-other     { background: #f1efe8; color: #5f5e5a; }

/* ===== 编制标签 ===== */
.staff-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.5;
}
.staff-yes     { background: #eaf3de; color: #3b6d11; }
.staff-no      { background: #f1efe8; color: #6b6a65; }
.staff-unknown { background: #fdf3e3; color: #854f0b; }
/* 混合值（源表里「正式编 非编制」这类，117 条）：用蓝色区分，
   别混进 yes/no 的绿/灰里 —— 它其实是"两种岗位都有"，不是"有编制"。 */
.staff-mixed   { background: #e6effa; color: #1d4e89; }
/* 未填写：最浅的灰，几乎不抢视线（13227 条，占比最大但信息量最低） */
.staff-empty   { background: #f5f5f4; color: #9a9a95; }

/* 2026-11-07：表格里的编制标签左移一个内边距（8px = 7px padding + 1px border），
   让标签里的文字和表头「编制」文字对齐。卡片视图不受影响。 */
.data-table tbody td .staff-tag {
  margin-left: -8px;
}

/* 筛选选项右侧的条数（编制筛选用） */
.filter-popup-option-num {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-400);
}
.filter-popup-option.active .filter-popup-option-num {
  color: var(--primary);
  opacity: 0.75;
}
/* 移动端抽屉里的语义选项也是右对齐条数 */
.mobile-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-filter-option .filter-popup-option-num {
  margin-left: auto;
}

/* ===== VIP 行遮罩 ===== */
.vip-row td {
  position: relative;
  filter: grayscale(0.3);
}

.vip-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  backdrop-filter: blur(2px);
  background: rgba(250, 249, 245, 0.7);
  z-index: 5;
}

.vip-overlay .lock-icon { color: var(--primary); width: 16px; height: 16px; }
.vip-overlay .vip-text { font-size: 12px; font-weight: 500; color: var(--text-600); }

.vip-overlay .vip-btn {
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, var(--vip-500), var(--vip-600));
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s ease;
}

.vip-overlay .vip-btn:hover { opacity: 0.9; }

/* ===== 操作按钮 ===== */
.row-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.data-table tbody tr:hover .row-actions {
  opacity: 1;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--text-500);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-icon:hover { background-color: var(--bg-200); color: var(--text-800); }

.btn-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  color: var(--text-400);
}
.btn-fav:hover { background: var(--brand-50); transform: scale(1.1); color: var(--primary); }
.btn-fav:active { transform: scale(0.92); }
.btn-fav.faved { color: var(--primary); }

/* ===== 分页控件 ===== */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.pagination-info {
  font-size: 13px;
  color: var(--text-500);
}

.pagination-info strong {
  color: var(--text-800);
  font-weight: 500;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-600);
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  background: transparent;
}

.page-btn:hover { background-color: var(--bg-200); color: var(--text-800); }

.page-btn.active {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 500;
}

.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-btn:disabled:hover { background: transparent; }

/* ===== 筛选条 ===== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px 0 10px;
  border-radius: 6px;
  background: var(--bg-200);
  font-size: 12px;
  color: var(--text-700);
  border: 1px solid var(--border-200);
}

.filter-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  color: var(--text-400);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-chip button:hover { background: var(--bg-300); color: var(--text-600); }

/* ===== select 下拉框 ===== */
.toolbar select,
select.form-input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-700);
  background: var(--surface);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.toolbar select:focus,
select.form-input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.1);
}

/* ===== 底部版权栏 ===== */
.site-footer {
  padding: 24px;
  text-align: center;
  background: var(--bg-200);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-500);
}

/* ===== 表单样式 ===== */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-700);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-800);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

.form-input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.1);
}

.form-input::placeholder {
  color: var(--text-400);
}

.form-error {
  font-size: 12px;
  color: var(--error-500);
  margin-top: 6px;
}

.form-hint {
  font-size: 12px;
  color: var(--text-500);
  margin-top: 6px;
}

/* ===== 卡片通用样式 ===== */
.card {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.card-body {
  padding: 24px;
}

/* ===== 登录/注册页 ===== */
/* ===== 认证页（2026-10-06 统一为居中单列）=====
 *
 *🔴 原来这里有 5 套布局类，已全部删除，因为登录页改版后不再有任何页面使用：
 *   .auth-page / .auth-brand-side / .auth-form-side  —— 登录页左右分栏（带品牌介绍）
 *   .auth-feature-list / .auth-feature-item         —— 品牌区的卖点列表
 *   .auth-centered-logo                             —— 卡片外的标题容器
 * 删掉的原因是**留着比删掉更危险**：它们的渐变背景、大字号标题、移动端
 * padding 覆盖规则会持续误导后来加样式的人（照着一个没人用的类名改半天）。
 *
 * 现在四个认证页（登录/注册/找回密码/重置密码）统一结构：
 *   .auth-centered（外层居中）> .auth-centered-inner（限宽 440）> .auth-card
 * 标题（.auth-title）和副标题（.auth-subtitle）都在 .auth-card 内部。
 */

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.auth-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-900);
  margin: 0 0 8px 0;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--text-500);
  margin: 0 0 28px 0;
}

.auth-footer {
  text-align: center;
  font-size: 13px;
  color: var(--text-500);
  margin-top: 20px;
}

.auth-divider {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-200);
  text-align: center;
  font-size: 12px;
  color: var(--text-400);
}

/* 认证页居中容器（四个认证页共用）
 *
 * 🔴 坑（2026-10-06 实测踩到）：不能用 `align-items: center` 做垂直居中。
 * 卡片比可视区高时（比如注册页 597px 内容放进 516px 可视区），
 * 居中会让内容**上下各溢出 40px，且顶部那半截滚不到** ——
 * 表现是「创建账号」标题被工具栏切掉一半。
 * flex 居中溢出时溢出部分是**不可滚动到的**（不是负margin 那种经典解法）。
 *
 * 正确做法：外层 flex 负责水平居中，垂直方向用**子元素的 auto 外边距**。
 * auto margin 在空间不足时会退化成 0，于是变成正常的文档流顶对齐，
 * 配合容器的 padding 保证顶部留白 —— 内容多长都不会被裁。
 */
.auth-centered {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 24px;
  flex: 1;
}

.auth-centered-inner {
  width: 100%;
  max-width: 440px;
  margin: auto 0;   /* 空间够就垂直居中，不够就顶对齐 */
}

/* ===== 个人中心 ===== */
.profile-layout {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

.profile-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border);
  height: fit-content;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-600);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.profile-menu-item:hover {
  background: var(--bg-200);
  color: var(--text-800);
}

.profile-menu-item.active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 500;
}

.profile-content {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border);
}

.profile-section-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-900);
  margin: 0 0 24px 0;
}

.profile-avatar-lg {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 600;
  flex-shrink: 0;
}

.profile-info-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.profile-info-main {
  flex: 1;
}

.profile-info-item {
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-200);
}

.profile-info-item:last-child {
  border-bottom: none;
}

.profile-info-label {
  font-size: 13px;
  color: var(--text-500);
  margin-bottom: 4px;
}

.profile-info-value {
  font-size: 15px;
  color: var(--text-800);
  font-weight: 500;
}

/* ===== VIP 状态卡片 ===== */
.vip-status-card {
  background: linear-gradient(135deg, var(--vip-50), var(--vip-100));
  border: 1px solid var(--vip-200);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
}

.vip-status-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--vip-900);
  margin: 0 0 8px 0;
}

.vip-status-text {
  font-size: 14px;
  color: var(--vip-800);
  margin: 0 0 16px 0;
}

.vip-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 14px;
  color: var(--vip-800);
}

.vip-benefits-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vip-benefits-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vip-500);
  flex-shrink: 0;
}

/* ===== VIP 中心 ===== */
.vip-hero {
  background: linear-gradient(135deg, var(--bg-100), var(--brand-50));
  border: 2px dashed var(--brand-300);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  text-align: center;
  color: var(--text-800);
  margin-bottom: 32px;
}

.vip-hero h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text-800);
}

.vip-hero p {
  font-size: 14px;
  color: var(--text-500);
  margin: 0 0 24px 0;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.vip-section-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-900);
  margin: 0 0 24px 0;
  /* 2026-10-09：center → left。VIP 页 hero 是左对齐，小节标题原来居中，
     同一页两套对齐方式。 */
  text-align: left;
}

.vip-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.benefit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: all 0.2s ease;
}

.benefit-card:hover {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.benefit-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-900);
  margin: 0 0 8px 0;
  font-family: var(--font-sans);
}

.benefit-desc {
  font-size: 13px;
  color: var(--text-500);
  margin: 0;
  line-height: 1.6;
}

.watch-ad-cta {
  background: linear-gradient(135deg, var(--bg-100), var(--brand-50));
  border: 2px dashed var(--brand-300);
  border-radius: var(--radius-md);
  padding: 32px;
  text-align: center;
  margin-bottom: 40px;
}

.watch-ad-cta h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-800);
  margin: 0 0 8px 0;
  font-family: var(--font-sans);
}

.watch-ad-cta p {
  font-size: 14px;
  color: var(--text-500);
  margin: 0 0 20px 0;
}

.vip-faq {
  margin-top: 24px;
}

/* ===== 详情页 ===== */
.detail-layout {
  display: flex;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px;
}

.detail-main {
  flex: 1;
  min-width: 0;
}

.detail-sidebar {
  width: 320px;
  flex-shrink: 0;
}

.detail-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 20px;
  border: 1px solid var(--border);
}

.detail-header {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-200);
}

.detail-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-900);
  margin: 0 0 12px 0;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: var(--text-500);
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-800);
  margin: 0 0 12px 0;
  font-family: var(--font-sans);
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.detail-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-info-label {
  font-size: 12px;
  color: var(--text-500);
}

.detail-info-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-800);
}

.detail-description {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-700);
}

/* VIP 遮罩 (详情页) */
.detail-vip-mask {
  position: relative;
}

.detail-vip-mask::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(250, 249, 245, 0.85);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-md);
  z-index: 10;
}

.detail-vip-mask-content {
  position: relative;
  z-index: 11;
  text-align: center;
  padding: 60px 24px;
}

.detail-vip-mask-content .lock-icon {
  width: 48px;
  height: 48px;
  color: var(--primary);
  margin-bottom: 16px;
}

.detail-vip-mask-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-800);
  margin: 0 0 8px 0;
  font-family: var(--font-sans);
}

.detail-vip-mask-content p {
  font-size: 14px;
  color: var(--text-500);
  margin: 0 0 20px 0;
}

/* ===== 侧边栏卡片 ===== */
.sidebar-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.sidebar-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-800);
  margin: 0 0 16px 0;
  font-family: var(--font-sans);
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-700);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  background: transparent;
  text-align: left;
}

.quick-action:hover {
  background: var(--bg-200);
}

/* ===== 管理后台 ===== */
.admin-page {
  padding: 32px 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.admin-page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-800);
  margin: 0 0 24px 0;
  font-family: var(--font-display);
}

.admin-page-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-500);
  margin-left: 8px;
}

.admin-empty {
  text-align: center;
  padding: 100px 24px;
}

.admin-empty-icon {
  color: var(--error-500);
  opacity: 0.5;
}

.admin-empty-title {
  font-size: 22px;
  color: var(--text-800);
  margin: 0 0 8px 0;
}

.admin-empty-desc {
  color: var(--text-500);
  margin: 0;
}

.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}

.admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-800);
  margin: 0;
  font-family: var(--font-sans);
}

.admin-card-desc {
  font-size: 13px;
  color: var(--text-500);
  margin: 4px 0 0 0;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.admin-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}

.admin-stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
}

.admin-stat-label {
  font-size: 13px;
  color: var(--text-500);
}

.drop-zone {
  border: 2px dashed var(--border-300);
  border-radius: var(--radius-md);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.drop-zone:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
}

.drop-zone-icon {
  margin-bottom: 12px;
  opacity: 0.6;
  color: var(--primary);
}

.drop-zone-text {
  font-size: 14px;
  color: var(--text-700);
  margin-bottom: 4px;
}

.drop-zone-hint {
  font-size: 12px;
  color: var(--text-400);
}

/* ===== 导出筛选（2026-10-05）===== */
.export-filters {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-200);
}
.export-filter-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.export-filter-label {
  flex-shrink: 0;
  width: 68px;
  padding-top: 5px;
  font-size: 13px;
  color: var(--text-500);
}
.export-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.export-chip {
  padding: 4px 11px;
  font-size: 12px;
  color: var(--text-600);
  background: var(--bg-100);
  border: 1px solid var(--border-200);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s;
}
.export-chip:hover { border-color: var(--brand-300); }
.export-chip.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.export-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-700);
  background: var(--bg-50);
  border: 1px solid var(--border-200);
  border-radius: var(--radius-sm, 6px);
  outline: none;
}
.export-input:focus {
  border-color: var(--brand-400);
  background: var(--bg-100);
}
.export-summary {
  margin-top: 4px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-600);
  background: var(--bg-50);
  border-radius: var(--radius-md);
}
.export-summary b { color: var(--primary); font-size: 15px; }

/* ===== 导入模式选择 + 按分类清空（2026-10-06）===== */
.import-mode-wrap {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border-200);
  border-radius: var(--radius-lg);
  background: var(--bg-50);
}
.import-mode-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-500);
  margin-bottom: 10px;
  letter-spacing: .02em;
}
.import-mode-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}
/* 三个选项并排做成"卡片式"，选中态用主色描边 + 浅底，不用位移/缩放动画
   （后台按钮多，动画会显得晃） */
.import-mode-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--border-200);
  border-radius: var(--radius-md);
  background: var(--bg-100, #fff);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background-color .15s;
}
.import-mode-chip:hover { border-color: var(--primary); }
.import-mode-chip.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.import-mode-name { font-size: 13px; font-weight: 600; color: var(--text-700); }
.import-mode-chip.active .import-mode-name { color: var(--primary); }
.import-mode-desc { font-size: 11px; line-height: 1.5; color: var(--text-400); }
.import-mode-hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-200);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-500);
}
.import-mode-hint b { color: var(--text-700); }

/* 按分类清空 */
.purge-scope {
  padding: 14px;
  border: 1px solid var(--border-200);
  border-radius: var(--radius-lg);
  background: var(--bg-50);
}
.purge-scope-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.purge-scope-label { font-size: 13px; font-weight: 600; color: var(--text-700); }
.purge-scope-row .form-select {
  flex: 1 1 200px;
  min-width: 180px;
  height: auto;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-200);
  background: var(--bg-100, #fff);
  color: var(--text-700);
}
.purge-scope-hint {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-400);
}
.purge-scope-hint code {
  padding: 1px 4px;
  background: var(--bg-200, #f1f1f1);
  border-radius: 3px;
  font-size: 11px;
}
@media (max-width: 640px) {
  .purge-scope-row { flex-direction: column; align-items: stretch; }
}

/* ===== 导入预检面板（2026-10-05）===== */
.precheck-panel {
  margin-top: 16px;
  border: 1px solid var(--border-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.precheck-head {
  padding: 12px 16px;
  background: var(--bg-50);
  border-bottom: 1px solid var(--border-200);
}
.precheck-filename {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-700);
  word-break: break-all;
}
/* 2026-10-06：原来是 content: "📄 "（装饰性 emoji，项目规范禁用），
   改成一个中性的小竖线标记，纯 CSS 绘制，不依赖字体里的 emoji 字形。 */
.precheck-filename::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 2px;
  background: var(--primary);
}
.precheck-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-500);
}
.precheck-stats b { color: var(--text-700); font-weight: 500; }
.precheck-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-200);
}
.precheck-section:last-child { border-bottom: none; }
.precheck-section-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-500);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.precheck-sheets {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.precheck-sheet {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-600);
}
.precheck-sheet-name { flex: 1; }
.precheck-sheet-count {
  padding: 1px 8px;
  font-size: 11px;
  background: var(--bg-100);
  border-radius: 9px;
  color: var(--text-600);
}
.precheck-sheet.skip .precheck-sheet-count {
  background: var(--bg-100);
  color: var(--text-400);
}
.precheck-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px;
}
.precheck-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.precheck-field-label { font-size: 11px; color: var(--text-400); }
.precheck-field-bar {
  height: 4px;
  background: var(--bg-200);
  border-radius: 2px;
  overflow: hidden;
}
.precheck-field-fill { height: 100%; background: var(--brand-400); border-radius: 2px; }
.precheck-field-fill.low { background: #e8a33d; }
.precheck-field-num { font-size: 11px; color: var(--text-500); }

.precheck-warn {
  margin: 0 16px 12px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-600);
  background: #fdf6e8;
  border-left: 3px solid #e8a33d;
  border-radius: 4px;
}
.precheck-ok {
  margin: 0 16px 12px;
  padding: 9px 12px;
  font-size: 12px;
  color: #3b6d11;
  background: #eaf3de;
  border-left: 3px solid #639922;
  border-radius: 4px;
}

.precheck-sample {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
}
.precheck-sample th {
  padding: 5px 7px;
  text-align: left;
  font-weight: 500;
  color: var(--text-500);
  background: var(--bg-50);
  border-bottom: 1px solid var(--border-200);
  white-space: nowrap;
}
.precheck-sample td {
  padding: 5px 7px;
  color: var(--text-600);
  border-bottom: 1px solid var(--border-100);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.precheck-sample-wrap { overflow-x: auto; }

.precheck-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-50);
  border-top: 1px solid var(--border-200);
}
.precheck-actions .spacer { flex: 1; }
.precheck-hintline {
  font-size: 12px;
  color: var(--text-500);
  line-height: 1.5;
}

.import-result {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
}

.import-success {
  background: var(--success-50);
  border: 1px solid var(--success-200);
  color: var(--success-700);
}

.import-error {
  background: var(--error-50);
  border: 1px solid var(--error-200);
  color: var(--error-700);
}

/* 安全设置列表 */
.security-list {
  display: flex;
  flex-direction: column;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-200);
}

.security-item:last-child {
  border-bottom: none;
}

.security-item-info {
  flex: 1;
}

.security-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-800);
}

.security-item-desc {
  font-size: 12px;
  color: var(--text-500);
  margin-top: 2px;
}

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-200);
  margin-bottom: 12px;
}

.faq-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

.faq-item summary {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-700);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '▼';
  font-size: 10px;
  color: var(--text-400);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(180deg);
}

.faq-item-content {
  font-size: 13px;
  color: var(--text-500);
  margin-top: 8px;
  line-height: 1.7;
}

/* ===== Toast 提示 ===== */
.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: #fff;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-success { background: var(--success-500); }
.toast-error { background: var(--error-500); }
.toast-info { background: var(--primary); }

/* ===== Loading ===== */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-300);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== VIP 功能锁遮罩 ===== */
.vip-locked {
  position: relative;
  overflow: hidden;
}

.vip-feature-lock {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.vip-feature-lock-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px;
}

/* ============================================================
   搜索框的 VIP 遮罩（2026-10-06 重做）
   ============================================================
   🔴 原来：`.vfl-inline { position:absolute; inset:0; background: rgba(255,255,255,.88) }`
      —— **常驻显示**，白底铺满整个搜索框，把输入框和放大镜图标都盖住，
      长句子还会被截断（"搜索功能需看广告解锁VIP" +解锁按钮挤不下）。
      用户看着像"搜索框坏了"。

   现在：**平时干净可用，点一下才提示**。
     · 遮罩默认 opacity:0 + pointer-events:none（完全不挡输入）
     · 点击搜索框 → 浮现（用 .is-open 类切换）
     · 遮罩里只留「锁图标 + 搜索需 VIP + 去解锁」三件套，短且不挤
   ============================================================ */
.vfl-inline {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(2px);
  z-index: 10;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 🔴 默认完全透明且不接收点击 —— 搜索框照常能用 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

/* 点搜索框后浮现 */
.vfl-inline.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* 遮罩里的横向布局：锁图标 + 文案 + 按钮 */
.vfl-inline .vip-feature-lock-inner {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  /* ⚠️ 关键：允许收缩，长内容不会把按钮挤出搜索框 */
  max-width: 100%;
  min-width: 0;
}

.vfl-inline svg {
  flex: 0 0 auto;
  color: var(--text-400);
}

/* 文案要能省略，不能撑破 */
.vfl-text {
  font-size: 12px;
  color: var(--text-600, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.vfl-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 搜索框本身：非 VIP 时给个轻微的"可用但受限"的视觉暗示，
   而不是被白色遮罩整个盖住 */
.search-box.vip-locked input {
  cursor: pointer;
}

/* 暗色主题下遮罩要够暗，否则白底刺眼 */
[data-theme="dark"] .vfl-inline {
  background: rgba(28, 27, 25, 0.94);
}
[data-theme="dark"] .vfl-text { color: var(--text-300); }

/* 窄屏：搜索框本身窄，遮罩里只留锁 + 按钮，文案省掉 */
@media (max-width: 900px) {
  .vfl-text { display: none; }
  .vfl-inline .vip-feature-lock-inner { gap: 6px; }
}

.vip-locked > *:not(.vip-feature-lock) {
  filter: brightness(0.92);
  pointer-events: none;
  user-select: none;
}

/* ===== 空状态 ===== */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-400);
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  opacity: 0.5;
  margin-bottom: 12px;
}

.empty-state-text {
  margin: 0;
  font-size: 14px;
}

/* ===== 列表空状态（index.js 卡片视图用）=====
 * 2026-10-06：.empty-icon / .empty-title / .empty-desc 这三个类名
 * 在 index.js 里用了但从来没定义过样式 —— 空列表是「裸」的，
 * emoji 图标+ 文字挤在中间，没有层次。
 * 顺带去掉了 emoji（项目规范：一律不用 emoji）。
 */
.job-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--text-400);
}
.job-empty-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  opacity: 0.45;
  display: block;
}
.job-empty-title {
  font-size: 15px;
  color: var(--text-600);
  margin-bottom: 6px;
}
.job-empty-desc {
  font-size: 13px;
  color: var(--text-400);
}
[data-theme="dark"] .job-empty-title { color: var(--text-400); }

/* 🔴 原 .code-status* 与 #codeList 样式已删除（2026-10-07）：
 *   码池统一到 WordPress 后，本站不再展示码列表（DOM 也删了）。
 *   别再加回来 —— 没有对应元素，纯死 CSS。 */

/* ===== App 布局（画布设计风格） ===== */
.app-body {
  height: 100vh;
  overflow: hidden;
  font-size: 13px;
}

.app-layout {
  display: flex;
  height: 100%;
}

/* ===== 左侧边栏 ===== */
.app-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--sidebar, #f5f4ee);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: width 0.2s ease;
}

.sidebar-header {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sidebar-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-logo-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--sidebar-foreground, #3d3d3a);
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-collapse-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  background: var(--bg-200);
  color: var(--text-700);
}

/* 侧边栏折叠状态 */
.app-sidebar.collapsed {
  width: 60px;
}

.app-sidebar.collapsed .sidebar-logo-text,
.app-sidebar.collapsed .sidebar-item-text,
.app-sidebar.collapsed .sidebar-badge,
.app-sidebar.collapsed .sidebar-group-title,
.app-sidebar.collapsed .sidebar-group-sub,
.app-sidebar.collapsed .sidebar-filters,
.app-sidebar.collapsed .sidebar-user-info {
  display: none;
}

.app-sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding: 12px 0;
}

.app-sidebar.collapsed .sidebar-logo {
  justify-content: center;
}

.app-sidebar.collapsed .sidebar-collapse-btn {
  display: none;
}

.app-sidebar.collapsed .sidebar-logo {
  cursor: pointer;
}



.app-sidebar.collapsed .sidebar-logo:hover .sidebar-logo-icon {
  transform: scale(1.08);
}

.app-sidebar.collapsed .sidebar-logo .sidebar-logo-icon {
  transition: transform 0.15s ease;
}

.app-sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding: 0;
  margin: 0 8px 1px;
}

.app-sidebar.collapsed .sidebar-footer {
  padding: 10px 0;
  justify-content: center;
  display: flex;
}

.app-sidebar.collapsed .sidebar-user {
  justify-content: center;
}

/* 导航区 */
@media (max-width: 900px) {
  .sidebar-nav {
    scrollbar-width: thin;
  }
  .sidebar-nav::-webkit-scrollbar { width: 5px; }
  .sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }
  .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
}

.sidebar-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-400);
  padding: 8px 16px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-group-sub {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--primary);
  font-weight: 500;
}

.sidebar-item {
  height: 32px;
  padding: 0 10px;
  margin: 0 8px 1px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-700);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.sidebar-item:hover {
  background-color: var(--bg-200);
}

.sidebar-item-active {
  background-color: var(--brand-50);
  color: var(--brand-600);
  font-weight: 500;
}

.sidebar-item-active:hover {
  background-color: var(--brand-100);
}

.sidebar-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-400);
  background: rgba(0,0,0,0.04);
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-item-active .sidebar-badge {
  color: var(--brand-600);
  background: rgba(201, 100, 66, 0.12);
}

/* 筛选面板 */
.sidebar-filters {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 8px;
  min-height: 0;
  position: relative;
}

.sidebar-filters .filter-group {
  margin-bottom: 14px;
  padding: 0 16px;
}

.sidebar-filters .filter-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-400);
  margin: 0 0 6px;
}

.sidebar-filters .filter-option {
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 4px;
}

.clear-filter-btn {
  font-size: 11px;
  color: var(--text-400);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 12px;
  text-align: left;
  width: 100%;
  transition: color 0.15s;
}

.clear-filter-btn:hover {
  color: var(--primary);
}

/* 底部用户区 */
.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-600);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
}

.theme-toggle:hover {
  background: var(--bg-200);
  color: var(--text-800);
}

.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-moon {
  flex-shrink: 0;
}

.theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: block; }

.theme-toggle-text {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

/* 折叠状态下只显示图标 */
.app-sidebar.collapsed .theme-toggle-text {
  display: none;
}

.app-sidebar.collapsed .theme-toggle {
  justify-content: center;
  padding: 0;
  width: 36px;
  margin: 0 auto;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-action {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.sidebar-user-action:hover {
  text-decoration: underline;
}

/* ===== 主内容区 ===== */
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--background);
}

/* 顶部工具栏 */
.app-toolbar {
  height: 48px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 12px;
  background: var(--background);
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 200px;
  /* 窄屏下别占死 200px，否则把右侧的搜索框/条数选择挤出可视区 */
  min-width: 0;
  max-width: 200px;
}

.toolbar-center {
  flex: 1;
  max-width: 520px;
  min-width: 0;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.view-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-800);
}

.view-title svg {
  color: var(--text-400);
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-600);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-icon:hover {
  background-color: var(--bg-200);
  color: var(--text-800);
}

.btn-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-600);
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
  border: none;
  background: transparent;
}

.btn-tool:hover {
  background-color: var(--bg-200);
  color: var(--text-800);
}

.toolbar-select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-700);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s;
}

.toolbar-select:hover {
  border-color: var(--text-400);
}

.toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

.view-switcher {
  display: flex;
  align-items: center;
  background: var(--bg-200);
  border-radius: 6px;
  padding: 2px;
}

.view-switch-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-500);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.view-switch-btn:hover {
  color: var(--text-800);
}

.view-switch-btn-active {
  background: #fff;
  color: var(--text-800);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* 内容区 */
.app-content {
  flex: 1;
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-content .table-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.app-content .pagination-bar {
  flex-shrink: 0;
}

/* 侧边栏遮罩（移动端） */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* 汉堡按钮 - 默认隐藏，移动端显示 */
.mobile-hamburger {
  display: none;
}

/* ===== 工具类 ===== */
.btn-block { width: 100%; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.self-center { align-self: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.mr-2 { margin-right: 8px; }
.w-full { width: 100%; }
.p-0 { padding: 0; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.text-muted { color: var(--text-400); }
.text-subtle { color: var(--text-500); }
.text-strong { color: var(--text-800); }
.text-primary { color: var(--primary); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.cursor-pointer { cursor: pointer; }
.form-checkbox { accent-color: var(--primary); }
.no-underline { text-decoration: none; }

/* ===== 响应式 ===== */
@media (max-width: 1023px) {
  .profile-layout { flex-direction: column; }
  .profile-sidebar { width: 100%; }
  .detail-layout { flex-direction: column; }
  .detail-sidebar { width: 100%; }
  .filter-sidebar { display: none; }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .top-nav { padding: 0 16px; height: 56px; }
  .layout-with-sidebar { height: calc(100vh - 56px); }
  .top-nav .nav-links { display: none; }
  .toolbar { padding: 12px; }
  .search-box { max-width: 100%; }
  .vip-hero { padding: 32px 20px; }
  .vip-hero h1 { font-size: 22px; }
  .auth-card { padding: 28px 20px; }
  .table-card { padding: 8px; }
  .data-table { font-size: 12px; }
  .data-table tbody td { padding: 0 8px; }
  .detail-card { padding: 20px; }
  .detail-title { font-size: 22px; }
  .profile-content { padding: 20px; }
  .page-container { padding: 24px 16px; }
}

/* ======== App 布局移动端适配 ======== */
@media (max-width: 900px) {
  .app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    /* 抽屉态用视口高度，不依赖父级 height:100%。
       矮窗口（横屏手机）下 height:100% 会被父级约束算错，导致底部够不着。 */
    height: 100vh;
    height: 100dvh;   /* 移动端地址栏收起/展开时不会跳 */
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    width: 260px;
    max-width: 82vw;   /* 超窄屏别占满整屏，留一点"抽屉感" */
  }
  .app-sidebar.collapsed {
    width: 260px;
    transform: translateX(-100%);
  }
  .app-sidebar.open {
    transform: translateX(0);
  }
  .app-sidebar .sidebar-collapse-btn {
    display: none;
  }
  .app-sidebar .theme-toggle-text {
    display: block;
  }
  .app-sidebar .sidebar-item-text,
  .app-sidebar .sidebar-badge,
  .app-sidebar .sidebar-logo-text,
  .app-sidebar .sidebar-group-title,
  .app-sidebar .sidebar-user-info {
    display: block;
  }
  .app-sidebar.collapsed .sidebar-item-text,
  .app-sidebar.collapsed .sidebar-badge,
  .app-sidebar.collapsed .sidebar-logo-text,
  .app-sidebar.collapsed .sidebar-group-title,
  .app-sidebar.collapsed .sidebar-user-info {
    display: block;
  }
  .app-sidebar.collapsed .theme-toggle-text {
    display: block;
  }
  .app-sidebar.collapsed .sidebar-user {
    flex-direction: row;
  }
  .mobile-hamburger {
    display: inline-flex;
  }
  .toolbar-left {
    width: auto;
  }
  .toolbar-center {
    max-width: none;
  }
  .view-title span {
    display: none;
  }
  .view-title svg {
    display: none;
  }
  .view-switcher {
    display: none;
  }
  .app-content {
    padding: 8px;
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* VIP 页移动端 */
  .vip-hero { padding: 28px 20px; }
  .vip-hero h1 { font-size: 22px; }
  .vip-benefits { grid-template-columns: 1fr; }
  .vip-section-title { font-size: 18px; }
  /* profile 移动端 */
  .profile-layout { flex-direction: column; }
  .profile-sidebar { width: 100%; flex-direction: row; overflow-x: auto; }
  .profile-menu-item { flex-shrink: 0; padding: 10px 16px; }
  .profile-menu-item span { display: block; }
  .profile-content { padding: 0; }
  /* admin 移动端 */
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-card-header { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .admin-page-title { font-size: 22px; }
  .page-container { padding: 16px 12px; }
}

@media (max-width: 600px) {
  .toolbar-right .toolbar-select {
    display: none;
  }
  .toolbar-divider {
    display: none;
  }
}

/* ======== 移动端筛选折叠按钮 ======== */
.mobile-filter-toggle { display: none; }


/* 导航栏移动端 */
@media (max-width: 720px) {
  .top-nav .nav-links { display: none; }
  .user-info span:not(.vip-badge) { display: none; }
  .toolbar { flex-direction: column; gap: 10px; }
  .search-box { max-width: 100%; }
  .admin-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   设计精修样式（优先级最高）
   ============================================================ */

/* ===== 设计精修：侧边栏 ===== */
.app-sidebar {
  background: var(--sidebar, #f5f4ee);
  border-right: 1px solid var(--border);
  position: relative;
}

/* 侧边栏微妙装饰线 */
.app-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border-200) 10%, var(--border-200) 90%, transparent);
  pointer-events: none;
}

.sidebar-header {
  padding: 14px 12px;
  height: 52px;
  border-bottom: 1px solid var(--border);
}

.sidebar-logo-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  box-shadow: 0 2px 6px rgba(201, 100, 66, 0.25);
}

.sidebar-logo-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-800);
  font-family: var(--font-display);
}

.sidebar-collapse-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--text-500);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-collapse-btn:hover {
  background: var(--bg-200);
  color: var(--text-800);
  transform: translateX(-1px);
}

/* 导航区精修 */
.sidebar-nav {
  padding: 8px 8px 4px;
  border-bottom: none;
  position: relative;
  /* ⭐ 必须能收缩 + 内部滚动。
     这里原来（以及上面两处重复定义）写的是 flex-shrink: 0 —— 侧边栏是 flex column
     （header / nav / footer），屏幕一变矮（横屏手机、横屏小窗），
     nav 不肯收缩就会被 footer 压住：下面几个菜单项（VIP 会员、个人中心）直接点不到，
     而且侧边栏整体不能滚。
     flex:1 + min-height:0 是「flex 子项内部可滚动」的前提，缺 min-height 在部分浏览器无效。 */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

.sidebar-nav + .sidebar-nav {
  padding-top: 4px;
  border-top: 1px solid var(--border-100);
  margin-top: 4px;
}

.sidebar-group-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-500);
  padding: 8px 12px 6px;
  text-transform: uppercase;
}

.sidebar-item {
  height: 34px;
  padding: 0 10px;
  margin: 0 0 2px;
  border-radius: 8px;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-600);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.sidebar-item svg {
  color: var(--text-500);
  transition: color 0.18s ease;
  flex-shrink: 0;
}

.sidebar-item:hover {
  background-color: var(--bg-200);
  color: var(--text-800);
}

.sidebar-item:hover svg {
  color: var(--text-700);
}

.sidebar-item-active {
  background-color: var(--brand-50);
  color: var(--primary);
  font-weight: 600;
}

.sidebar-item-active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}

.sidebar-item-active svg {
  color: var(--primary);
}

.sidebar-item-active:hover {
  background-color: var(--brand-100);
}

.sidebar-badge {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-500);
  background: var(--bg-300);
  padding: 1px 7px;
  border-radius: 20px;
  min-width: 20px;
  line-height: 1.4;
}

.sidebar-item-active .sidebar-badge {
  color: var(--primary);
  background: rgba(201, 100, 66, 0.12);
}

/* 筛选面板精修 */
.sidebar-filters {
  padding: 4px 8px 8px;
}

.sidebar-filters .filter-group {
  padding: 0 4px;
  margin-bottom: 12px;
}

.sidebar-filters .filter-group-title {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-500);
  padding: 4px 8px 6px;
}

.sidebar-filters .filter-option {
  padding: 5px 8px;
  font-size: 12.5px;
  border-radius: 6px;
  color: var(--text-600);
  transition: all 0.15s ease;
}

.sidebar-filters .filter-option:hover {
  background: var(--bg-200);
  color: var(--text-800);
}

.sidebar-filters .filter-option.active {
  background: var(--brand-50);
  color: var(--primary);
  font-weight: 500;
}

.clear-filter-btn {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-500);
  transition: color 0.15s ease;
}

.clear-filter-btn:hover {
  color: var(--primary);
}

/* 底部区精修 */
.sidebar-footer {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  gap: 6px;
  /* 必须给不透明背景 + sticky：nav 内部可滚了，footer 要浮在上面，
     滚过去的菜单文字才不能从底下透出来。 */
  background: var(--sidebar, #f5f4ee);
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.theme-toggle {
  height: 34px;
  border-radius: 8px;
  gap: 10px;
  color: var(--text-600);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:hover {
  background: var(--bg-200);
  color: var(--text-800);
}

.sidebar-user {
  padding: 6px 8px;
  border-radius: 8px;
  gap: 10px;
  transition: background-color 0.15s ease;
}

.sidebar-user:hover {
  background: var(--bg-200);
}

.sidebar-user-avatar {
  width: 30px;
  height: 30px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(201, 100, 66, 0.2);
}

.sidebar-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-800);
}

.sidebar-user-action {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--primary);
}

/* 折叠状态精修 */
.app-sidebar.collapsed .sidebar-header {
  padding: 14px 0;
  justify-content: center;
}

.app-sidebar.collapsed .sidebar-nav {
  padding: 8px 8px 4px;
}

.app-sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding: 0;
  margin: 0 0 4px;
  height: 36px;
  width: 36px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}

.app-sidebar.collapsed .sidebar-item::before {
  display: none;
}

.app-sidebar.collapsed .sidebar-footer {
  padding: 10px 0 12px;
  align-items: center;
}

.app-sidebar.collapsed .theme-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  margin: 0 auto;
  border-radius: 10px;
}

.app-sidebar.collapsed .sidebar-user {
  padding: 0;
  justify-content: center;
  width: 36px;
  margin: 0 auto;
  border-radius: 10px;
  height: 36px;
}

.app-sidebar.collapsed .sidebar-user-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

/* ===== 设计精修：工具栏 ===== */
.app-toolbar {
  height: 52px;
  padding: 0 16px;
  gap: 16px;
  background: var(--background);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 10;
}

.app-toolbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border) 5%, var(--border) 95%, transparent);
  pointer-events: none;
}

.toolbar-left {
  gap: 10px;
  width: auto;
  min-width: 160px;
  flex-shrink: 0;
}

.view-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-800);
  font-family: var(--font-sans);
  gap: 8px;
}

.view-title svg {
  color: var(--primary);
}

.toolbar-right {
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.toolbar-right .search-box {
  flex: 1;
  min-width: 0;
}

.btn-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--text-500);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-icon:hover {
  background: var(--bg-200);
  color: var(--text-800);
}

.btn-tool {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-600);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 6px;
}

.btn-tool:hover {
  background: var(--bg-200);
  color: var(--text-800);
}

.toolbar-select {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all 0.15s ease;
}

.toolbar-select:hover {
  border-color: var(--text-400);
}

.toolbar-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.1);
}

.toolbar-divider {
  height: 22px;
  margin: 0 6px;
  background: var(--border-200);
}

.view-switcher {
  background: var(--bg-200);
  border-radius: 8px;
  padding: 3px;
}

.view-switch-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: var(--text-500);
  transition: all 0.15s ease;
}

.view-switch-btn:hover {
  color: var(--text-700);
}

.view-switch-btn-active {
  background: var(--surface);
  color: var(--text-800);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

/* 搜索框精修 */
.search-box {
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0 10px 0 0;
  gap: 0;
  transition: all 0.2s ease;
}

.search-box:hover {
  border-color: var(--border-500);
}

.search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.08);
  background: var(--bg-50);
}

.search-box .search-icon {
  width: 16px;
  height: 16px;
  color: var(--text-400);
}

.search-box input {
  font-size: 13px;
  color: var(--text-700);
}

.search-box input::placeholder {
  color: var(--text-400);
}

/* ===== 设计精修：内容区 & 卡片 ===== */
.app-content {
  padding: 16px;
  gap: 16px;
}

.table-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.table-card:hover {
  box-shadow: var(--shadow);
}

.data-table {
  font-size: 13px;
}

.data-table thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-500);
  text-transform: none;
  letter-spacing: 0.01em;
  background: var(--bg-100);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  height: 40px;
}

.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-100);
  color: var(--text-700);
  height: 44px;
  transition: background-color 0.15s ease;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover td {
  background: var(--bg-100);
}

.data-table tbody tr:nth-child(even) {
  background: var(--bg-50);
}

/* 分页精修 */
.pagination-bar {
  padding: 10px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-500);
}

.pagination-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-600);
  transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled):not(.active) {
  border-color: var(--primary);
  color: var(--primary);
}

.pagination-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(201, 100, 66, 0.25);
}

/* 标签精修 */
.tag {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-200);
  color: var(--text-600);
  line-height: 1.4;
}

.tag.tag-primary {
  background: var(--brand-50);
  color: var(--primary);
}

.tag.tag-success {
  background: var(--success-50);
  color: var(--success-600);
}

.tag.tag-warning {
  background: var(--vip-50);
  color: var(--vip-600);
}

.tag.tag-error {
  background: var(--error-50);
  color: var(--error-600);
}

/* ===== 设计精修：表单 & 按钮 ===== */
.form-input,
.form-select,
textarea {
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--text-700);
  transition: all 0.2s ease;
}

.form-input:hover,
.form-select:hover,
textarea:hover {
  border-color: var(--border-500);
}

.form-input:focus,
.form-select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.08);
  background: var(--bg-50);
}

.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-700);
  margin-bottom: 6px;
}

/* 按钮精修 */
.btn {
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--primary);
  box-shadow: 0 2px 6px rgba(201, 100, 66, 0.25);
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 12px rgba(201, 100, 66, 0.3);
  transform: translateY(-1px);
}

.btn-primary:active {
  box-shadow: 0 1px 3px rgba(201, 100, 66, 0.2);
}

.btn-secondary {
  background: var(--bg-200);
  color: var(--text-700);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--bg-300);
  color: var(--text-800);
}

.btn-outline {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-600);
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--brand-50);
}

.btn-ghost:hover {
  background: var(--bg-200);
}

.btn-sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

.btn-lg {
  height: 42px;
  padding: 0 20px;
  font-size: 14px;
}

/* ===== 设计精修：VIP 页 ===== */
.vip-hero {
  border-radius: 14px;
  padding: 36px 32px;
  border: 2px dashed var(--brand-300);
  background: linear-gradient(135deg, var(--bg-100), var(--brand-50));
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.vip-hero:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.vip-hero h1 {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.vip-hero p {
  font-size: 14px;
  margin-bottom: 20px;
}

.vip-section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-800);
  margin: 24px 0 16px;
  font-family: var(--font-display);
}

.benefit-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.benefit-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-800);
  margin: 0 0 6px 0;
}

.benefit-desc {
  font-size: 13px;
  color: var(--text-500);
  line-height: 1.6;
  margin: 0;
}

/* FAQ 精修 */
.vip-faq {
  margin-top: 24px;
  border-radius: 12px;
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item summary {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-700);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-size: 18px;
  color: var(--text-400);
  font-weight: 300;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item[open] {
  background: var(--bg-100);
}

.faq-item-content {
  padding: 0 16px 14px;
  font-size: 13px;
  color: var(--text-500);
  line-height: 1.6;
}

/* ===== 设计精修：个人中心 ===== */
/* ===== 个人中心全新设计 ===== */
.profile-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

/* 用户信息头部 */
.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.profile-header-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  flex-shrink: 0;
  font-family: var(--font-display);
}

.profile-header-info {
  flex: 1;
  min-width: 0;
}

.profile-header-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-900);
  font-family: var(--font-display);
  margin-bottom: 4px;
}

.vip-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  background: linear-gradient(135deg, var(--vip-400), var(--vip-600));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.profile-header-sub {
  font-size: 13.5px;
  color: var(--text-500);
}

.profile-header-action {
  flex-shrink: 0;
}

/* 标签切换 */
.profile-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow-x: auto;
}

.profile-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-500);
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.profile-tab:hover {
  background: var(--bg-200);
  color: var(--text-700);
}

.profile-tab.active {
  background: var(--brand-50);
  color: var(--primary);
  font-weight: 600;
}

.profile-tab svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 内容区域 */
.profile-content-area {
  min-height: 300px;
}

.profile-pane {
  animation: fadeIn 0.25s ease;
}

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

/* 个人信息卡片 */
.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.info-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-800);
  margin: 0 0 18px 0;
  font-family: var(--font-display);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 32px;
}

.info-item-label {
  font-size: 12.5px;
  color: var(--text-400);
  margin-bottom: 6px;
}

.info-item-value {
  font-size: 14.5px;
  color: var(--text-800);
  font-weight: 500;
}

/* 收藏列表 */
.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.favorite-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: all 0.18s ease;
}

.favorite-item:hover {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-md);
}

.favorite-item-info {
  flex: 1;
  min-width: 0;
}

.favorite-item-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-800);
  margin-bottom: 6px;
}

.favorite-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-500);
}

.favorite-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-400);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.favorite-empty svg {
  display: block;
  margin: 0 auto 12px;
}

/* VIP 横幅 */
/* pane 内容容器 — 统一限制宽度居中 */
.pane-content,
.vip-content {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.vip-banner {
  background: linear-gradient(135deg, var(--vip-50), var(--vip-100));
  border: 1px solid var(--vip-200);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 28px;
  text-align: center;
}

.vip-banner-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--vip-700);
  font-family: var(--font-display);
  margin-bottom: 8px;
}

.vip-banner-desc {
  font-size: 13.5px;
  color: var(--vip-600);
}

.benefits-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-700);
  margin-bottom: 16px;
  text-align: center;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 28px;
  justify-content: center;
}

.benefit-item {
  padding: 20px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  transition: all 0.18s ease;
}

.benefit-item:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.benefit-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 22px;
}

.benefit-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-800);
  margin-bottom: 6px;
}

.benefit-item-desc {
  font-size: 12.5px;
  color: var(--text-500);
  line-height: 1.5;
}

.vip-cta {
  text-align: center;
}

/* 安全设置列表 */
.security-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.security-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.security-item-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.security-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-200);
  color: var(--text-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.security-item-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-800);
  margin-bottom: 3px;
}

.security-item-desc {
  font-size: 12.5px;
  color: var(--text-500);
}

/* 响应式（与项目主断点 900px 一致） */
@media (max-width: 900px) {
  .profile-page {
    padding: 16px 14px 32px;
  }

  .profile-header {
    padding: 18px;
    flex-wrap: wrap;
  }

  .profile-header-action {
    width: 100%;
  }

  .profile-header-action .btn {
    width: 100%;
  }

  .info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .profile-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .profile-tab {
    padding: 0 14px;
    height: 38px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== 设计精修：管理后台 ===== */
.admin-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.admin-page-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-800);
  margin: 0 0 8px;
  font-family: var(--font-display);
}

.admin-page-subtitle {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-500);
  margin-top: 4px;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0;
}

.admin-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}

.admin-stat-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-sm);
}

.admin-stat-number {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-800);
  font-family: var(--font-display);
  line-height: 1.2;
  margin-bottom: 4px;
}

.admin-stat-label {
  font-size: 12px;
  color: var(--text-500);
}

.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.admin-card:hover {
  box-shadow: var(--shadow);
}

.admin-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-800);
  margin: 0 0 4px 0;
}

.admin-card-desc {
  font-size: 13px;
  color: var(--text-500);
  margin: 0;
}

.drop-zone {
  border: 2px dashed var(--border-300);
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  background: var(--bg-100);
  transition: all 0.2s ease;
  cursor: pointer;
}

.drop-zone:hover {
  border-color: var(--primary);
  background: var(--brand-50);
}

.drop-zone-icon {
  color: var(--text-400);
  margin-bottom: 12px;
}

.drop-zone:hover .drop-zone-icon {
  color: var(--primary);
}

.drop-zone-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-600);
  margin-bottom: 6px;
}

.drop-zone-hint {
  font-size: 12px;
  color: var(--text-400);
}

/* ===== 设计精修：认证页 ===== */
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow-md);
}

.auth-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-800);
  margin: 0 0 6px 0;
  font-family: var(--font-display);
}

.auth-subtitle {
  font-size: 13.5px;
  color: var(--text-500);
  margin: 0 0 24px 0;
}

.auth-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-500);
}

.auth-divider {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12px;
  color: var(--text-400);
}

/* 注：原 .auth-brand-side { border-radius: 0; } 已随登录页改版删除，
   品牌区分栏不再存在。 */

/* ===== 暗色模式精修补充 ===== */
[data-theme="dark"] .app-sidebar {
  border-right-color: var(--border-300);
}

[data-theme="dark"] .app-sidebar::after {
  display: none;
}

[data-theme="dark"] .sidebar-item svg {
  color: var(--text-500);
}

[data-theme="dark"] .sidebar-item:hover svg {
  color: var(--text-700);
}

[data-theme="dark"] .sidebar-item-active svg {
  color: var(--brand-400);
}

[data-theme="dark"] .sidebar-item-active::before {
  background: var(--brand-400);
}

[data-theme="dark"] .sidebar-badge {
  background: var(--bg-400);
  color: var(--text-500);
}

[data-theme="dark"] .sidebar-item-active .sidebar-badge {
  color: var(--brand-400);
  background: rgba(190, 111, 79, 0.2);
}

[data-theme="dark"] .sidebar-filters .filter-option:hover {
  background: var(--bg-300);
}

[data-theme="dark"] .sidebar-filters .filter-option.active {
  background: var(--brand-50);
  color: var(--brand-400);
}

[data-theme="dark"] .app-toolbar {
  border-bottom-color: var(--border-300);
}

[data-theme="dark"] .app-toolbar::after {
  display: none;
}

[data-theme="dark"] .search-box {
  background: var(--bg-200);
  border-color: var(--border-400);
}

[data-theme="dark"] .search-box:focus-within {
  background: var(--bg-50);
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(190, 111, 79, 0.15);
}

[data-theme="dark"] .table-card {
  border-color: var(--border-300);
}

[data-theme="dark"] .data-table thead th {
  background: var(--bg-200);
  border-bottom-color: var(--border-300);
}

[data-theme="dark"] .data-table tbody td {
  border-bottom-color: var(--border-200);
}

[data-theme="dark"] .data-table tbody tr:nth-child(even) {
  background: var(--bg-200);
}

[data-theme="dark"] .data-table tbody tr:hover td {
  background: var(--bg-300);
}

[data-theme="dark"] .pagination-bar {
  border-top-color: var(--border-300);
  background: var(--surface);
}

[data-theme="dark"] .pagination-btn {
  background: var(--bg-200);
  border-color: var(--border-400);
  color: var(--text-600);
}

[data-theme="dark"] .pagination-btn:hover:not(:disabled):not(.active) {
  border-color: var(--brand-400);
  color: var(--brand-400);
}

[data-theme="dark"] .benefit-card {
  border-color: var(--border-300);
}

[data-theme="dark"] .benefit-card:hover {
  border-color: var(--brand-400);
}

[data-theme="dark"] .benefit-icon {
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--brand-300);
}

[data-theme="dark"] .profile-header,
[data-theme="dark"] .profile-tabs,
[data-theme="dark"] .info-card,
[data-theme="dark"] .favorite-item,
[data-theme="dark"] .benefit-item,
[data-theme="dark"] .security-item,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .admin-stat-card,
[data-theme="dark"] .auth-card {
  border-color: var(--border-300);
}

[data-theme="dark"] .auth-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .vip-hero {
  border-color: var(--brand-400);
  background: linear-gradient(135deg, var(--bg-200), var(--brand-50));
}

[data-theme="dark"] .vip-status-card {
  border-color: var(--vip-400);
  background: linear-gradient(135deg, var(--vip-50), var(--vip-100));
}

[data-theme="dark"] .drop-zone {
  background: var(--bg-200);
  border-color: var(--border-400);
}

[data-theme="dark"] .drop-zone:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
}

[data-theme="dark"] .faq-item[open] {
  background: var(--bg-200);
}

[data-theme="dark"] .tag {
  background: var(--bg-400);
  color: var(--text-600);
}

[data-theme="dark"] .tag.tag-primary {
  background: var(--brand-50);
  color: var(--brand-400);
}

[data-theme="dark"] .tag.tag-success {
  background: var(--success-50);
  color: var(--success-400);
}

[data-theme="dark"] .tag.tag-warning {
  background: var(--vip-50);
  color: var(--vip-400);
}

[data-theme="dark"] .tag.tag-error {
  background: var(--error-50);
  color: var(--error-400);
}

[data-theme="dark"] .btn-secondary {
  background: var(--bg-300);
  border-color: var(--border-400);
  color: var(--text-700);
}

[data-theme="dark"] .btn-secondary:hover {
  background: var(--bg-400);
}

[data-theme="dark"] .btn-outline {
  border-color: var(--border-400);
  color: var(--text-600);
}

[data-theme="dark"] .btn-outline:hover {
  border-color: var(--brand-400);
  color: var(--brand-400);
  background: var(--brand-50);
}

[data-theme="dark"] .profile-menu-item.active {
  background: var(--brand-50);
  color: var(--brand-400);
}

[data-theme="dark"] .view-switch-btn-active {
  background: var(--bg-50);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

[data-theme="dark"] .view-switcher {
  background: var(--bg-300);
}

/* ===== 全局过渡优化 ===== */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 选择文本颜色 */
::selection {
  background: rgba(201, 100, 66, 0.2);
  color: var(--text-800);
}

/* 滚动条精修 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-500);
}

/* 侧边栏内滚动条更细 */
.app-sidebar::-webkit-scrollbar {
  width: 4px;
}

.app-sidebar::-webkit-scrollbar-thumb {
  background: transparent;
}

.app-sidebar:hover::-webkit-scrollbar-thumb {
  background: var(--border-300);
}

/* ===== 全列筛选功能样式 ===== */

/* 表头筛选按钮 */
.th-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.th-center {
  justify-content: center;
}

.th-filter-btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
}

.th-filter-btn:hover {
  background: var(--bg-200);
  color: var(--text-600);
}

.th-filter-btn.active {
  color: var(--primary);
  background: var(--brand-50);
}

.th-filter-btn.active:hover {
  background: var(--brand-100);
}

/* 活跃筛选标签栏 */
.filter-chips-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-wrap: wrap;
}

.filter-chips-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-600);
  flex-shrink: 0;
}

.filter-chips-label svg {
  color: var(--primary);
}

.filter-chips-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px 0 10px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-700);
  white-space: nowrap;
  transition: all 0.15s ease;
}

.filter-chip:hover {
  border-color: var(--brand-200);
}

.filter-chip-label {
  color: var(--text-500);
  font-weight: 500;
}

.filter-chip-value {
  color: var(--primary);
  font-weight: 600;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-chip-close {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.filter-chip-close:hover {
  background: var(--brand-200);
  color: var(--primary);
}

.filter-chips-clear {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-500);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
  flex-shrink: 0;
  font-family: inherit;
}

.filter-chips-clear:hover {
  color: var(--primary);
  background: var(--brand-50);
}

/* 筛选弹窗 */
.filter-popup {
  position: absolute;
  z-index: 1000;
  min-width: 220px;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  animation: filterPopupFadeIn 0.15s ease;
}

@keyframes filterPopupFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.filter-popup-header {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-800);
  border-bottom: 1px solid var(--border);
}

.filter-popup-body {
  padding: 12px 14px;
}

.filter-popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

.filter-popup-field {
  margin-bottom: 10px;
}

.filter-popup-field:last-child {
  margin-bottom: 0;
}

.filter-popup-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-500);
  margin-bottom: 6px;
}

.filter-popup-input {
  width: 100%;
  height: 34px;
  font-size: 13px;
}

.filter-popup-range {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.filter-popup-range .filter-popup-field {
  flex: 1;
  margin-bottom: 0;
}

.filter-popup-range-sep {
  color: var(--text-400);
  font-size: 12px;
  padding-bottom: 8px;
  flex-shrink: 0;
}

.filter-popup-hint {
  font-size: 11.5px;
  color: var(--text-400);
  margin-top: 8px;
  line-height: 1.4;
}

/* 弹窗选择列表 */
.filter-popup-select-list {
  max-height: 240px;
  overflow-y: auto;
  margin: -4px;
}

.filter-popup-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-600);
  transition: background-color 0.12s ease;
}

.filter-popup-option:hover {
  background: var(--bg-100);
}

.filter-popup-option.active {
  background: var(--brand-50);
  color: var(--primary);
  font-weight: 500;
}

.filter-popup-option input[type="radio"] {
  accent-color: var(--primary);
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
}

.filter-popup-option span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 侧边栏范围筛选 */
.filter-range-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
}

.filter-range-input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  color: var(--text-700);
  font-family: inherit;
  transition: all 0.15s ease;
}

.filter-range-input:hover {
  border-color: var(--border-500);
}

.filter-range-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.08);
}

.filter-range-sep {
  color: var(--text-400);
  font-size: 12px;
  flex-shrink: 0;
}

/* 侧边栏日期筛选 */
.filter-date-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  flex-direction: column;
}

.filter-date-row .filter-range-sep {
  align-self: center;
}

.filter-date-input {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  color: var(--text-700);
  font-family: inherit;
  transition: all 0.15s ease;
}

.filter-date-input:hover {
  border-color: var(--border-500);
}

.filter-date-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.08);
}

/* ===== 暗色模式：筛选功能 ===== */
[data-theme="dark"] .th-filter-btn:hover {
  background: var(--bg-300);
  color: var(--text-600);
}

[data-theme="dark"] .th-filter-btn.active {
  background: var(--brand-50);
  color: var(--brand-400);
}

[data-theme="dark"] .filter-chips-bar {
  background: var(--surface);
  border-color: var(--border-300);
}

[data-theme="dark"] .filter-chip {
  background: var(--brand-50);
  border-color: rgba(190, 111, 79, 0.25);
}

[data-theme="dark"] .filter-chip-value {
  color: var(--brand-400);
}

[data-theme="dark"] .filter-chip-close:hover {
  background: rgba(190, 111, 79, 0.3);
  color: var(--brand-400);
}

[data-theme="dark"] .filter-chips-clear:hover {
  background: var(--brand-50);
  color: var(--brand-400);
}

[data-theme="dark"] .filter-popup {
  background: var(--surface);
  border-color: var(--border-400);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .filter-popup-header {
  border-bottom-color: var(--border-300);
}

[data-theme="dark"] .filter-popup-footer {
  border-top-color: var(--border-300);
}

[data-theme="dark"] .filter-popup-option:hover {
  background: var(--bg-300);
}

[data-theme="dark"] .filter-popup-option.active {
  background: var(--brand-50);
  color: var(--brand-400);
}

[data-theme="dark"] .filter-range-input,
[data-theme="dark"] .filter-date-input {
  background: var(--bg-200);
  border-color: var(--border-400);
  color: var(--text-600);
}

[data-theme="dark"] .filter-range-input:hover,
[data-theme="dark"] .filter-date-input:hover {
  border-color: var(--text-400);
}

[data-theme="dark"] .filter-range-input:focus,
[data-theme="dark"] .filter-date-input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(190, 111, 79, 0.12);
}

[data-theme="dark"] .filter-popup-input {
  background: var(--bg-200);
  border-color: var(--border-400);
}

[data-theme="dark"] .filter-popup-input:hover {
  border-color: var(--text-400);
}

[data-theme="dark"] .filter-popup-input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(190, 111, 79, 0.12);
}

/* 表格卡片无边框 */
.table-card {
  border: none;
  box-shadow: none;
}

.table-card:hover {
  box-shadow: none;
}

[data-theme="dark"] .table-card {
  border: none;
}

/* 表格容器：无边框无内边距，完全撑满 */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.table-wrapper .data-table {
  width: 100%;
  /* ⭐ 没有 min-width 时，表格会为了塞进容器把列压扁到不可读，
     .table-wrapper 的 overflow-x:auto 永远不会触发（因为没溢出）。
     给一个下限，超出就真的横向滚动。 */
  min-width: 720px;
}
/* 桌面宽屏下不需要滚动条，min-width 也就不起作用（内容本来就 > 720） */
@media (min-width: 901px) {
  .table-wrapper .data-table { min-width: 0; }
}

/* 去掉表格第一行和最后一行的圆角（因为没有外层卡片了） */
.data-table thead tr:first-child th:first-child {
  border-top-left-radius: 0;
}
.data-table thead tr:first-child th:last-child {
  border-top-right-radius: 0;
}
.data-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
.data-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}

/* ===== 整体优化：无边框表格模式 ===== */

/* 表头底部加一条清晰的分隔线 */
.table-wrapper .data-table thead th {
  border-bottom: 2px solid var(--border-300);
  background: var(--bg-100);
}

/* 表格行悬停效果更柔和 */
.table-wrapper .data-table tbody tr:hover td {
  background: var(--bg-200);
}

/* 表格行底部分隔线 */
.table-wrapper .data-table tbody td {
  border-bottom: 1px solid var(--border-200);
}

/* 最后一行去掉底部边框 */
.table-wrapper .data-table tbody tr:last-child td {
  border-bottom: none;
}

/* 暗色模式适配 */
[data-theme="dark"] .table-wrapper .data-table thead th {
  border-bottom-color: var(--border-400);
  background: var(--bg-200);
}

[data-theme="dark"] .table-wrapper .data-table tbody td {
  border-bottom-color: var(--border-300);
}

/* 活跃筛选标签栏去掉边框，更融合 */
.filter-chips-bar {
  border: none;
  background: transparent;
  padding: 8px 0 14px;
}

[data-theme="dark"] .filter-chips-bar {
  background: transparent;
  border: none;
}

/* ===== VIP 权益卡片布局修复 ===== */

/* 确保 page-container 占满可用宽度，避免 grid 计算偏差 */
.page-container {
  width: 100%;
  box-sizing: border-box;
}

/* 权益卡片 grid：auto-fit 替代 auto-fill，加 width:100% 确保正确计算 */
.vip-benefits {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  box-sizing: border-box;
}

/* 确保卡片不会压缩变形 */
.benefit-card {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* 多选筛选弹窗样式 */
.filter-popup-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: normal;
  color: var(--primary);
  background: var(--brand-50);
  padding: 2px 8px;
  border-radius: 10px;
}

.filter-popup-header {
  display: flex;
  align-items: center;
}

/* 暗色模式适配 */
[data-theme="dark"] .filter-popup-count {
  background: rgba(190, 111, 79, 0.15);
}

/* ===== 表头排序指示图标 ===== */
.th-sort-icon {
  font-size: 12px;
  color: var(--text-400);
  opacity: 0;
  transition: all 0.15s ease;
  margin-left: 2px;
  font-weight: 600;
  /* 2026-11-07：箭头固定宽度，不参与 flex 收缩，始终紧跟在表头文字后面 */
  flex: 0 0 auto;
}

th:hover .th-sort-icon {
  opacity: 0.5;
}

.th-sort-icon.active {
  opacity: 1;
  color: var(--primary);
}

/* 表头文字可点击排序时显示手型光标 */
.data-table thead th {
  cursor: pointer;
  user-select: none;
}

/* 复选框列不显示手型 */
.data-table thead th:first-child {
  cursor: default;
}

/* ===== 卡片视图 ===== */
.card-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 4px 0;
}

.job-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.job-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(190, 111, 79, 0.1);
  transform: translateY(-2px);
}

.job-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

/* 编制标签独占一行，在卡片最开头（标题之上） */
.job-card-staff {
  margin-bottom: 7px;
  line-height: 1;
}
.job-card-staff .staff-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;   /* 独立一行，做成胶囊形更像"标签" */
  font-weight: 600;
}

.job-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-700);
  line-height: 1.4;
  flex: 1;
}

.btn-fav {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-400);
  padding: 4px;
  border-radius: 6px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-fav:hover {
  color: var(--primary);
  background: var(--brand-50);
}

.btn-fav.active {
  color: var(--primary);
}

.job-card-org {
  font-size: 13px;
  color: var(--text-500);
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.job-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-500);
}

.job-meta-item svg {
  flex-shrink: 0;
}

.job-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border-200);
}

/* .job-ratio 2026-10-06 已删除（竞争比整体移除）*/

.job-card-date {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-400);
  text-align: right;
}

/* VIP 徽章 */
.vip-badge-sm {
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* 暗色模式 - 卡片 */
[data-theme="dark"] .job-card {
  background: var(--surface);
  border-color: var(--border-400);
}

[data-theme="dark"] .job-card:hover {
  border-color: var(--brand-400);
  box-shadow: 0 4px 16px rgba(190, 111, 79, 0.15);
}

[data-theme="dark"] .job-card-footer {
  border-top-color: var(--border-300);
}

/* ===== VIP 解锁弹窗 ===== */
.vip-unlock-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vip-unlock-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.vip-unlock-dialog {
  position: relative;
  background: var(--surface);
  border-radius: 16px;
  padding: 32px 28px 24px;
  width: 320px;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: vipModalIn 0.25s ease;
}

@keyframes vipModalIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.vip-unlock-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--brand-100), var(--brand-200));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.vip-unlock-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-700);
  margin-bottom: 8px;
}

.vip-unlock-desc {
  font-size: 13px;
  color: var(--text-500);
  line-height: 1.6;
  margin-bottom: 24px;
}

.vip-unlock-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.vip-unlock-actions .btn {
  flex: 1;
  justify-content: center;
}

/* ===== 管理后台：小程序码上传 ===== */
.qr-upload {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.qr-preview {
  width: 140px;
  height: 140px;
  flex: 0 0 140px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-400);
  font-size: 12px;
}

.qr-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.qr-upload-body {
  flex: 1;
  min-width: 200px;
}

.qr-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-500);
  line-height: 1.6;
}

/* ===== 小程序码弹窗（网页端引导去小程序） ===== */
.mp-qr-dialog {
  width: 320px;
  padding: 24px 22px 18px;
}

.mp-qr-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-400);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.mp-qr-close:hover {
  background: var(--bg-200);
  color: var(--text-700);
}

.mp-qr-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-800);
  margin: 0 0 6px;
  padding: 0 28px;
}

.mp-qr-desc {
  font-size: 13px;
  color: var(--text-500);
  line-height: 1.6;
  margin: 0 0 18px;
}

.mp-qr-desc:empty {
  display: none;
}

.mp-qr-body {
  background: var(--bg-100);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px 14px;
  margin-bottom: 14px;
}

.mp-qr-frame {
  width: 172px;
  height: 172px;
  margin: 0 auto 10px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mp-qr-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 未上传小程序码时的占位图（SVG 在 common.js 的 qrPlaceholderSvg 里生成）
   设计目标：和真二维码同尺寸同形状，视觉上仍是"一个码"，不用红色告警块 */
.mp-qr-placeholder {
  display: block;
  color: var(--text-300);
}
.mp-qr-placeholder-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  font-size: 12px;
  color: var(--text-500);
  letter-spacing: 0.5px;
  pointer-events: none;
  /* 底部留一条白底，文字压在模拟码的模块块上会看不清 */
  background: linear-gradient(to top, var(--bg-50) 60%, transparent);
  padding: 10px 0 2px;
}
.mp-qr-frame {
  position: relative;
}
.mp-qr-frame[data-state="placeholder"] {
  background: var(--bg-50);
  border: 1px dashed var(--border);
}
.mp-qr-loading {
  font-size: 12px;
  color: var(--text-400);
}

.mp-qr-scan {
  margin: 0;
  font-size: 12px;
  color: var(--text-500);
  text-align: center;
}

.mp-qr-tip {
  font-size: 13px;
  color: var(--text-600);
  line-height: 1.7;
  margin: 0;
  text-align: center;
}

.mp-qr-tip:empty {
  display: none;
}

/* 暗色模式 - 弹窗 */
[data-theme="dark"] .vip-unlock-dialog {
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .vip-unlock-icon {
  background: linear-gradient(135deg, rgba(190, 111, 79, 0.2), rgba(190, 111, 79, 0.3));
}

/* ===== 整体视觉优化 v2 ===== */

/* 工具栏分隔线更柔和 */
.toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border-200);
  margin: 0 4px;
}

/* 工具栏筛选按钮 */
.toolbar-filter-btn {
  gap: 5px;
  font-size: 13px;
  color: var(--text-500);
  padding: 6px 12px;
}

.toolbar-filter-btn:hover {
  color: var(--primary);
  background: var(--brand-50);
}

/* 视图切换按钮组优化 */
.view-switcher {
  display: inline-flex;
  background: var(--bg-200);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.view-switch-btn {
  width: 32px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.view-switch-btn:hover {
  color: var(--text-700);
}

.view-switch-btn-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* 暗色模式 - 视图切换 */
[data-theme="dark"] .toolbar-divider {
  background: var(--border-300);
}

[data-theme="dark"] .view-switcher {
  background: var(--bg-300);
}

[data-theme="dark"] .view-switch-btn-active {
  background: var(--bg-200);
}

/* 2026-10-09 清理：表格 td/th 的 padding 与行高原先在这里写了一份
   （.table-wrapper .data-table 前缀特异性更高，会悄悄压过 design-system.css），
   现在统一只由 design-system.css 定义，这里删掉重复声明，避免两头改数值打架。 */

/* 表格列对齐优化 */
.data-table th.th-center,
.data-table td.td-center {
  text-align: center;
}

.data-table th.th-right,
.data-table td.td-right {
  text-align: right;
}

/* 分页区域优化 - 无边框风格 */
.pagination {
  padding: 16px 0 8px;
  background: transparent;
  border: none;
  border-radius: 0;
}

[data-theme="dark"] .pagination {
  background: transparent;
  border: none;
}

/* 活跃筛选标签栏 - 优化间距 */
.filter-chips-bar {
  padding: 4px 0 6px;
}

/* 筛选按钮在表头中的位置微调 */
.th-content {
  gap: 4px;
}

.th-filter-btn {
  width: 20px;
  height: 20px;
  opacity: 0.6;
}

th:hover .th-filter-btn {
  opacity: 1;
}

/* 排序图标位置优化 */
.th-sort-icon {
  margin-left: 0;
  margin-right: 2px;
}

/* 卡片视图优化 */
.card-view {
  padding: 4px 0;
}

.job-card {
  padding: 18px;
}

.job-card-header {
  margin-bottom: 8px;
}

.job-card-title {
  font-size: 15px;
  line-height: 1.5;
}

.job-card-org {
  margin-bottom: 12px;
  font-size: 13px;
}

.job-card-meta {
  gap: 10px 16px;
  margin-bottom: 14px;
}

.job-card-footer {
  padding-top: 12px;
  margin-top: 2px;
}

/* 搜索框优化 */
.search-box input {
  font-size: 13px;
}

/* 工具栏整体对齐 */
.toolbar-left,
.toolbar-right {
  gap: 10px;
}

/* 搜索框最小宽度保证 */
.search-box {
  min-width: 220px;
  flex-shrink: 0;
}

/* 工具栏右侧 flex 布局优化 */
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* 确保搜索框在 VIP 状态下可交互 */
.search-box:not(.vip-locked) input {
  pointer-events: auto;
}

/* 搜索框宽度：固定 260px，但**允许在空间不足时收缩**。
 * 🔴 2026-10-06 原来是 `flex: 0 0 260px; min-width: 260px`
 *    —— flex-shrink 被设成 0，永远不让缩。管理员登录后右侧多了
 *    「管理后台」+ 用户名菜单，空间不够就只能换行（看起来像堆叠）。
 *    现在改成 flex-shrink:1 + max-width:260px：
 *    空间够时还是 260px，不够时自动缩，配合下面的媒体查询更稳。
 */
.app-toolbar .toolbar-right .search-box {
  flex: 0 1 260px;
  min-width: 0;
  max-width: 260px;
}

/* 工具栏右侧内容靠右对齐 */
.app-toolbar .toolbar-right {
  justify-content: flex-end;
  flex: 1;
}

/* ===== 移动端全局重设计 ===== */

/* ---- 平板端 (≤ 900px) ---- */
@media (max-width: 900px) {
  /* 移动端：让页面整体可滚动 */
  .app-body {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .app-layout {
    display: block;
    min-height: 100vh;
  }
  .app-main {
    width: 100%;
    margin-left: 0;
    min-height: 100vh;
  }
  .app-content {
    overflow: visible;
    padding-bottom: 70px; /* 底部导航留白 */
  }

  /* 侧边栏改为固定抽屉，从文档流移除 */
  .app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    width: 260px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
  }
  .app-sidebar.open {
    transform: translateX(0);
  }
  .app-sidebar.collapsed {
    width: 260px;
    transform: translateX(-100%);
  }
  .app-sidebar.open.collapsed {
    transform: translateX(0);
  }
  .app-sidebar .sidebar-collapse-btn {
    display: none;
  }
  .app-sidebar .sidebar-item-text,
  .app-sidebar .sidebar-badge,
  .app-sidebar .sidebar-logo-text,
  .app-sidebar .sidebar-group-title,
  .app-sidebar .sidebar-user-info,
  .app-sidebar .theme-toggle-text {
    display: block;
  }
  .app-sidebar .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .app-sidebar .sidebar-footer {
    flex-shrink: 0;
  }
  .mobile-hamburger {
    display: inline-flex;
  }

  /* 工具栏 */
  .app-toolbar {
    height: auto;
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .toolbar-left {
    min-width: auto;
    width: auto;
    flex: 0 0 auto;
  }
  .toolbar-right {
    flex: 1 1 100%;
    order: 3;
    justify-content: flex-start;
  }
  .app-toolbar .toolbar-right .search-box {
    flex: 1;
    min-width: 0;
  }
  .view-title span {
    display: inline;
  }
  .view-title svg {
    display: inline;
  }

  /* 内容区 */
  .app-content {
    padding: 10px;
    gap: 10px;
  }

  /* 筛选标签栏 */
  .filter-chips-bar {
    padding: 8px 10px;
    gap: 8px;
  }

  /* 表格 */
  .table-wrapper {
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
  }

  /* 分页 */
  .pagination-bar {
    padding: 8px 10px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .pagination-info {
    font-size: 12px;
  }
  .pagination-btn {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
  }

  /* 个人中心 */
  .profile-page {
    padding: 16px 12px 32px;
  }
  .profile-header {
    padding: 20px;
    flex-wrap: wrap;
  }
  .profile-header-action {
    width: 100%;
    justify-content: flex-start;
    margin-top: 12px;
  }
  .profile-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 0;
    margin-bottom: 16px;
  }
  .profile-tab {
    flex-shrink: 0;
    padding: 10px 14px;
    font-size: 13px;
  }
  .profile-tab svg {
    display: none;
  }
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .vip-banner {
    padding: 20px;
  }
  .vip-banner-title {
    font-size: 18px;
  }
}

/* ---- 手机端 (≤ 600px) ---- */
@media (max-width: 600px) {
  /* 隐藏表格，显示卡片视图 */
  .table-wrapper {
    display: none;
  }
  .card-view {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
  }
  .job-card {
    padding: 14px;
    border-radius: 10px;
  }
  .job-card-title {
    font-size: 14px;
  }
  .job-card-org {
    font-size: 12.5px;
    margin-bottom: 8px;
  }
  .job-card-meta {
    gap: 6px 10px;
    margin-bottom: 10px;
  }
  .job-meta-item {
    font-size: 11.5px;
  }
  .job-card-footer {
    padding-top: 8px;
  }
  /* .job-ratio 已删除（竞争比整体移除，2026-10-06） */
  .job-card-date {
    margin-top: 6px;
    font-size: 11.5px;
  }
  .view-switcher {
    display: none;
  }

  /* 移动端筛选按钮 */
  .mobile-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-600);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .mobile-filter-btn:active {
    background: var(--bg-200);
  }
  .mobile-filter-btn svg {
    width: 16px;
    height: 16px;
  }
  .mobile-filter-btn.has-filter {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--brand-50);
  }

  /* 工具栏 - 搜索框独占一行，筛选+条数一行 */
  .app-toolbar {
    padding: 8px 10px;
    gap: 8px;
  }
  .toolbar-left {
    gap: 6px;
  }
  .view-title {
    font-size: 14px;
    gap: 6px;
    display: none;
  }
  .view-title svg {
    width: 16px;
    height: 16px;
  }
  .toolbar-right {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .toolbar-right .toolbar-select {
    order: 2;
    flex: 1;
    height: 36px;
    min-width: 0;
  }
  .toolbar-right .mobile-filter-btn {
    order: 1;
  }
  .app-toolbar .toolbar-right .search-box {
    order: 3;
    flex: none;
    width: 100%;
  }

  /* 筛选+条数 行容器 */
  .toolbar-right::before {
    content: '';
    display: none;
  }
  .toolbar-right {
    flex-wrap: wrap;
    flex-direction: row;
  }
  .toolbar-right .mobile-filter-btn,
  .toolbar-right .toolbar-select {
    order: 1;
    flex: 1 1 auto;
  }
  .toolbar-right .search-box {
    order: 2;
    flex: 1 1 100%;
  }

  /* 内容区 */
  .app-content {
    padding: 8px;
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 筛选标签 - 更紧凑 */
  .filter-chips-bar {
    padding: 6px 8px;
    gap: 6px;
    font-size: 12px;
  }
  .filter-chips-label {
    font-size: 11.5px;
    gap: 4px;
  }
  .filter-chips-label svg {
    width: 12px;
    height: 12px;
  }
  .filter-chips-list {
    gap: 4px;
  }
  .filter-chip {
    font-size: 11.5px;
    padding: 3px 6px 3px 8px;
    gap: 4px;
  }
  .filter-chip-close {
    width: 16px;
    height: 16px;
  }
  .filter-chip-close svg {
    width: 10px;
    height: 10px;
  }
  .filter-chips-clear {
    font-size: 11.5px;
    padding: 3px 8px;
  }

  /* 表格 - 移动端优化 */
  .table-wrapper {
    border-radius: 8px;
    margin: 0 -4px;
    width: calc(100% + 8px);
  }
  .table-wrapper .data-table {
    font-size: 12px;
    min-width: 900px;
  }
  .table-wrapper .data-table thead th {
    padding: 8px 10px;
    font-size: 12px;
  }
  .table-wrapper .data-table tbody td {
    padding: 8px 10px;
    font-size: 12px;
  }
  .th-content {
    gap: 3px;
  }
  .th-filter-btn {
    width: 18px;
    height: 18px;
  }
  .th-filter-btn svg {
    width: 12px;
    height: 12px;
  }

  /* 分页 - 移动端简化 */
  .pagination-bar {
    padding: 8px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .pagination-info:first-child {
    order: 1;
  }
  .pagination-controls {
    order: 2;
    justify-content: center;
  }
  .pagination-info:last-child {
    order: 3;
  }
  .pagination-btn {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
    padding: 0 6px;
  }
  .pagination-btn.pagination-prev,
  .pagination-btn.pagination-next {
    min-width: 36px;
  }

  /* 个人中心 - 手机端 */
  .profile-page {
    padding: 12px 10px 24px;
  }

  /* 用户信息头部 */
  .profile-header {
    padding: 16px;
    gap: 12px;
    margin-bottom: 14px;
  }
  .profile-header-avatar {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
  .profile-header-name {
    font-size: 16px;
  }
  .profile-header-sub {
    font-size: 12.5px;
  }
  .profile-header-action {
    margin-top: 4px;
  }
  .profile-header-action .btn {
    width: 100%;
    justify-content: center;
  }

  /* 标签栏 */
  .profile-tabs {
    margin: 0 0 14px;
    padding: 4px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    gap: 2px;
  }
  .profile-tab {
    padding: 8px 12px;
    font-size: 13px;
    gap: 5px;
    border-radius: 8px;
  }
  .profile-tab svg {
    display: none;
  }

  /* 信息卡片 */
  .info-card {
    padding: 14px;
    border-radius: 10px;
  }
  .info-card-title {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .info-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .info-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-100);
  }
  .info-item:last-child {
    border-bottom: none;
  }
  .info-item-label {
    font-size: 11.5px;
    margin-bottom: 2px;
  }
  .info-item-value {
    font-size: 13.5px;
  }

  /* VIP 横幅 */
  .vip-banner {
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 14px;
  }
  .vip-banner-title {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .vip-banner-desc {
    font-size: 12.5px;
  }
  .vip-banner .btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* 权益卡片 */
  .benefits-title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
  .benefit-item {
    padding: 14px;
    border-radius: 10px;
    gap: 10px;
  }
  .benefit-item-icon {
    width: 36px;
    height: 36px;
  }
  .benefit-item-icon svg {
    width: 18px;
    height: 18px;
  }
  .benefit-item-title {
    font-size: 13.5px;
    margin-bottom: 2px;
  }
  .benefit-item-desc {
    font-size: 12px;
    line-height: 1.5;
  }

  /* VIP 底部 CTA */
  .vip-cta {
    text-align: center;
  }
  .vip-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* 收藏列表 */
  .favorites-list {
    gap: 8px;
  }
  .favorite-item {
    padding: 12px;
    border-radius: 10px;
  }
  .favorite-item-title {
    font-size: 13.5px;
    margin-bottom: 4px;
  }
  .favorite-item-meta {
    font-size: 11.5px;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .favorite-item-action {
    margin-left: 8px;
  }

  /* 账户安全 */
  .security-list {
    gap: 8px;
  }
  .security-item {
    padding: 14px;
    border-radius: 10px;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .security-item-left {
    gap: 10px;
  }
  .security-item-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .security-item-icon svg {
    width: 18px;
    height: 18px;
  }
  .security-item-title {
    font-size: 13.5px;
    margin-bottom: 2px;
  }
  .security-item-desc {
    font-size: 12px;
    line-height: 1.5;
  }
  .security-item .btn {
    align-self: stretch;
    justify-content: center;
  }

  /* 空状态 */
  .empty-state {
    padding: 40px 20px;
  }
  .empty-state-text {
    font-size: 13px;
  }

  /* 移动端筛选抽屉 */
  .mobile-filter-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .mobile-filter-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-filter-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 340px;
    background: var(--surface);
    z-index: 151;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .mobile-filter-drawer.open {
    transform: translateX(0);
  }
  .mobile-filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-800);
    flex-shrink: 0;
  }
  .mobile-filter-close {
    background: transparent;
    border: none;
    color: var(--text-500);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
  }
  .mobile-filter-close:active {
    background: var(--bg-200);
  }
  .mobile-filter-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-filter-group {
    margin-bottom: 18px;
  }
  .mobile-filter-group-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-700);
    margin-bottom: 8px;
  }
  /* 地区有 7000+ 项，必须能搜索（2026-10-05） */
  .mobile-filter-search {
    width: 100%;
    padding: 7px 10px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-700);
    background: var(--bg-50);
    border: 1px solid var(--border-200);
    border-radius: 6px;
    outline: none;
  }
  .mobile-filter-search:focus {
    border-color: var(--brand-400);
    background: var(--bg-100);
  }
  .mobile-filter-search-tip {
    font-size: 12px;
    color: var(--text-400);
    padding: 6px 0;
  }
  .mobile-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
  }
  .mobile-filter-option {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 12.5px;
    color: var(--text-600);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .mobile-filter-option.active {
    border-color: var(--primary);
    background: var(--brand-50);
    color: var(--primary);
    font-weight: 500;
  }

  /* 范围输入框 */
  .mobile-filter-range {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mobile-filter-input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13px;
    color: var(--text-700);
    outline: none;
    transition: border-color 0.15s ease;
  }
  .mobile-filter-input:focus {
    border-color: var(--primary);
  }
  .mobile-filter-range-sep {
    font-size: 12px;
    color: var(--text-400);
    flex-shrink: 0;
  }

  /* 排序方式 - 升序降序 */
  .mobile-filter-sort-order {
    display: flex;
    gap: 6px;
    margin-top: 6px;
  }
  .mobile-filter-sort-order .mobile-filter-option {
    flex: 1;
    text-align: center;
  }

  .mobile-filter-drawer-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    flex-shrink: 0;
  }
  .mobile-filter-drawer-footer .btn {
    flex: 1;
    justify-content: center;
    height: 40px;
  }
}

/* ---- 小屏手机 (≤ 380px) ---- */
@media (max-width: 380px) {
  .profile-header-name {
    font-size: 15px;
  }
  .vip-banner-title {
    font-size: 15px;
  }
  .pagination-btn {
    min-width: 28px;
    height: 28px;
    font-size: 11.5px;
    padding: 0 4px;
  }
}

/* ===== 移动端底部导航栏 ===== */
.bottom-nav {
  display: none;
}

@media (max-width: 600px) {
  /* 🔴 这里原来写的是「侧边栏和汉堡按钮全部 display:none」，
     等于小屏上完全没法打开侧边栏（用户反馈"窄屏下侧边栏无法打开"）。
     原因：写这段时想的是"小屏用底部导航就够了"，
     但底部导航只有 3 个入口，侧边栏有 9 个 ——
     招考分类、搜索、筛选、收藏、个人中心里的各标签都只能从侧边栏进。

     现在的做法：侧边栏改成**抽屉**（能开、能关、点遮罩关闭），
     底部导航继续保留当快捷入口，两者并存。 */
  .app-sidebar {
    /* 不能再用 display:none —— 要改成抽屉靠 transform 移出屏幕（900px 断点已定义） */
    display: flex;
  }
  .mobile-hamburger {
    display: inline-flex;   /* 汉堡必须留着，不然用户没法开侧边栏 */
  }
  .sidebar-overlay {
    display: block;      /* 由 JS 控制显隐（inline style），这里不加 */
  }
  /* 主内容区占满宽度 */
  .app-main {
    margin-left: 0;
  }
  .app-layout {
    padding-bottom: 64px;
  }

  /* 底部导航栏 */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-500);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .bottom-nav-item svg {
    stroke-width: 1.8;
  }
  .bottom-nav-item.active {
    color: var(--primary);
  }
  .bottom-nav-item.active svg {
    stroke-width: 2.2;
  }

  /* 内容区底部留出导航栏空间
   * 🔴 2026-10-06 修复：这里原来是 `padding-bottom: 16px`，
   *   把上面 900px 断点里的 `padding-bottom: 70px` **覆盖掉了**
   *   （ 优先级最高，且这条在文件更后面）。
   *   结果：移动端滚到列表底部，最后一条数据被固定底栏盖住 44px ——
   *   缺一截且点不到。
   *   改成：底栏高 60px + 视觉留白 16px + iPhone 安全区。
   *   ⚠️ 不要再用 覆盖，900px 那条的 70px 本来是对的。 */
  .app-content {
    padding-bottom: calc(60px + 16px + env(safe-area-inset-bottom, 0px));
  }
  .profile-page {
    /* 个人中心底栏是 tabBar 不是 .bottom-nav，但仍要避让 */
    padding-bottom: calc(60px + 16px + env(safe-area-inset-bottom, 0px));
  }
  .pagination-bar {
    margin-bottom: 0;
  }
}

/* 修复：侧边栏 logo 文字与图标垂直居中对齐 */
.sidebar-logo {
  align-items: center;
}
.sidebar-logo-text {
  line-height: 1;
  display: flex;
  align-items: center;
}

/* 修复：logo 文字顶部遮挡（字体上伸区被裁） */
.sidebar-logo-text {
  overflow: visible;
  padding-top: 1px;
}

.top-nav .logo span {
  overflow: visible;
  padding-top: 1px;
}

/* ======== 预览模式悬浮切换器 ======== */
.preview-switcher-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-700, #374151);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.preview-switcher-btn:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}
.ps-label { white-space: nowrap; }
.ps-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.ps-dot-default { background: #6b7280; }
.ps-dot-gray { background: #9ca3af; }
.ps-dot-blue { background: #3b82f6; }
.ps-dot-amber { background: #f59e0b; }
.ps-dot-purple { background: #8b5cf6; }

.preview-switcher-panel {
  position: fixed;
  bottom: 64px;
  right: 20px;
  z-index: 9999;
  width: 260px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  padding: 8px;
  display: none;
  animation: psFadeIn 0.15s ease;
}
.preview-switcher-panel.ps-panel-open { display: block; }
@keyframes psFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ps-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  color: var(--text-800, #1f2937);
}
.ps-item:hover { background: var(--brand-50, #eff6ff); }
.ps-item-active {
  background: var(--brand-50, #eff6ff);
  color: var(--primary, #2563eb);
  font-weight: 500;
}
.ps-item-info { flex: 1; min-width: 0; }
.ps-item-label { font-size: 13px; line-height: 1.3; }
.ps-item-desc { font-size: 11px; color: var(--text-400, #9ca3af); margin-top: 2px; line-height: 1.3; }

/* ======== 导出格式下拉 ======== */
.export-dropdown { position: relative; }
.export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  width: 220px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  padding: 6px;
  animation: psFadeIn 0.12s ease;
}
.export-menu-item {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.export-menu-item:hover { background: var(--brand-50, #eff6ff); }
.export-menu-item strong { font-size: 13px; color: var(--text-800, #1f2937); }
.export-menu-item span { font-size: 11px; color: var(--text-400, #9ca3af); }

/* ============================================================
   ===== 响应式统一修复（2026-10-05）=====
   放在文件最后，压过前面所有零散断点。
   之前的问题：断点有 1023/900/767/720/600/480/380 七个且职责重叠，
   加上多处 .sidebar-nav / .app-toolbar 重复定义互相覆盖，
   导致「窄屏侧边栏下半部分点不到」「表格列被切掉」。
   这里只补真正缺失的东西，不重写已有规则。
   ============================================================ */

/* ---------- 1. 触摸设备：所有可点区域至少 40px ---------- */
@media (pointer: coarse) {
  .sidebar-item {
    min-height: 42px;
  }
  .theme-toggle {
    min-height: 42px;
  }
  .sidebar-collapse-btn,
  .mobile-hamburger,
  .btn-fav,
  .page-btn {
    min-width: 40px;
    min-height: 40px;
  }
  .pagination-bar .page-btn {
    min-width: 36px;   /* 分页按钮多个，40 会占太宽 */
    min-height: 36px;
  }
  /* 表格行内的操作按钮 */
  .data-table tbody td .btn-fav,
  .data-table tbody td .btn-link {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- 2. 矮窗口（横屏手机/小窗）：侧边栏必须能滚到底 ----------
   ⚠️ 这里换了个思路：不是让 nav 内部滚，而是**让侧边栏整体滚**，
   header/footer 用 position:sticky 吸在上下。
   为什么：nav 内部滚时，滚到底第一项会正好停在 header 下边缘被压住
   （实测 640×480 压掉 8px，scroll-padding 对"滚到底"无效）。
   整体滚 + sticky 头部/底部，菜单项永远在 header 和 footer 之间，不会被压。 */
@media (max-height: 560px) {
  /* header 保持普通流（不 sticky）—— sticky 会让内容从它下面滚过。
     靠 nav 自己的 overflow-y:auto 滚，footer flex-shrink:0 固定在底部，
     两者互不重叠：nav 的可视高度 = 侧边栏 - header - footer，永远装得下。 */
  .sidebar-footer {
    position: relative;   /* 不用 sticky，靠 flex 布局天然固定 */
  }
  .sidebar-nav {
    /* 横屏时可视高度只有 400 出头，导航项要更紧凑才不至于必须滚动。
       padding-top 给第一项留呼吸位：否则滚到底时第一项顶部
       正好贴住 header 下边缘，视觉上像被"切掉"（实测 640×480）。 */
    padding: 10px 6px 10px;
  }
  .sidebar-item {
    min-height: 34px;
    padding: 6px 10px;
  }
  .sidebar-group-title {
    padding: 8px 10px 4px;
    margin: 0;
  }
  .sidebar-group-title[style*="margin-top"] {
    margin-top: 6px;
  }
  .sidebar-header {
    padding: 6px 10px;
    min-height: 40px;
  }
  .sidebar-nav {
    padding-top: 4px;
  }
  /* 矮窗口下 header 占的固定高度要算进滚动区，
     否则最后一项会正好卡在 header 下边缘（实测 640×480 会压掉 8px）。
     scroll-padding 只影响滚动定位，真正防住"被压"的是给 nav 加下边距。 */
  .sidebar-nav {
    /* 底部留白：保证最后一项滚到底时不会紧贴 footer，看起来也不挤 */
    padding-bottom: 10px;
  }
  /* footer 在 480px 高的窗口里占 95px 太奢侈（实测），
     挤掉的是真菜单项。压到 ~56px：主题切换和用户区各一行、去掉多余内边距。 */
  .sidebar-footer {
    padding: 6px 10px;
    gap: 4px;
    flex-direction: row;
    align-items: center;
  }
  .sidebar-footer .theme-toggle {
    flex: 1;
    min-height: 32px;
    height: 32px;
  }
  .sidebar-user-avatar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }
  .sidebar-user {
    padding: 0;
    gap: 6px;
  }
  .sidebar-user-info {
    font-size: 12px;
    min-width: 0;
  }
  .sidebar-user-name {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------- 3. 工具栏：窄屏下控件不重叠、不被压扁 ---------- */
/* 🔴 2026-10-06 修复：管理员登录后工具栏按钮堆叠成两行。
 *
 * 病根：原来这段是 `@media (max-width: 1024px)`，笔记本（1366/1440 屏幕
 * 内容区常在 1100~1300）常刚好落在这个区间，于是：
 *   .toolbar-right { flex-wrap: wrap }  ← 换行
 *   .app-toolbar  { flex-wrap: wrap }
 * 管理员登录后右侧多了「管理后台」按钮 + 用户名菜单（还带 VIP 徽章），
 * 宽度不够 → 换行 → 工具栏变两行，看起来"按钮堆叠"。
 *
 * 修法：断点从 1024 降到 900 —— 901~1440 这一段（绝大多数笔记本）
 * 保持单行；≤900 本来就会切到移动端布局（侧边栏变抽屉），那里换行是合理的。
 * 真正窄的（≤900）才允许工具栏换行。
 */
@media (max-width: 900px) {
  .app-toolbar {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    padding: 8px 12px;
    row-gap: 8px;
  }
  .toolbar-left {
    width: auto;
    max-width: none;
    flex-shrink: 1;
  }
  .toolbar-right {
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .search-box {
    flex: 1;
    min-width: 140px;   /* 再窄就换行，别压成一条缝 */
  }
}

/* ---------- 桌面窄屏（901~1200）：管理员登录时的紧凑处理 ----------
 * 不换行，但允许元素收缩，并给用户名限宽。
 * 否则「管理后台」+ 用户名 + VIP 徽章 + 搜索框 + 筛选 会挤爆工具栏。
 */
@media (min-width: 901px) and (max-width: 1200px) {
  /* 搜索框可以变小（原来是硬编码 260px 且 flex-shrink:0，永远不让缩） */
  .app-toolbar .toolbar-right .search-box {
    flex: 1 1 auto;
    min-width: 150px;
    max-width: 260px;
  }
  /* 用户名限宽 + 省略号，长用户名不再把按钮往外推 */
  .toolbar-user-trigger {
    max-width: 168px;
  }
  .toolbar-user-name {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 「管理后台」按钮在窄屏只留图标，文字让位给用户名 */
  .app-toolbar .toolbar-right a[href="/admin.html"] {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0;      /* 隐藏文字，svg 仍显示 */
    gap: 0;
  }
  .app-toolbar .toolbar-right a[href="/admin.html"] svg {
    margin: 0;
  }
}

/* 搜索框被锁（VIP 遮罩）时也要能显示，别溢出 */
.search-box.vip-locked {
  min-width: 0;
  max-width: 100%;
}

/* ---------- 4. 表格：窄屏横向滚动 + 首列吸附 ---------- */
@media (max-width: 900px) {
  .table-wrapper {
    /* 触摸板/手机上要能"甩"得动 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .table-wrapper .data-table {
    min-width: 720px;
  }
  /* 横向滚动提示条：告诉用户右边还有列 */
  .table-card {
    position: relative;
  }
  .table-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 18px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(0,0,0,0.05), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .table-card.scroll-right::after {
    opacity: 1;
  }
  /* 职位名列吸附在左侧，横向滚动时始终知道是哪条 */
  .table-wrapper .data-table th:first-child,
  .table-wrapper .data-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--card, #fff);
    z-index: 2;
  }
  .table-wrapper .data-table th:first-child {
    z-index: 3;   /* 表头要在左上角交叉点上面 */
  }
  .table-wrapper .data-table th:first-child::after,
  .table-wrapper .data-table td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
  }
  .table-wrapper .data-table th {
    position: sticky;
    top: 0;
  }
  .table-wrapper .data-table tbody tr:hover td:first-child {
    background: var(--bg-100);
  }
}

/* ---------- 5. 抽屉态：锁住背景滚动 ---------- */
@media (max-width: 900px) {
  /* ⚠️ 别在这里写 .sidebar-overlay { display:block } ——
     index.html 里的 overlay 带 inline style="display:none"，
     inline 优先级高于 class，写了也无效。显隐由 common.js 的 setDrawer() 控制。
     这里只管 body 锁滚动。 */
  body.sidebar-open {
    overflow: hidden;
    /* iOS Safari：光 overflow:hidden 不够，还要阻止 touchmove 造成橡皮筋 */
    overscroll-behavior: none;
  }
  body.sidebar-open .app-main {
    pointer-events: none;   /* 抽屉打开时主区不可交互，防止误触 */
  }
}

/* ---------- 6. 极窄屏（≤380）：去掉非必要留白 ---------- */
@media (max-width: 380px) {
  .app-content {
    padding: 6px;
    gap: 6px;
  }
  .app-toolbar {
    padding: 6px 8px;
  }
  .filter-chips-bar {
    padding: 6px 8px;
  }
  .job-card {
    padding: 12px;
  }
  .pagination-bar {
    padding: 8px 6px;
  }
}

/* ============================================================
   ===== 数据维护面板（后台，2026-10-05）=====
   设计取向：删除是不可逆操作，所有危险项都要有明显的视觉警示，
   不能让管理员"手一滑就点下去"。
   ============================================================ */

.maint-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 720px) {
  .maint-stats { grid-template-columns: repeat(2, 1fr); }
}
.maint-stat {
  background: var(--bg-100);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.maint-stat-num {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  font-family: var(--font-mono);
  color: var(--text-800);
}
.maint-stat-label {
  font-size: 12px;
  color: var(--text-500);
}

.maint-statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.maint-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.maint-pill em {
  font-style: normal;
  opacity: 0.65;
  font-family: var(--font-mono);
  font-size: 11px;
}
.maint-pill-act     { background: #eaf3de; color: #3b6d11; }
.maint-pill-soon    { background: #fdf3e3; color: #854f0b; }
.maint-pill-end     { background: #f1efe8; color: #6b6a65; }
.maint-pill-unknown { background: #f5f5f4; color: #9a9a95; }

/* 配置行 */
.maint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-100);
}
@media (max-width: 720px) {
  .maint-row { flex-direction: column; align-items: stretch; gap: 8px; }
}
.maint-row-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.maint-row-label strong {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-800);
}
.maint-row-label span {
  font-size: 12px;
  color: var(--text-500);
  line-height: 1.5;
}
.maint-row-label code {
  background: var(--bg-100);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
}
.maint-row-ctl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.maint-input { width: 84px; text-align: center; }
.maint-select { min-width: 190px; }
.maint-unit {
  font-size: 12px;
  color: var(--text-500);
}

/* 危险行：整个区块加淡红底 + 左边框，和其它行明显区分 */
.maint-row-danger {
  background: linear-gradient(to right, rgba(190, 111, 79, 0.06), transparent 60%);
  border-left: 3px solid #be6f4f;
  padding-left: 12px;
  margin-left: -12px;
  border-radius: 0 8px 8px 0;
}

/* 开关 */
.maint-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.maint-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.maint-switch-track {
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: var(--border);
  position: relative;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}
.maint-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
.maint-switch input:checked + .maint-switch-track {
  background: #be6f4f;
}
.maint-switch input:checked + .maint-switch-track::after {
  transform: translateX(18px);
}
.maint-switch input:focus-visible + .maint-switch-track {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.maint-switch-text {
  font-size: 12px;
  color: var(--text-500);
  white-space: nowrap;
}
.maint-switch-text.on {
  color: #be6f4f;
  font-weight: 500;
}

.maint-actions {
  display: flex;
  gap: 10px;
  padding-top: 16px;
}

/* 预览结果 */
.maint-preview {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-100);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.maint-preview-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-800);
  margin-bottom: 12px;
}
.maint-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 720px) {
  .maint-preview-grid { grid-template-columns: 1fr; }
}
.maint-preview-cell {
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.maint-preview-cell span {
  font-size: 20px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-800);
}
.maint-preview-cell em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-500);
}
.maint-preview-cell.danger {
  border-color: #d9a894;
  background: rgba(190, 111, 79, 0.06);
}
.maint-preview-cell.danger span { color: #a0522d; }

.maint-preview-list {
  font-size: 12.5px;
  color: var(--text-600);
  line-height: 1.7;
}
.maint-preview-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--border-100);
}
.maint-preview-line em {
  font-style: normal;
  font-family: var(--font-mono);
  color: var(--text-500);
  flex-shrink: 0;
}
.maint-preview-line.ok { color: #3b6d11; }

.maint-preview-warn {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fdf3e3;
  border: 1px solid #f0d9a8;
  border-radius: 8px;
  font-size: 12.5px;
  color: #854f0b;
  line-height: 1.6;
}
.maint-preview-warn.danger {
  background: rgba(190, 111, 79, 0.1);
  border-color: #d9a894;
  color: #8a452a;
  font-weight: 500;
}

/* 日志 */
.maint-log-wrap {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-100);
}
.maint-log-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.maint-log-item {
  padding: 9px 11px;
  border-left: 2px solid var(--border);
  margin-bottom: 8px;
  background: var(--bg-50, transparent);
  border-radius: 0 6px 6px 0;
}
.maint-log-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.maint-log-action {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-700);
}
.maint-log-time {
  font-size: 11px;
  color: var(--text-400);
  font-family: var(--font-mono);
}
.maint-log-body {
  font-size: 11.5px;
  color: var(--text-500);
  line-height: 1.6;
  margin-top: 3px;
}
.maint-log-empty {
  font-size: 12px;
  color: var(--text-400);
  padding: 8px 0;
}

/* ============================================================
   ===== 登录入口可视化（2026-10-06）=====
   问题：登录入口是侧边栏底部一行红色小字，用户完全看不到，
   反馈"没有登录入口"。工具栏右侧也什么都没���。
   改：工具栏加显眼的登录按钮 + 用户菜单，侧边栏底部改成正经的登录块。
   ============================================================ */

/* 工具栏：未登录时的登录按钮 —— 要一眼看见 */
.toolbar-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* 工具栏：已登录时的用户菜单 */
.toolbar-user-menu {
  position: relative;
}
.toolbar-user-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px 0 4px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-100);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  max-width: 160px;
}
.toolbar-user-trigger:hover,
.toolbar-user-trigger.active {
  background: var(--bg-200, var(--bg-100));
  border-color: var(--text-300);
}
.toolbar-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.toolbar-user-name {
  font-size: 13px;
  color: var(--text-700);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toolbar-user-trigger .vip-badge {
  flex-shrink: 0;
  font-size: 10px;
  padding: 1px 5px;
}
.toolbar-user-dropdown {
  position: fixed;
  /* 用 fixed + JS 动态定位，避免受工具栏 overflow/transform 影响被裁切。
     初始化时先藏起来，bindToolbarUserMenu 打开前算好 top/right。 */
  top: 60px;
  right: 12px;
  min-width: 180px;
  max-width: calc(100vw - 24px);
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 2000;   /* 高于侧边栏抽屉(50)/遮罩(40)，别被盖住 */
  display: none;
}
.toolbar-user-dropdown.open { display: block; }
.toolbar-user-info {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border-100);
  margin-bottom: 4px;
}
.toolbar-user-info-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-800);
}
.toolbar-user-info-sub {
  font-size: 11.5px;
  color: var(--text-500);
  margin-top: 1px;
}
.toolbar-user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-700);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.toolbar-user-item:hover {
  background: var(--bg-100);
  color: var(--text-900);
}
.toolbar-user-item.danger { color: #b4482c; }
.toolbar-user-item.danger:hover { background: rgba(180, 72, 44, 0.08); }

/* 侧边栏底部：未登录时的登录块 */
.sidebar-user-guest {
  padding: 8px;
  background: var(--bg-100);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.sidebar-user-sub {
  font-size: 11px;
  color: var(--text-500);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.sidebar-user-btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.sidebar-user-btns .btn {
  flex: 1;
  justify-content: center;
  min-height: 32px;
}
.sidebar-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 已登录时整个用户区可点 */
.sidebar-user-link {
  display: flex;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-radius: 8px;
}
.sidebar-user-link:hover { background: var(--bg-100); }
.sidebar-user-link .sidebar-user-avatar {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
@media (max-width: 900px) {
  .sidebar-user-sub { max-width: 96px; }
  .toolbar-user-name { max-width: 60px; }
}

/* ===== 改密码表单（账户安全 tab，2026-10-06）===== */
.pwd-change-form {
  margin-top: 14px;
  padding: 16px;
  background: var(--bg-100);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pwd-change-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-800);
  margin-bottom: 12px;
}
.pwd-change-form .form-group {
  margin-bottom: 12px;
}
/* 账户安全里的只读值（注册邮箱）*/
.security-item-value {
  font-size: 13px;
  color: var(--text-600);
  flex-shrink: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .security-item-value { max-width: 110px; font-size: 12px; }
}

/* ===== 邮件（SMTP）配置区（数据维护卡片内，2026-10-06）===== */
.maint-mail-block {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-50, var(--bg-100));
  border: 1px solid var(--border);
  border-radius: 10px;
}
.maint-mail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.maint-mail-head strong {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-800);
}
.maint-mail-status {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: var(--bg-200, #eee);
  color: var(--text-500);
}
.maint-mail-status.on {
  background: #eaf3de;
  color: #3b6d11;
}
.maint-mail-body {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-100);
}
.maint-mail-tip {
  font-size: 12px;
  color: var(--text-500);
  line-height: 1.6;
  margin-bottom: 12px;
}
.maint-mail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}
@media (max-width: 720px) {
  .maint-mail-grid { grid-template-columns: 1fr; }
}
.maint-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.maint-field label {
  font-size: 12px;
  color: var(--text-600);
}
.maint-field .form-input {
  height: 34px;
  font-size: 13px;
}
.maint-mail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.maint-mail-msg {
  font-size: 12px;
  color: var(--text-500);
}
.maint-mail-msg.ok  { color: #3b6d11; }
.maint-mail-msg.bad { color: #b4482c; }

/* 「选填」小标签（注册页邮箱、2026-10-06）===== */
.form-label-optional {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 400;
  background: var(--bg-200, #eee);
  color: var(--text-500);
  vertical-align: middle;
}

/* ============================================================
   ===== 表格列宽拖拽（2026-10-06）=====
   交互约定：
   - 鼠标移到表头右边缘才出现 col-resize 光标（中间区域留给点排序/筛选）
   - 拖动时全局禁用文字选中，否则一拖就选中一片
   - 双击表头右边缘 = 恢复该列默认宽度
   ============================================================ */

/* 拖动中：全局禁止选中，光标保持 */
body.col-resizing {
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
}
body.col-resizing * {
  cursor: col-resize;
}

/* 正在调的这一列给个底色，视觉上知道在动哪列 */
.data-table thead th.col-resizing-active {
  background: var(--primary-hover, #b8543a);
  color: var(--primary-foreground, #fff);
  transition: none;   /* 拖动时不要有过渡动画，会有延迟感 */
}
.data-table thead th.col-resizing-active .th-content {
  color: inherit;
}
.data-table thead th.col-resizing-active .th-filter-btn {
  color: inherit;
  opacity: 0.85;
}

/* 悬停在可拖边缘时：只在这 8px 内显示竖线，并把光标变成拖拽形状。
   2026-11-07：竖线不再跟着整个表头 hover 显示 —— 之前鼠标停在表头
   任意位置都会冒出一条线，看着像整列都能拖，实际只有右侧 7px 能拖。
   现在由 colwidth.js 在鼠标进入右侧 7px 时给 th 加 .col-edge-hover。 */
.data-table thead th[data-col]:not([data-col="_check"])::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 8px;
  width: 8px;
  background: transparent;
  border-radius: 1px;
  pointer-events: none;
  transition: background-color 0.15s ease;
}
.data-table thead th.col-edge-hover {
  cursor: col-resize;
}
.data-table thead th.col-edge-hover::after {
  background: linear-gradient(
    90deg,
    transparent calc(100% - 2px),
    var(--primary, #c96442) calc(100% - 2px)
  );
  opacity: 0.5;
}

/* th 需要 position:relative 才能放伪元素；表头本来就是 sticky，顺手确认 */
.data-table thead th {
  position: relative;
  /* 用户明确要"固定表头"，这里补上（之前靠 JS 设的，此处兜底） */
}

/* 拖动时给个"正在调"的状态条（可选提示，在工具栏显示当前宽度） */
.colwidth-hint {
  position: fixed;
  z-index: 3000;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 11px;
  font-family: var(--font-mono);
  pointer-events: none;
  white-space: nowrap;
}

/* 窄屏：触摸拖拽更容易误触，边缘放大一点 */
@media (pointer: coarse) {
  .data-table thead th[data-col]:not([data-col="_check"])::after {
    right: -3px;
    width: 8px;
    background: var(--border);
    opacity: 0.5;
  }
}

/* 窄屏下横向滚动时，th 的 sticky 逻辑要保证拖拽手柄还在可见区 */
@media (max-width: 900px) {
  /* 移动端操作多，列宽调整不是主要诉求，提示一下就够了 */
  .data-table thead th[data-col]:not([data-col="_check"])::after {
    width: 6px;
  }
}

/* ============================================================
   ===== 折叠态悬停提示（2026-10-06）=====
   侧边栏折叠成 60px 后，.sidebar-item-text 被 display:none，
   只剩图标，用户认不出是哪个板块。
   做法：CSS 伪元素读 data-label 生成气泡，浮在侧边栏右侧。
   为什么用伪元素而不是 JS：不用监听事件、不用创建 DOM，
   浏览器原生处理 hover，还能顺带支持键盘 focus。
   ============================================================ */
.app-sidebar.collapsed .sidebar-item,
.app-sidebar.collapsed .theme-toggle {
  position: relative;
}
.app-sidebar.collapsed .sidebar-item::after,
.app-sidebar.collapsed .theme-toggle::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--text-900, #2a2825);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* 小阴影让它在白底上看得清 */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  z-index: 1200;
  transition: opacity 0.14s ease, visibility 0.14s ease;
}
.app-sidebar.collapsed .sidebar-item:hover::after,
.app-sidebar.collapsed .sidebar-item:focus-visible::after,
.app-sidebar.collapsed .theme-toggle:hover::after,
.app-sidebar.collapsed .theme-toggle:focus-visible::after {
  opacity: 1;
  visibility: visible;
  /* 冒出来时轻微右移，给个"弹出"的感觉（只有 transform 变化，不影响布局） */
  animation: sidebar-tip-in 0.14s ease;
}
@keyframes sidebar-tip-in {
  from { transform: translateY(-50%) translateX(-4px); }
  to   { transform: translateY(-50%) translateX(0); }
}

/* 折叠态下菜单项撑满 59px，让整块都是热区（不然只有图标那一小块能触发） */
.app-sidebar.collapsed .sidebar-item {
  width: 100%;
  min-height: 40px;
}

/* 底部导航打开抽屉时让位，避免叠在一起 */
@media (max-width: 600px) {
  body.sidebar-open .bottom-nav {
    transform: translateY(100%);
    transition: transform 0.2s ease;
  }
}

/* ============================================================
   ===== 折叠态（60px）布局修正（2026-10-06）=====
   问题：折叠后侧边栏只剩 60px，但 footer 里的内容（主题切换按钮 + 用户块）
   仍按展开宽度渲染 → 内容溢出到侧边栏外面，
   截图里能看到"登录/注册"按钮被切一半露在左下角。

   修法：折叠态把 footer 内容整体改成"只留图标、居中"的形态：
     - 主题切换：只留图标（.theme-toggle-text 隐藏）
     - 用户块：只留头像，居中
     - 登录/注册按钮：折叠态隐藏（要登录去工具栏点，那是主入口）
   ============================================================ */
.app-sidebar.collapsed .sidebar-footer {
  padding: 8px 6px;
  align-items: center;
  gap: 8px;
  overflow: visible;   /* 折叠态不该有纵向滚动条 */
}
.app-sidebar.collapsed .sidebar-footer .theme-toggle {
  width: 40px;
  min-height: 40px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.app-sidebar.collapsed .sidebar-footer .theme-toggle-text {
  display: none;   /* 折叠态只留图标 */
}
.app-sidebar.collapsed .sidebar-user {
  /* 未登录：登录块折叠成一个圆形按钮 */
  padding: 0;
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
/* 折叠态的用户块本身不要满宽，否则里面的按钮还是按 59px 撑 */
.app-sidebar.collapsed .sidebar-user-guest {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
.app-sidebar.collapsed .sidebar-user-link {
  width: 40px;
  height: 40px;
  justify-content: center;
}
.app-sidebar.collapsed .sidebar-user-avatar {
  width: 40px;
  height: 40px;
  margin: 0;
  flex-shrink: 0;
}
/* 🔴 折叠态隐藏"登录/注册"两个按钮：
   它们在 59px 宽度里必然溢出（截图里就是这么露出来的）。
   折叠态想登录去工具栏右上角，那里有完整的「登录 / 注册」按钮。 */
.app-sidebar.collapsed .sidebar-user-btns {
  display: none;
}
/* 未登录态的副标题在折叠态也没意义 */
.app-sidebar.collapsed .sidebar-user-sub {
  display: none;
}
.app-sidebar.collapsed .sidebar-group-title {
  padding: 10px 0 4px;
  margin: 0;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.02em;
  overflow: hidden;
  white-space: nowrap;
}
.app-sidebar.collapsed .sidebar-item {
  padding: 0;
  justify-content: center;
  gap: 0;
}
.app-sidebar.collapsed .sidebar-item .th-content,
.app-sidebar.collapsed .sidebar-item > span:not(.sidebar-item-text) {
  margin: 0;
}

/* ============================================================
   ===== 编制筛选展示（导入预检，2026-10-06）=====
   站点规则"只收录有编制的机会"是核心卖点，
   预检里必须让管理员一眼看到"剔掉了多少、留下的是不是都有编制"。
   ============================================================ */
.staff-stat {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 720px) {
  .staff-stat { grid-template-columns: repeat(2, 1fr); }
}
.staff-stat-cell {
  background: var(--bg-100);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.staff-stat-cell b {
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-800);
  line-height: 1.2;
}
.staff-stat-cell span {
  font-size: 11.5px;
  color: var(--text-500);
}
/* 明确有编制 / 混合岗含编制 —— 绿色（我们要的） */
.staff-stat-cell.ok {
  background: #eaf3de;
  border-color: #cfe3b8;
}
.staff-stat-cell.ok b { color: #3b6d11; }
/* 未标注 / 表述不明确 —— 中性灰（暂时保留） */
.staff-stat-cell.keep {
  background: var(--bg-100);
}
.staff-stat-cell.keep b { color: var(--text-600); }
/* 明确无编制 —— 红色（被剔除的） */
.staff-stat-cell.drop {
  background: rgba(190, 111, 79, 0.08);
  border-color: #dcc0b2;
}
.staff-stat-cell.drop b { color: #a0522d; }

.staff-note {
  font-size: 12.5px;
  color: var(--text-600);
  line-height: 1.7;
  padding: 10px 12px;
  background: var(--bg-100);
  border-radius: 8px;
  border-left: 3px solid var(--primary, #c96442);
}
.staff-note b {
  font-family: var(--font-mono);
  color: var(--text-800);
}

/* 被剔除样例：默认收起，管理员想确认没误杀时再展开 */
.staff-samples {
  margin-top: 10px;
  font-size: 12.5px;
}
.staff-samples summary {
  cursor: pointer;
  color: var(--text-500);
  padding: 6px 0;
  user-select: none;
}
.staff-samples summary:hover {
  color: var(--text-800);
}
.staff-samples ul {
  margin: 6px 0 0;
  padding: 10px 12px 10px 28px;
  background: var(--bg-100);
  border-radius: 8px;
  list-style: disc;
  color: var(--text-600);
  line-height: 1.8;
  max-height: 220px;
  overflow-y: auto;
}
.staff-samples li b {
  color: #a0522d;
  font-weight: 500;
}

/* ===== 导出区的"改数据流程"说明（2026-10-06）===== */
.roundtrip-hint {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg-100);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary, #c96442);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-600);
}
.roundtrip-hint > b {
  display: block;
  color: var(--text-800);
  font-size: 13px;
  margin-bottom: 6px;
}
.roundtrip-hint ol {
  margin: 0 0 8px;
  padding-left: 20px;
}
.roundtrip-hint li {
  margin-bottom: 3px;
}
.roundtrip-hint p {
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  color: var(--text-500);
}
.roundtrip-hint code {
  background: var(--bg-200, #eee);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: var(--font-mono);
}
.roundtrip-hint b {
  color: var(--text-800);
}

/* ============================================================
   ===== 页脚备案信息（2026-10-06）=====
   网站备案要求：页脚必须展示备案号，且能点进对应的备案系统查询。
   这里在 .site-footer 内加两行：备案号 + 版权。
   ⚠️ 颜色全部走 CSS 变量 —— 站内支持暗色主题（[data-theme="dark"]），
   写死 #8c8c8c 会在暗色模式下变成"浅灰字压深灰底"，几乎看不见。
   ============================================================ */
.site-footer {
  padding: 22px 15px 20px;
  line-height: 2;
  letter-spacing: 0.3px;
}
.site-footer-slogan {
  font-size: 13px;
  /* 用 text-600 而不是 text-500：暗色主题下 --text-500 是 #888 配 #161614 背景，
     对比度只有 4.0:1，备案信息属于必须看清的内容，不能发灰。 */
  color: var(--text-600);
}
/* 公安备案图标：外链图片加载不出来时留个 alt 文字，不至于出现破图 */
.site-footer .beian-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 4px;
  display: inline-block;
}

.footer-beian-wrap {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-600);
}
.footer-beian-wrap a {
  color: var(--text-600);
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease;
}
.footer-beian-wrap a:hover {
  color: var(--primary, #c96442);
}
/* 悬停时下方细线展开（纯装饰，不影响布局） */
.footer-beian-wrap a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
  opacity: 0.5;
}
.footer-beian-wrap a:hover::after {
  width: 100%;
}
.footer-beian-wrap .beian-divider {
  color: var(--text-500);
  /* 分隔符是纯装饰，可以弱一点 */
  margin: 0 6px;
  opacity: 0.5;
  font-weight: 300;
}
.site-footer .copyright-text {
  font-size: 12px;
  color: var(--text-600);
  opacity: 0.9;
  letter-spacing: 0.5px;
}
.site-footer .copyright-text a {
  color: var(--text-600);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease;
}
.site-footer .copyright-text a:hover {
  color: var(--primary, #c96442);
}

@media (max-width: 640px) {
  .site-footer {
    font-size: 12px;
    line-height: 2.2;
  }
  .site-footer .beian-divider {
    display: none;
  }
  .site-footer .footer-beian-wrap a {
    display: block;
    margin: 2px 0;
  }
  .site-footer .copyright-text {
    font-size: 11px;
    margin-top: 4px;
    display: block;
  }
}

/* ============================================================
   ===== 备案信息在移动端的避让（2026-10-06）=====
   🔴 问题：窄屏（≤600px）下有 .bottom-nav 固定底栏（高约 64px），
      而页脚 #siteFooter 是 .app-layout 的**兄弟节点**，
      不在 .app-layout 的 padding-bottom:64px 覆盖范围内
      → 页脚被底栏压住，"皖ICP备"那行被切掉一半。
   修法：给页脚在窄屏下额外垫出底栏高度。
   ============================================================ */
@media (max-width: 600px) {
  .site-footer {
    /* 底栏 64px + 一点余量，让最后一行完全露出来 */
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  /* 备案号在窄屏容易挤，两行显示更稳 */
  .site-footer .footer-beian-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .site-footer .beian-divider {
    display: none;
  }
}

/* ============================================================
   ===== 认证页移动端适配（2026-10-06）=====
   登录页从「左右分栏 + 品牌介绍」改成「居中单卡片」后，
   窄屏下需要额外处理：
   ① 极矮视口（横屏手机 / 小窗口）：表单比可视区高时必须能滚动，
      否则「确认修改」这类底部按钮点不到。
   ② 底部导航（.bottom-nav 60px）会压住卡片底部。
   ============================================================ */

/* 极矮视口：给认证页一个可滚动的最小高度，保证底部按钮可达 */
@media (max-height: 560px) {
  .auth-centered {
    /* align-items 换成 flex-start 后靠这个保证内容能完整滚出来 */
    min-height: auto;
    padding: 20px 16px;
  }
  .auth-centered-inner {
    margin: 0;
  }
}

/* 窄屏 */
@media (max-width: 600px) {
  .auth-centered {
    padding: 16px 14px;
  }
  .auth-card {
    padding: 24px 18px;
  }
  .auth-title {
    font-size: 22px;
  }
  /* 移动端不要再有 40px 的大内边距，浪费首屏 */
  .auth-subtitle {
    font-size: 13px;
    margin-bottom: 20px;
  }
}

/* ============================================================
   解锁码弹窗（2026-10-06）
   与 WordPress 插件的「看广告解锁」同一套交互：
   弹窗里给 4 位码 + 复制 + 重新生成。
   ============================================================ */
.kg-code-dialog {
  max-width: 380px;
  text-align: center;
}

.kg-code-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-800, #2b2b2b);
}
[data-theme="dark"] .kg-code-title { color: var(--text-100); }

.kg-code-desc {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-500, #8a8a8a);
}

/* 码本身：大字 + 等宽字体 + 虚线框，视觉上就是"可复制的东西" */
.kg-code-value {
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 10px;
  /* letter-spacing 会让最后一个字右边多出间距，用 text-indent 抵消回正 */
  text-indent: 10px;
  color: var(--primary);
  background: var(--bg-100, #f7f6f3);
  border: 1px dashed var(--border-300, #ddd);
  border-radius: 12px;
  padding: 18px 12px;
  margin-bottom: 12px;
  user-select: all;
}

.kg-code-status {
  font-size: 12px;
  color: var(--text-500, #8a8a8a);
  margin-bottom: 18px;
  min-height: 17px;
}
.kg-code-status.is-error { color: #c0392b; }

.kg-code-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.kg-code-btn {
  flex: 1;
  height: 40px;
  border: 1px solid var(--border-200, #e3e0d9);
  background: transparent;
  color: var(--text-700, #555);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.kg-code-btn:hover:not(:disabled) { background: var(--bg-100, #f5f4f1); }
.kg-code-btn:disabled { opacity: .55; cursor: not-allowed; }

.kg-code-btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.kg-code-btn-primary:hover:not(:disabled) {
  background: var(--primary-dark, var(--primary));
  color: #fff;
}
/* 复制成功的反馈。只改背景色，不做位移/缩放动画 ——
   按钮加transform 会和主题的 hover 动效打架，看起来像在抖。 */
.kg-code-btn-primary.is-copied {
  background: #3b6d11;
  border-color: #3b6d11;
}

.kg-code-note {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-400, #a5a29a);
  margin: 0 0 14px;
  text-align: left;
}

.kg-code-qr {
  padding-top: 14px;
  border-top: 1px solid var(--border-100, #eeece6);
}
.kg-code-qr-tip {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-500, #8a8a8a);
}

[data-theme="dark"] .kg-code-value {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}
[data-theme="dark"] .kg-code-btn {
  border-color: rgba(255,255,255,.16);
  color: var(--text-300);
}
[data-theme="dark"] .kg-code-btn:hover:not(:disabled) {
  background: rgba(255,255,255,.06);
}

/* ============================================================
   排序 VIP 标识（2026-10-06）
   ============================================================
   规则：默认排序「报名截止时间由近及远」人人可用；
        换成招录人数/竞争比/发布时间 → VIP 功能。
        所以非 VIP 用户看到的选项要"看得出能用但要开会员"，
        而不是直接 disable —— 隐藏功能等于没有变现入口。
   ============================================================ */
.filter-vip-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 500;
  color: #8a6d1f;
  background: #fbf0dc;
  vertical-align: 1px;
}
[data-theme="dark"] .filter-vip-tag {
  color: #d9ab5c;
  background: rgba(217, 171, 92, .16);
}

/* VIP 小圆点（不用 emoji，项目规范禁止） */
.filter-vip-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: #c9a227;
  vertical-align: 2px;
}
[data-theme="dark"] .filter-vip-dot { background: #d9ab5c; }

/* 非 VIP 时把非默认选项标灰 —— 不是禁用，只是暗示要会员 */
.mobile-filter-option.is-vip {
  color: var(--text-400);
}
.mobile-filter-option.is-vip .filter-vip-dot { opacity: 1; }
.mobile-filter-option.is-vip.active {
  color: var(--primary);
}

/* 面板底部的说明 */
.filter-vip-hint {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: #fbf0dc;
  color: #8a6d1f;
  font-size: 11.5px;
  line-height: 1.7;
}
[data-theme="dark"] .filter-vip-hint {
  background: rgba(217, 171, 92, .12);
  color: #d9ab5c;
}

/* ============================================================
   报名截止日期显示（2026-10-06）
   ============================================================
   表头改成「报名截止」后，单元格跟着调整：
   截止日是主信息（加粗、深色、放大），起始日是辅助（灰色小字）。
   两行显示，一眼能扫到"什么时候截止"。
   ⚠️ 只有截止日时（signup_start 大量为空）就只显示截止那一行，
      不显示"无 ~ "这种占位。
   ============================================================ */
.date-cell {
  white-space: nowrap;
  line-height: 1.35;
  text-align: left;
}

/* 起始日：辅助信息，灰且小 */
.date-start {
  display: block;
  font-size: 11px;
  color: var(--text-600);
}

/* 截止日：主信息，加粗 + 深色 */
.date-end {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-800, #2b2b2b);
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* 无日期 */
.date-none {
  font-size: 12px;
  color: var(--text-600);
}

[data-theme="dark"] .date-start { color: var(--text-500, #8a8a8a); }
[data-theme="dark"] .date-end{ color: var(--text-900, #f0f0f0); }

/* ---- 卡片视图（移动端）：同样突出截止 ---- */
.job-card-date {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.job-card-date .date-start { display: inline; }
.job-card-date .date-end { display: inline; }

/* ============================================================
   解锁码弹窗 · 二维码区 + 冷却提示 + 规则说明（2026-10-06）
   ============================================================
   后台可传两个码：小程序码（主路径）+ 公众号二维码（备用）。
   公众号没配时整块display:none，不占地方。
   ============================================================ */
.kg-code-qr-area {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-100, #eeece6);
}

.kg-qr-item {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.kg-qr-label {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-500, #8a8a8a);
}

.kg-qr-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  margin: 0 auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border-200, #e3e0d9);
  border-radius: 10px;
  overflow: hidden;
}
.kg-qr-frame img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.kg-qr-loading,
.kg-qr-empty {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-400, #a5a29a);
  text-align: center;
}
.kg-qr-empty span {
  font-size: 10px;
  color: var(--text-400, #a5a29a);
}

.kg-qr-hint {
  margin: 7px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-400, #a5a29a);
}

[data-theme="dark"] .kg-qr-frame {
  background: #fff;/* 二维码本身是深色图，底色必须保持白底才能扫 */
  border-color: rgba(255,255,255,.14);
}

/* ---- 冷却提示 ---- */
.kg-cooldown-tip {
  margin: -8px 0 14px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fbf0dc;
  color: #8a6d1f;
  font-size: 11.5px;
  line-height: 1.7;
  text-align: left;
}
[data-theme="dark"] .kg-cooldown-tip {
  background: rgba(217,171,92,.12);
  color: #d9ab5c;
}

/* ---- 规则说明（VIP 已开通也能续费，这条必须显眼）---- */
.kg-code-rule {
  margin: 0 0 4px;
  padding: 11px 13px;
  border-radius: 8px;
  background: rgba(0,0,0,.025);
  text-align: left;
}
.kg-code-rule b {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  color: var(--text-600, #666);
}
.kg-code-rule ul {
  margin: 0;
  padding-left: 16px;
  font-size: 11px;
  line-height: 1.85;
  color: var(--text-500, #8a8a8a);
}
.kg-code-rule li b {
  display: inline;
  color: var(--primary);
}
[data-theme="dark"] .kg-code-rule {
  background: rgba(255,255,255,.04);
}

/* ============================================================
   桌面端工具栏防换行兜底（2026-10-06）
   ============================================================
   🔴 问题：管理员登录后工具栏右侧会多出「管理后台」按钮 + 用户名菜单
      （还可能带 VIP 徽章），元素一多就换行，工具栏变成两行，
      视觉上像"按钮堆叠在一起"。

   修法分三层：
     ① 断点从 1024 降到 900（笔记本不再命中换行规则）
     ② 搜索框允许收缩（原来是 flex-shrink:0 永不缩）
     ③ 这里再加一层：桌面端工具栏整体禁止换行 + 右侧元素不许被压扁

   ⚠️ 只在 >900px 生效 —— 移动端（≤900）本来就会切到抽屉布局，
      那里换行是正常行为，别一起禁掉。
   ============================================================ */
@media (min-width: 901px) {
  .app-toolbar {
    flex-wrap: nowrap;
  }
  .app-toolbar .toolbar-right {
    /* 不换行，且元素按内容宽度排布 */
    flex-wrap: nowrap;
    /* 关键：允许内部元素收缩，而不是把它们挤到下一行 */
    min-width: 0;
  }
  /* 用户名菜单不允许被压扁（里面的头像和文字要完整） */
  .app-toolbar .toolbar-user-menu,
  .app-toolbar .toolbar-user-trigger {
    flex: 0 0 auto;
  }
  /* 「管理后台」按钮同样不许压扁，但允许收进图标态（见 901~1200 媒体查询） */
  .app-toolbar .toolbar-right > a.btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ============================================================
   🔴 工具栏登录区挂载点（2026-10-06）
   ============================================================
   病根：`#toolbarAuthArea` 这个 div 在 index.html 里是个**没有任何样式的
   挂载点**，内容由 common.js 注入。管理员登录后它里面有两个元素：
     <a>管理后台</a>  +  <div class="toolbar-user-menu">
   而 `.toolbar-user-menu` 只有 `position: relative`（block 级），
   挂载点自己也是 block → **两个元素各占一行，纵向堆叠**。
   用户反馈的"按钮排列堆叠"就是这个。

   修法：挂载点改成 flex 横向排列 + 不换行 + 不被压缩。
   ═══════════════════════════════════════════════════════ */
#toolbarAuthArea {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;        /* 不许被搜索框挤扁 */
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* 里面的登录按钮 / 管理后台按钮 / 用户菜单统一对齐 */
#toolbarAuthArea > * {
  flex: 0 0 auto;
}

/* ⚠️ 用户名菜单内部本来是 block（position:relative），
   在 flex 容器里会变成 flex item，正好横向排开 —— 这就是我们要的。
   但它自己内部还要保持相对定位（下拉菜单依赖），别改成 flex。*/
#toolbarAuthArea .toolbar-user-menu {
  position: relative;
  display: block;
}

/* 移动端（≤900）：工具栏会换行，挂载点也允许换到第二行，
   但内部仍保持横向（管理后台 + 用户名挨在一起） */
@media (max-width: 900px) {
  #toolbarAuthArea {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* ============================================================
   🔴 buildToolbarHTML 生成的工具栏右侧（2026-10-06）
   ============================================================
   病根：`buildToolbarHTML()`（common.js:521）的结构是
       <div class="toolbar-right">  ${buildAuthAreaHTML()}  </div>
   `buildAuthAreaHTML()` 直接返回两个**并列的 block 元素**：
       <a>管理后台</a>  +  <div class="toolbar-user-menu">
   `.toolbar-user-menu` 只有 position:relative（block 级），
   在没有 flex 的.toolbar-right 里 → **两个元素各占一行，纵向堆叠**。
   这影响所有走整栏生成的页面：admin / vip / profile / 登录页。

   修法：给 .toolbar-right 补上 flex 布局，让直接子元素横排。
   （首页那条路径走 #toolbarAuthArea，已有专门样式，不用管）

   ⚠️ 这里用 `> *` 而不是改 .toolbar-right 本身的 display ——
      免得影响首页（有 #toolbarAuthArea 挂载点，里面还有搜索框等）。
   ============================================================ */
.app-toolbar-managed .toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* 直接子元素（管理后台按钮 / 用户名菜单）横排、不被压扁 */
.app-toolbar-managed .toolbar-right > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 用户名菜单本身保持 block（position:relative 供下拉菜单定位），
   但作为 flex item它会自然参与横向排列 */
.app-toolbar-managed .toolbar-user-menu {
  position: relative;
  display: block;
}
/* ============================================================
   解锁码弹窗 · 简化版（2026-10-06 重做）
   ============================================================
   🔴 为什么要重做：原来把所有内容平铺，实测弹窗高 517px+，
      **在 1080p 屏幕上底部被截断 —— 标题和 4 位码都看不见**
      （用户反馈"好复杂""好挤"，就是这个）。
      现在结构：
        核心区（默认可见）：标题 / 码 / 两个按钮 / 一行指引
        折叠区（点「查看小程序码与规则」才出现）：规则 + 二维码
   ============================================================ */

/* 弹窗高度上限 + 内部滚动。
 * 🔴 关键：没有 max-height，内容一多就撑出屏幕且**底部滚不到**
 *    （overflow 在 flex 居中容器里会失效）。
 *    用 max-height: calc(100vh - 40px) 留出边距，再让内部可滚。 */
.kg-code-dialog {
  max-width: 380px;
  text-align: center;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 滚动条在 Windows 上默认很宽，会遮内容 */
  scrollbar-width: thin;
}
.kg-code-dialog::-webkit-scrollbar { width: 5px; }
.kg-code-dialog::-webkit-scrollbar-thumb {
  background: var(--border-300, #ddd);
  border-radius: 3px;
}

/* 一行指引（替代原来那一大段描述文字） */
.kg-code-hint {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-500, #8a8a8a);
}

/* ---- 折叠开关 ---- */
.kg-more-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin: 14px 0 0;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--border-100, #eeece6);
  background: transparent;
  font-size: 12px;
  color: var(--text-400, #a5a29a);
  cursor: pointer;
  transition: color .15s;
}
.kg-more-toggle:hover { color: var(--primary); }
.kg-more-toggle svg { transition: transform .2s ease; }
.kg-more-toggle.is-open svg { transform: rotate(180deg); }
.kg-more-toggle.is-open { color: var(--text-600, #666); }

/* 折叠区 */
.kg-more { padding-top: 4px; }

/* ---- 矮屏兜底（横屏手机等）：核心区进一步压缩 ---- */
@media (max-height: 600px) {
  .kg-code-dialog { padding: 20px 22px 16px; }
  .kg-code-value {
    font-size: 34px;
    padding: 12px 10px;
    margin-bottom: 10px;
  }
  .kg-code-note { display: none; }   /* 说明性文字矮屏先让位给码 */
}/* ============================================================
   地区三级联动筛选 + 每页条数（2026-10-06）
   ============================================================
   层级：省（常驻）→ 市（点省展开）→ 区县（点市展开）。
   每层带条数，已选的有徽标。折叠状态记在 JS 的 Set 里，
   重新渲染面板时保持展开。
   ============================================================ */

.region-tree {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-200, #e3e0d9);
  border-radius: 8px;
  background: var(--surface);
  scrollbar-width: thin;
}
.region-tree::-webkit-scrollbar { width: 5px; }
.region-tree::-webkit-scrollbar-thumb {
  background: var(--border-300, #ddd);
  border-radius: 3px;
}

.rf-loading,
.rf-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-400, #a5a29a);
}
.rf-empty span { font-size: 11px; opacity: .8; }

/* 每一项 */
.rf-item { border-bottom: 1px solid var(--border-100, #eeece6); }
.rf-item:last-child { border-bottom: 0; }

.rf-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 2px;
  min-height: 38px;
}

.rf-toggle {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--text-400, #a5a29a);
  cursor: pointer;
  border-radius: 4px;
  transition: background-color .15s;
}
.rf-toggle:hover { background: var(--bg-100, #f5f4f1); color: var(--primary); }
.rf-toggle:disabled { cursor: default; }
.rf-toggle:disabled:hover { background: transparent; color: var(--text-400); }
/* 展开时箭头翻转 */
.rf-item.is-open > .rf-row > .rf-toggle svg { transform: rotate(180deg); }
.rf-toggle svg { transition: transform .2s ease; }

.rf-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-700, #555);
  padding: 6px 0;
}
.rf-label input { flex: 0 0 auto; accent-color: var(--primary); }
.rf-label > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rf-item.is-checked > .rf-row > .rf-label,
.rf-item.is-checked > .rf-row > .rf-label > span { color: var(--primary); font-weight: 600; }

/* 条数（弱化，不抢视线） */
.rf-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-style: normal;
  color: var(--text-400, #a5a29a);
  font-family: var(--font-mono, monospace);
}

/* 已选数量徽标 */
.rf-badge {
  flex: 0 0 auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-style: normal;
}

/* 子层缩进 */
.rf-children {
  border-top: 1px dashed var(--border-200, #e3e0d9);
  background: var(--bg-50, rgba(0,0,0,.012));
}
.rf-city > .rf-row { padding-left: 14px; }
.rf-city .rf-label { font-size: 12.5px; }

/* 区县级：横排小标签，比层层缩进省空间 */
.rf-districts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 10px 10px 38px;
  border-top: 1px dashed var(--border-200, #e3e0d9);
}
.rf-district {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--border-200, #e3e0d9);
  border-radius: 12px;
  font-size: 11.5px;
  color: var(--text-600, #666);
  cursor: pointer;
  background: var(--surface);
  transition: border-color .15s, color .15s;
}
.rf-district:hover { border-color: var(--primary); color: var(--primary); }
.rf-district input { accent-color: var(--primary); margin: 0; }
.rf-district:has(input:checked) {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.rf-district .rf-count { font-size: 10px; }

/* ===== 每页条数 ===== */
.mobile-filter-options [data-type="limit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
}

/* ===== 暗色 ===== */
[data-theme="dark"] .region-tree { background: var(--surface); }
[data-theme="dark"] .rf-children { background: rgba(255,255,255,.02); }
[data-theme="dark"] .rf-district { background: transparent; }

/* ==========================================================================
   🔴🔴 全站响应式统一覆写层（2026-10-06）
   ==========================================================================

   为什么加这一层，而不是把前面 39 个 @media 逐个改？

   原文件 9470 行里有 39 个媒体查询，断点散落在
   380 / 480 / 560 / 600 / 640 / 720 / 767 / 900 / 1023 / 1200 px，
   而且**分散在文件各处、后定义覆盖先定义**，导致：

     ·.app-sidebar 的 position: fixed 被后文的 position: relative 覆盖，
       抽屉靠一条 才勉强能用（脆到极点）
     · .app-content 的 padding 有 6 处定义，靠 打架才得出结果
     · .toolbar-left 锁死 min-width:160 + flex-shrink:0，
       901~1200px 区间 flex-shrink:0 的项加起来可能超宽

   逐个改这些等于重写 9000 行，风险远高于收益。
   本层的做法：**在文件末尾重新声明一遍关键规则**，用更高特异性
   （加 `.app-body` 前缀）或相同特异性+后置，把旧结果整体盖掉。
   旧规则保留但不再起作用，将来要彻底清理时按本层反查即可。

   ── 断点体系（4 档宽度 + 2 个条件查询）──
     基础(无查询)  桌面：侧栏常驻、工具栏单行、表格完整
     ≤1200px       桌面窄屏：工具栏紧凑化（笔记本 1366/1440 会命中）
     ≤900px主断点  侧栏转抽屉、滚动模型切换、表格横向滚动
     ≤600px       卡片视图 + 底部导航（**与 index.js 的 innerWidth<=600
                   严格对齐**，改这里必须同步改那个数字）
     ≤380px       极窄档：只做字号与留白微调，不动结构
     pointer:coarse 触摸热区放大
     max-height:640px 矮窗 / 横屏

   ⚠️ 改之前先看 js/colwidth.js —— 表格列宽存在 localStorage，
      桌面拖宽后换到手机会把表撑到几千像素，本层已加 clamp。
   ========================================================================== */

/* ===== 统一尺寸变量（全站唯一真源，别再各自写死 px）===== */
:root {
  --nav-h: 60px;               /* 底部导航高度（不含安全区） */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --layout-max: 1680px;        /* 超宽屏不再无限拉伸 */
  --content-max: 1440px;       /* 内容区上限，超出居中 */
}

/* ===== 修复 1：body / 主链的高度与滚动模型 =====
   🔴 原 `.app-body { height:100vh; overflow:hidden }` 有两个问题：
      ① 100vh 在移动端大于可视高度（地址栏收起），配合 hidden 会
         让内容底部被切且滚不到
      ② 只有 ≤900px 才改成 height:auto —— 901~1200px 的平板/
         小笔记本仍是 100vh + hidden，横屏时必出问题
   现在：桌面用 100dvh 并保留 vh 兜底；所有断点都交还滚动给文档。 */
/* ==========================================================================
   桌面端滚动模型（2026-10-07 重做）
   ==========================================================================

   🔴🔴 **之前这里把整页锁成一屏**：
   .app-body { height:100dvh; overflow:hidden }
   .app-content { overflow-y:auto }

   后果：用户反馈「岗位数据能下滚，但滚不到整个页面最底部」——
   因为**不存在"页面底部"**，整页被锁在一屏里。
   页脚无论放body 上还是搬进内容区都在这一屏内，
   看着就像"备案号不见了"。
   我之前修了两轮（搬进容器、让它沉底）都是在这套模型里打补丁，
   治不了本 —— 用户第三次反馈才对。

   现在：**只放开高度，保留 flex 布局**。
   侧栏仍靠 flex 占位（不用改成 fixed + 手动让位，折叠宽度那套就不用动），
   但页面高度不锁死 → 文档能自然滚到底。
   ------------------------------------------------------------------------ */
.app-body {
  /* 🔴 用 min-height 而不是 height：内容不足一屏时补白，
     超过一屏时**不裁剪**，文档就能滚到底。
     原来写 height:100dvh + overflow:hidden 是"锁死一屏"。 */
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}
.app-main {
  min-width: 0;
  /* 🔴 放行：之前 hidden 把超出的内容裁掉了，整页也不可滚。 */
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.app-content {
  /* 🔴 关键改动：从"我自己滚"改成"让文档滚"。
     flex:1 保留 —— 它让内容区至少填满一屏（内容少时页脚也不会浮在半空）。
     滚动交给文档后，页面底部（页脚、底部导航留白）都能真正滚到。 */
  flex: 1 0 auto;
  min-width: 0;
  overflow: visible;
  padding-bottom: 12px;
}


/* 超宽屏：内容居中 + 限宽，避免表格列被拉到荒谬宽度 */
.app-content > .page-container,
.app-content > .admin-container {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ===== 修复 2：弹窗在窄屏溢出 =====
   🔴 `.kg-code-dialog{max-width:380px}` 特异性与 `.vip-unlock-dialog
   {max-width:90vw}` 相同但定义在后 → 380px 赢。
   375px 屏上弹窗比视口宽 5px，页面出现横向滚动条。 */
.vip-unlock-dialog,
.mp-qr-dialog,
.kg-code-dialog {
  width: 100%;
  max-width: min(380px, calc(100vw - 24px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* 弹窗内容里的长文本（码、链接）不撑破 */
.kg-code-dialog code,
.kg-code-display,
.vip-unlock-dialog code {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ===== 修复 3：表格长文本溢出 =====
   th 原本只有 nowrap 没有 overflow → 列被 JS 拖窄时文字会溢出
   压到相邻列上。`.th-content` 是 inline-flex，不受 ellipsis 作用。 */
.data-table thead th {
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-table .th-content {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 表格容器永远自己横向滚，绝不把页面撑宽 */
.table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* 卡片视图在桌面端默认收起。
   🔴 为什么放在基础层而不是只在 ≤600 里写"显示"：
   之前只写了「≤600 显示卡片」，导致从手机宽度拉宽回桌面时，
   表格回来了、卡片还留着 → 一个视图都没有（白屏）。
   显隐必须**双向**声明。JS 的 setViewMode 只是初始选择，不驱动显示。 */
.card-view { display: none; }

/* ==========================================================================
   档位 1：≤1200px（桌面窄屏）
   1366/1440 笔记本扣掉 240px 侧栏后内容区只有 1126~1200px，正好落这里
   ========================================================================== */
@media (max-width: 1200px) {
  /* 工具栏左侧不再锁死。🔴 原来是 width:200px + min-width:160px +
     flex-shrink:0 三重锁定，和右侧那些 flex:0 0 auto 的项相加会超宽。 */
  .app-toolbar .toolbar-left {
    width: auto;
    max-width: 200px;
    min-width: 0;
    flex-shrink: 1;
  }
  /* 搜索框允许收缩（旧规则 min-width:220 + shrink:0 在这里太硬） */
  .app-toolbar .toolbar-right .search-box {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 260px;
  }
  /* 长用户名截断，别把按钮挤出屏幕 */
  .toolbar-user-name,
  .sidebar-user-sub {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 管理后台按钮：窄屏只留图标（文字用font-size:0 隐藏但保留 aria） */
  .app-toolbar-managed .toolbar-right > a.btn span {
    display: none;
  }
}

/* ==========================================================================
   档位 2：≤900px —— 主断点，侧栏转抽屉
   合并了原来分散在 3302 / 6344 / 7479 / 7544 / 7603 / 8117 / 8326 / 9195
   这 8 处的规则
   ========================================================================== */
@media (max-width: 900px) {
  /* --- 滚动模型交还文档，body 不再自己滚动 --- */
  .app-body {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }
  .app-layout {
    display: block;             /* flex 会让 fixed 侧栏占位 */
    max-width: 100%;
  }
  .app-main {
    overflow: visible;
    display: block;
  }
  .app-content {
    overflow: visible;
    padding: 12px;
    padding-bottom: calc(var(--nav-h) + 16px + var(--safe-b));
  }

  /* --- 侧栏：真正的抽屉 ---
     🔴 原来这里有 fixed 被后文 relative 覆盖的问题（靠 兜底）。
     现在用 .app-body 前缀提高特异性，不需要。 */
  .app-body .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: min(260px, 82vw);
    height: 100dvh;
    z-index: 60;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .25s ease;
    will-change: transform;
  }
  /* 抽屉打开时 */
  .app-body.sidebar-open .app-sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, .28);
  }

  /* --- 工具栏允许换行，但不再固定高度 --- */
  .app-toolbar {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px;
    row-gap: 8px;
  }
  .app-toolbar .toolbar-left,
  .app-toolbar .toolbar-right {
    min-width: 0;
    flex-shrink: 1;
  }
  .app-toolbar .toolbar-right {
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* 搜索框在这一档可以占满整行 */
  .app-toolbar .toolbar-right .search-box {
    flex: 1 1 180px;
    min-width: 140px;
    max-width: 100%;
  }
  /* ⚠️ 按钮不许换行导致高度跳动 */
  .app-toolbar .btn,
  .app-toolbar .view-switch-btn {
    white-space: nowrap;
  }

  /* --- 表格：横向滚动 + 首列吸附 --- */
  .table-wrapper .data-table {
    min-width: min(720px, 100%);
  }
  .table-wrapper {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* --- 认证页/内容卡片单列 --- */
  .profile-layout { flex-direction: column; }
  .auth-centered-inner { margin: 24px auto; }
}

/* ==========================================================================
   档位 3：≤600px —— 卡片视图 + 底部导航
   ⚠️ 这个 600 与 index.js:94 的 `window.innerWidth <= 600` 是同一个数，
      两边必须同时改，否则会出现"CSS 切了卡片但 JS 还在按表格渲染"。
   ========================================================================== */
@media (max-width: 600px) {
  /* --- 修复 5：工具栏从三排压到两排 ---
     🔴 实测 390px 下工具栏高 139px，布局是：
          第1排  汉堡按钮(34px)          ← 只占左边一小块，右边全空
          第2排  筛选 + 登录/注册
          第3排  搜索框整行
        浪费掉整整一排。原因：.app-toolbar 是 wrap + row，
        .toolbar-left(汉堡) 和 .toolbar-right(筛选+搜索) 是兄弟，
        右边整体放不下就整体换行，把汉堡单独留在一排。
        汉堡只有 34px，和右边第一排加起来 34+8+180 = 222px < 390px
        完全放得下 —— 是 flex 的 min-content 判定把它推下去的。
        改法：**外层不换行**（汉堡固定在第一排左边），
        只让右半部分自己 wrap。这样恒定两排，省一排 ~44px。 */
  .app-toolbar {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .app-toolbar .toolbar-left {
    flex: 0 0 auto;
    flex-shrink: 0;
  }
  .app-toolbar .toolbar-right {
    flex: 1 1 0;      /* basis 0：让它按剩余空间算，而不是按内容宽度 */
    min-width: 0;
    flex-wrap: wrap;
  }
  /* 汉堡和筛选按钮顶部对齐，别一个高一个矮 */
  .app-toolbar .toolbar-left,
  .app-toolbar .mobile-filter-btn,
  .app-toolbar .toolbar-select {
    height: 36px;
  }

  /* --- 内容区留白（底部要给导航腾地方）--- */
  .app-content {
    padding: 10px;
    padding-bottom: calc(var(--nav-h) + 16px + var(--safe-b));
  }

  /* --- 底部导航：高度含安全区，图标文字才不会被压扁 ---
     🔴 原写法 height:60px + padding-bottom:safe-area，
        但 box-sizing:border-box 让 60px 已含安全区 →
        iPhone 安全区 34px 时内容只剩 26px，图标文字被压扁。 */
  .bottom-nav {
    height: calc(var(--nav-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
  }

  /* --- 表格隐藏、切卡片 ---
     ⚠️ 原来这里我写了一坨互相抵消的规则（先隐藏又 display:block，
        还套了个非法的嵌套 @media）—— 已清理成单一来源。
     卡片显隐**完全由 CSS 驱动**，两个方向都覆盖：
     ·≤600px        卡片显示、表格隐藏
     · >600px        表格显示、卡片隐藏（从手机拉宽回桌面时卡片要收起，
                      否则 JS 的 viewMode 没同步会出现"两个视图都没了"） */
  .table-wrapper { display: none; }
  .card-view { display: grid; }

  /* --- 修复 4：移动端「每页条数」下拉被旧规则藏起来了 ---
     🔴 这个坑很隐蔽：6590 那段"修复"只改了 order/flex，想让它和筛选按钮
        并排，但**没有清掉 3394 行遗留的 `display:none`**。
        `display` 和 `flex` 是两条独立属性，改 flex 覆盖不了 display:none，
        结果 DOM 里元素在、布局也给它留了位（实测 right[1] h=0 display=none），
        但**屏幕上就是看不见** —— 用户反馈"手机上不能调每页条数"。
        ⚠️ 这类"元素在但看不见"的症状，先去查 computed display，别急着改 flex。 */
  .toolbar-right .toolbar-select {
    display: flex;
    align-items: center;
  }

  /* --- 筛选抽屉 / 弹层不超出视口 --- */
  .filter-popup {
    max-width: min(280px, calc(100vw - 24px));
    min-width: 0;
  }
  .mobile-filter-drawer {
    width: min(92vw, 420px);
    max-width: 100vw;
  }
  /* 表单控件不再撑破窄屏 */
  .form-input,
  .form-select,
  .form-textarea {
    max-width: 100%;
    min-width: 0;
  }

  /* --- 预览切换器（开发用）不能压住底部导航 --- */
  .preview-switcher-btn {
    bottom: calc(var(--nav-h) + var(--safe-b) + 12px);
    max-width: calc(100vw - 32px);
  }
  .preview-switcher-panel {
    bottom: calc(var(--nav-h) + var(--safe-b) + 56px);
    width: 260px;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
  }

  /* --- 通用：横向溢出的最后一道闸 ---
     有些第三方/动态插入的元素仍可能带固定宽度，
     统一给容器加 box-sizing 保证 padding 不撑宽。 */
  .app-content > *,
  .page-container > * {
    max-width: 100%;
  }
}

/* ==========================================================================
   档位 4：≤380px —— 极窄屏，只调字号与留白，不动结构
   ========================================================================== */
@media (max-width: 380px) {
  .app-content { padding: 8px; }
  .app-toolbar { padding: 6px 8px; }
  .toolbar-user-name { max-width: 56px; }
  .page-btn { min-width: 32px; }
}

/* ==========================================================================
   条件查询 1：触摸设备 —— 点击热区不小于 40px
   （原来分散在 7358 和 8316 两处，合并到这里）
   ========================================================================== */
@media (pointer: coarse) {
  .page-btn,
  .btn-sm,
  .toolbar-btn,
  .bottom-nav-item {
    min-height: 40px;
  }
  /* 表头拖拽手柄放大，方便手指拖列宽 */
  .col-resize-handle {
    width: 14px;
    min-width: 14px;
  }
}

/* ==========================================================================
   条件查询 2：矮窗 / 横屏
   （原来 560 / 600 两个值互相嵌套且互相覆盖，合并成 640 一条）
   ========================================================================== */
@media (max-height: 640px) {
  /* 横屏手机上侧栏不需要太多纵向空间 */
  .app-sidebar { padding-top: 8px; padding-bottom: 8px; }
  /* 认证页垂直居中改为靠上，否则内容溢出且滚不到 */
  .auth-centered-inner { margin: 16px auto; }
  .kg-code-dialog {
    max-height: calc(100dvh - 24px);
  }
}

/* ==========================================================================
   无障碍 / 动效偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   暗色模式下的本层组件（放在最后，确保覆盖）
   ========================================================================== */
[data-theme="dark"] .vip-unlock-dialog,
[data-theme="dark"] .mp-qr-dialog,
[data-theme="dark"] .kg-code-dialog {
  background: var(--surface);
  color: var(--text-800);
}

/* ==========================================================================
   解锁弹窗：二维码直接显示（2026-10-06）
   用户要求「小程序和公众号这两个应该直接显示出来」——
   扫码是拿到 VIP 的**必经路径**，不是可选信息，藏起来等于堵住一条路。

   代价：弹窗变高了（原来折叠时 ~380px，现在 ~560px）。
   这个高度在 1080p 屏（可用高约 900px）放得下，
   且 `.kg-code-dialog` 已有 max-height + overflow-y 兜底。
   ========================================================================== */

/* 二维码区从"折叠区内"提到主区后，边框上留白要收紧一点 */
.kg-code-dialog .kg-code-qr-direct {
  margin-top: 12px;
  padding-top: 12px;
}

/* 二维码略缩到 116px：两个并排 + 标签 + 提示行，仍稳落在 420px 弹窗内 */
.kg-code-dialog .kg-qr-frame {
  width: 116px;
  height: 116px;
}

/* 加载完成的二维码给个轻高亮，方便一眼看到"这张能用" */
.kg-qr-frame.is-ready {
  border-color: var(--primary, #c96442);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, .08);
}

/* 占位（未配置）时明确区别于可扫的码 —— 别让用户扫一个空框 */
.kg-qr-frame:has(.kg-qr-empty) {
  border-style: dashed;
  border-color: var(--border-200, #e3e0d9);
  box-shadow: none;
}

.kg-code-dialog .kg-qr-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-700, #52514e);
  margin-bottom: 6px;
}
.kg-code-dialog .kg-qr-hint {
  font-size: 10.5px;
  margin-top: 6px;
}

/* 窄屏两个二维码放不下并排（116*2 + gap + padding ≈ 280px，
   320px 屏的弹窗内宽只有 320-24-2*22 ≈ 252px）→ 单列堆叠 */
@media (max-width: 400px) {
  .kg-code-dialog .kg-code-qr-area {
    gap: 14px;
  }
  .kg-code-dialog .kg-qr-frame {
    width: 132px;
    height: 132px;   /* 单列了反而可以给大一点，更好扫 */
  }
}

/* ============================================================
   ===== 折叠态悬停气泡（2026-10-07 重写）=====

   🔴 用户报障：侧边栏折叠后悬停不显示名称。

   ⚠️ 下面这三条是把**旧的 CSS 伪元素气泡彻底废掉**：
   旧写法是 .sidebar-item::after { content: attr(data-label) }，
   定位在 left: calc(100% + 10px) —— 伸到了 .sidebar-nav 的右边界之外，
   而 nav 有 overflow-y: auto，**越界部分一律被 clip**。
   CSS 层面无解：overflow-x: visible 在 overflow-y: auto 时会被规范
   强制算成auto，写了也白写。

   现在改成 JS 生成 .sidebar-tip 挂到 body（fixed 定位），
   body 不是滚动容器，任何祖先 overflow 都裁不到它。
   旧规则必须display:none，否则会和新气泡**同时出现两份**。
   ============================================================ */
.app-sidebar.collapsed .sidebar-item::after,
.app-sidebar.collapsed .theme-toggle::after {
  content: none;
  display: none;
}

/* 新气泡：JS 挂到 body 上，fixed 定位 */
.sidebar-tip {
  position: fixed;
  z-index: 9999;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--text-900, #2a2825);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;   /* 不能挡住点击，否则菜单项点不动 */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  /* 淡入用 opacity，不用 visibility 硬切（硬切会有闪） */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease;
  /* 上下居中由 JS 设transform，这里别覆盖 */
  will-change: transform;
}

/* 暗色主题下用浅底深字 */
html[data-theme="dark"] .sidebar-tip,
body.dark .sidebar-tip {
  background: var(--text-100, #f5f4ee);
  color: var(--text-900, #2a2825);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   ===== 解锁码弹窗：复刻 WP 插件结构（2026-10-07）=====

   用户要求「完全复刻 WordPress 那种弹窗，但颜色保持就业通主题色」。
   所以这里**只搬结构**，不搬 WP 的视觉：
     视觉全部走 var(--primary) / var(--bg-100) / var(--border-300)
     —— 换主题（暗色）时自动跟着变，不需要写第二套。

   结构对齐 WP 插件的 .unlock-code-box：
     标签 → 大码 → 状态 → 操作按钮 → 说明
   之前就业通**缺了标签行**，用户看到一串数字不知道那是什么。
   ============================================================ */

/* 码区容器：淡底 + 虚线框，把「码」和「二维码」在视觉上分成两块 */
.kg-code-box {
  background: var(--bg-100, #f7f6f3);
  border: 1px solid var(--border-200, #e3e0d9);
  border-radius: 12px;
  padding: 16px 14px 14px;
  margin-bottom: 14px;
}

/* 标签：「您的4位解锁码」，跟 WP 的 .unlock-code-label 同义 */
.kg-code-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-600, #6b6a66);
  margin-bottom: 8px;
  text-align: center;
}

/* 🔴 大码要盖住容器的底色和边框 —— 否则会变成"框里又有个框"。
   ⚠️ 白色是 --bg-50，本项目**没有** --bg-0（写错会静默失效）。 */
.kg-code-box .kg-code-value {
  background: var(--bg-50, #ffffff);
  margin-bottom: 10px;
}
html[data-theme="dark"] .kg-code-box .kg-code-value,
body.dark .kg-code-box .kg-code-value {
  background: var(--bg-200, #2a2825);
}

/* 状态和操作都居中，跟 WP 一致 */
.kg-code-box .kg-code-status {
  text-align: center;
}
.kg-code-box .kg-code-actions {
  justify-content: center;
}
.kg-code-box .kg-code-hint {
  text-align: center;
  margin: 10px 0 0;
}

/* 暗色主题下容器跟着变（跟随全局变量，这里只需保证边框不要太重） */
html[data-theme="dark"] .kg-code-box,
body.dark .kg-code-box {
  background: var(--bg-200, #2a2825);
  border-color: var(--border-700, #4a4741);
}

/* ---------- 后台「解锁码服务」卡片 ---------- */
/* 测试结果块复用 import-result。
   ⚠️ 项目配色是 --success-500 / --error-500，**没有** --danger / --success 这种简写。 */
#wpTestResult.is-success,
#wpTestResult.is-error {
  display: block;
}
#wpTestResult.is-success {
  border-color: var(--success-500, #788c5d);
}
#wpTestResult.is-error {
  border-color: var(--error-500, #d64545);
}

/* ============================================================
   视觉与排版统一层（2026-10-07 全站视觉优化）
   ⚠️ 项目红线：不要按行号删上面的旧 CSS（曾误删 1176 行，连带删掉
      侧栏悬停气泡、地区三级联动、全站响应式覆写层；CSS 不报错，
      功能静默消失）。本层只做「覆写 + 新增」，旧规则保留但被覆盖。
   ============================================================ */

/* ---------- 1. 补齐缺失的工具类 ---------- */
/* admin.html 里在用的 .align-center 一直没有定义 —— 按钮和旁边的文字
   因此对不齐（只有真浏览器才看得出，静态检查查不出来）。 */
.align-center { align-items: center; }

/* ---------- 2. 工具栏控件统一高度 ---------- */
/* 实测：select 32px / 搜索框 34px / 登录按钮 30px，三个控件在 52px 的
   工具栏里各自为政，视觉上明显参差。这里统一到 34px。 */
.app-body .app-toolbar .toolbar-select,
.app-body .app-toolbar .search-box,
.app-body .app-toolbar .search-box input,
.app-body .app-toolbar #toolbarAuthArea > *,
.app-body .app-toolbar .mobile-filter-btn {
  height: 34px;
  box-sizing: border-box;
}
.app-body .app-toolbar .toolbar-right { align-items: center; }
.app-body .app-toolbar .search-box { display: flex; align-items: center; }

/* ---------- 3. 管理后台：分区导航 ---------- */
/* 后台原本 8 张卡片一条竖线堆到底（实测 4138px），改成 5 个分区 + 粘性导航 */
.admin-tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 6px;
  margin: 16px 0 4px;
  padding: 8px;
  background: var(--bg-100, #faf9f5);
  border: 1px solid var(--border-200, #e3e0d4);
  border-radius: var(--radius-md, 12px);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-500, #6e6d68);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.admin-tab:hover { background: var(--bg-200, #f5f4ef); color: var(--text-800, #3d3929); }
.admin-tab.active {
  background: var(--surface, #ffffff);
  border-color: var(--border-300, #dad9d4);
  color: var(--brand-600, #b0562f);
  font-weight: 600;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.05));
}
.admin-tab:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 1px; }

.admin-section { display: block; }
.admin-section[hidden] { display: none; }

.admin-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 20px 2px 12px;
}
.admin-section-head-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-700, #46443b);
}
.admin-section-head-desc {
  font-size: 12px;
  color: var(--text-400, #9b988c);
}

/* ---------- 4. 管理后台：卡片与卡片头 ---------- */
/* 🔴 旧规则 .admin-card-header 是 column + align-items:center + text-align:center，
   把「标题+操作按钮」全挤到中间竖着排 —— 标题居中、按钮掉到下面居中，
   这是后台看起来最乱的一处。这里改成左标题 / 右操作的标准排布。 */
.app-body .admin-card-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  margin-bottom: 16px;
}
.admin-card-heading { min-width: 0; flex: 1 1 auto; }
.admin-card-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

/* 概览页的快捷入口按钮排布 */
.admin-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 没有 .admin-card-header 的卡片，标题和描述之间也要有统一节奏 */
.admin-card > .admin-card-title:first-child { margin-bottom: 6px; }
.admin-card > .admin-card-desc { line-height: 1.7; }

/* 页面级：标题与分区之间留白统一 */
.app-body .admin-page-title { margin-bottom: 4px; }

/* ---------- 5. 管理后台：统一的表单行 ---------- */
/* 之前 VIP 规则、解锁码、码池配置、快捷操作 4 处各自写内联 flex，
   标签宽度、间距、换行规则都不一样。统一成这一个组件。 */
.admin-field {
  padding: 14px 16px;
  border: 1px solid var(--border-200, #e3e0d4);
  border-radius: var(--radius-md, 12px);
  background: var(--bg-100, #faf9f5);
  margin-top: 12px;
}
.admin-field + .admin-field { margin-top: 10px; }
.admin-field.is-danger {
  border-color: var(--error-200, #f3c4bf);
  background: var(--error-50, #fcecea);
}

.admin-field-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-field-label {
  flex: 0 0 auto;
  min-width: 92px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-700, #46443b);
}
.admin-field-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.admin-field-control .form-input,
.admin-field-control .form-select { flex: 0 1 auto; }
/* 需要撑满一行的输入框（码池地址 / 私钥 / 地区 / 关键词） */
.admin-input-grow { flex: 1 1 240px; min-width: 0; }
.admin-field-control > span { font-size: 13px; color: var(--text-600, #535146); }

.admin-field-hint {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-500, #6e6d68);
}
.admin-field-hint + .admin-field-hint { margin-top: 8px; }
.admin-field-hint b { color: var(--text-700, #46443b); }
.admin-field-hint code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-200, #f5f4ef);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
}
.admin-field-hint.is-important {
  padding: 10px 12px;
  border-left: 3px solid var(--brand-400, #d6866a);
  background: var(--surface, #ffffff);
  border-radius: 6px;
}
.admin-field-hint.is-important b:first-child,
.admin-field-hint.is-important > b { color: var(--brand-700, #934828); }

/* 旧的 .purge-scope-hint 被当作状态徽标用（后台「解锁码服务」），
   这里补一个独立的行内徽标样式，避免继续借用提示块。 */
.admin-inline-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-200, #f5f4ef);
  font-size: 12.5px;
  color: var(--text-600, #535146);
}

/* ---------- 6. 结果块配色（修名字对不上的 bug）---------- */
/* 🔴 旧规则只写了 #wpTestResult（码池搬到统一门户前的旧 id），
   但 admin.js 实际给的是 #poolTestResult / #codeResult 加 is-success / is-error，
   结果连接测试和批量签发的结果块一直没有配色。 */
#importResult.is-success,
#poolTestResult.is-success,
#codeResult.is-success,
#purgeStaffPreview.is-success {
  background: var(--success-50, #f0f3ea);
  border: 1px solid var(--success-200, #d3dcc1);
  color: var(--success-700, #4f5d3a);
}
#importResult.is-error,
#poolTestResult.is-error,
#codeResult.is-error,
#purgeStaffPreview.is-error {
  background: var(--error-50, #fcecea);
  border: 1px solid var(--error-200, #f3c4bf);
  color: var(--error-700, #962c2c);
}

/* ---------- 7. VIP 页：状态卡 + 三步流程 ---------- */
.vip-status-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--border-200, #e3e0d4);
  border-radius: var(--radius-md, 12px);
  background: var(--surface, #ffffff);
}
.vip-status-card.is-vip {
  border-color: var(--vip-200, #ffe891);
  background: var(--vip-50, #fff9e6);
}
.vip-status-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-200, #f5f4ef);
  color: var(--text-500, #6e6d68);
}
.vip-status-card.is-vip .vip-status-icon {
  background: var(--vip-200, #ffe891);
  color: var(--vip-700, #b06e12);
}
.vip-status-body { min-width: 0; }
.vip-status-title { font-size: 14px; font-weight: 600; color: var(--text-800, #3d3929); }
.vip-status-desc { margin-top: 3px; font-size: 12.5px; line-height: 1.6; color: var(--text-500, #6e6d68); }
.vip-status-action { margin-left: auto; flex: 0 0 auto; }

.vip-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.vip-step {
  padding: 18px 16px 16px;
  border: 1px solid var(--border-200, #e3e0d4);
  border-radius: var(--radius-md, 12px);
  background: var(--surface, #ffffff);
}
.vip-step-num {
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-100, #f4e0d5);
  color: var(--brand-700, #934828);
  font-size: 13px;
  font-weight: 600;
}
.vip-step-title { margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-800, #3d3929); }
.vip-step-desc { font-size: 12.5px; line-height: 1.75; color: var(--text-500, #6e6d68); }
.vip-step-desc code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-200, #f5f4ef);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
}
.vip-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md, 12px);
  background: var(--bg-100, #faf9f5);
  border: 1px solid var(--border-200, #e3e0d4);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-500, #6e6d68);
}
.vip-note b { color: var(--text-700, #46443b); }

/* ---------- 8. 响应式 ---------- */
@media (max-width: 1200px) {
  .app-body .admin-page { max-width: 100%; }
}

@media (max-width: 900px) {
  .admin-tabs { margin: 12px 0 2px; padding: 6px; }
  .admin-tab { height: 30px; padding: 0 12px; font-size: 12.5px; }
  .app-body .admin-card-header { flex-wrap: wrap; }
  .admin-card-actions { width: 100%; justify-content: flex-start; }
  .admin-field-label { flex-basis: 100%; }
}

@media (max-width: 600px) {
  .admin-tabs { gap: 4px; }
  .admin-field { padding: 12px 12px; }
  .admin-field-row { gap: 8px; }
  .admin-field-label { min-width: 0; }
  .admin-field-control .form-input,
  .admin-field-control .form-select { flex: 1 1 100%; }
  .vip-steps { grid-template-columns: 1fr; gap: 10px; }
  .vip-status-card { flex-wrap: wrap; }
  .vip-status-action { margin-left: 0; width: 100%; }
}

@media (max-width: 380px) {
  .admin-tab { padding: 0 10px; }
}

/* ---------- 9. 暗色模式下这层的取色 ---------- */
html[data-theme="dark"] .admin-tabs,
body.dark .admin-tabs { background: var(--bg-200); border-color: var(--border-700); }
html[data-theme="dark"] .admin-tab:hover,
body.dark .admin-tab:hover { background: var(--bg-300); color: var(--text-100); }
html[data-theme="dark"] .admin-tab.active,
body.dark .admin-tab.active { background: var(--bg-300); border-color: var(--border-600); color: var(--brand-300); }
html[data-theme="dark"] .admin-field,
body.dark .admin-field { background: var(--bg-200); border-color: var(--border-700); }
html[data-theme="dark"] .admin-field-hint.is-important,
body.dark .admin-field-hint.is-important { background: var(--bg-300); }
html[data-theme="dark"] .admin-field-hint.is-important > b,
body.dark .admin-field-hint.is-important > b { color: var(--brand-300); }
html[data-theme="dark"] .vip-step,
body.dark .vip-step,
html[data-theme="dark"] .vip-status-card,
body.dark .vip-status-card,
html[data-theme="dark"] .vip-note,
body.dark .vip-note { background: var(--bg-200); border-color: var(--border-700); }
html[data-theme="dark"] .vip-status-card.is-vip,
body.dark .vip-status-card.is-vip { background: var(--vip-900); border-color: var(--vip-700); }

/* ---------- 8. 后台「解锁码服务」状态徽标的状态色 ---------- */
/* 🔴 admin.js 的 setBadge() 现在传 is-ok / is-bad，但原来只有
   .admin-inline-badge 的中性灰底 —— 连接正常和连接失败长得一模一样，
   管理员只能靠读文字分辨。补两种状态色（沿用站内 success/error 色阶）。 */
.admin-inline-badge.is-ok {
  background: var(--success-50, #f0f3ea);
  border: 1px solid var(--success-200, #d3dcc1);
  color: var(--success-700, #4f5d3a);
}
.admin-inline-badge.is-bad {
  background: var(--error-50, #fcecea);
  border: 1px solid var(--error-200, #f3c4bf);
  color: var(--error-700, #962c2c);
}
/* 徽标默认无边框，加了 is-ok/is-bad 才出现 1px —— 不补这条会闪一下宽度 */
.admin-inline-badge { border: 1px solid transparent; }

/* ==================================================================
   9. 管理后台视觉统一层（2026-10-07）
   ------------------------------------------------------------------
   🔴 背景：后台的样式是**四个时期各写一套**叠上来的 ——
     ① .admin-card/.admin-stat-value（1870 起，最早）
     ② .admin-card/.admin-stat-number（4664 起，第二次重写）
     ③ .admin-tabs/.admin-section/.admin-field-*(10125 起，分区导航那一轮)
     ④ .maint-*（7618 起，数据维护模块自带）
   四套各有各的圆角(10/12px)、间距(12/14/16/20px)、字号(12/12.5/13/13.5px)、
   颜色(text-800 / primary)，所以同一个后台里：
     · 概览页统计数字 28px 主色，维护页统计数字 22px 深色等宽字体
     · 解锁区配置项是「圆角块」，维护区配置项是「分隔线行」
     · 说明文字有 4 种字号行高
   —— 这就是"看起来很乱"的来源。

   🔴 本层只做一件事：把上面四套**拉到同一组视觉参数**。
      · 不改布局模式（块/行各自保留，硬统一会让维护区 5 行配置变得臃肿）
      · 不删任何旧规则（按项目红线：改 CSS 只在末尾追加覆写层）
      · 不碰 HTML 结构、不碰 JS
   ================================================================== */

/* ---- 9.1 卡片：内边距与圆角统一 ---- */
.app-body .admin-card {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--border-200, #e3e0d4);
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, .05));
}
/* 卡片之间不要出现"最后一张还带下边距"的悬空感 */
.app-body .admin-card:last-child { margin-bottom: 0; }

/* ---- 9.2 卡片头：标题左 / 操作右（四张卡必须一致）---- */
/* 有一张卡（二维码）原来没有 .admin-card-header，直接裸放 h3 ——
   已补上结构；这里再兜一层：裸标题也要有和其他卡一致的下方间距。 */
.app-body .admin-card > .admin-card-title:first-child { margin-bottom: 6px; }

/* ---- 9.3 统计数字：两套拉齐（保留主/次层级差，统一字体与颜色）---- */
.app-body .admin-stat-value,
.maint-stat-num {
  font-family: var(--font-display, var(--font-sans));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-800, #3d3929);
  margin-bottom: 4px;
}
.app-body .admin-stat-value { font-size: 28px; }   /* 概览 = 主指标 */
.maint-stat-num { font-size: 22px; }                /* 维护 = 次指标 */
.app-body .admin-stat-label,
.maint-stat-label {
  font-size: 12px;
  color: var(--text-500, #6e6d68);
}
/* 统计小卡的外框统一 */
.app-body .admin-stat-card,
.maint-stat {
  border-radius: 12px;
  border: 1px solid var(--border-200, #e3e0d4);
  background: var(--bg-100, #faf9f5);
}

/* ---- 9.4 说明文字：4 种字号行高统一成一种 ---- */
.admin-field-hint,
.qr-hint,
.maint-mail-tip,
.maint-row-label span {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-500, #6e6d68);
}
.qr-hint { margin-top: 10px; }
/* 连续多段提示之间要透气，但不能太散 */
.admin-field-hint + .admin-field-hint { margin-top: 8px; }

/* ---- 9.5 配置项：解锁区(块) / 维护区(行) 的间距节奏对齐 ---- */
.app-body .admin-field {
  padding: 14px 16px;
  border-radius: 12px;
}
.maint-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-100, #eeece4);
}
.maint-row:last-of-type { border-bottom: 0; }
/* 二维码两个上传块之间的间距 */
.qr-upload + .qr-upload { margin-top: 14px; }

/* ---- 9.6 表单控件的宽度类（替掉原来写死在 HTML 里的内联 max-width）---- */
.admin-w-num    { max-width: 110px; }
.admin-w-select { max-width: 120px; }
.admin-label-inline { min-width: auto; }
/* 同一张卡里上下两组表单行的间距 */
.admin-row-gap { margin-top: 10px; }
/* 结果块（签发结果 / 测试连接结果 / 导入结果）统一上间距 */
.admin-result-gap { margin-top: 14px; }
/* 二维码名称（原来内联 font-size:13px） */
.qr-name { font-size: 13px; }

/* ---- 9.7 「详细说明」折叠块：信息一条不删，但不再堆在页面上 ---- */
.admin-more {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-200, #e3e0d4);
  border-radius: 8px;
  background: var(--surface, #ffffff);
}
.admin-more > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-600, #535146);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.admin-more > summary::-webkit-details-marker { display: none; }
.admin-more > summary::before {
  content: '';
  width: 0; height: 0;
  border-left: 5px solid var(--text-400, #9b988c);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.admin-more[open] > summary::before { transform: rotate(90deg); }
.admin-more[open] > summary { margin-bottom: 8px; }
.admin-more .admin-field-hint:first-child { margin-top: 0; }

/* ---- 9.8 窄屏：卡片别再左右撑满到边，留一点呼吸 ---- */
@media (max-width: 600px) {
  .app-body .admin-card { padding: 16px; }
  .app-body .admin-field { padding: 12px; }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

}

/* ============================================================
   2026-10-09 新增岗位类型配色（接入「招聘信息总表」的 14 个二级分类）
   ⚠️ 本项目约定：CSS 覆盖性规则一律追加到文件末尾，中间插入会被后面的规则压掉。
   ============================================================ */
.cat-bianwai   { background: #faece7; color: #993c1d; }  /* 编外合同工/临聘、劳务派遣、政府购买服务 */
.cat-fujing    { background: #e6f1fb; color: #0c447c; }  /* 辅警/消防/书记员 */
.cat-shequ     { background: #e1f5ee; color: #0f6e56; }  /* 社区/基层工作者 */
.cat-rencai    { background: #faeeda; color: #854f0b; }  /* 人才引进 */
.cat-xuandiao  { background: #eeedfe; color: #3c3489; }  /* 选调 */


/* ==========================================================================
   2026-11-06 顶部工具栏整合：搜索 / 筛选 / 每页条数 / 视图切换
   目标：
   - 桌面端一行放完，不再占用内容区首屏
   - 900 以下自动换行
   - 管理后台入口不再出现在公开页
   ========================================================================== */
.app-body .app-toolbar {
  height: 56px;
  gap: 12px;
  flex-wrap: nowrap;
}

.app-body .app-toolbar .toolbar-left {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
}

.app-body .app-toolbar .view-title {
  margin: 0;
  white-space: nowrap;
}

.app-body .app-toolbar .jobs-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.app-body .app-toolbar .jobs-controls .search-box {
  flex: 1 1 220px;
  min-width: 140px;
  max-width: 360px;
  height: 36px;
}

.app-body .app-toolbar .jobs-controls .search-box input {
  height: 34px;
}

.app-body .app-toolbar .jobs-controls .toolbar-select {
  margin-left: 0;
  width: 104px;
  height: 36px;
  flex: 0 0 auto;
}

.app-body .app-toolbar .jobs-controls .mobile-filter-btn {
  height: 36px;
  min-height: 36px;
  flex: 0 0 auto;
}

.app-body .app-toolbar .jobs-controls .view-switcher {
  flex: 0 0 auto;
}

.app-body .app-toolbar .toolbar-right {
  flex: 0 0 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

@media (max-width: 1200px) {
  .app-body .app-toolbar .jobs-controls .search-box {
    flex-basis: 180px;
    max-width: 280px;
  }
  .app-body .app-toolbar .toolbar-left .view-title {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 900px) {
  .app-body .app-toolbar {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    padding: 8px 12px;
    row-gap: 8px;
  }
  .app-body .app-toolbar .toolbar-left {
    order: 1;
    flex: 0 0 auto;
  }
  .app-body .app-toolbar .toolbar-right {
    order: 2;
    margin-left: auto;
  }
  .app-body .app-toolbar .jobs-controls {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .app-body .app-toolbar .jobs-controls .search-box {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }
  .app-body .app-toolbar .jobs-controls .mobile-filter-btn {
    flex: 1 1 auto;
  }
  .app-body .app-toolbar .jobs-controls .toolbar-select {
    flex: 1 1 auto;
    width: auto;
    min-width: 100px;
  }
  .app-body .app-toolbar .jobs-controls .view-switcher {
    display: none;
  }
}

/* 2026-11-07：601-900 平板宽度下，筛选按钮被 flex:1 拉成 600-700px 的横条。
   这里让它保持内容宽度，每页条数靠右；手机（≤600）仍保留整行筛选。 */
@media (min-width: 601px) and (max-width: 900px) {
  .app-body .app-toolbar .jobs-controls .mobile-filter-btn {
    flex: 0 0 auto;
  }
  .app-body .app-toolbar .jobs-controls .page-size-control {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  .app-body .app-toolbar .jobs-controls {
    gap: 8px;
  }
  .app-body .app-toolbar .jobs-controls .search-box {
    flex: 1 1 100%;
  }
  .app-body .app-toolbar .jobs-controls .mobile-filter-btn {
    flex: 1 1 100%;
    justify-content: center;
    height: 44px;
    min-height: 44px;
  }
}


/* ==========================================================================
   2026-11-06 每页条数：从原生下拉改为“每页 [15] 条”的紧凑控件
   ========================================================================== */
.app-body .app-toolbar .page-size-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  height: 36px;
  padding: 0 2px;
  color: var(--text-500);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.app-body .app-toolbar .page-size-label,
.app-body .app-toolbar .page-size-unit {
  color: var(--text-500);
  font-size: 12px;
}

.app-body .app-toolbar .page-size-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.app-body .app-toolbar .page-size-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  width: auto;
  min-width: 58px;
  height: 34px;
  padding: 0 24px 0 10px;
  border: 1px solid var(--border-200);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-800);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.app-body .app-toolbar .page-size-select:hover {
  border-color: var(--border-400);
  background: var(--bg-50);
}

.app-body .app-toolbar .page-size-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(55, 109, 86, .12);
}

.app-body .app-toolbar .page-size-select::-ms-expand {
  display: none;
}

.app-body .app-toolbar .page-size-chevron {
  position: absolute;
  right: 8px;
  width: 12px;
  height: 12px;
  color: var(--text-400);
  pointer-events: none;
}

@media (max-width: 1200px) {
  .app-body .app-toolbar .page-size-label {
    display: none;
  }
}

@media (max-width: 600px) {
  .app-body .app-toolbar .page-size-control {
    display: none;
  }
}


/* ==========================================================================
   2026-11-06 岗位列表页内容区取消 1600px 限宽
   宽屏上表格直接占满侧栏右侧空间，不再两边留大块空白。
   后台管理页保持原来的限宽居中。
   ========================================================================== */
.app-body.jobs-page .app-main > .app-content {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 20px;
  padding-right: 20px;
}

.app-body.jobs-page .app-main > .app-content .table-wrapper {
  width: 100%;
}


/* ==========================================================================
   2026-11-06 工具栏与内容区左边缘对齐
   桌面端隐藏空的 toolbar-left（只剩汉堡按钮，且汉堡在桌面隐藏），
   工具栏左右内边距与岗位内容区一致。
   ========================================================================== */
.app-body.jobs-page .app-toolbar {
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 901px) {
  .app-body.jobs-page .app-toolbar .toolbar-left {
    display: none;
  }
}

@media (max-width: 900px) {
  .app-body.jobs-page .app-toolbar {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 600px) {
  .app-body.jobs-page .app-toolbar {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* 对比度修正：小号辅助文字统一用 text-600，避免 11-12px 灰字低于 4.5:1 */
.app-body .sidebar-group-title,
.app-body .filter-chip-label,
.app-body .filter-chips-clear,
.app-body .pagination-info,
.app-body .site-footer-slogan {
  color: var(--text-600);
}

.app-body .data-table thead th .th-content > span {
  color: var(--text-600);
}

/* 激活的排序箭头要用品牌色。上面那条对比度规则把 .th-content 里所有 span
   都压成了 text-600，.th-sort-icon.active 的 primary 色被盖掉了。 */
.app-body .data-table thead th .th-content > .th-sort-icon.active {
  color: var(--primary);
}


/* 对比度修正 2（2026-11-06）
   design-system.css 里 #siteFooter 带 ID，优先级高于 .app-body，
   这里用同样带 #siteFooter 的选择器覆盖；后台次要文字统一提到 text-600。 */
.app-body #siteFooter .site-footer-slogan,
.app-body #siteFooter .copyright-text,
.app-body #siteFooter .footer-beian-wrap {
  color: var(--text-600);
}

.app-body #siteFooter .copyright-text a {
  color: var(--text-700);
}

.app-body .admin-page-subtitle,
.app-body .admin-tab:not(.active),
.app-body .admin-section-head-desc,
.app-body .admin-card-desc,
.app-body .ad-stat-label,
.app-body .ad-admin-meta span:not(.ad-admin-status),
.app-body .ad-admin-thumb span,
.app-body .ad-image-picker #adImagePreview,
.app-body .ad-form-hint,
.app-body .ad-card-desc {
  color: var(--text-600);
}


/* 页脚版权行原本 opacity: .9，会把 12px 文字的对比度压到 4.5 以下 */
.app-body #siteFooter .copyright-text {
  opacity: 1;
}


/* ==========================================================================
   2026-11-07 岗位页表格铺满内容区 + 工具栏控件统一高度
   1) 桌面端去掉内容区和工具栏的左右 20px 内边距，
      表格、工具栏、分页统一贴到内容区左右边缘，搜索框仍与表格左边缘对齐。
   2) 工具栏左侧控件高度统一为「我的收藏」的 32px。
   移动端（<=900px）保持原有触控尺寸和内边距，不受影响。
   ========================================================================== */
@media (min-width: 901px) {
  .app-body.jobs-page .app-main > .app-content {
    padding-left: 0;
    padding-right: 0;
  }

  .app-body.jobs-page .app-toolbar {
    padding-left: 0;
    padding-right: 0;
  }

  .app-body.jobs-page .app-toolbar .search-box,
  .app-body.jobs-page .app-toolbar .mobile-filter-btn,
  .app-body.jobs-page .app-toolbar .page-size-select-wrap,
  .app-body.jobs-page .app-toolbar .page-size-select,
  .app-body.jobs-page .app-toolbar .view-switcher {
    height: 32px;
    min-height: 32px;
  }

  .app-body.jobs-page .app-toolbar .search-box input {
    height: 30px;
  }

  .app-body.jobs-page .app-toolbar .mobile-filter-btn {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .app-body.jobs-page .app-toolbar .view-switcher {
    padding: 2px;
  }

  .app-body.jobs-page .app-toolbar .view-switch-btn {
    width: 28px;
    height: 26px;
  }
}


/* 平板宽度（601-900）工具栏与内容区左右各留 20px，搜索框继续和表格左边缘对齐 */
@media (min-width: 601px) and (max-width: 900px) {
  .app-body.jobs-page .app-toolbar {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* 2026-11-07：桌面端岗位页去掉内容区顶部空隙，表格直接贴到工具栏下沿 */
@media (min-width: 901px) {
  .app-body.jobs-page .app-main > .app-content {
    padding-top: 0;
  }
}


/* 2026-11-07：卡片视图保留四周留白；表格视图仍然铺满内容区 */
@media (min-width: 901px) {
  .app-body.jobs-page[data-jobs-view="card"] .card-view {
    padding: 20px;
  }
}

/* 2026-11-07：分页条右侧留 20px。
   桌面岗位页内容区左右 padding 已归零，分页条贴到视口最右边，
   「显示 1-15」会被浏览器滚动条压住，看着像被切掉。
   表格仍保持铺满，只给分页条自己留出右侧安全距离。 */
@media (min-width: 901px) {
  .app-body.jobs-page .pagination-bar {
    padding-right: 20px;
  }
}

/* 2026-11-07：桌面端控件左留白。
   表格继续铺满内容区，但工具栏、已选筛选条、分页条不再贴着侧栏边缘。
   表格单元格文字从 222 开始，这里让控件从 228 开始，视觉上基本对齐。 */
@media (min-width: 901px) {
  .app-body.jobs-page .app-toolbar {
    padding-left: 20px;
    padding-right: 20px;
  }
  .app-body.jobs-page .filter-chips-bar {
    padding-left: 20px;
    padding-right: 20px;
  }
  .app-body.jobs-page .pagination-bar {
    padding-left: 20px;
  }
}

/* ==========================================================================
   2026-11-07：加载骨架
   数据接口返回前先占住 15 行 / 15 张卡片的高度，页脚不会再被
   “先短后长”的列表推下去（Lighthouse CLS 主要来源）。
   ========================================================================== */
#tableBody tr.skeleton-row td {
  height: 69px;
  padding: 0 14px;
  position: static !important;
  border-left: 0 !important;
  border-bottom: 1px solid var(--border-100);
}
.skeleton-bar {
  display: block;
  height: 12px;
  width: 60%;
  max-width: 520px;
  border-radius: 6px;
  background: var(--bg-300);
}
.skeleton-card {
  min-height: 320px;
  display: grid;
  align-content: start;
  gap: 14px;
  cursor: default;
  pointer-events: none;
}
.skeleton-card .skeleton-title {
  height: 20px;
  width: 78%;
  max-width: none;
}
.skeleton-card .skeleton-line {
  width: 100%;
  max-width: none;
}
.skeleton-card .skeleton-line.short {
  width: 55%;
}

/* 仅供读屏的标题 / 文本 */
.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;
}

/* 首屏还没跑 JS 时也先把列表区高度占住，避免骨架插入本身造成一次跳动 */
@media (max-width: 600px) {
  .app-body.is-list-loading #cardView {
    min-height: 4950px;
  }
}
@media (min-width: 601px) {
  .app-body.is-list-loading .table-wrapper {
    min-height: 1078px;
  }
}