@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@config "../../tailwind.config.js";
@source "../../templates/**/*.html";
@source "../../static/js-src/**/*.{js,ts,tsx}";
@source "../../static/js-src_origin/**/*.{js,ts,tsx}";

/* ==========================================
   主题定义 (@theme)
   定义项目的设计系统变量
   ========================================== */
@theme {
  /* ==========================================
     TurnitinEssay 标准化颜色系统
     基于 Tailwind CSS v4
     ========================================== */

  /* ------------------------------------------
     1. 中性色 (Neutral) - 黑白灰阶
     用于：文本、背景、边框、分隔线
     ------------------------------------------ */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;

  /* ------------------------------------------
     2. 品牌色 (Brand) - 浅灰色
     用于：品牌标识、强调元素、CTA按钮
     ------------------------------------------ */
  --color-brand: #e9ecef;
  --color-brand-light: #f8f9fa;
  --color-brand-dark: #adb5bd;
  --color-brand-50: #f8f9fa;
  --color-brand-100: #e9ecef;
  --color-brand-500: #e9ecef;
  --color-brand-600: #adb5bd;
  --color-brand-700: #6c757d;

  /* ------------------------------------------
     3. 语义化主色
     ------------------------------------------ */
  --color-primary: #000000;
  --color-secondary: #ffffff;
  --color-accent: #e9ecef;

  /* ------------------------------------------
     4. 文本颜色 (Text)
     ------------------------------------------ */
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-muted: var(--color-neutral-400);
  --color-text-body: var(--color-neutral-700);

  /* ------------------------------------------
     5. 背景颜色 (Background)
     ------------------------------------------ */
  --color-background-primary: #ffffff;
  --color-background-secondary: #F8F8F7;
  --color-background-tertiary: var(--color-neutral-100);

  /* ------------------------------------------
     6. 边框颜色 (Border)
     ------------------------------------------ */
  --color-border: var(--color-neutral-200);
  --color-border-light: var(--color-neutral-100);
  --color-border-dark: var(--color-neutral-300);

  /* ------------------------------------------
     7. 状态颜色 (Status)
     ------------------------------------------ */
  /* 成功 - 绿色 */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-success-dark: #059669;

  /* 警告 - 橙色 */
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #d97706;

  /* 危险 - 红色 */
  --color-danger: #ef4444;
  --color-danger-light: #fee2e2;
  --color-danger-dark: #dc2626;

  /* 信息 - 蓝色 */
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;
  --color-info-dark: #2563eb;

  /* ------------------------------------------
     8. 特殊用途颜色
     ------------------------------------------ */
  /* 聊天界面 */
  --color-chat-bg: var(--color-neutral-50);
  --color-chat-message: #ffffff;
  --color-chat-message-user: var(--color-neutral-900);
  --color-chat-border: var(--color-neutral-200);

  /* 暗色元素 */
  --color-dark: var(--color-neutral-800);

  /* 琥珀色 - 用于星标/奖励图标 */
  --color-amber: #f59e0b;
  --color-amber-500: #f59e0b;

  /* ------------------------------------------
     9. 兼容性别名（保持向后兼容）
     ------------------------------------------ */
  --color-primary-50: var(--color-neutral-100);
  --color-primary-100: var(--color-neutral-200);
  --color-primary-200: var(--color-neutral-300);
  --color-primary-300: var(--color-neutral-400);
  --color-primary-400: var(--color-neutral-600);
  --color-primary-500: var(--color-neutral-800);
  --color-primary-600: var(--color-neutral-900);

  /* 常用Tailwind颜色别名 */
  --color-red-50: var(--color-danger-light);
  --color-red-200: #fecaca;
  --color-red-500: var(--color-danger);
  --color-red-600: #dc2626;
  --color-red-800: #991b1b;

  --color-green-50: var(--color-success-light);
  --color-green-200: #bbf7d0;
  --color-green-500: var(--color-success);
  --color-green-600: var(--color-success-dark);
  --color-green-800: #166534;

  --color-blue-50: var(--color-info-light);
  --color-blue-200: #bfdbfe;
  --color-blue-500: var(--color-info);
  --color-blue-600: var(--color-info-dark);

  --color-orange-500: #f97316;

  --color-gray-50: var(--color-neutral-50);
  --color-gray-100: var(--color-neutral-100);
  --color-gray-200: var(--color-neutral-200);
  --color-gray-300: var(--color-neutral-300);
  --color-gray-400: var(--color-neutral-400);
  --color-gray-500: var(--color-neutral-500);
  --color-gray-600: var(--color-neutral-600);
  --color-gray-700: var(--color-neutral-700);
  --color-gray-800: var(--color-neutral-800);
  --color-gray-900: var(--color-neutral-900);
  --color-gray-950: var(--color-neutral-950);

  --color-slate-100: #f1f5f9;
  /* 字体系统 (统一) - Noto Sans SC 通过 Google Fonts 加载 */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans SC', 'PingFang SC', 'Source Han Sans CN', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  --font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-family-cinzel: Cinzel, serif;
  /* 字体大小 */
  --font-size-2xs: 0.625rem;
  --font-size-compact: 0.8rem;
  /* 间距系统 */
  --spacing-2xs: 0.125rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 5rem;
  --spacing-5xl: 6rem;

  /* 容器最大宽度 - 用于 max-w-* 类 */
  /* 注意：这些值覆盖 Tailwind 默认的 max-width，避免使用 spacing 值 */
  --container-xs: 20rem;     /* 320px */
  --container-sm: 24rem;     /* 384px */
  --container-md: 28rem;     /* 448px */
  --container-lg: 32rem;     /* 512px */
  --container-xl: 36rem;     /* 576px */
  --container-2xl: 42rem;    /* 672px */
  --container-3xl: 48rem;    /* 768px */
  --container-4xl: 56rem;    /* 896px */
  --container-5xl: 64rem;    /* 1024px */
  --container-6xl: 72rem;    /* 1152px */
  --container-7xl: 80rem;    /* 1280px */

  /* 布局尺寸 */
  --spacing-sidebar: 260px;
  --spacing-sidebar-collapsed: 60px;
  --spacing-header: 60px;
  /* 圆角系统 */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  /* 圆角系统 - 像素值（用于特定组件） */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  /* 阴影系统 */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-elevated: 0 15px 30px rgba(0, 0, 0, 0.15);
  --shadow-focus: 0 0 0 3px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.15);
  /* 过渡时间 */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  --transition-smooth: 400ms;
  /* Z-index 系统 */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;
  /* 动画 */
  --animate-aurora: aurora 20s linear infinite;
  --animate-blur-in: blurIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-fade-up: fadeUp 0.8s ease forwards;
  --animate-pulse-soft: pulseSoft 2s ease-in-out infinite;
  --animate-float: float 6s ease-in-out infinite;
}

/* ==========================================
   Dark Mode - CSS Variable Overrides
   当 html.dark 激活时，所有语义化变量切换为暗色值
   ========================================== */
html.dark {
  /* 中性色反转 */
  --color-neutral-50: #0a0a0a;
  --color-neutral-100: #171717;
  --color-neutral-200: #262626;
  --color-neutral-300: #404040;
  --color-neutral-400: #525252;
  --color-neutral-500: #737373;
  --color-neutral-600: #a3a3a3;
  --color-neutral-700: #d4d4d4;
  --color-neutral-800: #e5e5e5;
  --color-neutral-900: #f5f5f5;
  --color-neutral-950: #fafafa;

  /* 语义化主色反转 */
  --color-primary: #ffffff;
  --color-secondary: #171717;
  --color-accent: #3a3f44;

  /* 品牌色 - 暗色背景适配 */
  --color-brand: #3a3f44;
  --color-brand-light: #2a2e33;
  --color-brand-dark: #6c757d;
  --color-brand-50: #1a1d21;
  --color-brand-100: #2a2e33;
  --color-brand-500: #3a3f44;
  --color-brand-600: #6c757d;
  --color-brand-700: #adb5bd;

  /* 文本颜色 - 亮色文字在暗色背景 */
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #a3a3a3;
  --color-text-tertiary: #737373;
  --color-text-muted: #525252;
  --color-text-body: #d4d4d4;

  /* 背景颜色 - 暗色调 */
  --color-background-primary: #212121;
  --color-background-secondary: #171717;
  --color-background-tertiary: #212121;

  /* 边框颜色 - 暗色背景上的微妙线条 */
  --color-border: #2a2a2a;
  --color-border-light: #1e1e1e;
  --color-border-dark: #404040;

  /* 状态颜色 - light 变体适配暗色背景 */
  --color-success-light: #064e3b;
  --color-warning-light: #78350f;
  --color-danger-light: #7f1d1d;
  --color-info-light: #1e3a5f;

  /* 聊天界面 */
  --color-chat-bg: #171717;
  --color-chat-message: #1e1e1e;
  --color-chat-message-user: #f5f5f5;
  --color-chat-border: #2a2a2a;

  /* 暗色元素 - 上下文中变为亮色 */
  --color-dark: #e5e5e5;

  /* 兼容性别名 - 灰色系 */
  --color-gray-50: #0a0a0a;
  --color-gray-100: #171717;
  --color-gray-200: #262626;
  --color-gray-300: #404040;
  --color-gray-400: #525252;
  --color-gray-500: #737373;
  --color-gray-600: #a3a3a3;
  --color-gray-700: #d4d4d4;
  --color-gray-800: #e5e5e5;
  --color-gray-900: #f5f5f5;
  --color-gray-950: #fafafa;

  --color-slate-100: #1e293b;

  /* 兼容性别名 - primary 系 */
  --color-primary-50: #171717;
  --color-primary-100: #262626;
  --color-primary-200: #404040;
  --color-primary-300: #525252;
  --color-primary-400: #a3a3a3;
  --color-primary-500: #e5e5e5;
  --color-primary-600: #f5f5f5;

  /* 阴影 - 暗色背景需要更高不透明度 */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 15px 30px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(255, 255, 255, 0.1);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.25);

  color-scheme: dark;
}

/* 动画关键?*/
@keyframes aurora {
  0% { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}
@keyframes blurIn {
  0% { opacity: 0; filter: blur(10px); transform: translateY(20px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
/* 通用淡入 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 通用淡入上移 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 通用下滑 */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 通用上滑 */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 通用滑入 */
@keyframes slideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* 通用左滑入 */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
/* 通用右滑入 */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
/* 通用上滑入 */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 通用下淡入 */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 通用微光效果 */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
/* ==========================================
   基础样式 (@layer base)
   注：Tailwind v4 preflight 已包含 reset 和 img 样式
   ========================================== */
@layer base {
  html {
    overflow-x: hidden;
    height: 100%;
    scroll-behavior: smooth;
  }
  body {
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
    background-color: var(--color-background-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
  }
  html, body {
    min-height: 100%;
    height: auto;
    overflow-y: auto;
  }
  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  a:hover {
    color: var(--color-primary-400);
  }
}
/* ==========================================
   组件?(@layer components)
   ========================================== */
@layer components {
  /* ========================================
     按钮系统 - 统一标准
     ======================================== */

  /* 基础按钮 */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    transition: all var(--transition-normal) ease;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
  }
  .btn:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
  }
  .btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  .btn:disabled,
  .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .btn:active:not(:disabled) {
    transform: scale(0.98);
  }

  /* --- 按钮类型 --- */

  /* 主要按钮 - 黑色实心 */
  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    border-color: var(--color-primary);
  }
  .btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-500);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
  }

  /* 次要按钮 - 白底边框 */
  .btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border-color: var(--color-border);
  }
  .btn-secondary:hover:not(:disabled):not(.active) {
    background-color: #FCF4C5;
    color: var(--color-secondary);
    border-color: var(--color-primary-300);
    transform: translateY(-1px);
  }
  .btn-secondary:active:not(:disabled) {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
    transform: scale(0.98);
  }

  /* --- 按钮暗色模式 --- */
  html.dark .btn-secondary:hover:not(:disabled):not(.active) {
    background-color: #3d3820;
    color: #fcd34d;
    border-color: #4a4328;
  }
  html.dark .btn-secondary:active:not(:disabled) {
    background-color: #ffffff;
    color: #171717;
    border-color: #ffffff;
  }
  /* 轮廓按钮 - 透明底黑边框 */
  .btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
  }
  .btn-outline:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--color-secondary);
  }
  html.dark .btn-outline {
    border-color: #404040;
    color: #d4d4d4;
  }
  html.dark .btn-outline:hover:not(:disabled) {
    background-color: #3d3820;
    color: #fcd34d;
    border-color: #4a4328;
  }

  /* 幽灵按钮 - 无边框 */
  .btn-ghost {
    background-color: transparent !important;
    color: var(--color-text-secondary);
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .btn-ghost:hover:not(:disabled) {
    background-color: var(--color-accent);
    color: var(--color-primary);
  }

  /* action-btn 幽灵样式 - 完全透明 */
  .action-btn.btn-ghost {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 链接按钮 - 文字链接样式 */
  .btn-link {
    background-color: transparent;
    color: var(--color-primary);
    border-color: transparent;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .btn-link:hover:not(:disabled) {
    color: var(--color-primary-400);
  }

  /* --- 状态按钮 --- */

  .btn-danger {
    background-color: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
  }
  .btn-danger:hover:not(:disabled) {
    background-color: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
  }

  .btn-success {
    background-color: var(--color-success);
    color: white;
    border-color: var(--color-success);
  }
  .btn-success:hover:not(:disabled) {
    background-color: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }

  .btn-warning {
    background-color: var(--color-warning);
    color: white;
    border-color: var(--color-warning);
  }
  .btn-warning:hover:not(:disabled) {
    background-color: #e68a00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
  }

  .btn-info {
    background-color: var(--color-info);
    color: white;
    border-color: var(--color-info);
  }
  .btn-info:hover:not(:disabled) {
    background-color: #e55a5a;
    transform: translateY(-1px);
  }

  /* --- 渐变按钮 (CTA) --- */
  .btn-gradient {
    background: linear-gradient(135deg, #a855f7 0%, #fb923c 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
  }
  .btn-gradient::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 0deg, #a855f7, #fb923c, #a855f7);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition-normal);
    animation: btnGradientRotate 3s linear infinite;
  }
  .btn-gradient:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5), 0 0 60px rgba(251, 146, 60, 0.3);
  }
  .btn-gradient:hover::before {
    opacity: 0.6;
  }
  @keyframes btnGradientRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Button size classes (btn-xs/sm/lg/xl) migrated to Tailwind utilities in HTML */

  /* Button shape classes (btn-icon/circle/pill/block) migrated to Tailwind utilities in HTML */

  /* --- 按钮组 --- */
  .btn-group {
    display: inline-flex;
  }
  .btn-group .btn {
    border-radius: 0;
  }
  .btn-group .btn:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
  .btn-group .btn:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }
  .btn-group .btn:not(:last-child) {
    border-right-width: 0;
  }

  /* --- 切换按钮状态 --- */
  .btn.active,
  .btn[aria-pressed="true"] {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    border-color: var(--color-primary);
  }
  .btn-ghost.active,
  .btn-ghost[aria-pressed="true"] {
    background-color: var(--color-accent);
    color: var(--color-primary);
  }
  html.dark .btn.active,
  html.dark .btn[aria-pressed="true"] {
    background-color: #3d3820;
    color: #fcd34d;
    border-color: #4a4328;
  }
  html.dark .btn-outline.active,
  html.dark .btn-outline[aria-pressed="true"] {
    background-color: #3d3820;
    color: #fcd34d;
    border-color: #4a4328;
  }

  /* --- 加载状态 --- */
  .btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
  }
  .btn-loading::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
  }
  .btn-primary.btn-loading::after,
  .btn-danger.btn-loading::after,
  .btn-success.btn-loading::after,
  .btn-gradient.btn-loading::after {
    border-color: white;
    border-right-color: transparent;
  }
  /* --- Tooltip 支持 --- */
  /* 已迁移到统一的 [data-tooltip] 系统 (第6876行) */
  /* 卡片系统 */
  .card {
    background-color: var(--color-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    border: 1px solid rgba(229, 229, 229, 0.5);
  }
  .card-hover {
    transition: box-shadow var(--transition-normal);
  }
  .card-hover:hover {
    box-shadow: var(--shadow-card-hover);
  }
  .card-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
  }
  .card-footer {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--color-border);
  }
  /* 表单系统 */
  .input {
    width: 100%;
    padding: 0.625rem 1rem;
    background-color: var(--color-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-family: inherit;
  }
  .input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  }
  .input::placeholder {
    color: var(--color-text-muted);
  }
  .input-error {
    border-color: var(--color-danger);
  }
  .input-success {
    border-color: var(--color-success);
  }
  .textarea {
    min-height: 120px;
    resize: vertical;
  }
  .label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 0.375rem;
  }
  .form-group {
    margin-bottom: 1rem;
  }
  .form-hint {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: 0.25rem;
  }
  .form-error {
    font-size: 0.75rem;
    color: var(--color-danger);
    margin-top: 0.25rem;
  }
  /* 模态框系统 */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  .modal {
    background-color: var(--color-secondary);
    border-radius: 1rem;
    box-shadow: var(--shadow-elevated);
    max-width: 32rem;
    width: 100%;
    margin: 1rem;
    transform: scale(0.95);
    opacity: 0;
    transition: all var(--transition-normal);
  }
  .modal-overlay.active .modal {
    transform: scale(1);
    opacity: 1;
  }
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
  }
  .modal-title {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .modal-close {
    padding: 0.25rem;
    color: var(--color-text-tertiary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  .modal-close:hover {
    color: var(--color-text-primary);
    background-color: var(--color-accent);
  }
  .modal-body {
    padding: 1rem 1.5rem;
  }
  .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
  }
  /* 侧边栏系统 - 已迁移到 Sidebar Zero Flicker Styles (第7488行) */
  /* 头部导航 */
  .header {
    position: fixed;
    top: 0;
    right: 0;
    height: var(--spacing-header);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
  }
  /* Legacy header 暗色 */
  html.dark .header {
    background-color: rgba(23, 23, 23, 0.8);
  }
  /* Badge and alert base classes removed - use Tailwind utilities or prefixed variants (new-badge, admin-badge) instead */
  /* 加载状?*/
  .skeleton {
    background-color: var(--color-accent);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    border-radius: var(--radius-md);
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  .spinner {
    width: 1.25rem;
    height: 1.25rem;
    aspect-ratio: 1 / 1;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  /* 分隔?*/
  .divider {
    border-top: 1px solid var(--color-border);
    margin: 1rem 0;
  }
  .divider-vertical {
    border-left: 1px solid var(--color-border);
    margin: 0 1rem;
    height: 100%;
  }
}
/* ==========================================
   工具类层 (@layer utilities)
   ========================================== */
@layer utilities {
  /* Max-width 覆盖 - 修复 Tailwind v4 使用 spacing 变量的问题 */
  /* 与 @theme --container-* 变量对应，确保 max-w-* 使用容器尺寸而非 spacing */
  .max-w-xs { max-width: 20rem; }      /* 320px */
  .max-w-sm { max-width: 24rem; }      /* 384px */
  .max-w-md { max-width: 28rem; }      /* 448px */
  .max-w-lg { max-width: 32rem; }      /* 512px */
  .max-w-xl { max-width: 36rem; }      /* 576px */
  .max-w-2xl { max-width: 42rem; }     /* 672px */
  .max-w-3xl { max-width: 48rem; }     /* 768px */
  .max-w-4xl { max-width: 56rem; }     /* 896px */
  .max-w-5xl { max-width: 64rem; }     /* 1024px */
  .max-w-6xl { max-width: 72rem; }     /* 1152px */
  .max-w-7xl { max-width: 80rem; }     /* 1280px */

  /* 注意: Flexbox 快捷方式已删除，请使用 Tailwind 组合:
     .flex-center -> flex items-center justify-center
     .flex-between -> flex items-center justify-between
     .flex-start -> flex items-center justify-start
     .flex-end -> flex items-center justify-end

     line-clamp-1/2/3 请直接使用 Tailwind 内置类 */

  /* 滚动条样式 (Tailwind 无内置，保留) */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
  }
  /* 玻璃态效?*/
  .glass {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
  }
  .glass-dark {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
  }
  /* 安全区域 */
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }
}
/* ==========================================
   布局组件 - 与现?CSS 兼容
   用于新组件开发，逐步替换旧样?
   ========================================== */
/* ----------------------------------------
   i18n 多语言组件样式 (迁移?i18n.css)
   ---------------------------------------- */
/* 语言切换器容?*/
.language-switcher {
  position: relative;
  display: inline-block;
  margin: 0 15px;
}
/* 当前语言显示 */
.language-current {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
}
.language-current:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
.language-current .flag {
  font-size: var(--font-size-xl);
  filter: none !important;
  color: initial !important;
  margin-right: 8px;
}
.language-current .arrow {
  margin-left: 8px;
  transition: transform 0.3s ease;
}
.language-current.active .arrow {
  transform: rotate(180deg);
}
/* 语言下拉菜单 */
.language-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 5px;
  background: var(--color-secondary);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  min-width: 180px;
}
.language-switcher.active .language-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 语言选项 */
.language-option {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--color-dark);
  text-decoration: none;
  transition: background 0.2s ease;
  cursor: pointer;
}
.language-option:hover {
  background: var(--color-background-tertiary);
}
.language-option:first-child {
  border-radius: 8px 8px 0 0;
}
.language-option:last-child {
  border-radius: 0 0 8px 8px;
}
.language-option.active {
  background: #FCF4C5;
  color: #8B6914;
}
.language-option .flag {
  font-size: var(--font-size-xl);
  filter: none !important;
  color: initial !important;
  margin-right: 10px;
}
.language-option .name {
  flex: 1;
}
.language-option .check {
  margin-left: 10px;
  color: #52c41a;
  display: none;
}
.language-option.active .check {
  display: block;
}
/* 移动端语言切换?*/
.language-switcher-mobile {
  padding: 15px;
  border-top: 1px solid var(--color-border);
}
.language-switcher-mobile-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 10px;
}
.language-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.language-grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--color-secondary);
}
.language-grid-item:hover {
  border-color: #1890ff;
  background: #f0f9ff;
}
.language-grid-item.active {
  border-color: #1890ff;
  background: #e6f7ff;
  color: #1890ff;
}
.language-grid-item .flag {
  font-size: var(--font-size-2xl);
  filter: none !important;
  color: initial !important;
  margin-right: 8px;
}
/* i18n 加载指示?*/
.i18n-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.i18n-loader .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-secondary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
/* i18n-spin 已合并到 spin (第727行) */
/* i18n 错误提示 */
.i18n-error-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff4d4f;
  color: var(--color-secondary);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: i18n-slideUp 0.3s ease;
}
@keyframes i18n-slideUp {
  from {
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}
/* 翻译标记（调试用?*/
[data-i18n],
[data-i18n-placeholder],
[data-i18n-title],
[data-i18n-html] {
  position: relative;
}
/* 开发模式下显示翻译?*/
body.i18n-debug [data-i18n]::before,
body.i18n-debug [data-i18n-placeholder]::before,
body.i18n-debug [data-i18n-title]::before,
body.i18n-debug [data-i18n-html]::before {
  content: attr(data-i18n) attr(data-i18n-placeholder) attr(data-i18n-title) attr(data-i18n-html);
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 10px;
  background: #ff9800;
  color: var(--color-secondary);
  padding: 2px 4px;
  border-radius: 2px;
  white-space: nowrap;
  z-index: 10000;
  pointer-events: none;
}
/* RTL语言支持 */
html[dir="rtl"] .language-switcher {
  margin: 0 15px 0 0;
}
html[dir="rtl"] .language-dropdown {
  left: auto;
  right: 0;
}
html[dir="rtl"] .language-option .flag {
  margin-right: 0;
  margin-left: 10px;
}
html[dir="rtl"] .language-option .check {
  margin-left: 0;
  margin-right: 10px;
}
/* i18n 响应式设?*//* 语言特定字体样式 */
/* 字体由服务器端CSS变量 --font-family-primary 统一控制
   font_manager.py 根据当前语言动态生成对应的字体栈
   避免硬编码导致的字体抖动问题 */
html, body {
  font-family: var(--font-family-primary, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
/* ----------------------------------------
   字体系统 (迁移?fonts.css)
   ---------------------------------------- */
/* 字体CSS变量定义 - 补充 @theme 中未定义的变量 */
:root {
  /* 字体大小系统 - 扩展 @theme 定义 */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-size-5xl: 3rem;       /* 48px */
  --font-size-6xl: 3.75rem;    /* 60px */
  /* 字体粗细 */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  /* 行高 */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  /* 字母间距 */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ==========================================
     模态框透明度系统
     统一管理所有模态框的透明度值
     ========================================== */
  /* 深色遮罩背景 */
  --modal-overlay-light: rgba(0, 0, 0, 0.35);    /* 浅色遮罩 - Task Center */
  --modal-overlay-medium: rgba(0, 0, 0, 0.7);    /* 中等遮罩 - Citation配置 */
  --modal-overlay-dark: rgba(0, 0, 0, 0.85);     /* 深色遮罩 - Pages */
  --modal-overlay-darker: rgba(0, 0, 0, 0.9);    /* 最深遮罩 - Tooltip */

  /* 浅色内容背景 */
  --modal-content-translucent: rgba(255, 255, 255, 0.45);  /* 半透明内容 - Task Center卡片 */
  --modal-content-payment: rgba(255, 255, 255, 0.35);      /* 支付模态框 - Payment Modal */
  --modal-content-semi: rgba(255, 255, 255, 0.65);         /* 半不透明 - 锁定覆盖层 */
  --modal-content-opaque: rgba(255, 255, 255, 0.95);       /* 几乎不透明 - Literature */
  --modal-content-solid: rgba(255, 255, 255, 1);           /* 完全不透明 - Citation卡片 */

  /* 模态框元素背景（头部、按钮、卡片等） */
  --modal-header-translucent: rgba(255, 255, 255, 0.1);    /* 头部背景 */
  --modal-card-subtle: rgba(255, 255, 255, 0.08);          /* 卡片背景 */
  --modal-card-hover: rgba(255, 255, 255, 0.12);           /* 卡片悬停 */
  --modal-button-light: rgba(255, 255, 255, 0.2);          /* 按钮背景 */
  --modal-button-hover: rgba(255, 255, 255, 0.3);          /* 按钮悬停 */

  /* 特殊颜色背景 */
  --modal-warning-bg: rgba(252, 244, 197, 0.95);           /* 警告黄色 - 拖拽上传 */
  --modal-warning-hover: rgba(252, 244, 197, 0.75);        /* 警告黄色悬停 */

  /* Opacity状态值 */
  --opacity-hidden: 0;
  --opacity-visible: 1;
  --opacity-disabled: 0.5;
  --opacity-muted: 0.6;
}

/* Dark Mode - 模态框变量覆盖 */
html.dark {
  --modal-content-translucent: rgba(30, 30, 30, 0.45);
  --modal-content-payment: rgba(30, 30, 30, 0.35);
  --modal-content-semi: rgba(30, 30, 30, 0.65);
  --modal-content-opaque: rgba(23, 23, 23, 0.95);
  --modal-content-solid: rgba(23, 23, 23, 1);
  --modal-header-translucent: rgba(255, 255, 255, 0.05);
  --modal-card-subtle: rgba(255, 255, 255, 0.04);
  --modal-card-hover: rgba(255, 255, 255, 0.08);
  --modal-button-light: rgba(255, 255, 255, 0.1);
  --modal-button-hover: rgba(255, 255, 255, 0.15);
  --modal-warning-bg: rgba(78, 69, 37, 0.95);
  --modal-warning-hover: rgba(78, 69, 37, 0.75);
}

/* 代码和等宽字?*/
code, kbd, pre, samp, .monospace {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
}
pre {
  line-height: var(--line-height-normal);
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* 引用样式 */
blockquote {
  font-family: var(--font-family-serif, var(--font-family-base));
  font-size: var(--font-size-lg);
  font-style: italic;
  line-height: var(--line-height-relaxed);
}
/* 中文优化 */
:lang(zh),
:lang(zh-CN),
:lang(zh-TW),
:lang(zh-HK) {
  letter-spacing: 0.02em;
  word-break: break-all;
}
:lang(zh) h1,
:lang(zh) h2,
:lang(zh) h3,
:lang(zh) h4,
:lang(zh) h5,
:lang(zh) h6 {
  letter-spacing: 0.05em;
}
/* 日文优化 */
:lang(ja) {
  line-height: 1.6;
  word-break: break-all;
}
:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3 {
  letter-spacing: 0.08em;
}
/* 韩文优化 */
:lang(ko) {
  letter-spacing: -0.02em;
  word-break: keep-all;
}
/* 响应式字体大小 - max-width: 640px 已移至合并媒体查询区域 */
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --font-size-base: 0.9375rem; /* 15px on tablet */
  }
}
@media (min-width: 1025px) {
  :root {
    --font-size-base: 1rem; /* 16px on desktop */
  }
}
/* Lead 文本样式 */
.lead {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
}
/* 数字等宽 */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}
/* Prose 阅读优化 */
.prose {
  max-width: 65ch;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  margin-top: 2em;
  margin-bottom: 1em;
}
.prose p {
  margin-bottom: 1.25em;
}
.prose ul,
.prose ol {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose blockquote {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
  border-left: 0.25rem solid var(--color-border);
}
/* ----------------------------------------
   用户下拉菜单样式 (迁移?user-dropdown.css)
   ---------------------------------------- */
/* 下拉菜单容器 */
.user-dropdown-container {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
}
/* 移动端容器特殊处?*//* 覆盖?*/
.dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 9998;
}
.dropdown-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 下拉菜单主体 */
.user-dropdown-menu {
  position: absolute;
  top: 70px;
  right: 24px;
  min-width: 280px;
  width: 280px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-2xl);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -8px, 0) scale(0.98);
  /* 优化: Apple 风格弹簧动画曲线 */
  transition:
    opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0.2s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
  z-index: 9999;
  /* 优化: will-change 由 JS 动态控制，避免 GPU 内存常驻 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  /* 优化: contain 属性减少重绘范围 (Chrome/Edge 性能提升) */
  contain: layout style;
}
.user-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
  will-change: opacity, transform;
}
/* 优化: 尊重用户减少动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
  .user-dropdown-menu {
    transition: opacity 0.1s ease, visibility 0.1s ease;
    transform: none;
  }
  .user-dropdown-menu.show {
    transform: none;
  }
}
/* 下拉菜单?*/
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #1f2937;
  text-decoration: none;
  border-radius: var(--radius-xl);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.dropdown-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #000000;
  transform: translateX(2px);
}
.dropdown-item:active {
  background: rgba(0, 0, 0, 0.08);
  transform: translateX(1px);
}
.dropdown-item svg {
  width: 14px;
  height: 14px;
  color: #6b7280;
  transition: color 0.15s ease;
  flex-shrink: 0;
}
.dropdown-item:hover svg {
  color: #1f2937;
}
.dropdown-item span {
  flex: 1;
  white-space: nowrap;
  font-weight: 500;
}
/* 分割?*/
.dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 4px 8px;
}
/* 退出登录项特殊样式 */
.dropdown-item.logout {
  color: #dc2626;
  margin-top: 4px;
}
.dropdown-item.logout:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}
.dropdown-item.logout svg {
  color: #dc2626;
}
.dropdown-item.logout:hover svg {
  color: #b91c1c;
}
/* 焦点样式 */
.dropdown-item:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.05);
}
.dropdown-item:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}
/* 下拉菜单 - 主题切换 */
.dropdown-theme-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  margin: 4px 8px 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-xl);
}
.dropdown-theme-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius-xl) - 2px);
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
}
.dropdown-theme-btn:hover {
  color: #1f2937;
  background: rgba(0, 0, 0, 0.04);
}
.dropdown-theme-btn.active {
  background: #fff;
  color: #1f2937;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.dropdown-theme-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
/* 下拉菜单 - 用户信息区域 */
.dropdown-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
  margin: 4px 4px 0;
}
.dropdown-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(148, 163, 184, 0.15) 0%,
    rgba(203, 213, 225, 0.2) 50%,
    rgba(226, 232, 240, 0.25) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 2px 8px rgba(148, 163, 184, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.dropdown-user-avatar::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
  pointer-events: none;
}
.dropdown-user-avatar span {
  font-size: 16px;
  font-weight: 700;
  color: #475569;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 1;
}
.dropdown-user-detail {
  flex: 1;
  min-width: 0;
}
.dropdown-user-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-user-email {
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 下拉菜单 - 合并卡片 (等级 + 星币/查重) */
.dropdown-combined-card {
  margin: 4px 8px 4px;
  border-radius: var(--radius-xl);
  background: #f3f4f6;
  overflow: hidden;
}
.combined-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
}
.combined-card-plan {
  display: flex;
  align-items: center;
  gap: 8px;
}
.combined-card-plan-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-lg);
  background: #e5e7eb;
  color: #1f2937;
  flex-shrink: 0;
}
.combined-card-plan-icon i {
  font-size: 14px;
}
.combined-card-plan-name {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: 0.3px;
}
.combined-card-upgrade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  max-width: 28px;
  max-height: 28px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #1f2937;
  color: #fff;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.combined-card-upgrade-btn:hover {
  background: #374151;
  color: #fff;
}
.combined-card-upgrade-btn:active {
  background: #111827;
}
/* 下半部分: 星币 + 查重 */
.combined-card-stats {
  display: flex;
  align-items: stretch;
  border-top: 1px solid #e5e7eb;
}
.combined-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
}
.combined-stat-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.combined-stat-item:active {
  background: rgba(0, 0, 0, 0.06);
}
.combined-stats-divider {
  width: 1px;
  background: #e5e7eb;
  align-self: stretch;
  margin: 8px 0;
}
.combined-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-lg);
  background: #e5e7eb;
  color: #1f2937;
  flex-shrink: 0;
}
.combined-stat-icon i {
  font-size: 14px;
}
.combined-stat-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.combined-stat-label {
  font-size: 10px;
  color: #6b7280;
  line-height: 1;
}
.combined-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.2;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

/* 下拉菜单中的权益卡片样式 */
.dropdown-privilege-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 4px;
  margin-bottom: 8px;
  border-radius: var(--radius-xl);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}
.dropdown-privilege-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
/* 卡片颜色变量 */
.dropdown-privilege-card {
  --card-color: #94a3b8;
  --card-color-alt: #cbd5e1;
  --card-border-alpha: 0.1;
  --card-shadow-alpha: 0.08;
  --card-glow-alpha: 0.25;
  --card-title-from: #64748b;
  --card-title-to: #94a3b8;
  --card-sub-from: #94a3b8;
  --card-sub-mid: #94a3b8;
  --card-sub-to: #94a3b8;
  --card-sub-weight: 500;
}
.dropdown-privilege-card.plus-card {
  --card-color: #8b5cf6;
  --card-color-alt: #a855f7;
  --card-border-alpha: 0.2;
  --card-shadow-alpha: 0.15;
  --card-glow-alpha: 0.35;
  --card-title-from: #7c3aed;
  --card-title-to: #a78bfa;
  --card-sub-from: #6d28d9;
  --card-sub-mid: #8b5cf6;
  --card-sub-to: #a855f7;
  --card-sub-weight: 600;
}
.dropdown-privilege-card.pro-card {
  --card-color: #f59e0b;
  --card-color-alt: #fbbf24;
  --card-border-alpha: 0.2;
  --card-shadow-alpha: 0.15;
  --card-glow-alpha: 0.35;
  --card-title-from: #d97706;
  --card-title-to: #f59e0b;
  --card-sub-from: #b45309;
  --card-sub-mid: #f59e0b;
  --card-sub-to: #fbbf24;
  --card-sub-weight: 600;
}
/* Plus/Pro/Free 公共卡片样式 */
.dropdown-privilege-card.plus-card,
.dropdown-privilege-card.pro-card {
  background: transparent;
  border: 1px solid rgba(var(--card-color), var(--card-border-alpha));
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 8px;
}
/* 使用具体颜色值设置边框和阴影 (CSS变量不支持rgba拆分) */
.dropdown-privilege-card.plus-card {
  border-color: rgba(139, 92, 246, 0.2);
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.15), 0 1px 3px rgba(139, 92, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.dropdown-privilege-card.pro-card {
  border-color: rgba(245, 158, 11, 0.2);
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.15), 0 1px 3px rgba(245, 158, 11, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.dropdown-privilege-card.free-card {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.1);
  box-shadow: 0 1px 4px rgba(148, 163, 184, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 8px;
}
/* 发光边框 */
.dropdown-privilege-card.plus-card::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.3), rgba(139, 92, 246, 0.3));
  border-radius: 14px;
  z-index: -1;
  animation: plus-glow 2s ease-in-out infinite alternate;
}
.dropdown-privilege-card.pro-card::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(45deg, rgba(245, 158, 11, 0.3), rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.3));
  border-radius: 14px;
  z-index: -1;
  animation: pro-glow 2s ease-in-out infinite alternate;
}
.dropdown-privilege-card.free-card::before {
  background: linear-gradient(135deg, transparent 0%, rgba(248, 250, 252, 0.2) 50%, transparent 100%);
}
/* 权益卡片图标 */
.privilege-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 2;
}
.plus-card .privilege-card-icon,
.pro-card .privilege-card-icon,
.free-card .privilege-card-icon {
  background: linear-gradient(135deg, var(--card-color), var(--card-color-alt));
  color: white;
  width: 22px;
  height: 22px;
}
.privilege-card-icon i {
  font-size: var(--font-size-base);
}
.plus-card .privilege-card-icon i,
.pro-card .privilege-card-icon i,
.free-card .privilege-card-icon i {
  font-size: 11px;
}
/* 权益卡片内容 */
.privilege-card-content {
  flex: 1;
  position: relative;
  z-index: 2;
}
.privilege-card-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
/* 统一标题渐变 */
.plus-card .privilege-card-title,
.pro-card .privilege-card-title,
.free-card .privilege-card-title {
  line-height: 1.1;
  margin-bottom: 1px;
  background: linear-gradient(135deg, var(--card-title-from) 0%, var(--card-title-to) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}
.privilege-card-subtitle {
  font-size: 11px;
  color: #6b7280;
  font-weight: 400;
}
/* 统一副标题渐变 */
.plus-card .privilege-card-subtitle,
.pro-card .privilege-card-subtitle {
  font-size: 10px;
  font-weight: var(--card-sub-weight);
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, var(--card-sub-from) 0%, var(--card-sub-mid) 50%, var(--card-sub-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.pro-card .privilege-card-subtitle {
  display: inline-block;
}
.free-card .privilege-card-subtitle {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.1;
}
/* 分隔光泽线 */
.plus-card .privilege-card-content::after,
.pro-card .privilege-card-content::after,
.free-card .privilege-card-content::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 6px;
}
.plus-card .privilege-card-content::after {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.35), transparent);
}
.pro-card .privilege-card-content::after {
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.35), transparent);
}
.free-card .privilege-card-content::after {
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.25), transparent);
}
/* 权益升级按钮 */
.privilege-upgrade-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: white;
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.3s ease;
  box-shadow:
    0 2px 8px rgba(249, 115, 22, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
.privilege-upgrade-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(249, 115, 22, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #ea580c, #f97316);
}
.privilege-upgrade-btn:active {
  transform: translateY(0);
  box-shadow:
    0 2px 6px rgba(249, 115, 22, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.privilege-upgrade-btn i {
  font-size: var(--font-size-xs);
  transition: transform 0.3s ease;
}
.privilege-upgrade-btn:hover i {
  transform: translateY(-1px);
}
/* Pro会员升级按钮 */
.privilege-upgrade-btn.pro-upgrade-btn {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  box-shadow:
    0 2px 8px rgba(245, 158, 11, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.privilege-upgrade-btn.pro-upgrade-btn:hover {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  box-shadow:
    0 4px 12px rgba(245, 158, 11, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.privilege-upgrade-btn.pro-upgrade-btn:active {
  box-shadow:
    0 2px 6px rgba(245, 158, 11, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* 发光动画 */
@keyframes plus-glow {
  from {
    box-shadow: 0 0 5px rgba(249, 115, 22, 0.2);
  }
  to {
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.4);
  }
}
@keyframes pro-glow {
  from {
    box-shadow: 0 0 5px rgba(245, 158, 11, 0.2);
  }
  to {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
  }
}
/* 权益卡片移动端适配 */

/* ==========================================
   统一通知系统 (Unified Notification System)
   ========================================== */
.notification-container {
  position: fixed;
  /* 避开固定 header，防止通知被遮挡 */
  top: calc(var(--header-height, var(--spacing-header, 60px)) + 0.5rem);
  right: 1.5rem;
  z-index: 99999;
  pointer-events: none;
  max-width: 420px;
  padding: 0;
}
.notification {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-2xl);
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.75rem;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  pointer-events: auto;
  transform: translateX(120px) scale(0.95);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: clip;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: notificationSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  border-left: none;
}
.notification::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.1) 100%);
  border-radius: inherit;
  pointer-events: none;
}
.notification::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.4) 100%);
  border-radius: 2px 0 0 2px;
  transition: all 0.3s ease;
}
.notification.success {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: #065f46;
}
.notification.success::before {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.2) 0%,
    rgba(16, 185, 129, 0.1) 50%,
    rgba(16, 185, 129, 0.15) 100%);
}
.notification.success::after {
  background: linear-gradient(180deg,
    rgba(16, 185, 129, 0.9) 0%,
    rgba(16, 185, 129, 0.6) 100%);
}
.notification.error {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #7f1d1d;
}
.notification.error::before {
  background: linear-gradient(135deg,
    rgba(239, 68, 68, 0.2) 0%,
    rgba(239, 68, 68, 0.1) 50%,
    rgba(239, 68, 68, 0.15) 100%);
}
.notification.error::after {
  background: linear-gradient(180deg,
    rgba(239, 68, 68, 0.9) 0%,
    rgba(239, 68, 68, 0.6) 100%);
}
.notification.warning {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: #78350f;
}
.notification.warning::before {
  background: linear-gradient(135deg,
    rgba(245, 158, 11, 0.2) 0%,
    rgba(245, 158, 11, 0.1) 50%,
    rgba(245, 158, 11, 0.15) 100%);
}
.notification.warning::after {
  background: linear-gradient(180deg,
    rgba(245, 158, 11, 0.9) 0%,
    rgba(245, 158, 11, 0.6) 100%);
}
.notification.info {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #1e3a8a;
}
.notification.info::before {
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.2) 0%,
    rgba(59, 130, 246, 0.1) 50%,
    rgba(59, 130, 246, 0.15) 100%);
}
.notification.info::after {
  background: linear-gradient(180deg,
    rgba(59, 130, 246, 0.9) 0%,
    rgba(59, 130, 246, 0.6) 100%);
}

/* --- Notification dark mode --- */
html.dark .notification {
  background: rgba(23, 23, 23, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.dark .notification::before {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.05) 100%);
}

html.dark .notification::after {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.2) 100%);
}

html.dark .notification .notification-message,
html.dark .notification span {
  color: #e5e5e5;
  text-shadow: none;
}

html.dark .notification-close {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
}

html.dark .notification-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.notification .notification-icon,
.notification i {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--color-secondary);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
.notification.success .notification-icon,
.notification.success i {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}
.notification.error .notification-icon,
.notification.error i {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
.notification.warning .notification-icon,
.notification.warning i {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.notification.info .notification-icon,
.notification.info i {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.notification:hover .notification-icon,
.notification:hover i {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.notification .notification-message,
.notification span {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 500;
  font-family: var(--font-family-base);
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.notification-close {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  font-size: 0.875rem;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.notification-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(0, 0, 0, 0.8);
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.notification-close:active {
  transform: scale(0.95) rotate(90deg);
}
/* 通知内容包装器 - 用于有嵌套结构的通知 */
.notification-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  background: transparent;
  position: relative;
  z-index: 1;
}
/* 显示/隐藏状态 */
.notification.show {
  transform: none;
  opacity: 1;
}
.notification.hide,
.notification.removing {
  animation: notificationSlideOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 移动端通知样式优化 */
@media (max-width: 768px) {
  .notification-container {
    top: calc(var(--header-height, var(--spacing-header, 60px)) + 0.5rem);
    right: 0.75rem;
    left: 0.75rem;
    max-width: none;
  }

  .notification {
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
    gap: 0.75rem;
    border-radius: 12px;
  }

  .notification .notification-message,
  .notification span {
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .notification .notification-icon,
  .notification i {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    margin-top: 0.125rem;
  }

  .notification-close {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    flex-shrink: 0;
  }
}

@media (max-width: 420px) {
  .notification-container {
    top: calc(var(--header-height, var(--spacing-header, 56px)) + 0.375rem);
    right: 0.5rem;
    left: 0.5rem;
  }

  .notification {
    padding: 0.75rem 0.875rem;
    gap: 0.625rem;
  }

  .notification .notification-message,
  .notification span {
    font-size: 0.8rem;
  }
}

@keyframes notificationSlideIn {
  0% {
    transform: translateX(120px) scale(0.8) rotateY(15deg);
    opacity: 0;
    filter: blur(10px);
  }
  50% {
    transform: translateX(20px) scale(1.02) rotateY(5deg);
    opacity: 0.8;
    filter: blur(2px);
  }
  100% {
    transform: none;
    opacity: 1;
    filter: none;
  }
}
@keyframes notificationSlideOut {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translateX(120px) scale(0.8);
    opacity: 0;
    filter: blur(10px);
  }
}
/* ==========================================
   悬浮二维码框样式
   ?style-new.css 迁移
   ========================================== */
.new-invite-modal {
  display: none;
}
.floating-qr-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-fixed);
  opacity: 0.8;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: all var(--transition-smooth);
  pointer-events: auto;
}
.floating-qr-box.show {
  opacity: 0.8;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.floating-qr-box.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%) scale(0.8);
  pointer-events: none;
}
.floating-qr-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--spacing-md);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12),
              0 6px 12px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
  min-width: 140px;
  max-width: 160px;
  transition: all var(--transition-normal);
}
.floating-qr-content:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2),
              0 12px 20px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.floating-qr-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xs);
  transition: all var(--transition-fast);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.floating-qr-close:hover {
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-text-primary);
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.floating-qr-close:active {
  transform: scale(0.9);
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease;
}
.floating-qr-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  padding-right: var(--spacing-md);
}
.floating-qr-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-sm);
  box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3);
  flex-shrink: 0;
}
.floating-qr-text {
  flex: 1;
  min-width: 0;
}
.floating-qr-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
  line-height: 1.2;
}
.floating-qr-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.2;
}
.floating-qr-image {
  text-align: center;
  margin-top: var(--spacing-xs);
}
.floating-qr-image img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-normal);
  object-fit: cover;
}
.floating-qr-image img:hover {
  transform: scale(1.05);
  border-color: rgba(102, 126, 234, 0.5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.floating-qr-box.show .floating-qr-content {
  animation: floatingBounce 3s ease-in-out infinite;
}
@keyframes floatingBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
/* ==========================================
   新用户模态框样式
   ?style-new.css 迁移
   ========================================== */
.new-user-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.new-user-modal.show {
  opacity: 1;
  visibility: visible;
}
.new-user-modal-content {
  background: white;
  border-radius: 20px;
  padding: 40px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.08);
  animation: modalSlideIn 0.3s ease-out;
  text-align: center;
}
.new-user-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: var(--font-size-2xl);
  cursor: pointer;
  color: #999;
  transition: color 0.2s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.new-user-modal-close:hover {
  color: var(--color-dark);
  background: rgba(0, 0, 0, 0.05);
}
.new-user-modal-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: white;
  font-size: 36px;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}
.new-user-modal-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
  line-height: 1.2;
}
.new-user-modal-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: 32px;
  line-height: 1.5;
}
.new-user-benefits {
  text-align: left;
  margin-bottom: 32px;
}
.new-user-benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(102, 126, 234, 0.05);
  border-radius: var(--radius-xl);
  transition: all 0.2s ease;
}
.new-user-benefit-item:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: translateX(4px);
}
.new-user-benefit-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}
.new-user-benefit-text {
  font-size: var(--font-size-sm);
  color: var(--color-dark);
  font-weight: 500;
}
.new-user-modal-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.new-user-btn {
  padding: 14px 28px;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  justify-content: center;
}
.new-user-btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}
.new-user-btn-primary:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}
.new-user-btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}
.new-user-btn-secondary:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}
/* ==========================================
   Benefits 页面样式
   ?style-new.css 迁移
   ========================================== */
.benefits-crown-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%) !important;
  color: white !important;
}
/* 表格列宽?*/
.col-date { width: 20%; }
.col-type { width: 15%; }
.col-details { width: 35%; }
.col-change { width: 15%; }
.col-status { width: 15%; }
/* 错误图标颜色 */
.error-icon {
  color: var(--color-danger) !important;
}
/* 统计图标样式 */
.stat-icon-success {
  background: #d1fae5 !important;
  color: #059669 !important;
}
.stat-icon-warning {
  background: #fef3c7 !important;
  color: #d97706 !important;
}
.stat-icon-info {
  background: #dbeafe !important;
  color: #2563eb !important;
}
/* 筛选面?*/
.filter-panel {
  padding: var(--spacing-lg);
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border);
  animation: slideDown 0.3s ease;
}
/* 表格样式 */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin-bottom: var(--spacing-lg);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  background: var(--color-background-primary);
  table-layout: auto;
}
.data-table th {
  background: var(--color-background-secondary);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  width: auto;
}
.data-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  width: auto;
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr:hover {
  background: var(--color-background-tertiary);
}
/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--color-background-secondary);
  border-radius: var(--radius-md);
}
.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.page-numbers {
  display: flex;
  gap: var(--spacing-xs);
}
.pagination-btn,
.page-btn {
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--font-size-sm);
}
.pagination-btn:hover:not(:disabled),
.page-btn:hover:not(:disabled):not(.active) {
  background: var(--color-background-tertiary);
  border-color: var(--color-primary);
}
.page-btn.active {
  background: var(--color-primary);
  color: var(--color-secondary);
  border-color: var(--color-primary);
}
.pagination-btn:disabled,
.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* 状态徽章 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
}
.status-badge.success {
  background-color: #e2e8f0;
  color: #374151;
}
.status-badge.warning {
  background-color: var(--color-border);
  color: #6b7280;
}
.status-badge.error {
  background-color: var(--color-border);
  color: #4b5563;
}
/* 类型徽章 */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
}
/* 记录变动样式 */
.record-change {
  font-weight: 500;
  font-family: var(--font-family-mono);
}
.record-change.increase {
  color: #16a34a;
}
.record-change.decrease {
  color: #ef4444;
}
/* 时间显示工具提示样式 */
.time-with-tooltip {
  cursor: help;
  border-bottom: 1px dotted var(--color-text-secondary);
  transition: all var(--transition-fast);
}
.time-with-tooltip:hover {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}
/* ==========================================
   响应式设计补充
   从 style-new.css 迁移
   ========================================== */
/* ==========================================
   焦点样式
   ========================================== */
.new-sidebar :focus-visible,
.new-header :focus-visible,
.new-input:focus-visible,
.new-select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* ==========================================
   选择文本样式
   ========================================== */
::selection {
  background: var(--color-primary);
  color: white;
}
/* ==========================================
   滚动条样?
   ========================================== */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
html.dark ::-webkit-scrollbar-track {
  background: #171717;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #525252;
  border-radius: 3px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #737373;
}
/* ==========================================
   侧边栏按钮区域样?
   ?style-new.css 迁移
   ========================================== */
.sidebar-action-buttons {
  padding: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
  background: var(--color-background-primary);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.action-btn-row {
  display: flex;
  gap: var(--spacing-xs);
  width: 100%;
}
.compact-btn {
  flex: 1;
  min-height: 40px !important;
}
.compact-btn .btn-content {
  gap: 0 !important;
}
.compact-btn .btn-subtitle {
  display: none;
}
.compact-btn .btn-title {
  font-size: var(--font-size-xs) !important;
  font-weight: 600;
}
.compact-btn .btn-icon {
  width: 32px !important;
  height: 32px !important;
}
.compact-btn .btn-icon i {
  font-size: 14px !important;
}
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 48px;
  text-align: center;
}
.action-btn:hover {
  background: var(--color-background-tertiary);
  border-color: var(--color-text-muted);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-background-primary);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.btn-icon i {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  text-align: center;
}
.btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  text-align: center;
}
.btn-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
  text-align: center;
}
.btn-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.2;
  font-weight: 500;
}
/* 充值按钮样?*/
.recharge-btn .btn-icon {
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
}
.recharge-btn .btn-icon i {
  color: #1976d2;
}
.recharge-btn:hover .btn-icon {
  background: linear-gradient(135deg, #bbdefb 0%, #e1bee7 100%);
  transform: scale(1.05);
}
/* 领币按钮样式 */
.points-btn {
  border: 1px solid var(--color-border);
  background: var(--color-background-secondary);
  font-family: inherit;
}
.points-btn:hover {
  background: var(--color-background-tertiary);
  border-color: var(--color-text-muted);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
.points-btn .btn-icon {
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
}
.points-btn .btn-icon i {
  color: #1976d2;
}
.points-btn:hover .btn-icon {
  background: linear-gradient(135deg, #bbdefb 0%, #e1bee7 100%);
  transform: scale(1.05);
}
/* 邀请按钮样?*/
.invite-btn .btn-icon {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
}
.invite-btn .btn-icon i {
  color: #388e3c;
}
.invite-btn:hover .btn-icon {
  background: linear-gradient(135deg, #a5d6a7 0%, #81c784 100%);
  transform: scale(1.05);
}
/* 按钮焦点状?*/
.action-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}
/* ==========================================
   用户信息组件
   ?style-new.css 迁移
   ========================================== */
.new-user-info-container {
  min-width: 200px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
  visibility: visible;
  opacity: 1;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.new-auth-actions {
  min-width: 140px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
  visibility: visible;
  opacity: 1;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.new-user-info {
  min-width: 180px;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 4px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all var(--transition-fast);
  position: relative;
}
.new-user-info:hover {
  background: rgba(0, 0, 0, 0.05);
}
.new-user-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  overflow: hidden;
  box-sizing: border-box;
}
.new-user-details {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 1.2;
}
.new-user-name {
  max-width: 100px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 2px;
}
.new-user-email {
  max-width: 120px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
  line-height: 1.1;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 1px;
}
.new-user-role {
  max-width: 140px;
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2px;
}
/* 骨架屏加载效果 */
.auth-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* 通用骨架屏容器样式 - 用于 reduce_ai 等页面 */
.skeleton-loading {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 1rem 1rem 0 1rem;
  z-index: 10;
  min-height: 200px;
  max-height: 300px;
  overflow: hidden;
}

/* 骨架屏行样式 */
.skeleton-line {
  height: 1rem;
  background: linear-gradient(90deg, #d1d5db 25%, #e5e7eb 50%, #d1d5db 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.skeleton-line:last-child {
  margin-bottom: 0;
}

.skeleton-line.short {
  width: 60%;
}

.skeleton-line.medium {
  width: 80%;
}

.skeleton-line.long {
  width: 100%;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 骨架屏暗色模式 */
html.dark .skeleton-line {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* Turnitin logo 暗色模式使用专用 SVG，避免 iOS Safari SVG+filter 白底渲染 */
html.dark .index-hero img[alt="Turnitin"] {
  filter: none;
}

/* Turnitin 报告预览图片 暗色模式适配 - 反色处理 */
html.dark img[alt*="Turnitin官方报告"] {
  filter: invert(0.91) hue-rotate(180deg) contrast(0.85);
  border-radius: var(--radius-lg);
}

/* ==========================================
   通用操作按钮样式 - 圆形图标按钮
   用于粘贴、复制、重置、下载等操作
   ========================================== */
/* ==========================================
   Heroicon SVG 图标全局样式
   替代 Font Awesome Regular (far) 图标
   ========================================== */
.heroicon {
  display: inline-block;
  vertical-align: middle;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

/* 基础圆形图标按钮 */
.action-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  overflow: visible; /* 确保 tooltip 不会被裁剪 */
}
.action-btn i,
.action-btn .heroicon {
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
  transition: all 0.2s ease;
}

/* 粘贴按钮 - 蓝色 */
.action-btn-paste:hover {
  background: rgba(224, 242, 254, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
}

.action-btn-paste:hover i,
.action-btn-paste:hover .heroicon {
  color: #0284c7;
  transform: scale(1.05);
}

/* 复制按钮 - 绿色 */
.action-btn-copy:hover {
  background: rgba(212, 237, 218, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
}

.action-btn-copy:hover i,
.action-btn-copy:hover .heroicon {
  color: #16a34a;
  transform: scale(1.05);
}

/* 重置按钮 - 红色 */
.action-btn-reset:hover {
  background: rgba(254, 226, 226, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
}

.action-btn-reset:hover i,
.action-btn-reset:hover .heroicon {
  color: #dc2626;
  transform: scale(1.05);
}

/* 下载按钮 - 灰色 */
.action-btn-download:hover {
  background: rgba(241, 245, 249, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
}

.action-btn-download:hover i,
.action-btn-download:hover .heroicon {
  color: #475569;
  transform: scale(1.05);
}

/* 示例文本按钮 - 黄色 */
.action-btn-example:hover {
  background: rgba(254, 243, 199, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
}

.action-btn-example:hover i,
.action-btn-example:hover .heroicon {
  color: #f59e0b;
  transform: scale(1.05);
}

/* 清除/关闭按钮 - 红色 */
.action-btn-clear:hover {
  background: rgba(254, 226, 226, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
}

.action-btn-clear:hover i,
.action-btn-clear:hover .heroicon {
  color: #dc2626;
  transform: scale(1.05);
}

/* 图标过渡效果已包含在上方 .action-btn i, .action-btn .heroicon 中 */

/* ==========================================
   表单组件样式
   ?style-new.css 迁移
   ========================================== */
.new-form-group {
  margin-bottom: var(--spacing-lg);
}
.new-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}
.new-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.new-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.new-input:focus-visible,
.new-select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.new-input-readonly {
  background-color: var(--color-background-secondary);
  cursor: not-allowed;
}
.new-input::placeholder {
  color: var(--color-text-muted);
}
.new-textarea {
  resize: vertical;
  min-height: 120px;
}
.new-select {
  width: 100%;
  padding: var(--spacing-sm) 2.5rem var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  cursor: pointer;
  font-weight: 500;
}
.new-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.new-select:hover {
  border-color: var(--color-text-secondary);
  background-color: var(--color-background-secondary);
}
.new-select option {
  padding: var(--spacing-sm);
}
/* ==========================================
   卡片组件样式
   ?style-new.css 迁移
   ========================================== */
.new-card {
  background-color: var(--color-background-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--transition-fast);
}
.new-card:hover {
  box-shadow: none;
}
.new-card + .new-card {
  margin-top: var(--spacing-md);
}
.new-card-header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}
.new-card-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}
.new-card-description {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.6;
}
.new-card-content {
  color: var(--color-text-primary);
  line-height: 1.6;
}
/* ==========================================
   高级感使用提示样?
   ?style-new.css 迁移
   ========================================== */
.usage-tips-card {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-background-tertiary) 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  position: relative;
  overflow: hidden;
}
.usage-tips-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2c2c2c 0%, var(--color-text-secondary) 50%, #2c2c2c 100%);
  background-size: 200% 100%;
  animation: gradientFlow 4s ease-in-out infinite;
}
.title-icon-wrapper {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  font-size: var(--font-size-base);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
.title-icon-wrapper:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.usage-subtitle {
  margin-top: 8px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.usage-tips-card .new-card-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}
.usage-tips-card .new-card-header {
  padding: 24px 28px 20px 28px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: linear-gradient(135deg, #fafbfc 0%, var(--color-background-tertiary) 100%) !important;
  margin-bottom: 0 !important;
}
.usage-tips-card .new-card-content {
  padding: 28px !important;
}
.instructions-grid {
  display: grid;
  gap: 20px;
  margin-top: 8px;
}
.instruction-item {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-background-tertiary) 100%);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  animation: fadeUp 0.6s ease-out;
  animation-fill-mode: both;
}
.instruction-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2c2c2c 0%, var(--color-text-secondary) 50%, #2c2c2c 100%);
  background-size: 200% 100%;
  animation: gradientFlow 3s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.instruction-item:hover::before {
  opacity: 1;
}
.instruction-item:hover {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #f5f6f7 100%);
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.instruction-number {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
  color: var(--color-secondary);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  transition: all 0.3s ease;
}
.instruction-number::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, var(--color-text-secondary), #2c2c2c, var(--color-text-secondary));
  background-size: 200% 200%;
  border-radius: 14px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: gradientFlow 3s linear infinite;
}
.instruction-item:hover .instruction-number::after {
  opacity: 0.6;
}
.instruction-item:hover .instruction-number {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.number-glow {
  position: absolute;
  inset: -3px;
  background: linear-gradient(45deg, var(--color-text-secondary), #2c2c2c, var(--color-text-secondary));
  background-size: 200% 200%;
  border-radius: 15px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: gradientFlow 3s linear infinite;
}
.instruction-item:hover .number-glow {
  opacity: 0.4;
}
.number-text {
  position: relative;
  z-index: 1;
}
.instruction-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.instruction-title {
  margin: 0 0 8px 0 !important;
  color: #1a1a1a !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
  transition: color 0.3s ease !important;
  position: relative;
  display: inline-block;
}
.instruction-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #2c2c2c, var(--color-text-secondary));
  transition: width 0.3s ease;
}
.instruction-item:hover .instruction-title::after {
  width: 100%;
}
.instruction-item:hover .instruction-title {
  color: #000000 !important;
}
.instruction-description {
  margin: 0 !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.6 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  transition: all 0.3s ease !important;
  position: relative;
  padding-left: 0;
}
.instruction-item:hover .instruction-description {
  color: var(--color-text-body) !important;
  padding-left: 8px;
}
.instruction-arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: #cccccc;
  font-size: var(--font-size-sm);
  opacity: 0;
  transition: all 0.3s ease;
}
.instruction-item:hover .instruction-arrow {
  opacity: 1;
  transform: translateY(-50%) translateX(4px);
  color: var(--color-text-secondary);
}
.usage-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
}
.usage-tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--color-background-tertiary) 0%, #e9ecef 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.usage-tip::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}
.usage-tip:hover::before {
  left: 100%;
}
.usage-tip:hover {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #f5f6f7 100%);
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.usage-tip i {
  color: #2c2c2c;
  font-size: var(--font-size-base);
}
/* 步骤动画效果 */
.instruction-item:nth-child(1) { animation-delay: 0.1s; }
.instruction-item:nth-child(2) { animation-delay: 0.2s; }
.instruction-item:nth-child(3) { animation-delay: 0.3s; }
.instruction-item:nth-child(4) { animation-delay: 0.4s; }
.instruction-item:nth-child(5) { animation-delay: 0.5s; }
/* instructionFadeInUp 已合并到 fadeUp (第123行) */
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* gradientRotate 与 gradientFlow 完全相同，使用 gradientFlow 替代 */
/* 使用提示响应式设计 - 卡片响应式设计已移至合并媒体查询区域 */
/* 移动端卡片触摸效果 *//* ==========================================
   Pricing 标签页样式
   ?style-new.css 迁移
   ========================================== */
.pricing-tabs-container {
  background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e9ecef;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
.pricing-tabs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pricing-tabs-track {
  display: flex;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
}
.pricing-tabs-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 48px;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 142, 83, 0.15) 100%);
  border: 2px solid #FCF4C5;
  border-radius: var(--radius-md);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}
.pricing-tab {
  padding: 0.875rem 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  border-radius: var(--radius-md);
  z-index: 3;
  white-space: nowrap;
}
.pricing-tab:hover {
  color: #FCF4C5;
  transform: translateY(-1px);
}
.pricing-tab.active {
  color: #FCF4C5;
  font-weight: 700;
}
.pricing-tab i {
  font-size: 1.1rem;
  transition: all 0.3s ease;
}
.pricing-tab:hover i {
  transform: scale(1.1);
}
.pricing-tab.active i {
  transform: scale(1.15);
  color: #FCF4C5;
}
.pricing-tab span {
  font-weight: inherit;
  letter-spacing: 0.02em;
}
/* Pricing 标签页响应式 - 触摸设备优化已移至合并媒体查询区域 */
/* Grid classes migrated to Tailwind utilities in HTML */
/* ==========================================
   内容区域样式
   ?style-new.css 迁移
   ========================================== */
.new-content {
  flex: 1;
  padding: var(--spacing-md);
  padding-top: var(--spacing-header);
  background-color: var(--color-background-tertiary);
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  /* 移除固定的min-height，使用flex: 1自动填充剩余空间 */
}
.new-content:has(.index-hero) {
  padding: 0;
  padding-top: 0;
  background-color: transparent;
}
/* ==========================================
   模态框基础样式 (从 style-new.css 迁移)
   注: .modal-overlay 已合并到 @layer components 中
   ========================================== */
.modal-content-base {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
  position: relative;
  animation: modalSlideIn var(--transition-normal) ease-out;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-close-base {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* 注意: 布局与定位工具类已删除，请使用 Tailwind 内置类:
   flex-col, flex-wrap, text-center/left/right, w-full, h-full,
   absolute, relative, fixed, hidden, block, inline-block, truncate, sr-only */
/* ==========================================
   布局系统
   ?style-new.css 迁移
   ========================================== */
.new-layout {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-background-primary);
}
/* ==========================================
   现代化头部导航样?
   ?style-new.css 迁移
   ========================================== */
.new-header,
.modern-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0 var(--spacing-xl);
  height: var(--spacing-header);
  min-height: var(--spacing-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: var(--spacing-sidebar);
  right: 0;
  z-index: var(--z-fixed);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  overflow: hidden;
}
/* .header-left/.header-right 已合并到"主内容区"部分 */
.new-header-actions,
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-width: 220px;
  min-height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
  z-index: var(--z-fixed);
}
.new-header .new-sidebar-toggle,
.modern-header .sidebar-toggle {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--color-text-secondary);
  margin-right: var(--spacing-sm);
}
.new-header .new-sidebar-toggle:hover,
.modern-header .sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
  color: var(--color-text-primary);
}
.modern-header .stat-item,
.modern-header .action-btn {
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-xl);
  transition: all 0.2s ease;
}
.modern-header .stat-item:hover,
.modern-header .action-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.new-header .new-user-info,
.modern-header .user-trigger {
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-2xl);
  transition: all 0.2s ease;
}
.new-header .new-user-info:hover,
.modern-header .user-trigger:hover {
  background: rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.modern-header .auth-btn-outline {
  background: transparent;
  color: var(--color-text-secondary);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-xl);
  transition: all 0.2s ease;
  /* 移动端触摸优化 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
  user-select: none;
  -webkit-user-select: none;
}
.modern-header .auth-btn-outline:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}
.modern-header .auth-btn-primary {
  background: var(--color-primary);
  color: var(--color-secondary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-xl);
  transition: all 0.2s ease;
  /* 移动端触摸优化 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
  user-select: none;
  -webkit-user-select: none;
}
.modern-header .auth-btn-primary:hover {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.new-header-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  flex: 1;
}
/* 侧边栏折叠状态下的头部适配 */
.sidebar-collapsed .new-header,
.sidebar-collapsed .modern-header,
body.sidebar-collapsed .new-header,
body.sidebar-collapsed .modern-header {
  left: var(--spacing-sidebar-collapsed);
}
html.sidebar-collapsed-immediate .new-header {
  left: var(--spacing-sidebar-collapsed);
}
/* 头部响应式设计 */
/* ========================================
   View History 骨架屏样式
   ======================================== */
/* 骨架屏动画定义 */
@keyframes skeleton-wave {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
/* 文件名骨架屏布局 */
.filename-skeleton {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 操作按钮骨架屏布局 */
.action-skeleton {
    display: flex;
    gap: 8px;
    align-items: center;
}
/* 通用骨架屏 - 与真实元素高度匹配 */
.sk-text { height: 14px; width: 80%; display: block; }
.sk-text-sm { height: 12px; width: 60%; display: block; }
.sk-badge { height: 22px; width: 60px; border-radius: 11px; display: inline-block; }
.sk-icon { height: 36px; width: 36px; border-radius: var(--radius-md); display: inline-block; } /* 匹配 w-9 h-9 */
.sk-btn { height: 32px; width: 70px; border-radius: var(--radius-md); display: inline-block; } /* 匹配 py-1.5 按钮 */
.sk-circle { height: 40px; width: 40px; border-radius: 50%; display: inline-block; }
/* ========================================
   旧版骨架屏样式（保留兼容性）
   ======================================== */
/* 骨架屏容?- 初始状?*/
.history-skeleton {
    display: block;
    width: 100%;
    background: var(--color-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border-color, var(--color-border));
    margin-bottom: 1rem;
}
.history-skeleton.hidden {
    display: none !important;
}
/* 真实内容容器 - 初始隐藏 */
.history-content-wrapper {
    display: none;
    /* 删除动画，避免任何过渡效果 */
}
.history-content-wrapper.visible {
    display: block;
}
/* ========================================
   列宽定义 (匹配 view_history.css)
   ======================================== */
/* Check History Columns */
.check-skeleton .col-filename { width: 250px; flex-grow: 1; }
.check-skeleton .col-time { width: 90px; }
.check-skeleton .col-turnitin { width: 100px; }
.check-skeleton .col-rate { width: 80px; }
.check-skeleton .col-action { width: 120px; }
/* Reduce History Columns */
.reduce-skeleton .col-filename { width: 220px; flex-grow: 1; }
.reduce-skeleton .col-time { width: 90px; }
.reduce-skeleton .col-word { width: 80px; }
.reduce-skeleton .col-process { width: 80px; }
.reduce-skeleton .col-reduced { width: 90px; }
.reduce-skeleton .col-turnitin { width: 100px; }
.reduce-skeleton .col-rate { width: 80px; }
.reduce-skeleton .col-action { width: 120px; }
/* ChatPDF History Columns */
.chatpdf-skeleton .col-filename { width: 220px; flex-grow: 1; }
.chatpdf-skeleton .col-time { width: 90px; }
.chatpdf-skeleton .col-pages { width: 80px; }
.chatpdf-skeleton .col-size { width: 90px; }
.chatpdf-skeleton .col-chat-count { width: 80px; }
.chatpdf-skeleton .col-last-chat { width: 90px; }
.chatpdf-skeleton .col-action { width: 120px; }
/* ========================================
   Benefits页面骨架屏样?(usage-skeleton / payment-skeleton)
   使用百分比与真实数据表格保持一致，防止切换时抖?
   ======================================== */
/* 使用记录骨架?- 4? 日期(15%) | 类型(15%) | 详情(55%) | 变动(15%) */
.usage-skeleton .skeleton-cell-td:nth-child(1) {
    width: 15%;
    text-align: center;
}
.usage-skeleton .skeleton-cell-td:nth-child(2) {
    width: 15%;
    text-align: center;
}
.usage-skeleton .skeleton-cell-td:nth-child(3) {
    width: 55%;
    text-align: left;
}
.usage-skeleton .skeleton-cell-td:nth-child(4) {
    width: 15%;
    text-align: center;
}
/* 支付订单骨架?- 6? 订单时间(13%) | 订单信息(22%) | 套餐详情(27%) | 金额(12%) | 状?14%) | 操作(12%) */
.payment-skeleton .skeleton-cell-td:nth-child(1) {
    width: 13%;
    text-align: center;
}
.payment-skeleton .skeleton-cell-td:nth-child(2) {
    width: 22%;
    text-align: left;
}
.payment-skeleton .skeleton-cell-td:nth-child(3) {
    width: 27%;
    text-align: left;
}
.payment-skeleton .skeleton-cell-td:nth-child(4) {
    width: 12%;
    text-align: center;
}
.payment-skeleton .skeleton-cell-td:nth-child(5) {
    width: 14%;
    text-align: center;
}
.payment-skeleton .skeleton-cell-td:nth-child(6) {
    width: 12%;
    text-align: center;
}
/* 移动端适配 *//* ========================================
   认证页面布局修复样式
   (?auth-layout-fix.css 迁移)
   ======================================== */
/* 为认证页面提供默认的布局样式，不依赖JavaScript */
.auth-page {
    /* 确保认证页面始终居中显示，不受侧边栏影响 */
    margin-left: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100vh - 200px) !important;
    padding: 2rem 1rem !important;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
}
/* 确保认证容器在所有情况下都正确居?*/
.auth-container {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 1rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 0 !important;
    overflow: hidden !important;
}
/* 认证页面布局已移除 - 不再需要特殊处理 */
/* 确保通知在认证页面中正确显示 */
.auth-page .notification-container {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 9999 !important;
    max-width: 400px !important;
}
/* ========================================
   错误页面轻量级样?
   (?error-pages.css 迁移)
   ======================================== */
/* Logo container */
.error-page .logo-container {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
}
.error-page .logo-text {
    text-decoration: none;
    color: #000;
    transition: opacity 0.3s ease;
}
.error-page .logo-text:hover {
    opacity: 0.8;
}
.error-page .brand-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 2px;
    font-family: Cinzel, serif;
}
.error-page .brand-url {
    font-size: 0.8rem;
    color: var(--color-text-body);
    font-weight: 500;
    font-family: Cinzel, serif;
}
/* Main container */
.error-container {
    max-width: 500px;
    width: 90%;
    background: var(--color-secondary);
    border-radius: var(--radius-2xl);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    animation: fadeUp 0.6s ease-out;
    border: 1px solid #ddd;
}
/* Error content area */
.error-content {
    margin-bottom: 1.5rem;
}
/* Error icon area */
.error-icon {
    position: relative;
    margin-bottom: 1.5rem;
}
.error-icon i {
    font-size: 3rem;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
    display: block;
    animation: errorPulse 2s infinite;
}
.error-code {
    font-size: 4.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    margin-bottom: 0.8rem;
}
/* Error message */
.error-message h1 {
    font-size: 1.8rem;
    color: #000;
    margin-bottom: 0.8rem;
    font-weight: 600;
}
.error-message p {
    font-size: 1rem;
    color: var(--color-text-body);
    margin-bottom: 0.6rem;
}
.error-suggestion {
    font-size: 0.9rem !important;
    color: #777 !important;
}
/* Action buttons */
.error-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}
.error-page .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    min-width: 110px;
    justify-content: center;
}
.error-page .btn-primary {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: white;
}
.error-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 107, 0.3);
    background: linear-gradient(135deg, #ff5252 0%, #ff7043 100%);
}
.error-page .btn-secondary {
    background: var(--color-secondary);
    color: #000;
    border: 2px solid #000;
}
.error-page .btn-secondary:hover {
    background: var(--color-background-tertiary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Quick navigation */
.quick-links {
    margin-top: 1.8rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ddd;
}
.quick-links h3 {
    font-size: 1.1rem;
    color: #000;
    margin-bottom: 1.2rem;
    font-weight: 600;
}
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.8rem;
    max-width: 350px;
    margin: 0 auto;
}
.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.8rem;
    background: #f8f8f8;
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-dark);
    transition: all 0.3s ease;
    border: 2px solid #e0e0e0;
}
.quick-link:hover {
    background: #000;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: #000;
}
.quick-link i {
    font-size: 1.3rem;
}
.quick-link span {
    font-size: 0.8rem;
    font-weight: 500;
}
/* Footer */
.error-footer {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid #ddd;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}
/* errorFadeInUp 已合并到 fadeUp (第123行) */
@keyframes errorPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}
/* 错误页面暗色模式 */
html.dark .error-page {
    background: var(--color-background-primary);
    color: var(--color-text-primary);
}
html.dark .error-page .logo-text {
    color: var(--color-text-primary);
}
html.dark .error-page .brand-name {
    color: var(--color-text-primary);
}
html.dark .error-page .brand-url {
    color: var(--color-text-secondary);
}
html.dark .error-container {
    background: var(--color-background-secondary);
    border-color: var(--color-border-dark);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
html.dark .error-icon i {
    color: var(--color-text-primary);
}
html.dark .error-message h1 {
    color: var(--color-text-primary);
}
html.dark .error-message p {
    color: var(--color-text-body);
}
html.dark .error-suggestion {
    color: var(--color-text-secondary) !important;
}
html.dark .error-page .btn-secondary {
    background: var(--color-background-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border-dark);
}
html.dark .error-page .btn-secondary:hover {
    background: var(--color-neutral-300);
    border-color: var(--color-neutral-400);
}
html.dark .quick-links {
    border-top-color: var(--color-border-dark);
}
html.dark .quick-links h3 {
    color: var(--color-text-primary);
}
html.dark .quick-link {
    background: var(--color-background-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border-dark);
}
html.dark .quick-link:hover {
    background: var(--color-text-primary);
    color: var(--color-background-primary);
    border-color: var(--color-text-primary);
}
html.dark .error-footer {
    border-top-color: var(--color-border-dark);
    color: var(--color-text-secondary);
}
/* ========================================
   动态字体样?
   (?fonts-dynamic.css 迁移)
   ======================================== */
/* 基础字体样式 */
@font-face {
    font-family: 'system-ui';
    src: local('system-ui'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Arial');
}
/* 动态字体容?*/
.dynamic-font-container {
    font-family: 'system-ui', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* 字体加载状?*/
.font-loading {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.font-loaded {
    opacity: 1;
}
/* 防止字体闪烁 */
.font-display-swap {
    font-display: swap;
}
/* 响应式字体大?*//* ========================================
   Header语言切换器样?
   (?header-language-switcher.css 迁移)
   ======================================== */
/* Header中的语言切换器容?*/
.header-language-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    z-index: 100;
}
/* 当前语言按钮 */
.header-language-switcher .language-current-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    color: var(--color-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 32px;
    /* 移动端触摸优化 */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    user-select: none;
    -webkit-user-select: none;
}
.header-language-switcher .language-current-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.header-language-switcher .language-current-btn .flag {
    font-size: var(--font-size-base);
    line-height: 1;
    filter: none !important;
    color: initial !important;
}
.header-language-switcher .language-current-btn .lang-code {
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.5px;
}
.header-language-switcher .language-current-btn .dropdown-arrow {
    margin-left: 2px;
    transition: transform 0.2s ease;
}
.header-language-switcher.active .language-current-btn .dropdown-arrow {
    transform: rotate(180deg);
}
/* Header语言下拉菜单 */
.header-language-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--color-secondary);
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 1001;
    padding: 4px;
}
.header-language-switcher.active .header-language-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* 语言选项 */
.header-language-dropdown .language-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--color-dark);
    text-decoration: none;
    font-size: 13px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
    position: relative;
}
.header-language-dropdown .language-option:hover {
    background: var(--color-background-tertiary);
}
.header-language-dropdown .language-option.active {
    background: #FCF4C5;
    color: #8B6914;
    font-weight: 500;
}
.header-language-dropdown .language-option .flag {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    filter: none !important;
    color: initial !important;
}
.header-language-dropdown .language-option .name {
    flex: 1;
}
.header-language-dropdown .language-option .check {
    color: #52c41a;
    font-size: var(--font-size-sm);
    margin-left: auto;
}
/* 响应式调?*//* 与其他header元素对齐 */
.header-user-section {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* ========================================
   Header实时余额更新动画样式
   (?header-realtime-balance.css 迁移)
   ======================================== */
/* 余额更新动画 - 简化版，仅使用 transform */
.balance-updated {
    animation: balanceUpdatePulse 0.8s ease-out;
}
@keyframes balanceUpdatePulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    40% {
        transform: scale(1.08);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* 余额数值样?*/
.stat-value {
    transition: transform 0.2s ease, opacity 0.2s ease;
    font-weight: 600;
    display: inline-block;
}
/* 更新指示?- 简化动?*/
.balance-updating::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -8px;
    width: 6px;
    height: 6px;
    background: #ff6b6b;
    border-radius: 50%;
    animation: updateDot 1s ease-in-out infinite;
}
@keyframes updateDot {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}
/* 错误状?*/
.balance-error {
    color: #dc3545 !important;
    animation: balanceShake 0.4s ease-in-out;
}
@keyframes balanceShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}
/* 成功状?- 简化，?text-shadow */
.balance-success {
    animation: balanceSuccess 0.6s ease-out;
}
@keyframes balanceSuccess {
    0% {
        transform: scale(1);
        color: inherit;
    }
    50% {
        transform: scale(1.05);
        color: #28a745;
    }
    100% {
        transform: scale(1);
        color: inherit;
    }
}
/* 数据来源指示?*/
.balance-source-indicator {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.balance-source-indicator.database {
    background: #28a745;
}
.balance-source-indicator.session {
    background: #ffc107;
}
.balance-source-indicator.error {
    background: #dc3545;
}
/* Body 状态类 */
body.menu-open {
    overflow: hidden;
}
body.modal-open {
    overflow: hidden;
}
/* 响应式 - 移动端动画更简洁 *//* 减少动画偏好支持已移至合并媒体查询区域 */
/* ========================================
   语言选择圆形按钮样式
   (?language-switch.css 迁移)
   ======================================== */
.language-switch-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
    min-height: 50px;
}
.solver-language-selector-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    position: relative;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-dark);
}
.solver-language-selector-btn:hover {
    border-color: #FFE135;
    box-shadow: 0 2px 8px rgba(255, 225, 53, 0.3);
    transform: translateY(-1px);
}
.solver-language-selector-btn .language-text {
    user-select: none;
}
/* 语言选择下拉菜单 */
.solver-language-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    min-width: 160px;
}
.solver-language-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.solver-language-dropdown .language-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border-radius: var(--radius-lg);
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease;
    background: transparent;
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-secondary, #555);
    text-align: left;
}
.solver-language-dropdown .language-item:hover {
    background: rgba(0, 0, 0, 0.04);
}
.solver-language-dropdown .language-item.active {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-dark);
    font-weight: 500;
}
.solver-language-dropdown .solver-lang-code {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-text-muted, #999);
    text-transform: uppercase;
    width: 22px;
    flex-shrink: 0;
}
.solver-language-dropdown .language-item.active .solver-lang-code {
    color: var(--color-dark);
}
.solver-language-dropdown .solver-lang-name {
    font-size: 0.875rem;
}
/* 响应式设?*//* ========================================
   认证页面通用样式
   (?auth-common.css 迁移)
   ======================================== */
/* 主容?*/
.auth-container {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e0e0e0;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0;
    overflow: hidden;
}
/* 修改密码页面特殊布局 */
.auth-container.change-password {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}
/* 头部样式 */
.auth-header {
    text-align: center;
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    background: rgba(255, 255, 255, 0.8);
}
/* 修改密码页面头部调整 */
.auth-container.change-password .auth-header {
    padding: 1.5rem 1.5rem 1rem;
    flex-shrink: 0;
}
.auth-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: #374151;
}
/* 修改密码页面标题调整 */
.auth-container.change-password .auth-header h2 {
    font-size: 1.25rem;
}
.auth-header p {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}
/* 修改密码页面描述调整 */
.auth-container.change-password .auth-header p {
    font-size: 0.8rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}
.auth-toggle {
    font-size: 0.875rem;
}
/* 修改密码页面切换链接调整 */
.auth-container.change-password .auth-toggle {
    font-size: 0.8rem;
}
.auth-toggle span {
    color: var(--color-text-secondary);
}
.auth-toggle a {
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}
.auth-toggle a:hover {
    border-bottom-color: #374151;
}
/* 表单容器 */
.auth-form {
    padding: 2rem;
}
/* 修改密码页面表单调整 */
.auth-container.change-password .auth-form {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* 注册页面表单调整 */
.auth-container.register .auth-form {
    padding: 1.5rem;
}
/* 表单?*/
.auth-form .form-group {
    position: relative;
    margin-bottom: 1.5rem;
}
/* 修改密码和注册页面表单组调整 */
.auth-container.change-password .form-group,
.auth-container.register .form-group {
    margin-bottom: 1rem;
}
/* 修改密码页面表单组特殊调?*/
.auth-container.change-password .form-group {
    margin-bottom: 0;
}
.auth-form .form-group .icon {
    position: absolute;
    left: 1rem;
    top: 1rem;
    pointer-events: none;
    font-size: 1rem;
}
/* 修改密码页面图标调整 */
.auth-container.change-password .form-group .icon {
    left: 0.875rem;
    top: 0.875rem;
    font-size: 0.9rem;
}
/* 注册页面图标调整 */
.auth-container.register .form-group .icon {
    top: 0.75rem;
}
.auth-form .form-group input {
    width: 100%;
    padding: 1rem 1rem 1rem 2.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.375rem;
    font-size: var(--font-size-base);
    transition: all 0.3s ease;
    background: var(--color-secondary);
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
/* 修改密码页面输入框调?*/
.auth-container.change-password .form-group input {
    padding: 0.875rem 0.875rem 0.875rem 2.25rem;
}
/* 注册页面输入框调?*/
.auth-container.register .form-group input {
    padding: 0.75rem 1rem 0.75rem 2.5rem;
}
.auth-form .form-group input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}
.auth-form .form-group input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
    -webkit-text-fill-color: #374151;
}
/* 密码显示/隐藏按钮 */
.pwd-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
/* 修改密码页面密码切换按钮调整 */
.auth-container.change-password .pwd-toggle {
    right: 0.875rem;
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
}
/* 注册页面密码切换按钮调整 */
.auth-container.register .pwd-toggle {
    width: 36px;
    height: 36px;
}
.pwd-toggle:hover {
    opacity: 1;
}
/* 错误提示 */
.auth-form .error {
    display: none;
    color: #ef4444;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    padding-left: 0.25rem;
}
/* 修改密码页面错误提示调整 */
.auth-container.change-password .error {
    font-size: 0.7rem;
}
.auth-form input.invalid + .error,
.auth-form input.invalid ~ .error {
    display: block;
}
/* 验证码按钮（注册页面专用?*/
.verification-btn {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%);
    border: 1px solid #e0e0e0;
    border-radius: 0.375rem;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.verification-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ddd6fe 0%, #f0e6ff 100%);
    border-color: #c7d2fe;
}
.verification-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-background-tertiary);
}
/* Turnstile容器（注册页面专用） */
.turnstile {
    margin-bottom: 1rem;
    min-height: 65px;
    display: flex;
    justify-content: center;
}
/* 表单选项（登录页面专用） */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}
.checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-text-secondary);
}
.checkbox input {
    margin-right: 0.5rem;
}
.form-options a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}
.form-options a:hover {
    color: #374151;
}
/* 提交按钮 */
.submit-btn {
    width: 100%;
    padding: 1rem;
    min-height: 48px;
    background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 50%, #fce7f3 100%);
    border: none;
    border-radius: 2rem;
    color: #374151;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* 修改密码页面提交按钮调整 */
.auth-container.change-password .submit-btn {
    padding: 0.875rem;
    min-height: 44px;
    margin-top: 0.5rem;
}
/* 注册页面提交按钮调整 */
.auth-container.register .submit-btn {
    padding: 0.875rem;
    min-height: 44px;
}
.submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ddd6fe 0%, #f0e6ff 50%, #fae8f5 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.submit-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* 底部 */
.auth-footer {
    text-align: center;
    padding: 1.5rem 2rem 2rem;
    border-top: 1px solid #e0e0e0;
    background: rgba(255, 255, 255, 0.8);
}
/* 修改密码页面底部调整 */
.auth-container.change-password .auth-footer {
    padding: 1rem 1.5rem;
    flex-shrink: 0;
}
/* 注册页面底部调整 */
.auth-container.register .auth-footer {
    padding: 1rem 1.5rem 1.5rem;
}
.auth-footer a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s;
}
/* 修改密码页面底部链接调整 */
.auth-container.change-password .auth-footer a {
    font-size: 0.8rem;
}
.auth-footer a:hover {
    color: #374151;
}
/* 二维码样式（登录和注册页面） */
.qrcode {
    margin-top: 1rem;
    display: none;
}
.qrcode.show {
    display: block;
}
.qrcode img {
    width: 120px;
    height: 120px;
    border-radius: 0.25rem;
    border: 1px solid #e0e0e0;
    padding: 0.5rem;
    background: var(--color-secondary);
}
/* 认证页面响应式设计 - max-width: 360px 已移至合并媒体查询区域 */
/* 横屏模式优化（主要针对修改密码页面） */
@media (max-height: 600px) and (orientation: landscape) {
    .auth-container.change-password {
        padding: 0.5rem;
        align-items: flex-start;
        padding-top: 1rem;
        max-height: calc(100vh - 1rem);
    }
    .auth-container.change-password .auth-header {
        padding: 0.75rem 1.5rem 0.5rem;
    }
    .auth-container.change-password .auth-header h2 {
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
    }
    .auth-container.change-password .auth-header p {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }
    .auth-container.change-password .auth-form {
        padding: 1rem 1.5rem;
        gap: 0.75rem;
    }
    .auth-container.change-password .form-group input {
        padding: 0.75rem 0.75rem 0.75rem 2rem;
    }
    .auth-container.change-password .submit-btn {
        padding: 0.75rem;
        min-height: 40px;
        margin-top: 0.25rem;
    }
    .auth-container.change-password .auth-footer {
        padding: 0.75rem 1.5rem;
    }
}
/* 通知动画 */
@keyframes authSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* .sidebar-actions 旧样式已删除，使用 .sidebar-quick-actions 替代 */
/* 聊天管理页面样式已下沉到 static/css/chat-management.css，避免全站 tailwind.css 重复加载。 */
/* ==================== Privacy Policy Page Styles ==================== */
/* Migrated from privacy-policy.css */
/* ==================== AI降重功能样式 ==================== */
/* Migrated from reduce-ai.css */
/* AI降重专用CSS变量 */
:root {
  --reduce-ai-deep-orange: #FF5722;
  --reduce-ai-deep-orange-light: #FFCCBC;
}
/* 渐变色按钮样?*/
/* .btn-gradient 已在第429行定义，此处重复定义已删除 */
/* 工作区域样式 */
.citation-workspace-vertical {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.citation-workspace-vertical .new-card .new-card-content {
  padding: 0.75rem 0.75rem 1rem 0.75rem;
}
.citation-input-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 防止内容撑开页面导致水平滚动 */
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.input-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
.citation-label {
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 1rem;
  font-family: var(--font-family-base);
}
/* 上传画布样式 */
.upload-canvas {
  width: 100%;
  min-height: 469px;
  height: 469px;
  position: relative;
  box-sizing: border-box;
  /* 防止内容撑开页面导致水平滚动 */
  max-width: 100%;
  overflow: hidden;
}
.file-upload-zone {
  border: 1px dashed var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
  text-align: center;
  background-color: #fafafa;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 469px;
  height: 469px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  box-sizing: border-box;
}
.file-upload-zone:hover,
.file-upload-zone.dragover {
  border-color: var(--color-primary);
  background-color: rgba(0, 0, 0, 0.02);
}
.upload-main-content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.upload-icon {
  font-size: 2.5rem;
  color: var(--color-text-muted);
  margin-right: 1rem;
  margin-bottom: 0;
  flex-shrink: 0;
}
.upload-text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.upload-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}
.upload-description {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}
.file-input {
  display: none;
}
/* Tips 提示区域样式 */
.upload-tips {
  width: 100%;
  margin: 1rem 0;
  padding: 1rem;
  background: linear-gradient(135deg, var(--color-background-tertiary) 0%, #e9ecef 100%);
  border-radius: var(--radius-xl);
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.tips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  max-width: 100%;
}
.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  font-size: 0.85rem;
  line-height: 1.4;
}
.tip-item:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.tip-item i {
  color: var(--color-primary);
  font-size: 1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.tip-item span {
  color: #495057;
  font-weight: 500;
  line-height: 1.3;
}
/* 简化提示条样式 */
.upload-tip-simple {
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
  background: rgba(248, 249, 250, 0.6);
  border-radius: var(--radius-md);
  border: 1px solid rgba(222, 226, 230, 0.5);
  text-align: center;
  opacity: 0.7;
}
.upload-tip-simple span {
  font-size: 0.8rem;
  color: #6c757d;
  line-height: 1.3;
}
/* 文件信息显示 */
.file-info-display {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
  background: var(--color-secondary);
  min-height: 469px;
  height: 469px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
  box-sizing: border-box;
}
.file-info-display:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.file-upload-success {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.file-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  gap: 1rem;
}
.file-details-enhanced {
  flex: 1;
  text-align: left;
  min-width: 0;
}
.upload-success-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.success-icon {
  font-size: 1.2rem;
  color: #10b981;
  animation: successPulse 2s ease-in-out infinite;
}
@keyframes successPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.file-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  width: 100%;
}
.new-file-name-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
.new-file-name {
  font-weight: 600;
  color: #374151;
  font-size: 0.95rem;
  word-break: break-word;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}
.new-file-size {
  font-size: 0.85rem;
  color: #6b7280;
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
}
.reupload-btn {
  padding: 0.5rem 1rem;
  background: var(--color-background-tertiary);
  color: #6b7280;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}
.reupload-btn:hover {
  background: var(--color-border);
  color: #374151;
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
/* 文本预览区域 */
.file-text-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.preview-header {
  margin-bottom: 0.5rem;
}
.preview-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
}
.preview-content {
  flex: 1;
  background: #f9fafb;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #374151;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--font-family-base);
  min-height: 0;
  max-height: 200px;
  cursor: default;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  caret-color: transparent;
}
.preview-content::-webkit-scrollbar {
  width: 6px;
}
.preview-content::-webkit-scrollbar-track {
  background: var(--color-background-tertiary);
  border-radius: 3px;
}
.preview-content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.preview-content::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}
.preview-content::-webkit-scrollbar-thumb:active {
  background: #6b7280;
}
/* 文本输入区域 */
.citation-textarea {
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  font-size: 0.875rem;
  line-height: 1.6;
  resize: vertical;
  transition: all 0.2s ease;
  min-height: 360px;
  height: 360px;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-family-base);
  background: var(--color-secondary);
}
.citation-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.citation-textarea::placeholder {
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
}
/* 全局文本输入框滚动条（浅色） */
/* Global textarea scrollbar (light/dark) */
.citation-textarea,
textarea.citation-textarea,
#textInput.citation-textarea {
  --citation-scrollbar-track: #f1f5f9;
  --citation-scrollbar-thumb: #9ca3af;
  --citation-scrollbar-thumb-hover: #6b7280;
  scrollbar-width: thin;
  scrollbar-color: var(--citation-scrollbar-thumb) var(--citation-scrollbar-track);
  color-scheme: light;
}
.citation-textarea::-webkit-scrollbar,
textarea.citation-textarea::-webkit-scrollbar,
#textInput.citation-textarea::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.citation-textarea::-webkit-scrollbar-track,
textarea.citation-textarea::-webkit-scrollbar-track,
#textInput.citation-textarea::-webkit-scrollbar-track {
  background: var(--citation-scrollbar-track);
  border-radius: 9999px;
}
.citation-textarea::-webkit-scrollbar-thumb,
textarea.citation-textarea::-webkit-scrollbar-thumb,
#textInput.citation-textarea::-webkit-scrollbar-thumb {
  background: var(--citation-scrollbar-thumb);
  border-radius: 9999px;
}
.citation-textarea::-webkit-scrollbar-thumb:hover,
textarea.citation-textarea::-webkit-scrollbar-thumb:hover,
#textInput.citation-textarea::-webkit-scrollbar-thumb:hover {
  background: var(--citation-scrollbar-thumb-hover);
}
html.dark .citation-textarea,
html[data-theme="dark"] .citation-textarea,
body.dark .citation-textarea,
body[data-theme="dark"] .citation-textarea {
  --citation-scrollbar-track: #171717;
  --citation-scrollbar-thumb: #525252;
  --citation-scrollbar-thumb-hover: #737373;
  scrollbar-color: var(--citation-scrollbar-thumb) var(--citation-scrollbar-track);
  color-scheme: dark;
}
/* 已有文档选择区域 */
.existing-doc-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 469px;
  height: 469px;
  padding: 2rem;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.existing-doc-container:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
/* 字数统计区域 */
.word-count-section {
  margin-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-direction: row;
}
.word-count-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  flex: 1;
}
.word-count {
  font-size: 0.875rem;
  color: #6c757d;
  font-weight: 500;
}
.word-count.warning {
  color: #dc3545;
}
.submit-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.submit-btn {
  min-width: 120px;
}
/* 注册引导 */
.register-prompt {
  font-size: 0.8rem;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.button-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.register-btn {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: linear-gradient(135deg, #FFE135 0%, #FFC107 50%, #FF9800 100%);
  color: var(--color-dark);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  overflow: hidden;
}
.register-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}
.register-btn:hover::before {
  left: 100%;
}
.register-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(255, 152, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: var(--color-dark);
  text-decoration: none;
  background: linear-gradient(135deg, #FFDB1F 0%, #FFB300 50%, #FF8C00 100%);
}
/* 单词数警告弹?*/
.word-warning-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999 !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.word-warning-content {
  background: white;
  border-radius: var(--radius-2xl);
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s ease;
}
.word-warning-modal.show {
  display: flex !important;
}
.word-warning-modal.show .word-warning-content {
  transform: scale(1);
  opacity: 1;
}
.warning-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}
.warning-message {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.warning-close-btn {
  background: linear-gradient(45deg, #FF5722, #FF9800);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.warning-close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
}
/* AI降重响应式设计 */
/* ==================== Chat With PDF Fixed Styles ==================== */
/* Migrated from chat-with-pdf-fixed.css */
/* PDF specific colors */
:root {
    --pdf-primary: #000000;
    --pdf-primary-hover: var(--color-dark);
    --pdf-success: #10b981;
    --pdf-warning: #f59e0b;
    --pdf-error: #ef4444;
}
/* ==================== Chat With PDF Core Styles ==================== */
/* Migrated from chat-with-pdf.css */
/* PDF文本层样?- 核心功能 */
.textLayer {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    line-height: 1.0 !important;
    text-align: initial !important;
    white-space: pre !important;
    pointer-events: auto !important;
    z-index: 2 !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    word-wrap: normal !important;
    word-break: normal !important;
}
.textLayer span,
.textLayer br {
    color: transparent !important;
    position: absolute !important;
    white-space: pre !important;
    cursor: text !important;
    transform-origin: 0% 0% !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}
.textLayer span::before,
.textLayer span::after,
.textLayer br::before,
.textLayer br::after {
    content: none !important;
}
.textLayer ::selection {
    background: rgba(59, 130, 246, 0.3) !important;
    color: transparent !important;
}
.textLayer ::-moz-selection {
    background: rgba(59, 130, 246, 0.3) !important;
    color: transparent !important;
}
/* PDF页面容器 */
.pdf-page-wrapper {
    position: relative;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: white;
}
.pdf-page-canvas {
    display: block;
    background: white;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
.pdf-page-label {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    pointer-events: none;
    user-select: none;
}
/* 文本选择菜单 */
.text-selection-menu {
    position: fixed;
    z-index: 10000;
    background: var(--color-secondary);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 8px;
    min-width: 280px;
    display: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.text-selection-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation: menuFadeIn 0.2s ease-out;
}
@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.selection-menu-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.selection-menu-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    background: #f9fafb;
    border-radius: 8px 8px 0 0;
}
.selection-text-preview {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}
.selection-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
}
.selection-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: var(--font-size-sm);
    color: #1f2937;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.selection-action-btn:hover {
    background: var(--color-background-tertiary);
    color: #111827;
    transform: translateX(2px);
}
.selection-action-btn:active {
    background: var(--color-border);
    transform: translateX(1px);
}
.selection-action-btn i {
    width: 18px;
    font-size: var(--font-size-base);
    color: #6b7280;
    transition: color 0.15s ease;
    text-align: center;
}
.selection-action-btn:hover i {
    color: #111827;
}
.selection-action-btn span {
    flex: 1;
    font-weight: 500;
}
.selection-action-btn[data-action="explain"]:hover i {
    color: #f59e0b;
}
.selection-action-btn[data-action="summarize"]:hover i {
    color: #3b82f6;
}
.selection-action-btn[data-action="translate"]:hover i {
    color: #8b5cf6;
}
.selection-action-btn[data-action="copy"]:hover i {
    color: #10b981;
}
/* 搜索高亮 */
.textLayer.search-active {
    background: rgba(255, 255, 0, 0.2) !important;
    opacity: 0.3 !important;
}
.search-highlight {
    background-color: rgba(255, 255, 0, 0.6) !important;
}
/* PDF容器布局 */
#pdfContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#pdfContainer.has-pdf {
    display: block !important;
    overflow-y: auto;
    overflow-x: hidden;
}
#pdfViewerContainer {
    width: 100%;
}
#pdfPagesContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}
/* 聊天消息样式 */
.chat-message {
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
}
.chat-message.user {
    flex-direction: row-reverse;
}
.chat-message .content {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: var(--radius-xl);
    background: var(--color-background-tertiary);
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.chat-message.user .content {
    background: #FCF4C5;
    color: var(--color-dark);
}
.chat-message .message-title {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    font-weight: 500;
}
.chat-message.user .message-title {
    color: rgba(51, 51, 51, 0.7);
}
.chat-message .message-text {
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
.chat-message .message-time {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}
.chat-message.user .message-time {
    color: rgba(51, 51, 51, 0.6);
}
html.dark .chat-message .content {
    background: #1f1f1f;
    color: var(--color-text-primary);
}
html.dark .chat-message.user .content {
    background: #3b3b2a;
    color: var(--color-text-primary);
}
html.dark .chat-message .message-title,
html.dark .chat-message .message-time {
    color: #a3a3a3;
}
html.dark .chat-message.user .message-title,
html.dark .chat-message.user .message-time {
    color: #cfcfcf;
}
/* 打字动画 */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: var(--color-background-tertiary);
    border-radius: var(--radius-xl);
    width: fit-content;
}
.typing-indicator span {
    width: 8px;
    height: 8px;
    background: var(--color-text-secondary);
    border-radius: 50%;
    animation: typing 1.4s infinite;
}
.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.3;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}
/* 拖拽上传 */
#pdfContainer.drag-over {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 2px dashed #3b82f6 !important;
}

/* PDF 按钮 - 黄色主题（特殊品牌色，必须自定义） */
.pdf-btn-primary {
    background-color: #FFE135 !important;
    border-color: #FFE135 !important;
    color: #333 !important;
    border-radius: 15px !important;
    padding: 10px 20px !important;
    width: auto !important;
    height: auto !important;
    transition: all 0.3s ease;
}

.pdf-btn-primary:hover:not(:disabled) {
    background-color: #FFDB1F !important;
    border-color: #FFDB1F !important;
    box-shadow: 0 4px 12px rgba(255, 225, 53, 0.4) !important;
    transform: translateY(-1px);
}

.pdf-btn-primary:disabled {
    background-color: #FCF4C5 !important;
    border-color: #FCF4C5 !important;
    opacity: 1 !important;
}

.pdf-btn-primary.empty-input {
    background-color: #FCF4C5 !important;
    border-color: #FCF4C5 !important;
}

.pdf-btn-primary.empty-input:hover {
    background-color: #FCF4C5 !important;
    border-color: #FCF4C5 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* PDF 选择文件按钮 - 与聊天模式黑色按钮风格一致 */
.pdf-select-file-btn {
    background-color: #2D2D2D !important;
    border: 2px solid #2D2D2D !important;
    color: #fff !important;
    border-radius: 24px !important;
    padding: 10px 24px !important;
    min-height: 45px;
    box-shadow: 0 4px 12px rgba(45, 45, 45, 0.3) !important;
}

.pdf-select-file-btn i,
.pdf-select-file-btn span {
    color: #fff !important;
}

.pdf-select-file-btn:hover:not(:disabled) {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    box-shadow: 0 6px 16px rgba(45, 45, 45, 0.4) !important;
    transform: translateY(-2px);
}

.pdf-select-file-btn:active:not(:disabled) {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 2px 8px rgba(45, 45, 45, 0.3) !important;
}

/* PDF 聊天输入框 - 黄色 focus 边框 */
#pdfChatInput:focus {
    outline: none;
    border-color: #FFE135 !important;
    box-shadow: 0 0 0 3px rgba(255, 225, 53, 0.2) !important;
}

/* PDF 段落交互 - 高亮效果 */
.pdf-paragraph {
    transition: background-color 0.2s ease;
}

.pdf-paragraph:hover {
    background-color: rgba(255, 255, 0, 0.1) !important;
}

.pdf-paragraph.selected {
    background-color: rgba(255, 255, 0, 0.2) !important;
}

/* Chat PDF响应式设?*//* 辅助工具?*/
.no-select {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}
.allow-select {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}
/* 滚动条样?*/
#pdfContainer::-webkit-scrollbar {
    width: 8px;
}
#pdfContainer::-webkit-scrollbar-track {
    background: #f1f1f1;
}
#pdfContainer::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: var(--radius-sm);
}
#pdfContainer::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-body);
}
#pdfContainer {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}
html.dark #pdfContainer {
    scrollbar-color: #525252 #171717;
}
html.dark #pdfContainer::-webkit-scrollbar-track {
    background: #171717;
}
html.dark #pdfContainer::-webkit-scrollbar-thumb {
    background: #525252;
}
html.dark #pdfContainer::-webkit-scrollbar-thumb:hover {
    background: #737373;
}
/* 性能优化 */
.pdf-page-canvas {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.textLayer {
    will-change: opacity;
}
/* 语言选择圆形按钮样式 */
.pdf-language-selector-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    position: relative;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-dark);
}
/* ==================== 统一 Tooltip 系统 ==================== */
/*
 * 使用方法:
 *   data-tooltip="提示文字"              - 添加提示内容
 *   data-tooltip-pos="top|right|bottom|left|auto" - 位置控制 (默认top)
 *   data-tooltip-delay="300"             - 延迟显示(ms)
 *   data-tooltip-arrow="false"           - 隐藏箭头
 *
 * 示例: <button data-tooltip="复制" data-tooltip-pos="bottom">复制</button>
 */
[data-tooltip] {
    position: relative;
}
/* 排除 .tool-switcher-item 和 .output-tab-btn，它们使用自定义tooltip样式 */
[data-tooltip]:not(.tool-switcher-item):not(.output-tab-btn)::before {
    content: attr(data-tooltip);
    position: absolute;
    padding: 6px 12px;
    background: rgba(15, 15, 15, 0.95);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
    width: max-content;
    border-radius: var(--radius-md, 6px);
    z-index: var(--z-tooltip, 1060);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    max-width: 280px;
    text-align: center;
}
[data-tooltip]:not(.tool-switcher-item):not(.output-tab-btn)::after {
    content: "";
    position: absolute;
    border: 5px solid transparent;
    z-index: var(--z-tooltip, 1060);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
/* 隐藏箭头选项 */
[data-tooltip][data-tooltip-arrow="false"]::after {
    display: none;
}
/* Hover 状态 */
/* Sidebar、Header、tool-switcher-item 内的元素禁用CSS hover，只使用JavaScript控制或自定义样式 */
[data-tooltip]:not(#sidebar [data-tooltip]):not(.lightweight-header [data-tooltip]):not(.header [data-tooltip]):not(.tool-switcher-item):hover::before,
[data-tooltip]:not(#sidebar [data-tooltip]):not(.lightweight-header [data-tooltip]):not(.header [data-tooltip]):not(.tool-switcher-item):hover::after,
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-show="true"]::before,
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-show="true"]::after {
    opacity: 1;
    visibility: visible;
}
/* ---- 位置: 上方 (默认) ---- */
[data-tooltip]:not(.tool-switcher-item):not([data-tooltip-pos])::before,
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="top"]::before,
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="auto"]::before {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}
[data-tooltip]:not(#sidebar [data-tooltip]):not(.tool-switcher-item):not([data-tooltip-pos]):hover::before,
[data-tooltip]:not(#sidebar [data-tooltip]):not(.tool-switcher-item)[data-tooltip-pos="top"]:hover::before,
[data-tooltip]:not(#sidebar [data-tooltip]):not(.tool-switcher-item)[data-tooltip-pos="auto"]:hover::before,
[data-tooltip]:not(.tool-switcher-item):not([data-tooltip-pos])[data-tooltip-show="true"]::before,
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="top"][data-tooltip-show="true"]::before,
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="auto"][data-tooltip-show="true"]::before {
    transform: translateX(-50%) translateY(0);
}
[data-tooltip]:not(.tool-switcher-item):not([data-tooltip-pos])::after,
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="top"]::after,
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="auto"]::after {
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border-top-color: rgba(15, 15, 15, 0.95);
}
/* ---- 位置: 右侧 ---- */
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="right"]::before {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}
[data-tooltip]:not(#sidebar [data-tooltip]):not(.tool-switcher-item)[data-tooltip-pos="right"]:hover::before,
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="right"][data-tooltip-show="true"]::before {
    transform: translateY(-50%) translateX(0);
}
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="right"]::after {
    left: calc(100% + 3px);
    top: 50%;
    transform: translateY(-50%);
    border-right-color: rgba(15, 15, 15, 0.95);
}
/* ---- 位置: 下方 ---- */
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="bottom"]::before {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}
[data-tooltip]:not(#sidebar [data-tooltip]):not(.tool-switcher-item)[data-tooltip-pos="bottom"]:hover::before,
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="bottom"][data-tooltip-show="true"]::before {
    transform: translateX(-50%) translateY(0);
}
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="bottom"]::after {
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: rgba(15, 15, 15, 0.95);
}
/* ---- 位置: 左侧 ---- */
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="left"]::before {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}
[data-tooltip]:not(#sidebar [data-tooltip]):not(.tool-switcher-item)[data-tooltip-pos="left"]:hover::before,
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="left"][data-tooltip-show="true"]::before {
    transform: translateY(-50%) translateX(0);
}
[data-tooltip]:not(.tool-switcher-item)[data-tooltip-pos="left"]::after {
    right: calc(100% + 3px);
    top: 50%;
    transform: translateY(-50%);
    border-left-color: rgba(15, 15, 15, 0.95);
}
/* ---- 禁用状态不显示 tooltip ---- */
[data-tooltip][disabled]::before,
[data-tooltip][disabled]::after,
[data-tooltip].disabled::before,
[data-tooltip].disabled::after {
    display: none;
}
/* ---- 侧边栏内的 tooltip 需要更高的 z-index 以避免被遮挡 ---- */
#sidebar [data-tooltip]::before,
#sidebar [data-tooltip]::after,
.sidebar [data-tooltip]::before,
.sidebar [data-tooltip]::after {
    z-index: 9999;
}
/* ---- 触摸设备优化 ---- */
@media (hover: none) {
    [data-tooltip]::before,
    [data-tooltip]::after {
        display: none;
    }
}
/* ==================== Tooltip 系统结束 ==================== */
.pdf-language-selector-btn:hover {
    border-color: #FFE135;
    box-shadow: 0 2px 8px rgba(255, 225, 53, 0.3);
    transform: translateY(-1px);
}
.pdf-language-selector-btn .language-text {
    user-select: none;
}
/* 语言选择下拉菜单（向上弹出） */
.pdf-language-dropdown-upward {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.15);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    min-width: 160px;
}
.pdf-language-dropdown-upward.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pdf-language-dropdown-upward .language-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border-radius: var(--radius-lg);
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease;
    background: transparent;
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-secondary, #555);
    text-align: left;
}
.pdf-language-dropdown-upward .language-item:hover {
    background: rgba(0, 0, 0, 0.04);
}
.pdf-language-dropdown-upward .language-item.active {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-dark);
    font-weight: 500;
}
.pdf-language-dropdown-upward .pdf-lang-code {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-text-muted, #999);
    text-transform: uppercase;
    width: 22px;
    flex-shrink: 0;
}
.pdf-language-dropdown-upward .language-item.active .pdf-lang-code {
    color: var(--color-dark);
}
.pdf-language-dropdown-upward .pdf-lang-name {
    font-size: 0.875rem;
}
/* PDF页面专用AI模型选择器样?*/
.pdf-model-selector-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    outline: none;
    overflow: hidden;
    position: relative;
}
/* tooltip 样式已合并到统一的 .tooltip-top 选择器 */
.pdf-model-selector-btn:hover {
    background: #f8f9fa;
    border-color: #ddd;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.pdf-model-selector-btn .model-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}
/* AI模型下拉菜单（向上弹出） */
.pdf-ai-model-dropdown-upward {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    min-width: 400px;
}
.pdf-ai-model-dropdown-upward.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pdf-ai-model-dropdown-upward .ai-model-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.pdf-ai-model-dropdown-upward .ai-model-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pdf-ai-model-dropdown-upward .ai-model-column-header {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    padding: 0 8px;
}
.pdf-ai-model-dropdown-upward .ai-model-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    border: 2px solid transparent;
    position: relative;
}
.pdf-ai-model-dropdown-upward .ai-model-item:hover {
    background: #f8f9fa;
    border-color: transparent;
}
.pdf-ai-model-dropdown-upward .ai-model-item.active {
    background: #FCF4C5;
    border-color: transparent;
}
.pdf-ai-model-dropdown-upward .ai-model-item .ai-model-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}
.pdf-ai-model-dropdown-upward .ai-model-item span {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-dark);
    flex: 1;
    white-space: nowrap;
}
/* 锁定覆盖?*/
.pdf-ai-model-dropdown-upward .ai-model-locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(0.5px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}
.pdf-ai-model-dropdown-upward .ai-model-locked-overlay:hover {
    background: rgba(252, 244, 197, 0.75);
    backdrop-filter: blur(1px);
}
.pdf-ai-model-dropdown-upward .ai-model-locked-overlay i {
    font-size: var(--font-size-2xl);
    color: var(--color-text-secondary);
    transition: all 0.3s ease;
}
.pdf-ai-model-dropdown-upward .ai-model-locked-overlay:hover i {
    color: var(--color-dark);
    transform: scale(1.1);
}
.pdf-ai-model-dropdown-upward .ai-model-locked-overlay .locked-text {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-align: center;
    padding: 0 12px;
    line-height: 1.4;
    transition: all 0.3s ease;
}
.pdf-ai-model-dropdown-upward .ai-model-locked-overlay:hover .locked-text {
    color: var(--color-dark);
    font-weight: 600;
}

/* --- pdf模型选择下拉菜单 暗色模式 --- */
html.dark .pdf-ai-model-dropdown-upward {
    background: #1e1e1e;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

html.dark .pdf-ai-model-dropdown-upward .ai-model-column-header {
    color: #737373;
}

html.dark .pdf-ai-model-dropdown-upward .ai-model-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

html.dark .pdf-ai-model-dropdown-upward .ai-model-item.active {
    background: #3d3520;
}

html.dark .pdf-ai-model-dropdown-upward .ai-model-locked-overlay {
    background: rgba(30, 30, 30, 0.65);
}

html.dark .pdf-ai-model-dropdown-upward .ai-model-locked-overlay:hover {
    background: rgba(61, 53, 32, 0.75);
}

html.dark .pdf-ai-model-dropdown-upward .ai-model-item[data-model^="openai/"] .ai-model-icon,
html.dark .pdf-ai-model-dropdown-upward .ai-model-item[data-model^="deepseek/"] .ai-model-icon {
    filter: brightness(0) invert(1);
}

/* --- pdf模型选择按钮 暗色模式 --- */
html.dark .pdf-model-selector-btn {
    background: #262626;
    border-color: #404040;
}

html.dark .pdf-model-selector-btn:hover {
    background: #333333;
    border-color: #525252;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --- pdf语言选择按钮 暗色模式补充 --- */
html.dark .pdf-language-selector-btn {
    color: #d4d4d4;
}

html.dark .pdf-language-selector-btn:hover {
    border-color: #FCF4C5;
    box-shadow: 0 2px 8px rgba(252, 244, 197, 0.2);
}

/* --- pdf语言下拉菜单 暗色模式补充 --- */
html.dark .pdf-language-dropdown-upward .language-item {
    color: #a3a3a3;
}

html.dark .pdf-language-dropdown-upward .language-item.active {
    background: #3d3520;
    color: #e5e5e5;
}

html.dark .pdf-language-dropdown-upward .language-item.active .pdf-lang-code {
    color: #e5e5e5;
}

html.dark .pdf-language-dropdown-upward .pdf-lang-code {
    color: #737373;
}

html.dark .pdf-language-dropdown-upward .pdf-lang-name {
    color: inherit;
}

/* --- pdf模型下拉菜单文字 暗色模式补充 --- */
html.dark .pdf-ai-model-dropdown-upward .ai-model-item span {
    color: #d4d4d4;
}

/* --- pdf发送按钮 暗色模式 --- */
html.dark .pdf-btn-primary {
    background-color: #FCF4C5 !important;
    border-color: #FCF4C5 !important;
    color: #1e1e1e !important;
}

html.dark .pdf-btn-primary:hover:not(:disabled) {
    background-color: #FFE135 !important;
    border-color: #FFE135 !important;
    box-shadow: 0 4px 12px rgba(252, 244, 197, 0.3) !important;
}

html.dark .pdf-btn-primary:disabled {
    background-color: #3d3520 !important;
    border-color: #3d3520 !important;
    color: #737373 !important;
}

html.dark .pdf-btn-primary.empty-input {
    background-color: #3d3520 !important;
    border-color: #3d3520 !important;
    color: #737373 !important;
}

html.dark .pdf-btn-primary.empty-input:hover {
    background-color: #3d3520 !important;
    border-color: #3d3520 !important;
}

/* --- pdf选择文件按钮 暗色模式 --- */
html.dark .pdf-select-file-btn {
    background-color: #e5e5e5 !important;
    border-color: #e5e5e5 !important;
    color: #1e1e1e !important;
}

html.dark .pdf-select-file-btn i,
html.dark .pdf-select-file-btn span {
    color: #111 !important;
}

html.dark .pdf-select-file-btn:hover {
    background-color: #d4d4d4 !important;
    border-color: #d4d4d4 !important;
}

/* --- pdf锁定覆盖层 暗色模式补充 --- */
html.dark .pdf-ai-model-dropdown-upward .ai-model-locked-overlay i {
    color: #737373;
}

html.dark .pdf-ai-model-dropdown-upward .ai-model-locked-overlay:hover i {
    color: #FCF4C5;
}

html.dark .pdf-ai-model-dropdown-upward .ai-model-locked-overlay .locked-text {
    color: #737373;
}

html.dark .pdf-ai-model-dropdown-upward .ai-model-locked-overlay:hover .locked-text {
    color: #FCF4C5;
}

/* ==================== Chat With PDF Mobile Styles ==================== */
/* Migrated from chat-with-pdf-mobile.css */
/* Mobile Tab Bar */
.mobile-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background: white;
    border-top: 1px solid var(--color-border);
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    padding-bottom: env(safe-area-inset-bottom);
}
.mobile-tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 11px;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    padding: 8px 0;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}
.mobile-tab-item.active {
    color: #000;
    font-weight: 600;
}
.mobile-tab-item i {
    font-size: 22px;
    margin-bottom: 2px;
}
/* 平板端适配 (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .pdf-quick-btn {
        padding: 6px 10px;
        font-size: var(--font-size-xs);
    }
    .chat-message .content {
        max-width: 90%;
    }
}
/* 移动端主要断?(768px以下) *//* 超小屏幕 (480px以下) */
/* 安全区域适配 (刘海屏等) */
@supports (padding: max(0px)) {}
/* 触摸优化已移至合并媒体查询区域 */
/* 减少动画 (辅助功能) 已移至合并媒体查询区域 */
/* ==================== Citation Header Card Styles ==================== */
/* Migrated from citation-header-card.css */
/* 页面标题卡片样式 */
.citation-header-card {
    background: var(--color-background-primary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    margin-top: -30px;
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    --transition-fast: none !important;
    --transition-normal: none !important;
    --transition-slow: none !important;
    --transition-smooth: none !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
}
html.dark .citation-header-card {
    border-color: var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.citation-header-card * {
    pointer-events: auto !important;
}
.citation-header-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}
.citation-header-icon {
    width: 48px;
    height: 48px;
    aspect-ratio: 1 / 1;
    background: var(--color-background-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
html.dark .citation-header-icon {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-color: var(--color-border);
    color: #f5f5f5;
}
.citation-header-icon i {
    font-size: inherit;
    line-height: 1;
}
.citation-header-icon .header-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.citation-header-text {
    margin-left: 0;
    flex: 1;
    min-width: 0;
}
.citation-header-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.citation-header-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
    opacity: 0.85;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-weight: 400;
}
/* Citation Header Card - 平板设备、手机设备、超小屏幕样式已移至合并媒体查询区域 */
/* Citation Header Card - 触摸设备优化已移至合并媒体查询区域 */
/* Citation Header Card - 移动端边距重置 *//* 全局禁用卡片组件的所有动画和过渡效果 */
.citation-header-card,
.citation-header-card *,
.citation-header-content,
.citation-header-icon,
.citation-header-text,
.citation-header-title,
.citation-header-description {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}
.citation-header-card:hover,
.citation-header-card:active,
.citation-header-card:focus {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
html.dark .citation-header-card:hover,
html.dark .citation-header-card:active,
html.dark .citation-header-card:focus {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
.citation-header-card,
.citation-header-card:hover,
.citation-header-card:active,
.citation-header-card:focus,
.citation-header-card:visited {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
}
/* ==================== New User Points Modal Styles ==================== */
/* Migrated from new-user-points-modal.css */
.new-user-points-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.new-user-points-modal-content {
    background: linear-gradient(135deg, #3b82f6 0%, #10b981 20%, #f59e0b 40%, #ef4444 60%, #8b5cf6 80%, #06b6d4 100%);
    border-radius: 20px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    background-size: 200% 200%;
    animation: pointsModalSlideIn 0.3s ease-out, rainbowShift 4s ease-in-out infinite;
}
@keyframes rainbowShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes pointsModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.new-user-points-modal-header {
    position: relative;
    padding: 20px 20px 0 20px;
}
.new-user-points-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: var(--font-size-base);
    transition: all 0.3s ease;
}
.new-user-points-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}
.new-user-points-modal-body {
    padding: 20px 30px 30px 30px;
    color: white;
    text-align: center;
}
.new-user-points-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.new-user-points-subtitle {
    font-size: var(--font-size-base);
    margin-bottom: 25px;
    opacity: 0.9;
    line-height: 1.5;
}
.new-user-points-benefits-box {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
}
.benefit-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: var(--font-size-sm);
    font-weight: 500;
}
.benefit-item:last-child {
    margin-bottom: 0;
}
.benefit-item i {
    margin-right: 10px;
    font-size: var(--font-size-base);
}
.wechat-info-box {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    color: var(--color-dark);
}
.qr-code-section {
    text-align: center;
}
.qr-label {
    font-size: var(--font-size-base);
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--color-dark);
}
.new-user-points-image {
    display: flex;
    justify-content: center;
    align-items: center;
}
.new-user-points-image img {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.new-user-points-footer {
    margin-top: 20px;
}
.new-user-points-credentials {
    font-size: var(--font-size-xs);
    opacity: 0.8;
    line-height: 1.4;
}
/* New User Points Modal - 响应式设计 */
/* ==================== Sidebar Zero Flicker Styles ==================== */
/* Migrated from sidebar-zero-flicker.css */
/* 根级别的CSS变量 - 由JavaScript立即设置 */
:root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 60px;
    --sidebar-text-display: block;
    --main-margin-left: 260px;
    --sidebar-transform: translateX(0);
    --sidebar-bg: var(--color-background-tertiary);
    --sidebar-border: var(--color-border);
    --sidebar-text: #1C1B1B;
    --sidebar-text-secondary: #6b7280;
    --sidebar-hover: var(--color-background-tertiary);
    --sidebar-active: #6b7280;
    --sidebar-active-bg: #e4e4e2;
    --header-height: 70px;
    --z-sidebar: 1100;
    --z-overlay: 1099;
    --transition-duration: 0.25s;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==================== Sidebar Dark Mode ==================== */
html.dark {
    --sidebar-bg: #171717;
    --sidebar-border: #2a2a2a;
    --sidebar-text: #f5f5f5;
    --sidebar-text-secondary: #a3a3a3;
    --sidebar-hover: #1e1e1e;
    --sidebar-active: #a3a3a3;
    --sidebar-active-bg: #2a2a2a;
}

/* 导航链接 hover - 暗色背景 */
html.dark .nav-link:hover:not([href*="app_page"]) {
    background: rgba(255, 255, 255, 0.06);
}
html.dark .nav-link.active:not([href*="app_page"]) {
    color: #f5f5f5 !important;
}

/* 收缩状态 hover */
html.dark [data-sidebar-collapsed="true"] .nav-link:hover:not([href*="app_page"]) {
    background: rgba(255, 255, 255, 0.06);
}

/* 侧边栏收缩按钮 */
html.dark .sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
/* 收缩时 logo-icon-wrapper 已隐藏，无需 hover 样式 */

/* Logo image in dark mode */
html.dark .logo-icon-wrapper img[data-sidebar-logo],
html.dark .logo-icon-wrapper img {
    filter: brightness(0) invert(1);
}

/* 收缩图标 - 暗色模式下用浅色 */
html.dark .logo-icon-wrapper .sidebar-toggle-icon::before,
html.dark .logo-icon-wrapper .sidebar-toggle-icon::after,
html.dark .sidebar-collapse-btn .collapse-icon::before,
html.dark .sidebar-collapse-btn .collapse-icon::after {
    border-color: #737373;
}
html.dark .sidebar-collapse-btn:hover .collapse-icon::before,
html.dark .sidebar-collapse-btn:hover .collapse-icon::after {
    border-color: #a3a3a3;
}

/* 导航徽章 */
html.dark .nav-badge {
    border-color: #525252;
    color: #737373;
}
html.dark .nav-link:hover .nav-badge {
    border-color: #a3a3a3;
    color: #a3a3a3;
}

/* 快捷按钮 hover */
html.dark .sidebar-quick-actions .quick-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
html.dark .sidebar-quick-actions .quick-action-btn.active {
    background: #2a2a2a;
}

/* 聊天历史菜单 */
html.dark .chat-item-menu {
    background: #1e1e1e;
}
html.dark .chat-item-menu-item.delete:hover {
    background: #3b1111;
    color: #ef4444;
}

/* 滚动条 */
html.dark .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}
html.dark .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 收缩时 tooltip */
/* 收缩时 logo-icon-wrapper 已隐藏，tooltip 样式不再需要 */

/* 侧边栏 tooltip */
html.dark .sidebar-tooltip-container {
    background: rgba(255, 255, 255, 0.92);
    color: #171717;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* 基础布局 */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--spacing-sidebar);
    height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    z-index: var(--z-sidebar);
    overflow-x: hidden;
    overflow-y: hidden;
    transform: var(--sidebar-transform);
    will-change: width, transform;
}
/* .new-main 基础样式已合并到 "主内容区" 部分 */
/* 页面初始化时禁用所有过渡，避免闪烁 */
html.no-transitions,
html.no-transitions *,
html.no-transitions *::before,
html.no-transitions *::after {
    transition: none !important;
    animation: none !important;
}

/* 特别确保 header 和 sidebar 在初始化时无过渡 */
html.no-transitions .lightweight-header,
html.no-transitions .sidebar,
html.no-transitions .new-main,
html.no-transitions .header-container {
    transition: none !important;
}

/* 动画启用后的过渡效果 - 使用高性能cubic-bezier曲线 */
[data-animations-enabled="true"] .sidebar {
    transition: width var(--transition-duration) var(--transition-easing),
                transform var(--transition-duration) var(--transition-easing);
}
[data-animations-enabled="true"] .sidebar-collapse-btn {
    transition: background var(--transition-duration) var(--transition-easing),
                right var(--transition-duration) var(--transition-easing),
                opacity var(--transition-duration) var(--transition-easing);
}
[data-animations-enabled="true"] .new-main {
    transition: margin-left var(--transition-duration) var(--transition-easing);
    will-change: margin-left;
}
[data-animations-enabled="true"] .logo-text,
[data-animations-enabled="true"] .logo-text-container,
[data-animations-enabled="true"] .logo-subtitle,
[data-animations-enabled="true"] .nav-text,
[data-animations-enabled="true"] .nav-badge,
[data-animations-enabled="true"] .nav-title,
[data-animations-enabled="true"] .btn-text {
    transition: opacity calc(var(--transition-duration) * 0.6) var(--transition-easing),
                transform calc(var(--transition-duration) * 0.6) var(--transition-easing);
}
/* 导航图标 - 收缩时保持不变 */
/* 文本元素的显示控?*/
.logo-text,
.logo-text-container,
.logo-subtitle,
.nav-text,
.nav-badge,
.nav-title,
.btn-text {
    display: var(--sidebar-text-display);
    opacity: 1;
    white-space: nowrap;
}
.nav-text {
    margin-left: 0;
}
/* 收缩状态的特殊处理 - 仅影响侧边栏内的文本元素 */
/* 文本不做位移，依靠 sidebar overflow:hidden + width 缩小自然从右向左裁剪 */
[data-sidebar-collapsed="true"] .logo-text,
[data-sidebar-collapsed="true"] .logo-text-container,
[data-sidebar-collapsed="true"] .logo-subtitle,
[data-sidebar-collapsed="true"] .nav-text,
[data-sidebar-collapsed="true"] .nav-badge,
[data-sidebar-collapsed="true"] .nav-title,
[data-sidebar-collapsed="true"] .sidebar .btn-text {
    opacity: 0;
    pointer-events: none;
}
/* 侧边栏头部 */
.sidebar-header {
    height: var(--spacing-header);
    display: flex;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}
/* Logo样式 */
.logo {
    display: grid;
    grid-template-columns: var(--sidebar-collapsed-width, 60px) 1fr;
    align-items: center;
    text-decoration: none;
    color: var(--sidebar-text);
    font-weight: 600;
    font-size: 1.125rem;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}
.logo.turnitin-logo-link {
    grid-template-columns: minmax(0, 1fr);
}
.logo i {
    font-size: 1.5rem;
    margin-right: 10px;
    color: var(--sidebar-active);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo:hover i {
    transform: scale(1.1) rotate(-5deg);
}
/* Logo图标容器 */
.logo-icon-wrapper {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    flex-shrink: 0;
    overflow: visible;
}
.logo-icon-wrapper.turnitin-logo-wrapper {
    width: 120px;
    height: 36px;
    justify-self: start;
    margin-left: 21px;
}
.logo-icon-wrapper.turnitin-logo-wrapper .sidebar-brand-logo {
    width: 120px;
    height: 36px;
    max-width: none;
    object-fit: contain;
    filter: none;
}
html.dark .logo-icon-wrapper.turnitin-logo-wrapper .sidebar-brand-logo {
    content: url("/static/img/turnitin-logo-small-dark.svg");
    filter: none;
}
.logo-icon-wrapper i {
    margin-right: 0;
    font-size: 1.5rem;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo:hover .logo-icon-wrapper i {
    transform: scale(1.1) rotate(-5deg);
}
/* 侧边栏切换图?*/
.logo-icon-wrapper .sidebar-toggle-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.logo-icon-wrapper .sidebar-toggle-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid #999;
    border-radius: var(--radius-sm);
    background: transparent;
    box-sizing: border-box;
    transition: border-color var(--transition-duration) var(--transition-easing);
}
.logo-icon-wrapper .sidebar-toggle-icon::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    width: 0;
    height: 100%;
    border-left: 1.5px solid #999;
    transition: border-color var(--transition-duration) var(--transition-easing);
}
/* 收缩时 logo 保持 grid 布局，图标列不变 */
[data-sidebar-collapsed="true"] .logo {
    grid-template-columns: var(--sidebar-collapsed-width, 60px) 0fr;
    overflow: hidden;
}
/* 收缩时 logo 图标瞬间隐藏（收缩/展开功能由 sidebar-collapse-btn 负责） */
[data-sidebar-collapsed="true"] .logo-icon-wrapper {
    display: none;
}
/* 侧边栏收缩按钮 - 固定在侧边栏右上角 */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-duration) var(--transition-easing),
                transform var(--transition-duration) var(--transition-easing),
                opacity var(--transition-duration) var(--transition-easing);
    position: absolute;
    right: calc((var(--sidebar-collapsed-width, 60px) - 24px) / 2);
    top: calc(var(--spacing-header) / 2);
    transform: translateY(-50%);
    z-index: 2;
}
.sidebar-collapse-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    transform: translateY(-50%) scale(1.1);
}
.sidebar-collapse-btn:active {
    transform: translateY(-50%) scale(0.95);
}
.sidebar-collapse-btn .collapse-icon {
    position: relative;
    width: 16px;
    height: 16px;
    transition: transform var(--transition-duration) var(--transition-easing);
}
.sidebar-collapse-btn .collapse-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid #999;
    border-radius: var(--radius-sm);
    background: transparent;
    box-sizing: border-box;
    transition: border-color var(--transition-duration) var(--transition-easing);
}
.sidebar-collapse-btn .collapse-icon::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    height: 100%;
    width: 0;
    border-left: 1.5px solid #999;
    transition: border-color var(--transition-duration) var(--transition-easing);
}
.sidebar-collapse-btn:hover .collapse-icon::before,
.sidebar-collapse-btn:hover .collapse-icon::after {
    border-color: var(--color-text-secondary);
}
/* logo-icon-wrapper 收缩时已隐藏，tooltip 由 sidebar-collapse-btn 的 data-tooltip 处理 */
/* Logo文本容器 */
.logo-text-container {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    transform: translateX(0);
    will-change: opacity, transform;
}
.logo-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sidebar-text);
    font-family: var(--font-family-cinzel), var(--font-family-base);
    /* 防止字体闪烁：禁止浏览器合成假粗体 */
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateX(0);
    will-change: opacity, transform;
}
.logo-subtitle {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--sidebar-text-secondary);
    margin-top: 1px;
    font-family: var(--font-family-cinzel), var(--font-family-base);
    /* 防止字体闪烁：在字体加载期间保持稳定 */
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateX(0);
    will-change: opacity, transform;
}
/* 导航区域 */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem 0;
    scrollbar-gutter: stable;
}
/* 收缩时 nav-link 保持 grid 布局，图标列不变，文本列宽度归零被 overflow:hidden 裁剪 */
[data-sidebar-collapsed="true"] .nav-link {
    grid-template-columns: var(--sidebar-collapsed-width, 60px) 0fr 0fr;
    width: var(--sidebar-collapsed-width, 60px);
    max-width: var(--sidebar-collapsed-width, 60px);
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 0 0.0625rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
[data-sidebar-collapsed="true"] .nav-link i,
[data-sidebar-collapsed="true"] .nav-link .nav-icon-img {
    grid-column: 1;
    justify-self: center !important;
    margin: 0 !important;
}
[data-sidebar-collapsed="true"] .nav-link:hover:not([href*="app_page"]) {
    background: rgba(0, 0, 0, 0.06);
    transform: none;
}
/* 导航链接 - 平滑交互 */
.nav-link {
    display: grid;
    grid-template-columns: var(--sidebar-collapsed-width, 60px) 1fr auto;
    column-gap: 0;
    align-items: center;
    padding: 0.25rem 0 0.25rem 0 !important;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: var(--radius-lg);
    margin: 0 0 0.0625rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    min-height: 32px !important;
    transition: background-color var(--transition-duration) var(--transition-easing),
                transform var(--transition-duration) var(--transition-easing),
                box-shadow var(--transition-duration) var(--transition-easing);
    font-size: 0.875rem;
}
.nav-link > .nav-text {
    margin-left: -6px;
}
[data-sidebar-collapsed="true"] .nav-link > .nav-text {
    margin-left: 0;
}
.nav-link:hover:not([href*="app_page"]) {
    background: rgba(0, 0, 0, 0.06);
    transform: none;
}
.nav-link.active:not([href*="app_page"]) {
    background: var(--sidebar-active-bg) !important;
    border-radius: 10px;
    color: #1C1B1B !important;
}
.nav-link i {
    width: 18px;
    font-size: 0.875rem;
    margin: 0;
    text-align: center;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-link:hover i {
    transform: scale(1.15) rotate(5deg);
}
.nav-link .nav-icon-img {
    width: 18px;
    height: 18px;
    margin: 0;
    object-fit: contain;
    display: block;
    justify-self: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-text,
.nav-badge,
.nav-title,
.btn-text {
    transform: translateX(0);
    will-change: opacity, transform;
}
[data-sidebar-collapsed="true"] .logo-text-container,
[data-sidebar-collapsed="true"] .logo-text,
[data-sidebar-collapsed="true"] .logo-subtitle,
[data-sidebar-collapsed="true"] .nav-text,
[data-sidebar-collapsed="true"] .nav-badge,
[data-sidebar-collapsed="true"] .nav-title,
[data-sidebar-collapsed="true"] .btn-text {
    transform: translateX(-8px);
}
.nav-link:hover .nav-icon-img {
    transform: scale(1.15) rotate(5deg);
}
/* 充值图标渐?*/
.nav-link .fa-credit-card {
    background: linear-gradient(135deg, #FF6B6B 0%, #C92A2A 50%, #8B0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(139, 0, 0, 0.2));
}
.nav-link .fa-coins {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(255, 140, 0, 0.2));
}
.nav-link:hover .fa-credit-card {
    background: linear-gradient(135deg, #FF8787 0%, #DC3545 50%, #A00000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(139, 0, 0, 0.3));
    transform: scale(1.05);
    transition: all 0.3s ease;
}
.nav-link:hover .fa-coins {
    background: linear-gradient(135deg, #FFED4E 0%, #FFB347 50%, #FF9500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(255, 140, 0, 0.3));
    transform: scale(1.05);
    transition: all 0.3s ease;
}
.nav-link.active .fa-credit-card {
    background: linear-gradient(135deg, #E03131 0%, #C92A2A 50%, #8B0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.nav-link.active .fa-coins {
    background: linear-gradient(135deg, #FFC107 0%, #FF9800 50%, #FF6F00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* 新任务导航链接的渐变红色背景效果 */
.nav-link[href*="app_page"] {
    background: linear-gradient(135deg, #FF6B6B 0%, #C92A2A 50%, #8B0000 100%) !important;
    color: white !important;
}
.nav-link[href*="app_page"] i,
.nav-link[href*="app_page"] .nav-text {
    color: white !important;
}
.nav-link[href*="app_page"]:hover {
    background: linear-gradient(135deg, #FF8787 0%, #DC3545 50%, #A00000 100%) !important;
}
.nav-link[href*="app_page"].active {
    background: linear-gradient(135deg, #E03131 0%, #C92A2A 50%, #8B0000 100%) !important;
}
/* Tooltip容器 */
.sidebar-tooltip-container {
    position: fixed;
    padding: 0.375rem 0.625rem;
    background: rgba(0, 0, 0, 0.92);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.sidebar-tooltip-container.show {
    opacity: 1;
}
/* .sidebar-actions 已废弃，使用 .sidebar-quick-actions 替代 */
/* 移动端遮罩层 - 平滑淡入淡出 */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-duration) var(--transition-easing);
    will-change: opacity;
}
.sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
/* 移动端特殊样式 - 滚动条样式 */
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}
.nav-section {
    margin-bottom: 0.5rem;
}
.nav-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--sidebar-text-secondary);
    text-transform: uppercase;
    padding: 0.375rem 1rem;
    margin-bottom: 0.125rem;
}
.nav-badge {
    font-size: 0.625rem;
    padding: 2px 6px;
    border: 1px solid #9ca3af;
    background: transparent;
    color: #9ca3af;
    border-radius: 10px;
    font-weight: 500;
    margin-left: auto;
    margin-right: 0.375rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.nav-link:hover .nav-badge {
    border-color: #6b7280;
    color: #6b7280;
    transform: none;
}
/* 收缩状态 - 图标尺寸与展开状态完全一致，px 钉死防止任何偏差 */
[data-sidebar-collapsed="true"] .nav-link i {
    transform: none;
    transition: none;
}
[data-sidebar-collapsed="true"] .nav-link .nav-icon-img {
    transform: none;
    transition: none;
}
/* 底部快捷按钮样式 */
.sidebar-quick-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--sidebar-border);
    background: var(--sidebar-bg);
    flex-shrink: 0;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 10;
    gap: 0.375rem;
}
.sidebar-quick-actions .quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--sidebar-text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.sidebar-quick-actions .quick-action-btn i {
    font-size: 1rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sidebar-quick-actions .quick-action-btn:hover i {
    transform: scale(1.2) rotate(8deg);
}
.sidebar-quick-actions .quick-action-btn .fa-credit-card {
    background: linear-gradient(135deg, #FF6B6B 0%, #C92A2A 50%, #8B0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(139, 0, 0, 0.2));
}
.sidebar-quick-actions .quick-action-btn:hover .fa-credit-card {
    background: linear-gradient(135deg, #FF8787 0%, #DC3545 50%, #A00000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(139, 0, 0, 0.3));
}
.dreamy-recharge-btn {
    position: relative !important;
}
.dreamy-recharge-btn i {
    position: relative !important;
    z-index: 1 !important;
    background: linear-gradient(135deg, #FF6B6B 0%, #C92A2A 50%, #8B0000 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.dreamy-recharge-btn:hover i {
    background: linear-gradient(135deg, #FF8787 0%, #DC3545 50%, #A00000 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transform: scale(1.1) !important;
    transition: all 0.2s ease !important;
}
.sidebar-quick-actions .quick-action-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--sidebar-text);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.sidebar-quick-actions .quick-action-btn.active {
    background: #e8e8e8;
    color: var(--sidebar-text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
/* quick-action-btn tooltip 使用统一的 [data-tooltip] 系统 */
[data-sidebar-collapsed="true"] .sidebar-quick-actions {
    padding: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
[data-sidebar-collapsed="true"] .sidebar-quick-actions .quick-action-btn {
    width: 32px;
    height: 32px;
}
/* 聊天历史功能样式 */
.nav-item-with-submenu,
#chatHistoryList .nav-item {
    position: relative;
}
.nav-item-with-submenu > .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-chevron {
    font-size: 0.7rem;
    margin-left: auto;
    transition: transform 0.3s ease;
}
.nav-item-with-submenu.active .nav-chevron {
    transform: rotate(180deg);
}
.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 2rem;
}
.nav-item-with-submenu.active .nav-submenu {
    max-height: 400px;
    overflow-y: auto;
}
.nav-submenu li {
    list-style: none;
    margin: 0.5rem 0;
    position: relative;
}
.nav-submenu a {
    display: block;
    padding: 0.5rem 0.75rem;
    padding-right: 2rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-submenu a:hover {
    background: var(--color-accent);
    color: var(--color-text-primary);
}
.chat-item-menu-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.nav-item:hover .chat-item-menu-btn {
    opacity: 1;
}
.chat-item-menu-btn:hover {
    color: var(--color-text-primary);
}
.chat-item-menu {
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-elevated);
    min-width: 120px;
    z-index: 1000;
    display: none;
    overflow: hidden;
}
.chat-item-menu.show {
    display: block;
}
.chat-item-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: inherit;
    padding: 0.5rem 0.75rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}
.chat-item-menu-item:hover {
    background: var(--color-accent);
    color: var(--color-text-primary);
}
.chat-item-menu-item:first-child:hover {
    border-radius: 16px 16px 0 0;
}
.chat-item-menu-item:last-child:hover {
    border-radius: 0 0 16px 16px;
}
.chat-item-menu-item i {
    margin-right: 0.5rem;
    width: 1rem;
}
.chat-item-menu-item.delete:hover {
    background: #fee;
    color: #dc2626;
}
.nav-item.pinned {
    background: var(--color-accent);
}
.pin-indicator {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.nav-item:hover .pin-indicator {
    opacity: 0;
}
.submenu-loading {
    padding: 0.375rem 0.75rem;
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
}
.submenu-empty {
    padding: 0.375rem 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}
.chat-title-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 1rem;
    transition: background 0.2s ease;
}
.chat-title-toggle:hover {
    background: var(--color-accent);
}
.chat-toggle-icon {
    font-size: 0.75rem;
    opacity: 0;
    transition: all 0.2s ease;
}
.chat-title-toggle:hover .chat-toggle-icon {
    opacity: 1;
}
.chat-title-toggle.collapsed .chat-toggle-icon {
    transform: rotate(-90deg);
}
.chat-history-collapsed {
    display: none;
}

/* 聊天历史初始折叠状态 - 预定义样式，避免 document.write 闪烁 */
html.chat-history-initially-collapsed .chat-section-initial {
    display: none !important;
}
html.chat-history-initially-collapsed .chat-toggle-initial .chat-toggle-icon {
    transform: rotate(-90deg);
}

/* Sidebar 收缩时立即隐藏聊天区域，避免初始闪烁 */
/* 只在初始化期间（no-transitions 存在时）生效 */
html.no-transitions.sidebar-initially-collapsed .nav-section {
    display: none !important;
}

#chatHistoryList .nav-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#chatHistoryList .nav-link > i:not(.pin-indicator) {
    color: var(--sidebar-text-secondary);
    opacity: 0.55;
}
#chatHistoryList .nav-link .nav-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
/* chatHistoryList tooltip 使用统一的 [data-tooltip] 系统 */
[data-sidebar-collapsed="true"] .nav-section {
    display: none !important;
}
[data-sidebar-collapsed="true"] .chat-title-toggle,
[data-sidebar-collapsed="true"] #chatHistoryList {
    display: none !important;
}

@media (max-width: 768px) {
    .nav-link {
        min-height: 44px !important;
    }

    .sidebar-quick-actions .quick-action-btn {
        width: 44px;
        height: 44px;
    }
}
/* ==================== check.css - 检测页面样?==================== */
/* 页面特定变量 - 紧凑版本 */
:root {
    --spacing-xxs: 0.125rem;
    --spacing-xxxs: 0.0625rem;
    --mobile-spacing-xs: 0.25rem;
    --mobile-spacing-sm: 0.375rem;
    --mobile-spacing-md: 0.5rem;
    --mobile-card-padding: 0.5rem;
    --compact-card-padding: 0.75rem;
    /* 移动端视口高度变?- 使用dvh支持动态视?*/
    --mobile-vh: 100vh;
    --mobile-vh-dynamic: 100dvh;
    --mobile-content-height: calc(100vh - 120px);
    /* 报告展示专用变量 */
    --report-border-radius: var(--radius-xl);
    --report-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --report-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 移动端最佳实践变?*/
    --touch-target-min: 44px;
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
}
/* 支持动态视口高度的浏览?*/
@supports (height: 100dvh) {
    :root {
        --mobile-vh: 100dvh;
    }
}
/* 移动端布局优化 *//* 减少动画 - 尊重用户偏好已移至合并媒体查询区域 */
/* 卡片紧凑化样式 - 排除权益卡片，避免样式冲突 */
 .new-card:not(.action-card) {
    padding: var(--compact-card-padding) !important;
    margin-bottom: var(--spacing-sm) !important;
}
.new-card-content {
    padding: var(--spacing-sm) !important;
}
.new-card-header {
    padding: var(--spacing-sm) var(--compact-card-padding) 0 var(--compact-card-padding) !important;
    margin-bottom: var(--spacing-sm) !important;
}
.new-card-title {
    font-size: var(--font-size-base) !important;
    margin-bottom: var(--spacing-xs) !important;
}
/* ==================== 检测进度卡片样?==================== */
#progressCard {
    /* 确保进度卡片在移动端可见?*/
    position: relative;
    z-index: 10;
}
#progressCard .new-card-content {
    padding: 1rem !important;
}
#progressCard .new-progress-bar {
    height: 8px;
    border-radius: var(--radius-sm);
    background: #e9ecef;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
#progressCard .new-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, #6366f1 100%);
    border-radius: var(--radius-sm);
    transition: width 0.3s ease;
}
#progressCard .new-progress-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: center;
}
/* 进度卡片移动端优化 - prefers-reduced-motion 已移至合并媒体查询区域 */
/* 响应式设计 - max-width: 360px 已移至合并媒体查询区域 */
/* 权益卡片样式已统一到 rights-info-card.css */
/* 文本框工作区?- 上下分布 */
.citation-workspace-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}
/* 减少文本框卡片的内边距，让文本框更宽 */
.citation-workspace-vertical .new-card .new-card-content {
    padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-sm) var(--spacing-xs);
}
/* 手机端工作区域优?*/.citation-input-section {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.citation-label {
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 1rem;
    font-family: var(--font-family-base);
}
/* ==================== 重新设计的报告展示样?==================== */
/* 报告展示卡片 */
.report-showcase-card {
    background: white;
    border-radius: var(--report-border-radius);
    box-shadow: var(--report-shadow);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
/* 报告展示头部 */
.report-showcase-header {
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--color-background-tertiary) 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--color-border);
}
.showcase-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.showcase-title i {
    color: var(--color-primary);
    font-size: 1.25rem;
}
.showcase-title h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
}
.showcase-badge {
    background: var(--color-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}
.showcase-description {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
}
/* 报告类型切换?*/
.report-type-switcher {
    padding: 1rem 1.5rem;
    background: white;
    border-bottom: 1px solid var(--color-border);
}
.switcher-container {
    display: flex;
    background: var(--color-background-tertiary);
    border-radius: 0.75rem;
    padding: 0.25rem;
    gap: 0.25rem;
}
.report-type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #6b7280;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--report-transition);
    white-space: nowrap;
}
.report-type-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #374151;
}
.report-type-btn.active {
    background: white;
    color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.report-type-btn i {
    font-size: 1rem;
}
/* 报告展示容器 */
.report-display-container {
    position: relative;
    min-height: 600px;
}
.report-display-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: var(--report-transition);
}
.report-display-panel.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}
/* 概览图片展示 */
.overview-image-container {
    position: relative;
    width: 100%;
    height: 600px;
    background: var(--color-background-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.overview-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    transition: var(--report-transition);
}
.overview-image:hover {
    transform: scale(1.02);
}
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--report-transition);
    pointer-events: none;
}
.overview-image-container:hover .image-overlay {
    opacity: 1;
}
.overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-weight: 500;
}
.overlay-content i {
    font-size: 2rem;
}
/* 图片错误备用内容 */
.image-error-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-background-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}
.image-error-fallback .error-icon {
    font-size: 4rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}
.image-error-fallback .error-content h4 {
    margin: 0 0 0.5rem 0;
    color: #374151;
    font-size: 1.25rem;
}
.image-error-fallback .error-content p {
    margin: 0 0 1.5rem 0;
    color: #6b7280;
}
.view-reports-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--report-transition);
}
.view-reports-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}
/* PDF查看器容?*/
.pdf-viewer-container {
    width: 100%;
    height: 600px;
    background: white;
    display: flex;
    flex-direction: column;
}
/* PDF头部 */
.pdf-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    background: var(--color-background-tertiary);
    border-bottom: 1px solid var(--color-border);
}
.pdf-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #374151;
    font-weight: 500;
}
.pdf-info i {
    color: #dc2626;
    font-size: 1.125rem;
}
.pdf-actions {
    display: flex;
    gap: 0.5rem;
}
.pdf-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.375rem;
    background: white;
    color: #6b7280;
    cursor: pointer;
    transition: var(--report-transition);
    border: 1px solid #d1d5db;
}
.pdf-action-btn:hover {
    background: var(--color-background-tertiary);
    color: #374151;
    border-color: #9ca3af;
}
/* PDF内容包装?*/
.pdf-content-wrapper {
    flex: 1;
    position: relative;
    background: var(--color-background-tertiary);
}
/* PDF显示样式 */
.pdf-object, .pdf-embed {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}
/* PDF.js查看器样?*/
.pdf-viewer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-background-tertiary);
}
/* PDF工具?*/
.pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--color-background-tertiary);
    color: #374151;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.pdf-toolbar-left,
.pdf-toolbar-center,
.pdf-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pdf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.pdf-btn i {
    font-size: 1.125rem;
}
.pdf-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #4b5563;
}
.pdf-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
}
.pdf-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    background: white;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.pdf-quick-btn:hover {
    background: #f5f5f5;
    border-color: #d1d5db;
    color: #333;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.pdf-quick-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pdf-quick-btn i {
    font-size: 13px;
}
.pdf-quick-actions-bar {
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
}
.pdf-page-info {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #374151;
    font-size: 0.875rem;
}
.pdf-page-input {
    width: 3rem;
    padding: 0.25rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    background: white;
    color: #374151;
    text-align: center;
    font-size: 0.875rem;
}
.pdf-page-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.pdf-zoom-info {
    color: #374151;
    font-size: 0.875rem;
    min-width: 3rem;
    text-align: center;
    font-weight: 500;
}
/* PDF画布容器 */
.pdf-canvas-container {
    flex: 1;
    overflow: auto;
    background: var(--color-background-tertiary);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem;
}
.pdf-canvas-container canvas {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: white;
    max-width: 100%;
    height: auto;
}
/* PDF加载和错误状?*/
/* ==================== PDF Components Dark Mode ==================== */
html.dark .pdf-btn {
    color: #737373;
}
html.dark .pdf-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #d4d4d4;
}
html.dark .pdf-quick-btn {
    border-color: #404040;
    background: #262626;
    color: #a3a3a3;
}
html.dark .pdf-quick-btn:hover {
    background: #333333;
    border-color: #525252;
    color: #e5e5e5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
html.dark .pdf-quick-actions-bar {
    background: #1e1e1e;
    border-bottom-color: #2a2a2a;
}
html.dark .pdf-page-info {
    color: #d4d4d4;
}
html.dark .pdf-page-input {
    border-color: #404040;
    background: #262626;
    color: #d4d4d4;
}
html.dark .pdf-zoom-info {
    color: #d4d4d4;
}
html.dark .pdf-language-selector-btn {
    background: #262626;
    border-color: var(--color-border);
}
html.dark .pdf-language-dropdown-upward {
    background: #1e1e1e;
    border-color: #404040;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
}
html.dark .pdf-language-dropdown-upward .language-item:hover {
    background: #2a2a2a;
}
html.dark .fallback-content h4 {
    color: #e5e5e5;
}

.pdf-loading,
.pdf-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-background-tertiary);
    color: var(--color-text-secondary);
    gap: 1rem;
}
.pdf-loading i {
    font-size: 2rem;
    color: var(--color-primary);
}
.pdf-error .fallback-content {
    text-align: center;
    padding: 2rem;
}
/* PDF备选方案样?*/
.pdf-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background-tertiary);
}
.fallback-content {
    text-align: center;
    padding: 2rem;
}
.fallback-content i {
    font-size: 4rem;
    color: #dc2626;
    margin-bottom: 1rem;
    display: block;
}
.fallback-content h4 {
    margin: 0 0 0.5rem 0;
    color: #374151;
    font-size: 1.25rem;
    font-weight: 600;
}
.fallback-content p {
    margin: 0 0 1.5rem 0;
    color: #6b7280;
    line-height: 1.5;
}
.pdf-download-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--report-transition);
}
.pdf-download-link:hover {
    background: #2563eb;
    transform: translateY(-1px);
    color: white;
}
/* 报告说明 */
.report-explanation {
    padding: 1rem 1.5rem;
    background: var(--color-background-tertiary);
    border-top: 1px solid var(--color-border);
}
.explanation-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
}
.explanation-item i {
    color: var(--color-primary);
    font-size: 1rem;
    flex-shrink: 0;
}
/* 图像放大模态框 */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}
.image-modal-content {
    position: relative;
    max-width: 95%;
    max-height: 95%;
}
.image-modal img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}
.image-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: var(--font-size-2xl);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-modal-controls {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 25px;
}
.image-modal-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 5px;
}
/* 超小屏幕优化 - max-width: 360px 已移至合并媒体查询区域 */
/* 手机端功能特色卡片优化 *//* ==================== 横屏模式优化 ==================== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .report-display-container {
        min-height: 200px;
    }
    .overview-image-container,
    .pdf-viewer-container {
        height: 200px;
        max-height: 70vh;
    }
    .report-showcase-header {
        padding: 0.5rem 1rem;
    }
    .showcase-title {
        flex-direction: row;
        align-items: center;
    }
    .showcase-title h3 {
        font-size: 0.9rem;
    }
}
/* ==================== header-lightweight.css - 轻量级Header样式 ==================== */
/* CSS变量定义 */
:root {
    --header-height: 70px;
    --header-bg: rgba(255, 255, 255, 0.85);
    --header-bg-hover: rgba(255, 255, 255, 0.9);
    --header-border: rgba(0, 0, 0, 0.08);
    --header-border-strong: rgba(0, 0, 0, 0.12);
    --header-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    --header-text: #1f2937;
    --header-text-secondary: #6b7280;
    --header-text-muted: #9ca3af;
    --button-bg: rgba(255, 255, 255, 0.7);
    --button-bg-hover: rgba(255, 255, 255, 0.9);
    --transition-fast: 0.15s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --blur-light: blur(12px);
    --mobile-breakpoint: 768px;
}

/* ==================== Header Dark Mode ==================== */
html.dark {
    --header-bg: rgba(23, 23, 23, 0.85);
    --header-bg-hover: rgba(23, 23, 23, 0.9);
    --header-border: rgba(255, 255, 255, 0.08);
    --header-border-strong: rgba(255, 255, 255, 0.12);
    --header-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    --header-text: #f5f5f5;
    --header-text-secondary: #a3a3a3;
    --header-text-muted: #737373;
    --button-bg: rgba(255, 255, 255, 0.07);
    --button-bg-hover: rgba(255, 255, 255, 0.12);
}

/* Modern header 暗色 */
html.dark .new-header,
html.dark .modern-header {
    background: rgba(23, 23, 23, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

html.dark .new-header .new-sidebar-toggle:hover,
html.dark .modern-header .sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

html.dark .modern-header .stat-item,
html.dark .modern-header .action-btn {
    background: transparent;
}
html.dark .modern-header .stat-item:hover,
html.dark .modern-header .action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

html.dark .new-header .new-user-info,
html.dark .modern-header .user-trigger {
    background: rgba(255, 255, 255, 0.05);
}
html.dark .new-header .new-user-info:hover,
html.dark .modern-header .user-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}

html.dark .modern-header .auth-btn-outline {
    border-color: rgba(255, 255, 255, 0.15);
}
html.dark .modern-header .auth-btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}
html.dark .modern-header .auth-btn-primary:hover {
    background: #f5f5f5;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

/* User dropdown 暗色 */
html.dark .user-dropdown-menu {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html.dark .dropdown-item {
    color: #e5e5e5;
}
html.dark .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f5f5f5;
}
html.dark .dropdown-item:active {
    background: rgba(255, 255, 255, 0.1);
}
html.dark .dropdown-item svg {
    color: #a3a3a3;
}
html.dark .dropdown-item:hover svg {
    color: #e5e5e5;
}
html.dark .dropdown-item:focus,
html.dark .dropdown-item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}
html.dark .dropdown-divider {
    background: rgba(255, 255, 255, 0.08);
}
html.dark .dropdown-theme-switch {
    background: rgba(255, 255, 255, 0.06);
}
html.dark .dropdown-theme-btn {
    color: #a3a3a3;
}
html.dark .dropdown-theme-btn:hover {
    color: #e5e5e5;
    background: rgba(255, 255, 255, 0.06);
}
html.dark .dropdown-theme-btn.active {
    background: rgba(255, 255, 255, 0.12);
    color: #f5f5f5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
html.dark .dropdown-user-name {
    color: #f5f5f5;
}
html.dark .dropdown-user-email {
    color: #737373;
}
html.dark .dropdown-user-avatar {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.2) 0%, rgba(100, 116, 139, 0.25) 50%, rgba(71, 85, 105, 0.3) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
html.dark .dropdown-user-avatar span {
    color: #cbd5e1;
    text-shadow: none;
}

/* Dropdown combined card 暗色 */
html.dark .dropdown-combined-card {
    background: #262626;
}
html.dark .combined-card-plan-icon {
    background: #404040;
    color: #e5e5e5;
}
html.dark .combined-card-plan-name {
    color: #f5f5f5;
}
html.dark .combined-card-upgrade-btn {
    background: #f5f5f5;
    color: #171717;
}
html.dark .combined-card-upgrade-btn:hover {
    background: #e5e5e5;
    color: #171717;
}
html.dark .combined-card-upgrade-btn:active {
    background: #d4d4d4;
}
html.dark .combined-card-stats {
    border-top-color: #404040;
}
html.dark .combined-stat-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
html.dark .combined-stat-item:active {
    background: rgba(255, 255, 255, 0.08);
}
html.dark .combined-stats-divider {
    background: #404040;
}
html.dark .combined-stat-icon {
    background: #404040;
    color: #e5e5e5;
}
html.dark .combined-stat-label {
    color: #a3a3a3;
}
html.dark .combined-stat-value {
    color: #f5f5f5;
}

/* Privilege cards 暗色 */
html.dark .dropdown-privilege-card {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
html.dark .dropdown-privilege-card.free-card {
    border-color: rgba(148, 163, 184, 0.15);
}
html.dark .free-card .privilege-card-title {
    color: #94a3b8;
}
html.dark .free-card .privilege-card-subtitle {
    color: #64748b;
}

/* User avatar 暗色内层 */
html.dark .user-avatar::before {
    background: #262626;
}

/* Plan badge Free 暗色 */
html.dark .plan-badge[data-user-plan="Free"],
html.dark .plan-badge:not([data-user-plan]),
html.dark .plan-badge[data-user-plan=""] {
    background: rgba(107, 114, 128, 0.2);
    color: #a3a3a3;
    border-color: rgba(107, 114, 128, 0.3);
}

/* Auth btn primary 暗色 */
html.dark .auth-btn-primary {
    background: linear-gradient(135deg, #f5f5f5 0%, rgba(245, 245, 245, 0.9) 100%);
    color: #171717;
    border-color: #f5f5f5;
}
html.dark .auth-btn-primary:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

/* Hamburger menu 暗色 */
html.dark .hamburger-menu:hover {
    background: rgba(255, 255, 255, 0.08);
}
html.dark .hamburger-menu:active {
    background: rgba(255, 255, 255, 0.12);
}

/* Language dropdown 暗色 */
html.dark .header-language-dropdown {
    background: #1e1e1e;
    border-color: #404040;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
html.dark .header-language-dropdown .language-option.active {
    background: #2a2a2a;
    color: #f5f5f5;
}

/* Stat item hover shadow 暗色 */
html.dark .stat-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
html.dark .action-btn:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
html.dark .user-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Header容器 - 不占据空?*/
.header-container {
    position: fixed;
    top: 0;
    left: var(--sidebar-width, 240px);
    right: 0;
    height: 0;
    z-index: 1000;
    transition: left 0.2s ease;
}
/* Header主容?*/
.lightweight-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width, 240px); /* 使用CSS变量，始终贴着侧边?*/
    right: 0;
    height: var(--spacing-header);
    background: var(--header-bg);
    backdrop-filter: var(--blur-light) saturate(150%);
    -webkit-backdrop-filter: var(--blur-light) saturate(150%);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--header-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 16px;
    z-index: 1000;
    transition: left 0.2s ease; /* 添加平滑过渡效果 */
    box-sizing: border-box;
    transform: translateZ(0); /* 硬件加?*/
}
/* 侧边栏收缩时的header调整 - 不再需要单独设置left */
.sidebar-collapsed .lightweight-header,
body.sidebar-collapsed .lightweight-header,
[data-sidebar-collapsed="true"] .lightweight-header {
    /* left值会自动?-sidebar-width变量获取 */
    padding-left: 16px;
}
/* 左侧区域 - .header-left 已合并到"主内容区"部分 */
/* 侧边栏切换按钮 - 已移至sidebar logo hover */
.hamburger-menu {
    display: none; /* 隐藏header中的hamburger按钮，切换功能已移至sidebar logo */
}
.hamburger-menu:hover {
    background: rgba(0, 0, 0, 0.06);
}
.hamburger-menu:active {
    background: rgba(0, 0, 0, 0.1);
}
/* 隐藏原有的三条线 */
.hamburger-line {
    display: none;
}
/* 侧边栏图?- 线性描边风?*/
/* 外框圆角矩形 */
.hamburger-menu::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-text-secondary);
    border-radius: 3px;
    background: transparent;
    transition: border-color 0.2s ease;
}
/* 内部左侧垂直分割?*/
.hamburger-menu::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    width: 0;
    height: 12px;
    border-left: 1.5px solid var(--color-text-secondary);
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 悬停时加深颜?*/
.hamburger-menu:hover::before,
.hamburger-menu:hover::after {
    border-color: #444;
}
/* 侧边栏收缩状?- 分割线右?*/
.hamburger-menu.active::after {
    left: 17px;
}
/* 右侧区域 - .header-right 已合并到"主内容区"部分 */
/* 用户区域 */
.header-user-section {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    /* 使用contain隔离布局重排，防止子元素变化影响整体布局 */
    contain: layout style;
}

.header-user-section > * {
    /* 防止flex子元素收缩导致抖动 */
    flex-shrink: 0;
}
/* 统计项目 - 基础样式已合并到"主内容区"部分的 .stat-item */
.stat-icon {
    color: var(--header-text-secondary);
    flex-shrink: 0;
    transition: var(--transition-fast);
}
.stat-item:hover .stat-icon {
    color: var(--header-text);
    transform: scale(1.1);
}
.stat-label {
    font-size: 10px;
    color: var(--header-text-secondary);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stat-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--header-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* 防止数字变化时宽度抖动 */
    min-width: 3em;
    display: inline-block;
    text-align: right;
}
/* 操作按钮 */
.action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--header-border);
    background: var(--button-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--header-text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    height: 40px;
    min-width: max-content;
    white-space: nowrap;
    outline: none;
}
.action-btn:hover {
    background: var(--button-bg-hover);
    border-color: var(--header-border-strong);
    color: var(--header-text);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.action-btn:active {
    /* 移除?transform 效果 */
}
.action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.action-label {
    font-size: 11px;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.action-btn svg {
    transition: var(--transition-fast);
}
.action-btn:hover svg {
    transform: scale(1.1);
}
/* 用户按钮 */
.user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px 2px 2px;
    border: 1px solid var(--header-border);
    background: var(--button-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: left;
    height: 40px;
    min-width: max-content;
    user-select: none;
    outline: none;
    /* 移动端触摸优化 */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}
.user-btn:hover {
    background: var(--button-bg-hover);
    border-color: var(--header-border-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.user-btn.active {
    background: var(--button-bg-hover);
    border-color: var(--header-border-strong);
}
.user-btn.active .dropdown-arrow {
    transform: rotate(180deg);
    color: var(--header-text);
}
/* 用户头像 */
.user-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-xs);
    flex-shrink: 0;
    transition: var(--transition-fast);
    /* 渐变边框背景 */
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 25%, #f59e0b 50%, #d97706 100%);
    padding: 2px;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.2);
}
/* 内部白色背景，形成镂空效?*/
.user-avatar::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: white;
    border-radius: var(--radius-md);
    z-index: 0;
}
/* 文字渐变效果 */
.user-avatar .avatar-text {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.user-btn:hover .user-avatar {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
    background: linear-gradient(135deg, #fde047 0%, #fcd34d 25%, #fbbf24 50%, #f59e0b 100%);
}
.avatar-text {
    line-height: 1;
    text-shadow: none;
    position: relative;
    z-index: 1;
}
/* 用户信息 */
.user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
    min-width: max-content;
}
.user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--header-text);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 60px;
    max-width: 120px;
}
.user-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--header-text-secondary);
}
.user-role {
    font-weight: 500;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 10px;
}
/* 用户计划标签 */
.user-plan-badge {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.plan-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: var(--radius-md);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    transition: var(--transition-fast);
}
/* 尝鲜?(Free) - 默认样式 */
.plan-badge[data-user-plan="Free"],
.plan-badge:not([data-user-plan]),
.plan-badge[data-user-plan=""] {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.2);
}
/* Plus - 银色 */
.plan-badge[data-user-plan="Plus"] {
    background: linear-gradient(135deg, var(--color-border) 0%, #d1d5db 100%);
    color: #374151;
    border-color: #9ca3af;
    box-shadow: 0 1px 3px rgba(156, 163, 175, 0.2);
}
/* Pro - 金色 */
.plan-badge[data-user-plan="Pro"] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #92400e;
    border-color: #d97706;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
}
/* 悬停效果 */
.user-btn:hover .plan-badge[data-user-plan="Plus"] {
    background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-border) 100%);
    box-shadow: 0 2px 6px rgba(156, 163, 175, 0.3);
}
.user-btn:hover .plan-badge[data-user-plan="Pro"] {
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}
/* 更新动画效果 */
.plan-badge.balance-updated {
    animation: planBadgeUpdate 0.6s ease-out;
}
@keyframes planBadgeUpdate {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* 下拉箭头 */
.dropdown-arrow {
    color: var(--header-text-secondary);
    transition: var(--transition-fast);
    flex-shrink: 0;
    font-size: 10px;
}
.user-btn:hover .dropdown-arrow {
    color: var(--header-text);
}
/* 认证区域（未登录状态） */
.header-auth-section {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
}
.auth-btn {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: var(--radius-2xl);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: 700;
    transition: var(--transition-fast);
    border: 2px solid transparent;
    cursor: pointer;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    height: 40px;
    min-height: 40px;
}
.auth-btn-outline {
    background: var(--button-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--header-text);
    border-color: var(--header-border-strong);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.auth-btn-outline:hover {
    background: var(--button-bg-hover);
    border-color: var(--header-text);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.auth-btn-primary {
    background: linear-gradient(135deg, var(--header-text) 0%, rgba(0, 0, 0, 0.9) 100%);
    color: var(--header-bg);
    border-color: var(--header-text);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.auth-btn-primary:hover {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
/* 性能优化 */
.lightweight-header,
.lightweight-header * {
    will-change: auto;
}
.lightweight-header:hover,
.lightweight-header:hover * {
    will-change: transform, opacity;
}
/* 硬件加?*/
.hamburger-menu,
.stat-item,
.action-btn,
.user-btn {
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* 减少动画（用户偏好） */
/* [REMOVED] prefers-reduced-motion rule removed for consistent animations */
/* 焦点样式 - 移除蓝色外框 */
.hamburger-menu:focus,
.action-btn:focus,
.user-btn:focus,
.auth-btn:focus {
    outline: none;
    box-shadow: none; /* 移除焦点时的阴影 */
}
/* 无障碍支?*/
@media (prefers-reduced-motion: no-preference) {
    /* 注释掉脉冲动画，避免产生外发光效?*/
    /* .hamburger-menu:focus {
        animation: pulse 2s infinite;
    } */
}
/* 修复侧边栏收缩状态下切换页面时的不自然动画问题 */
/* 当侧边栏已经收缩时，禁用过渡动画避免不自然的效果 */
.sidebar-collapsed .new-sidebar,
.sidebar-collapsed #sidebar,
body.sidebar-collapsed .new-sidebar,
body.sidebar-collapsed #sidebar {
    transition: none !important;
}
/* 只在用户主动切换状态时启用动画 */
.new-sidebar.transitioning,
#sidebar.transitioning {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* 页面加载完成后恢复正常过渡（仅在展开状态） */
.page-loaded:not(.sidebar-collapsed) .new-sidebar,
.page-loaded:not(.sidebar-collapsed) #sidebar,
body.page-loaded:not(.sidebar-collapsed) .new-sidebar,
body.page-loaded:not(.sidebar-collapsed) #sidebar {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 确保header在侧边栏状态变化时有平滑过?*/
/* 只在启用动画后才添加过渡效果 */
[data-animations-enabled="true"] .lightweight-header {
    transition: left 0.2s ease, padding-left 0.2s ease;
}
/* 页面初始加载时禁用过渡，避免闪烁 */
body:not(.page-loaded) .lightweight-header {
    transition: none !important;
}
/* ==================== tutor-polish-mobile.css - 导师润色页面移动端优?==================== */
/* Grid responsive classes migrated to Tailwind utilities in HTML */
/* 超小屏幕 (< 320px) */
@media (max-width: 320px) {
    /* 最小化所有间?*/
    .new-card {
        padding: 0.375rem;
        margin-bottom: 0.375rem;
    }
    .citation-header-card {
        padding: 0.375rem;
    }
    .service-info {
        padding: 0.375rem;
    }
    /* 保持标签两列布局 */
    .service-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
    }
    .feature-badge {
        font-size: 0.6rem;
        padding: 0.25rem 0.3rem;
        gap: 0.3rem;
    }
    .tutor-item {
        padding: 0.375rem;
        gap: 0.2rem;
    }
    .tutor-avatar {
        width: 40px;
        height: 40px;
        margin-bottom: 0.125rem;
    }
    .new-feature-title {
        font-size: 0.75rem;
    }
    .new-feature-text {
        font-size: 0.65rem;
        line-height: 1.15;
    }
    .tag {
        font-size: 0.55rem;
        padding: 0.05rem 0.3rem;
    }
    .new-feature-item {
        padding: 0.375rem;
    }
    .new-feature-icon {
        width: 32px;
        height: 32px;
        margin: 0 auto 0.3rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .new-feature-icon i {
        font-size: var(--font-size-sm);
        margin: 0;
        padding: 0;
    }
}
/* 触摸优化已移至合并媒体查询区域 */
/* 横屏模式优化 */
@media (max-height: 500px) and (orientation: landscape) {
    .tutor-modal-content {
        max-height: 95vh;
    }
    .tutor-modal-body {
        max-height: calc(95vh - 80px);
    }
    .tutor-modal-header {
        height: 80px;
    }
}
/* 性能优化：减少动?*/
/* [REMOVED] prefers-reduced-motion rule removed for consistent animations */
/* ==================== 下拉菜单按钮重置 ==================== */
button.dropdown-item {
  background: none;
  border: none;
  margin: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* ==================== settings-modal.css - 用户设置模态框（侧边栏布局） ==================== */

/* --- Overlay --- */
.stm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.stm-overlay.show { opacity: 1; }

/* --- Card (固定尺寸) --- */
.stm-card {
  position: relative;
  width: 720px;
  height: 540px;
  background: var(--color-background-primary);
  border-radius: 18px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.stm-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Close btn --- */
.stm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
  aspect-ratio: 1 / 1;
  padding: 0;
  box-sizing: border-box;
  border: none;
  background: var(--color-background-tertiary);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: 14px;
  transition: all 0.2s ease;
  z-index: 10;
}
.stm-close:hover { background: var(--color-border-dark); color: var(--color-text-primary); }

/* --- Layout: sidebar + main --- */
.stm-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* --- Sidebar --- */
.stm-sidebar {
  width: 190px;
  flex-shrink: 0;
  background: var(--color-background-secondary);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: 24px 0 16px;
}
.stm-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.stm-sidebar-header i { font-size: 20px; color: var(--color-text-secondary); }
.stm-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.stm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  background: none;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.stm-nav-item i { font-size: 17px; width: 20px; text-align: center; flex-shrink: 0; }
.stm-nav-item:hover { background: var(--color-background-tertiary); color: var(--color-text-body); }
.stm-nav-item.stm-nav-active {
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.stm-nav-link { text-decoration: none; }
.stm-nav-link-icon { font-size: 12px !important; margin-left: auto; opacity: 0.4; }
.stm-nav-link:hover .stm-nav-link-icon { opacity: 0.8; }

/* --- Main content --- */
.stm-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.stm-panels {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
}

/* --- Section titles --- */
.stm-section-title {
  font-size: 16px;
  font-weight: 650;
  color: var(--color-text-primary);
  margin: 0 0 18px;
}
.stm-section-desc {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: -12px 0 16px;
}

/* --- Footer --- */
.stm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 32px 20px;
  border-top: 1px solid var(--color-border);
}
.stm-btn-cancel,
.stm-btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 22px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: inherit;
}
.stm-btn-cancel { background: var(--color-background-tertiary); color: var(--color-text-secondary); }
.stm-btn-cancel:hover { background: var(--color-border); color: var(--color-text-body); }
.stm-btn-save {
  background: var(--color-primary);
  color: var(--color-secondary);
}
.stm-btn-save:hover { background: var(--color-neutral-800); }
.stm-btn-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Account Section ---- */
.stm-account-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 20px;
  background: var(--color-background-secondary);
  border-radius: 14px;
  border: 1px solid var(--color-border);
}
.stm-account-avatar {
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: var(--color-primary);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.stm-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.stm-account-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}
.stm-avatar-actions {
  display: flex;
  gap: 4px;
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.stm-account-avatar-wrapper:hover .stm-avatar-actions {
  opacity: 1;
}
.stm-avatar-action-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--color-background-primary, #fff);
  color: var(--color-neutral-600, #525252);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: all 0.2s ease;
}
.stm-avatar-action-btn:hover {
  background: var(--color-neutral-900, #171717);
  color: #fff;
  transform: scale(1.1);
}
html.dark .stm-avatar-action-btn {
  background: #2a2a2a;
  color: #a3a3a3;
}
html.dark .stm-avatar-action-btn:hover {
  background: #f5f5f5;
  color: #171717;
}
/* 头像选择模态框 */
.avatar-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s ease;
  padding: 20px;
}
.avatar-picker-overlay.avatar-picker-visible {
  background: rgba(0, 0, 0, 0.45);
}
.avatar-picker-modal {
  position: relative;
  background: var(--color-background-primary, #fff);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 360px;
  transform: scale(0.92) translateY(16px);
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.avatar-picker-visible .avatar-picker-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}
html.dark .avatar-picker-modal {
  background: #1a1a1a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.avatar-picker-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
}
.avatar-picker-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-neutral-900, #171717);
  margin: 0;
  line-height: 1;
}
html.dark .avatar-picker-title {
  color: #f5f5f5;
}
.avatar-picker-close {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--color-background-secondary, #f5f5f5);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutral-500, #737373);
  transition: all 0.15s ease;
  font-size: 14px;
  flex-shrink: 0;
}
.avatar-picker-close:hover {
  background: var(--color-neutral-200, #e5e5e5);
  color: var(--color-neutral-900, #171717);
}
html.dark .avatar-picker-close {
  background: #2a2a2a;
  color: #a3a3a3;
}
html.dark .avatar-picker-close:hover {
  background: #333;
  color: #f5f5f5;
}
.avatar-picker-body {
  padding: 4px 20px 20px;
}
.avatar-picker-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-neutral-400, #a3a3a3);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.stm-default-avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.stm-default-avatar-item {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid transparent;
  padding: 0;
  background: var(--color-background-secondary, #f8f8f7);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
}
.stm-default-avatar-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.stm-default-avatar-item:hover {
  border-color: var(--color-neutral-400, #a3a3a3);
  transform: scale(1.06);
}
.stm-default-avatar-item.stm-avatar-selected {
  border-color: var(--color-neutral-900, #171717);
  box-shadow: 0 0 0 1px var(--color-neutral-900, #171717);
}
html.dark .stm-default-avatar-item.stm-avatar-selected {
  border-color: #f5f5f5;
  box-shadow: 0 0 0 1px #f5f5f5;
}
.stm-avatar-picker-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  font-size: 11px;
  color: var(--color-neutral-400, #a3a3a3);
}
.stm-avatar-picker-divider::before,
.stm-avatar-picker-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border, #e5e5e5);
}
.stm-avatar-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px dashed var(--color-neutral-300, #d4d4d4);
  background: transparent;
  color: var(--color-neutral-600, #525252);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.stm-avatar-upload-btn:hover {
  border-color: var(--color-neutral-500, #737373);
  background: var(--color-background-secondary, #f8f8f7);
}
html.dark .stm-avatar-upload-btn {
  border-color: #404040;
  color: #a3a3a3;
}
html.dark .stm-avatar-upload-btn:hover {
  border-color: #737373;
  background: #262626;
}

.stm-account-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.stm-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stm-account-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-tertiary);
  font-weight: 500;
}
.stm-account-label i { font-size: 15px; }
.stm-account-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-body);
}
.stm-highlight { color: var(--color-text-primary) !important; }

/* ---- Subscription Section ---- */
.stm-sub-cards { display: flex; flex-direction: column; gap: 12px; }
.stm-sub-card {
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-background-primary);
}
.stm-sub-card-inactive { opacity: 0.75; }
.stm-sub-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-body);
  margin-bottom: 10px;
}
.stm-sub-card-header i { font-size: 17px; color: var(--color-text-secondary); }
.stm-sub-card-inactive .stm-sub-card-header { margin-bottom: 0; }
.stm-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: auto;
}
.stm-badge-active { background: var(--color-success-light); color: var(--color-success); }
.stm-badge-org {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #181510, #2a2318 50%, #181510);
  border: 1px solid rgba(201, 168, 76, 0.45);
  color: #e2c87a;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  text-shadow: 0 0 6px rgba(212, 168, 83, 0.3);
  margin-left: 0;
}
.stm-badge-org::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(245, 230, 163, 0.12) 40%,
    rgba(245, 230, 163, 0.25) 50%,
    rgba(245, 230, 163, 0.12) 60%,
    transparent 80%
  );
  animation: stm-org-shimmer 3s ease-in-out infinite;
}
@keyframes stm-org-shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}
.stm-badge-inactive { background: var(--color-background-tertiary); color: var(--color-text-tertiary); }
.stm-badge-activate {
  background: var(--color-primary);
  color: var(--color-secondary);
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}
.stm-badge-activate:hover {
  background: var(--color-neutral-800);
}
.stm-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.stm-sub-label { font-size: 12.5px; color: var(--color-text-tertiary); }
.stm-sub-value { font-size: 13px; font-weight: 600; color: var(--color-text-body); }
.stm-sub-row-hint { padding-top: 0; margin-top: -2px; }
.stm-sub-value-hint { font-size: 11.5px; font-weight: 400; color: var(--color-text-tertiary); }
.stm-account-row-hint { margin-top: -4px; }
.stm-account-label-hint { font-size: 11.5px; color: var(--color-text-tertiary); }

/* ---- Language Rows ---- */
.stm-lang-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stm-lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-background-primary);
}
.stm-lang-row-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-body);
}
.stm-lang-row-label i { font-size: 17px; color: var(--color-text-secondary); }
.stm-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 32px 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-background-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-body);
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  font-family: inherit;
  width: 180px;
}
.stm-select:hover { border-color: var(--color-border-dark); }
.stm-select:focus { border-color: var(--color-text-body); background-color: var(--color-background-primary); }

/* ---- Theme Selector ---- */
.stm-theme-options {
  display: flex;
  gap: 12px;
}
.stm-theme-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-background-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
}
.stm-theme-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 236;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-background-tertiary);
}
.stm-theme-preview {
  position: absolute;
  inset: -2px;
  display: block;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.stm-theme-label {
  line-height: 1.2;
}
.stm-theme-option:hover {
  border-color: var(--color-border-dark);
  background: var(--color-background-tertiary);
}
.stm-theme-option.stm-theme-active {
  border-color: var(--color-primary);
  background: var(--color-background-tertiary);
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ---- Spinner ---- */
@keyframes ph-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.ph-spin { animation: ph-spin 0.8s linear infinite; }

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .stm-card { width: 100%; height: auto; max-height: 95vh; border-radius: 14px; }
  .stm-layout { flex-direction: column; }
  .stm-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 8px 0;
  }
  .stm-sidebar-header { padding: 0 12px 8px; font-size: 14px; }
  .stm-nav { flex-direction: row; overflow-x: auto; padding: 0 10px; gap: 4px; }
  .stm-nav-item { padding: 6px 10px; white-space: nowrap; font-size: 12px; border-radius: 8px; }
  .stm-nav-item i { display: none; }
  .stm-main { min-height: 0; }
  .stm-panels { padding: 12px 12px 10px; }
  .stm-section-title { font-size: 14px; margin-bottom: 10px; }
  .stm-footer { padding: 10px 12px 12px; gap: 8px; }
  .stm-btn-cancel,
  .stm-btn-save { height: 38px; font-size: 13px; }
  .stm-lang-row { flex-direction: row; align-items: center; gap: 8px; }
  .stm-lang-row-label { min-width: 96px; font-size: 12px; gap: 6px; }
  .stm-lang-row-label i { font-size: 15px; }
  .stm-select { width: 100%; }
  .stm-theme-options { gap: 6px; }
  .stm-theme-option { padding: 6px; gap: 4px; font-size: 11.5px; }
  .stm-theme-preview-wrap { border-radius: 8px; }
  .stm-account-card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
  }
  .stm-account-avatar {
    width: 42px;
    height: 42px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    font-size: 20px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .stm-default-avatar-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .stm-account-info { gap: 6px; }
  .stm-account-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }
  .stm-account-label,
  .stm-account-value,
  .stm-sub-label,
  .stm-sub-value { font-size: 12px; }
  .stm-sub-cards { gap: 8px; }
  .stm-sub-card { padding: 10px 12px; border-radius: 12px; }
  .stm-sub-card-header { margin-bottom: 8px; }
  .stm-sub-row { margin-bottom: 4px; }
  .stm-account-row-hint,
  .stm-sub-row-hint { align-items: flex-start; }
  .stm-sub-value-hint,
  .stm-account-label-hint { font-size: 11px; line-height: 1.35; }
}

/* ---- Settings Modal Dark Mode ---- */
html.dark .stm-overlay { background: rgba(0,0,0,0.55); }
html.dark .stm-card { box-shadow: 0 25px 80px rgba(0,0,0,0.5); }
html.dark .stm-nav-item.stm-nav-active { box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
html.dark .stm-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a3a3a3' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
}

/* ==================== gift-coins-modal.css - 赠币信息补充模态框 ==================== */
/* 默认隐藏状?*/
.gift-coins-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.gift-coins-modal.show {
    opacity: 1;
    visibility: visible;
}
.gift-coins-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.gift-coins-content {
    position: relative;
    background: var(--color-secondary);
    border-radius: var(--radius-2xl);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}
.gift-coins-modal.show .gift-coins-content {
    transform: scale(1) translateY(0);
}
.gift-coins-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--color-border);
}
.gift-coins-header h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: #1f2937;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gift-coins-close {
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    color: #6b7280;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gift-coins-close:hover {
    background: var(--color-background-tertiary);
    color: #374151;
}
.gift-coins-body {
    padding: 24px;
}
.gift-coins-description {
    margin: 0 0 24px;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: #4b5563;
    background: #fef3c7;
    padding: 16px;
    border-radius: var(--radius-xl);
    border-left: 4px solid #f59e0b;
}
.gift-coins-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.form-row label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #374151;
    min-width: 100px;
    text-align: right;
}
.form-row input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
    background: var(--color-secondary);
}
.form-row input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}
.form-row input::placeholder {
    color: #9ca3af;
}
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.btn-cancel,
.btn-confirm {
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 100px;
}
.btn-cancel {
    background: var(--color-background-tertiary);
    color: #374151;
}
.btn-cancel:hover {
    background: var(--color-border);
}
.btn-confirm {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: var(--color-secondary);
    position: relative;
    overflow: hidden;
}
.btn-confirm:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-confirm:active {
    transform: translateY(0);
}
.btn-confirm:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
/* 加载状?*/
.btn-confirm.loading {
    pointer-events: none;
}
.btn-confirm.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid var(--color-secondary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
/* giftCoinsSpin 已合并到 spin (第727行) */
/* ==========================================
   高对比度模式样式 (Consolidated)
   ========================================== */
@media (prefers-contrast: high) {
  .user-dropdown-menu {
    background: rgba(255, 255, 255, 1);
    border: 2px solid #000000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .dropdown-item {
    border: 1px solid transparent;
  }
  .dropdown-item:hover {
    background: #f0f0f0;
    border-color: #000000;
  }
  .dropdown-divider {
    background: #000000;
    height: 2px;
  }
  .floating-qr-content {
    border: 2px solid #000;
    background: rgba(255, 255, 255, 0.98);
  }
  .floating-qr-close {
    border: 1px solid #000;
  }
  .notification {
    border-width: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
    .error-container {
        background: white;
        border: 2px solid #000;
    }
    .error-page .btn-primary {
        background: #000;
        color: white;
    }
    .error-page .btn-secondary {
        background: white;
        color: #000;
        border: 2px solid #000;
    }
    .quick-link {
        border: 1px solid #000;
    }
    .report-showcase-card {
        border: 2px solid #000;
    }
    .showcase-badge {
        border: 1px solid currentColor;
    }
    .overview-image {
        border: 1px solid #000;
    }
    :root {
        --header-bg: rgba(255, 255, 255, 0.95);
        --header-border: rgba(0, 0, 0, 0.3);
        --header-text: #000000;
    }
    .lightweight-header {
        border-bottom-width: 3px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .stat-item,
    .action-btn,
    .user-btn {
        border: 2px solid var(--header-border);
        background: var(--header-bg);
    }
    .hamburger-menu::before,
    .hamburger-menu::after {
        border-color: #000;
    }
    .auth-btn-outline {
        border-width: 3px;
    }
    .gift-coins-content {
        border: 2px solid #000000;
    }
    .form-row input {
        border: 2px solid #000000;
    }
    .form-row input:focus {
        border-color: #000000;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
    }
}
/* 减少动画（用户偏好） */
/* [REMOVED] prefers-reduced-motion rule removed for consistent animations */
/* ==================== universal_modal_component.css - 通用模态框组件 ==================== */
/* 通用模态框样式 - 与auth_modal保持一?*/
.universal-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 10001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 1rem !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.universal-modal-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.universal-modal-container {
    position: relative !important;
    width: 100% !important;
    max-width: 600px !important;
    max-height: 90vh !important;
    margin: 0 auto !important;
}
.universal-modal-card {
    position: relative !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(224, 224, 224, 0.3) !important;
    border-radius: 1rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    /* 移除 backdrop-filter,避免模糊模态框内容 */
    /* backdrop-filter: blur(20px) !important; */
    /* -webkit-backdrop-filter: blur(20px) !important; */
    overflow: hidden !important;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.universal-modal-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* 关闭按钮 */
.universal-modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
    z-index: 10;
}
.universal-modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #000;
    transform: scale(1.1);
}
/* 模态框头部 */
.universal-modal-header {
    text-align: center;
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}
.modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-size-2xl);
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}
.universal-modal-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000000;
    margin: 0 0 0.5rem;
    font-family: var(--font-family-base);
}
.universal-modal-header p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}
/* 模态框内容区域 */
.universal-modal-content {
    padding: 2rem;
    flex: 1;
    overflow-y: auto;
    max-height: calc(90vh - 200px);
}
.default-content {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 2rem 0;
}
/* 表单样式 */
.modal-form-group {
    margin-bottom: 1.5rem;
}
.modal-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #000000;
    margin-bottom: 0.5rem;
}
.modal-form-input {
    width: 100%;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-family: var(--font-family-base);
    color: #000000;
    background: var(--color-secondary);
    transition: all 0.2s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.modal-form-input:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.modal-form-textarea {
    min-height: 100px;
    resize: vertical;
}
.modal-form-select {
    width: 100%;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-family: var(--font-family-base);
    color: #000000;
    background: var(--color-secondary);
    transition: all 0.2s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.modal-form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.modal-form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #667eea;
}
/* 错误状?*/
.modal-form-input.error {
    border-color: #dc2626;
}
.modal-error-message {
    display: none;
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    padding-left: 0.25rem;
}
.modal-form-input.error + .modal-error-message {
    display: block;
}
/* 模态框底部 */
.universal-modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
}
.modal-btn {
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 2rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-family-base);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 120px;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.025em;
}
.modal-btn-secondary {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(31, 41, 55, 0.75);
    box-shadow: none;
}
.modal-btn-secondary:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
    color: rgba(31, 41, 55, 0.85);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.modal-btn-primary {
    background: linear-gradient(135deg, #F59E0B 0%, #EC4899 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.modal-btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}
.modal-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #EA580C 0%, #DB2777 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.modal-btn-primary:hover:not(:disabled)::before {
    left: 100%;
}
.modal-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-border) 100%);
    color: #9ca3af;
    box-shadow: none;
    transform: none !important;
}
.modal-btn:disabled::before {
    display: none;
}
.modal-btn i {
    font-size: 0.875rem;
    transition: transform 0.3s ease;
    opacity: 0.8;
}
.modal-btn:hover:not(:disabled) i {
    transform: scale(1.05);
    opacity: 1;
}
/* 加载状?*/
.modal-btn.loading {
    pointer-events: none;
}
.modal-btn.loading i {
    animation: spin 1s linear infinite;
}
/* modalBtnSpin 已合并到 spin (第727行) */
/* 响应式设计 - 防止内容溢出 */
.universal-modal-card * {
    box-sizing: border-box;
}
/* 确保初始状态正?*/
.universal-modal-overlay:not(.show) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.universal-modal-card:not(.visible) {
    opacity: 0 !important;
    transform: translateY(30px) scale(0.95) !important;
}
/* 防止页面加载时的闪烁 */
.universal-modal-overlay {
    will-change: opacity, visibility;
}
.universal-modal-card {
    will-change: opacity, transform;
}
/* ===== 模态框权益卡片样式 ===== */
.modal-benefits-cards-section {
    padding: 0 1.5rem;
    margin-bottom: 1rem;
}
.modal-benefits-cards-container {
    width: 100%;
}
.modal-benefit-card {
    position: relative;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-background-tertiary) 100%);
    border-radius: var(--radius-2xl);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 80px; /* 双倍高?*/
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    margin-bottom: 1rem;
}
.modal-benefit-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
/* 升级提示卡片 */
.modal-benefit-card-upgrade {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.modal-benefit-card-upgrade .modal-benefit-card-title,
.modal-benefit-card-upgrade .modal-benefit-card-description {
    color: white;
}
.modal-benefit-card-upgrade .modal-benefit-card-icon i {
    color: white;
}
/* Plus权益卡片 */
.modal-benefit-card-plus {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-background-tertiary) 100%);
    border: 2px solid #e0e0e0;
    color: var(--color-dark);
}
.modal-benefit-card-plus .modal-benefit-card-title {
    color: #111827;
}
.modal-benefit-card-plus .modal-benefit-card-description {
    color: #6b7280;
}
.modal-benefit-card-plus .modal-benefit-card-icon i {
    color: #374151;
}
/* Pro权益卡片 */
.modal-benefit-card-pro {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-background-tertiary) 100%);
    border: 2px solid #e0e0e0;
    color: var(--color-dark);
}
.modal-benefit-card-pro .modal-benefit-card-title {
    color: #111827;
}
.modal-benefit-card-pro .modal-benefit-card-description {
    color: #6b7280;
}
.modal-benefit-card-pro .modal-benefit-card-icon i {
    color: #374151;
}
.modal-benefit-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-background-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.modal-benefit-card-icon i {
    font-size: var(--font-size-xl);
    color: #374151;
}
.modal-benefit-card-content {
    flex: 1;
    position: relative;
    z-index: 2;
}
.modal-benefit-card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #111827;
    font-family: var(--font-family-base);
}
.modal-benefit-card-description {
    font-size: var(--font-size-sm);
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}
/* 发光效果 */
.modal-benefit-card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: modalShimmer 3s ease-in-out infinite;
    z-index: 1;
}
.modal-benefit-card-glow-plus {
    background: linear-gradient(45deg, transparent 30%, rgba(168, 85, 247, 0.3) 50%, transparent 70%);
}
.modal-benefit-card-glow-pro {
    background: linear-gradient(45deg, transparent 30%, rgba(245, 158, 11, 0.3) 50%, transparent 70%);
}
@keyframes modalShimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    50% {
        transform: translateX(0%) translateY(0%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}
/* Plus和Pro卡片移除发光效果，保持简约风?*/
/* .modal-benefit-card-plus::before ?.modal-benefit-card-pro::before 已移?*/
/* ==================== critical.css 迁移 ==================== */
/* 关键路径CSS - 仅包含首屏必需样式 (优化? */
/* ==================== 基础重置和防止布局跳动 ==================== */
html {
  overflow-x: hidden;
  overflow-y: auto; /* 仅在需要时显示滚动条 */
  scroll-behavior: smooth;
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100%;
  height: auto;
}
body {
  overflow-x: hidden;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  background: var(--color-background-tertiary);
  color: #1f2937;
  height: auto;
}
/* ==================== 布局稳定性锁?==================== */
.layout-stability-lock {
  min-height: 100vh;
  overflow-x: hidden;
}
/* ==================== 主内容区 ==================== */
.new-main-content,
.new-main {
  margin-left: var(--main-margin-left, 240px); /* 统一使用--main-margin-left，由sidebar.js动态设置 */
  margin-top: 0;
  min-height: calc(100vh - var(--header-height, 60px)); /* 避免过度撑高 */
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--color-background-tertiary);
  padding-top: calc(var(--header-height, 60px) + 20px); /* 为固定header留出空间，额外20px作为内容间距 */
  flex: 1;
  width: auto;
  max-width: calc(100vw - var(--main-margin-left, 240px));
  box-sizing: border-box;
  overflow-x: hidden;
}
/* 兼容旧版header类名 */
.new-header-left,
.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.new-header-right,
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  flex-shrink: 0;
}
/* 使用统计样式兼容 */
.new-usage-stats,
.usage-stats {
  display: flex;
  align-items: center;
  gap: 12px;
}
.new-usage-item,
.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--header-border);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  color: #6b7280;
  white-space: nowrap;
  transition: all 0.2s ease;
  cursor: default;
  height: 40px;
  min-width: 70px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.new-usage-item:hover,
.stat-item:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: var(--header-border-strong);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
/* ==================== 页面内容容器 ==================== */
.page-content {
  padding: 2rem;
  max-width: none;
  margin: 0 auto;
  width: 100%;
}
/* ==================== 基础加载状?==================== */
.loading {
  opacity: 0.7;
  pointer-events: none;
}
/* ==================== 骨架屏基础样式 ==================== */
/* .skeleton 已在第676行定义，此处重复定义已删除 */
/* ==================== 基础焦点样式 ==================== */
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
/* ==================== 基础选择文本样式 ==================== */
::selection {
  background: #667eea;
  color: white;
}
/* ==================== 基础滚动条样?==================== */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
html.dark ::-webkit-scrollbar-track {
  background: #171717;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #525252;
  border-radius: 3px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #737373;
}
/* ==================== 桌面端响应式 ==================== */
@media (min-width: 769px) {
  .new-main {
    margin-left: var(--sidebar-width, 240px);
  }
}
/* ==================== 移动端响应式 - 关键适配 ==================== */
/* ==================== 字体优化 ==================== */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* ==================== 减少动画模式 ==================== */
/* [REMOVED] prefers-reduced-motion rule removed for consistent animations */
/* ==================== comet_solver.css 迁移 ==================== */
/* comet_solver 页面特定：统一右侧输出标签为浅灰矩形、较大圆角、无下划?*/
/* 增大圆角 */
.ai-tool-output-section .output-tabs .output-tab-btn {
    border-radius: 0.75rem;
}
.ai-tool-output-section .output-tabs .output-tab-btn::before {
    border-radius: 0.75rem;
}
/* 去除下划线（默认/悬停/激活） */
.ai-tool-output-section .output-tabs .output-tab-btn,
.ai-tool-output-section .output-tabs .output-tab-btn:hover,
.ai-tool-output-section .output-tabs .output-tab-btn.active {
    border-bottom: none !important;
    border-bottom-color: transparent !important;
}
/* 单标签时不显示选中?*/
.ai-tool-output-section .output-tabs-container.single-tab .output-tabs .output-tab-btn,
.ai-tool-output-section .output-tabs-container.single-tab .output-tabs .output-tab-btn.active,
.ai-tool-output-section .output-tabs-container.single-tab .output-tabs .output-tab-btn:hover {
    background: transparent !important;
    cursor: default;
}
/* 多标签时显示激活浅灰背?*/
.ai-tool-output-section .output-tabs-container:not(.single-tab) .output-tabs .output-tab-btn.active {
    background: rgba(0, 0, 0, 0.04);
}
/* comet_solver 移动端：4个模型按钮保持同一行，让选项按钮组和语言选择器在同一行 */
/* ==================== paper-tool-sidebar.css 迁移 ==================== */
/* 文档处理工具悬浮侧边栏样?- macOS 液态玻璃磨砂效?*/
/* 工具条主?*/
.tool-switcher-sidebar {
    position: fixed !important;
    left: calc(var(--sidebar-width, 240px) + 40px);
    top: 50%;
    transform: translateY(-50%);
    /* macOS 液态玻璃磨砂背?*/
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(244, 226, 138, 0.3);
    border-radius: var(--radius-2xl);
    /* 增强的模糊效?*/
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    /* 优化的阴?- 多层次阴影营造深度感 */
    box-shadow:
        0 8px 32px rgba(255, 225, 53, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    z-index: 1000;
    width: 40px;
    height: 450px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}
/* 玻璃反光效果 */
.tool-switcher-sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    border-radius: 16px 16px 0 0;
    pointer-events: none;
}
.tool-switcher-sidebar.expanded {
    width: 50px;
}
/* 响应侧边栏折叠状?*/
.sidebar-collapsed .tool-switcher-sidebar {
    left: calc(var(--sidebar-width, 60px) + 20px);
}
/* 工具条头?- 液态玻璃效?*/
.tool-switcher-header {
    padding: 6px 0;
    text-align: center;
    border-bottom: 1px solid rgba(244, 226, 138, 0.25);
    border-radius: 16px 16px 0 0;
    /* 液态玻璃背?*/
    background: rgba(255, 225, 53, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: #5C4100;
    font-size: 0.7rem;
    font-weight: 600;
    position: relative;
    /* 微妙的内阴影 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* 头部玻璃反光 */
.tool-switcher-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 225, 53, 0.2) 50%,
        rgba(247, 201, 72, 0.15) 100%
    );
    border-radius: 16px 16px 0 0;
    pointer-events: none;
    mix-blend-mode: overlay;
}
/* 返回按钮 - 液态玻璃效?*/
.tool-switcher-back-btn {
    display: block;
    width: 100%;
    height: 100%;
    color: #000000;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 3px 0;
    position: relative;
    z-index: 1;
}
.tool-switcher-back-btn:hover {
    color: #000000;
    text-decoration: none;
    /* 液态玻璃悬停效?*/
    background: rgba(255, 225, 53, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(-1px);
    text-shadow: 0 0 8px rgba(255, 225, 53, 0.3);
}
.tool-switcher-back-btn:active {
    background: rgba(255, 225, 53, 0.25);
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 工具项容?- 液态玻璃效?*/
.tool-switcher-items {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    max-height: 400px;
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    /* 半透明背景 */
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 0 0 16px 16px;
}
.tool-switcher-items::-webkit-scrollbar {
    display: none;
}
/* 工具?*/
.tool-switcher-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    color: #000000;
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    font-size: 0.7rem;
    border-radius: var(--radius-md);
    width: 100%;
    min-height: 28px;
}
/* tool-switcher-item 特殊处理：::before 用于左侧指示条，::after 用于 tooltip（无箭头） */
.tool-switcher-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.5rem;
    padding: 0.375rem 0.625rem;
    background: rgba(0, 0, 0, 0.88);
    color: white;
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: var(--z-tooltip, 1060);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: none;
}
.tool-switcher-item[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}
/* 左侧指示?*/
.tool-switcher-item::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #FFE135 0%, #F5B800 100%);
    transform: scaleY(0);
    transition: transform 0.25s ease;
}
/* 工具项图?*/
.tool-switcher-item i {
    font-size: 1rem;
    line-height: 1;
    color: #000000;
}
/* 悬停效果 - 液态玻?*/
.tool-switcher-item:hover {
    /* 液态玻璃悬停背?*/
    background: rgba(255, 225, 53, 0.12);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    color: #000000;
    transform: translateX(2px);
    /* 微妙的发光效?*/
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 8px rgba(255, 225, 53, 0.15);
}
.tool-switcher-item:hover::before {
    transform: scaleY(1);
}
/* 激活状?- 增强液态玻璃效?*/
.tool-switcher-item.active {
    /* 更强烈的液态玻璃效?*/
    background: rgba(255, 225, 53, 0.35);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    color: #000000;
    font-weight: 600;
    /* 增强的多层次阴影 */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 2px 12px rgba(255, 225, 53, 0.2);
}
.tool-switcher-item.active::before {
    transform: scaleY(1);
}
/* 移动端适配 *//* ==================== 超小屏幕进一步优化==================== *//* ==================== payment-modal-optimized.css 迁移 ==================== */
/*
 * 价格模态框优化样式 - 高性能版本
 *
 * 优化清单（参考顶级科技公司最佳实践）:
 * ? GPU加速：使用 transform: translateZ(0) 和 will-change
 * ? 减少重绘：使用 contain 属性隔离布局
 * ? 兼容性：完整的 vendor 前缀支持
 * ? 降级方案：不支持 backdrop-filter 时的备选样式
 * ? 性能：优化过渡动画曲线
 */

/* 基础样式 */
.global-payment-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10100;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: var(--opacity-hidden, 0);
    visibility: hidden;
    /* 优化过渡性能 */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--modal-overlay-light, rgba(255, 255, 255, 0.8));
    /* 完整的 backdrop-filter 前缀 */
    -webkit-backdrop-filter: blur(4px);
    -moz-backdrop-filter: blur(4px);
    -ms-backdrop-filter: blur(4px);
    -o-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    overflow: hidden;
    box-sizing: border-box;
    /* 防止滚动穿透 */
    overscroll-behavior: contain;
    -ms-scroll-chaining: none;
    /* 布局隔离优化 */
    contain: layout style;
    /* 触摸优化 */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* 不支持 backdrop-filter 的降级样式 */
.global-payment-modal.no-backdrop-filter {
    background: rgba(255, 255, 255, 0.95);
}

.global-payment-modal.no-backdrop-filter .global-payment-modal-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.global-payment-modal.no-backdrop-filter .global-payment-modal-content {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.global-payment-modal.active {
    display: flex;
    opacity: var(--opacity-visible);
    visibility: visible;
}
.global-payment-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: backdrop-filter 0.25s ease;
}
.global-payment-modal-content {
    position: relative;
    background: var(--modal-content-translucent, rgba(255, 255, 255, 0.45));
    /* 完整的 backdrop-filter 前缀 */
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    -moz-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    max-width: 960px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.1),
                inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    /* GPU加速：使用3D变换 */
    -webkit-transform: translateY(30px) scale(0.9) translateZ(0);
    transform: translateY(30px) scale(0.9) translateZ(0);
    /* 优化过渡曲线 - 苹果风格弹性动画 */
    -webkit-transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                        opacity 0.25s ease;
    -moz-transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                     opacity 0.25s ease;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease;
    /* 布局隔离 */
    contain: layout;
    /* 硬件加速提示 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
.global-payment-modal.active .global-payment-modal-content {
    -webkit-transform: translateY(0) scale(1) translateZ(0);
    -moz-transform: translateY(0) scale(1) translateZ(0);
    transform: translateY(0) scale(1) translateZ(0);
}

/* 减少动画时的重绘 - 动画进行时隐藏子元素的复杂效果 */
.global-payment-modal:not(.active) .global-payment-modal-body {
    pointer-events: none;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .global-payment-modal-content {
        border: 2px solid #000;
        background: #fff;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .global-payment-modal,
    .global-payment-modal-content,
    .global-payment-modal-close,
    .payment-option-card {
        transition: none !important;
        animation: none !important;
    }

    .global-payment-modal-content {
        transform: none !important;
    }

    .global-payment-modal.active .global-payment-modal-content {
        transform: none !important;
    }
}
/* 头部样式 */
.global-payment-modal-header {
    padding: 1.25rem 1.75rem;
    background: var(--modal-header-translucent);
    border-bottom: 1px solid var(--modal-button-light);
    color: #1f2937;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.global-payment-modal-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: #111827;
}
.global-payment-modal-title i {
    font-size: 1.4rem;
    color: #F59E0B;
}
.global-payment-modal-close {
    background: var(--modal-button-light);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #4b5563;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.global-payment-modal-close:hover {
    background: var(--modal-button-hover);
    transform: rotate(90deg) scale(1.1);
}
/* 内容区域 - 白色磨砂背景 */
.global-payment-modal-body {
    padding: 1.25rem;
    max-height: calc(85vh - 70px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(155, 155, 155, 0.3) transparent;
    /* 白色磨砂背景效果 */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    margin: 0 1rem 1rem 1rem;
    position: relative;
}
.global-payment-modal-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    border-radius: 16px;
}
.global-payment-modal-body::-webkit-scrollbar {
    width: 6px;
}
.global-payment-modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.global-payment-modal-body::-webkit-scrollbar-thumb {
    background: rgba(155, 155, 155, 0.3);
    border-radius: 3px;
}
/* 付款选项网格 */
.payment-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}
/* 付款选项卡片 */
.payment-option-card {
    background: var(--modal-card-subtle);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    transform: translateZ(0);
}
.payment-option-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
.payment-option-card:hover {
    transform: translateY(-4px) scale(1.02);
    background: var(--modal-card-hover);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25),
                inset 0 1px 1px rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
}
.payment-option-card.popular {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15),
                inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.payment-option-card.popular:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.35);
}
/* 推荐标签 */
.payment-option-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    color: rgba(31, 41, 55, 0.85);
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    transform: rotate(0deg);
    z-index: 2;
    border-radius: 0 16px 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 用户选择标签 (右上角) */
.payment-option-ribbon-right {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(255, 112, 67, 0.95) 0%, rgba(255, 97, 79, 0.95) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: white;
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    transform: rotate(0deg);
    z-index: 2;
    border-radius: 0 16px 0 12px;
}

/* 选项头部 */
.payment-option-header {
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}
.payment-option-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}
.payment-option-title i {
    color: rgba(139, 92, 246, 0.8);
    font-size: 1rem;
}
.payment-option-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: #FF614F;
}
.payment-option-price small {
    font-size: 0.8rem;
    font-weight: 400;
    color: #6b7280;
}
/* 选项底部 */
.payment-option-footer {
    padding: 0.875rem 1.25rem 1.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
}
/* 按钮样式 */
.payment-option-btn {
    width: 100%;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--color-secondary);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform: translateZ(0);
}
.payment-option-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}
.payment-option-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.2),
                inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.payment-option-btn:hover::before {
    left: 100%;
}
.payment-option-btn.popular-btn {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
    border-color: rgba(139, 92, 246, 0.3);
    color: rgba(0, 0, 0, 0.85);
}
.payment-option-btn.popular-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.3),
                inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
/* 选项内容 */
.payment-option-body {
    height: 0;
    padding: 0;
    overflow: hidden;
}
.payment-option-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.payment-option-features li {
    padding: 0.4rem 0;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}
.payment-option-features i {
    color: #10b981;
    font-size: 0.8rem;
}

/* 标签切换样式 */
.payment-tabs-container {
    margin-bottom: 1rem;
}
.payment-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}
.payment-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.25s ease;
}
.payment-tab:hover {
    color: #374151;
    background: rgba(255, 255, 255, 0.4);
}
.payment-tab.active {
    background: rgba(156, 163, 175, 0.25);
    color: rgba(31, 41, 55, 0.9);
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
    font-weight: 600;
}
.payment-tab.active i {
    color: rgba(107, 114, 128, 0.9);
}
.payment-tab i {
    font-size: 1rem;
}

/* 说明区域样式 */
.payment-description {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.5;
}
.payment-description i {
    color: #F59E0B;
    font-size: 1rem;
    flex-shrink: 0;
}
#payment-balance-display {
    color: #F59E0B;
    font-weight: 700;
    margin: 0 0.25rem;
    font-size: 1.6em;
    font-family: 'Roboto', 'Helvetica Neue', sans-serif;
    letter-spacing: -0.02em;
}

/* 紧凑型网格布局 - 第一行3张，第二行3张 */
.payment-options-grid.compact {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
    gap: 0.75rem;
}
/* 前3张卡片各占2列 */
.payment-options-grid.compact > .payment-option-card.compact:nth-child(1),
.payment-options-grid.compact > .payment-option-card.compact:nth-child(2),
.payment-options-grid.compact > .payment-option-card.compact:nth-child(3) {
    grid-column: span 2;
}
/* 第4、5、6张卡片，各占2列 */
.payment-options-grid.compact > .payment-option-card.compact:nth-child(4) {
    grid-column: 1 / 3;
}
.payment-options-grid.compact > .payment-option-card.compact:nth-child(5) {
    grid-column: 3 / 5;
}
.payment-options-grid.compact > .payment-option-card.compact:nth-child(6) {
    grid-column: 5 / 7;
}

/* 紧凑型卡片样式 */
.payment-option-card.compact {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    height: 100%;
}
.payment-option-card.compact:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.45);
}
.payment-option-card.compact.popular {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.3);
}
.payment-option-card.compact.popular:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(139, 92, 246, 0.4);
}
.payment-option-header.compact {
    padding: 1.5rem 1rem 0.35rem 1rem;
}
.payment-option-title.compact {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
/* 星币显示样式 */
.star-coins-display {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}
/* 营销数字字体 */
.coin-number {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 1.6rem;
}
/* 查重次数数字字体 - 与星币数字相同 */
.check-number {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 1.6rem;
}
/* 星币单位文字 */
.coin-unit {
    font-size: 0.85em;
    font-weight: 500;
    opacity: 0.9;
}
/* 赠送星币 */
.bonus-coins {
    font-size: 0.7em;
    color: #f59e0b;
    font-weight: 500;
    margin-left: 0;
}
.bonus-coins .coin-number {
    color: #f59e0b;
    font-size: 1.1rem;
}
/* 徽章样式 - 左上角角标（渐进色系）*/
.payment-option-badge {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 6px 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 2;
    border-radius: 16px 0 12px 0;
}
.payment-option-badge i {
    font-size: 0.65rem;
}

/* 基础版 - 浅金色→金色 */
.payment-option-badge.badge-rookie {
    background: linear-gradient(135deg, #FDE68A 0%, #FCD34D 100%);
    color: #78350f;
    box-shadow: 0 2px 8px rgba(252, 211, 77, 0.4);
}
.payment-option-badge.badge-rookie i {
    color: #92400e;
}

/* 标准版 - 金色→深金色 */
.payment-option-badge.badge-warrior {
    background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
    color: #78350f;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
.payment-option-badge.badge-warrior i {
    color: #92400e;
}

/* 专业版 - 金色→玫瑰金 */
.payment-option-badge.badge-sage {
    background: linear-gradient(135deg, #F59E0B 0%, #EC4899 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4);
}
.payment-option-badge.badge-sage i {
    color: rgba(255, 255, 255, 0.9);
}

/* 企业版 - 玫瑰金→紫金 */
.payment-option-badge.badge-navigator {
    background: linear-gradient(135deg, #EC4899 0%, #A855F7 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}
.payment-option-badge.badge-navigator i {
    color: rgba(255, 255, 255, 0.9);
}

/* 旗舰版 - 深紫→金紫 */
.payment-option-badge.badge-pioneer {
    background: linear-gradient(135deg, #7C3AED 0%, #D946EF 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.5);
}
.payment-option-badge.badge-pioneer i {
    color: rgba(255, 255, 255, 0.95);
}

/* 查重卡片徽章 - 白色半透明 */
.payment-option-badge.badge-plagiarism-single,
.payment-option-badge.badge-plagiarism-times,
.payment-option-badge.badge-plagiarism-daily {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    color: rgba(31, 41, 55, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.payment-option-price.compact {
    font-size: 1.5rem;
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.payment-option-price.compact small {
    font-size: 0.7rem;
}
.payment-option-footer.compact {
    padding: 0.5rem 1rem 1.25rem 1rem;
    margin-top: auto;
}
.payment-option-btn.compact {
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(31, 41, 55, 0.75);
    font-weight: 600;
    transition: all 0.3s ease;
}
.payment-option-btn.compact:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
    transform: translateY(-2px);
    color: rgba(31, 41, 55, 0.85);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
/* 强调按钮 - 橙色渐变 */
.payment-option-btn.compact.highlight-btn {
    background: linear-gradient(135deg, #F59E0B 0%, #EC4899 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.payment-option-btn.compact.highlight-btn:hover {
    background: linear-gradient(135deg, #EA580C 0%, #DB2777 100%);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.payment-option-body.compact {
    padding: 0.875rem 1rem;
    flex: 1;
}
.payment-option-features.compact li {
    padding: 0.25rem 0;
    font-size: 0.8rem;
    gap: 0.5rem;
}
.payment-option-features.compact i {
    font-size: 0.7rem;
}

/* 信息卡片样式 - 视觉效果略弱 */
.payment-info-card {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    opacity: 0.85;
    /* align-self: start; */
    position: relative;
}
.payment-info-card:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* TIPS标签 - 信息卡片左上角 */
.payment-info-tips-badge {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    color: rgba(0, 0, 0, 0.85);
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 2;
    border-radius: 16px 0 12px 0;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.payment-info-content {
    padding: 2.25rem 1.5rem 2.1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    justify-content: flex-start;
    flex: 1;
}
.payment-info-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.payment-info-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: rgba(31, 41, 55, 0.9);
    line-height: 1.4;
}
.payment-info-features i {
    color: rgba(139, 92, 246, 0.8);
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 50%;
}

/* 币种切换器样式 */
.currency-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    margin-top: auto;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border-radius: 10px;
}
.currency-label {
    font-size: 0.875rem;
    color: rgba(31, 41, 55, 0.75);
    font-weight: 500;
}
.currency-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}
.currency-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.currency-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(139, 92, 246, 0.2);
    transition: 0.3s;
    border-radius: 24px;
}
.currency-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6) 0%, rgba(168, 85, 247, 0.6) 100%);
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.currency-switch input:checked + .currency-slider {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
}
.currency-switch input:checked + .currency-slider:before {
    transform: translateX(24px);
}

/* ========== 会员计划卡片样式 ========== */
.membership-plans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.membership-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.membership-plan-card:hover {
    background: rgba(255, 255, 255, 0.38);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.membership-plan-card.membership-plus {
    border-color: rgba(139, 92, 246, 0.25);
}
.membership-plan-card.membership-plus:hover {
    border-color: rgba(139, 92, 246, 0.4);
}
.membership-plan-card.membership-pro {
    border-color: rgba(245, 158, 11, 0.25);
}
.membership-plan-card.membership-pro:hover {
    border-color: rgba(245, 158, 11, 0.4);
}
.membership-plan-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    border-radius: 0 16px 0 12px;
    z-index: 2;
}
.membership-plan-badge.pro-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}
.membership-plan-header {
    padding: 1.25rem 1.25rem 0.75rem;
    text-align: center;
}
.membership-plan-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}
.membership-plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}
.membership-price-amount {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.02em;
}
.membership-price-period {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}
.membership-price-original {
    font-size: 0.85rem;
    color: #9ca3af;
    text-decoration: line-through;
    margin-left: 6px;
}
.membership-plan-body {
    flex: 1;
    padding: 0 1.25rem;
}
.membership-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.membership-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.8rem;
    color: #374151;
    line-height: 1.5;
}
.membership-plan-features li i {
    color: #8b5cf6;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.membership-pro .membership-plan-features li i {
    color: #f59e0b;
}
.membership-plan-features li.membership-sub-desc {
    padding-left: 22px;
    font-size: 0.72rem;
    color: #9ca3af;
}
.membership-plan-footer {
    padding: 1rem 1.25rem 1.25rem;
}
.membership-plan-btn {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    cursor: pointer;
    transition: all 0.25s ease;
}
.membership-plan-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}
.membership-plan-btn.pro-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}
.membership-plan-btn.pro-btn:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

/* 会员计划响应式 */
@media (max-width: 768px) {
    .membership-plans-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    .membership-plan-header {
        padding: 1rem 1rem 0.5rem;
    }
    .membership-price-amount {
        font-size: 1.75rem;
    }
    .membership-plan-body {
        padding: 0 1rem;
    }
    .membership-plan-footer {
        padding: 0.875rem 1rem 1rem;
    }
}

/* 平板设备响应式 - 两列布局 */
@media (max-width: 1024px) and (min-width: 769px) {
    .payment-options-grid.compact {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }
    /* 重置桌面端的nth-child规则 */
    .payment-options-grid.compact > .payment-option-card.compact:nth-child(1),
    .payment-options-grid.compact > .payment-option-card.compact:nth-child(2),
    .payment-options-grid.compact > .payment-option-card.compact:nth-child(3),
    .payment-options-grid.compact > .payment-option-card.compact:nth-child(4),
    .payment-options-grid.compact > .payment-option-card.compact:nth-child(5),
    .payment-options-grid.compact > .payment-option-card.compact:nth-child(6) {
        grid-column: span 1;
    }
    .payment-option-header.compact {
        padding: 0.875rem;
    }
    .payment-option-title.compact {
        font-size: 0.95rem;
    }
    .payment-option-price.compact {
        font-size: 1.5rem;
    }
    .payment-option-body.compact {
        padding: 0.75rem;
    }
}

/* 支付方式选择 */
.payment-method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.payment-method-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.payment-method-item input[type="radio"] {
    display: none;
}
.payment-method-item.selected {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.1);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2),
                inset 0 1px 1px rgba(255, 255, 255, 0.2);
    transform: scale(1.02);
}
.payment-method-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.payment-method-icon.wechat {
    color: #09BB07;
}
.payment-method-icon.alipay {
    color: #1677FF;
}
.payment-method-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #1f2937;
}
/* 二维码容?*/
.payment-qrcode-container {
    text-align: center;
    padding: 1rem;
}
.payment-qrcode-wrapper {
    background: white;
    padding: 0.75rem;
    border-radius: var(--radius-xl);
    display: inline-block;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.payment-qrcode-wrapper.wechat {
    border: 1px solid rgba(9, 187, 7, 0.2);
}
.payment-qrcode-wrapper.alipay {
    border: 1px solid rgba(22, 119, 255, 0.2);
}
.payment-qrcode-box {
    width: 173px;
    height: 173px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.payment-qrcode-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* 加载状?*/
.payment-loading {
    text-align: center;
    padding: 2rem;
}
.payment-loading-spinner {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}
.payment-loading-spinner i {
    animation: spin 1s linear infinite;
    display: inline-block;
}
/* paymentSpin 已合并到 spin (第727??) */
/* 成功状?*/
.payment-success {
    text-align: center;
    padding: 2rem;
}
.payment-success-icon {
    font-size: 4rem;
    color: #10b981;
    margin-bottom: 1rem;
}
/* 响应式设?*//* 优化的过渡动?*/
.payment-transition-enter {
    opacity: 0;
    transform: scale(0.9);
}
.payment-transition-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.payment-transition-exit {
    opacity: 1;
    transform: scale(1);
}
.payment-transition-exit-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* ==================== 星能补给站 Dark Mode ==================== */
html.dark .global-payment-modal {
    background: rgba(0, 0, 0, 0.6);
}
html.dark .global-payment-modal.no-backdrop-filter {
    background: rgba(0, 0, 0, 0.85);
}
html.dark .global-payment-modal.no-backdrop-filter .global-payment-modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}
html.dark .global-payment-modal.no-backdrop-filter .global-payment-modal-content {
    background: rgba(23, 23, 23, 0.98);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
html.dark .global-payment-modal-overlay {
    background: rgba(0, 0, 0, 0.5);
}
html.dark .global-payment-modal-content {
    background: var(--modal-content-translucent, rgba(30, 30, 30, 0.45));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.3),
                inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Header */
html.dark .global-payment-modal-header {
    color: #e5e5e5;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
html.dark .global-payment-modal-title {
    color: #f5f5f5;
}
html.dark .global-payment-modal-close {
    color: #a3a3a3;
    border-color: rgba(255, 255, 255, 0.1);
}
html.dark .global-payment-modal-close:hover {
    color: #e5e5e5;
}
/* Body */
html.dark .global-payment-modal-body {
    background: rgba(30, 30, 30, 0.25);
    border-color: rgba(255, 255, 255, 0.06);
}
html.dark .global-payment-modal-body::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
}
html.dark .global-payment-modal-body::-webkit-scrollbar-thumb {
    background: rgba(155, 155, 155, 0.2);
}
/* Payment option cards */
html.dark .payment-option-card {
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark .payment-option-card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
}
html.dark .payment-option-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
                inset 0 1px 1px rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}
html.dark .payment-option-card.popular {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2),
                inset 0 1px 1px rgba(255, 255, 255, 0.05);
}
html.dark .payment-option-card.popular:hover {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.4);
}
/* Option header & title */
html.dark .payment-option-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}
html.dark .payment-option-title {
    color: #e5e5e5;
}
html.dark .payment-option-price {
    color: #FF7A65;
}
html.dark .payment-option-price small {
    color: #a3a3a3;
}
/* Option footer & features */
html.dark .payment-option-footer {
    background: rgba(255, 255, 255, 0.02);
}
html.dark .payment-option-features li {
    color: #d4d4d4;
}
/* Ribbon / badges */
html.dark .payment-option-ribbon {
    background: rgba(255, 255, 255, 0.15);
    color: #d4d4d4;
    border-color: rgba(255, 255, 255, 0.15);
}
html.dark .payment-option-badge.badge-plagiarism-single,
html.dark .payment-option-badge.badge-plagiarism-times,
html.dark .payment-option-badge.badge-plagiarism-daily {
    background: rgba(255, 255, 255, 0.12);
    color: #d4d4d4;
    border-color: rgba(255, 255, 255, 0.15);
}
/* Buttons */
html.dark .payment-option-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e5e5e5;
}
html.dark .payment-option-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.25),
                inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
html.dark .payment-option-btn::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
html.dark .payment-option-btn.popular-btn {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
    border-color: rgba(139, 92, 246, 0.35);
    color: #e5e5e5;
}
html.dark .payment-option-btn.popular-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4) 0%, rgba(168, 85, 247, 0.4) 100%);
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.35),
                inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
/* Compact cards */
html.dark .payment-option-card.compact {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark .payment-option-card.compact:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
}
html.dark .payment-option-card.compact.popular {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.25);
}
html.dark .payment-option-card.compact.popular:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.35);
}
html.dark .payment-option-btn.compact {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #d4d4d4;
}
html.dark .payment-option-btn.compact:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
    color: #e5e5e5;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
/* Tabs */
html.dark .payment-tabs {
    background: rgba(255, 255, 255, 0.06);
}
html.dark .payment-tab {
    color: #a3a3a3;
}
html.dark .payment-tab:hover {
    color: #d4d4d4;
    background: rgba(255, 255, 255, 0.08);
}
html.dark .payment-tab.active {
    background: rgba(255, 255, 255, 0.12);
    color: #e5e5e5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
html.dark .payment-tab.active i {
    color: #a3a3a3;
}
/* Description */
html.dark .payment-description {
    background: rgba(255, 255, 255, 0.06);
    color: #a3a3a3;
}
/* Info card */
html.dark .payment-info-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
html.dark .payment-info-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark .payment-info-tips-badge {
    background: rgba(255, 255, 255, 0.12);
    color: #d4d4d4;
    border-color: rgba(255, 255, 255, 0.15);
}
html.dark .payment-info-features li {
    color: #d4d4d4;
}
html.dark .payment-info-features i {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    border-color: rgba(139, 92, 246, 0.25);
}
/* Currency switch */
html.dark .currency-switch-wrapper {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
}
html.dark .currency-label {
    color: #a3a3a3;
}
html.dark .currency-slider {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    border-color: rgba(139, 92, 246, 0.25);
}
/* Payment method items */
html.dark .payment-method-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark .payment-method-item.selected {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.15);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.25),
                inset 0 1px 1px rgba(255, 255, 255, 0.05);
}
html.dark .payment-method-name {
    color: #e5e5e5;
}
/* QR code */
html.dark .payment-qrcode-wrapper {
    background: white;
}
/* Loading spinner */
html.dark .payment-loading-spinner {
    color: #d4d4d4;
}
html.dark .payment-loading-spinner i {
    color: #b0b0b0;
}
/* Success */
html.dark .payment-success-icon {
    color: #34d399;
}
/* Membership cards */
html.dark .membership-plan-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark .membership-plan-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
html.dark .membership-plan-card.membership-plus {
    border-color: rgba(139, 92, 246, 0.3);
}
html.dark .membership-plan-card.membership-plus:hover {
    border-color: rgba(139, 92, 246, 0.45);
}
html.dark .membership-plan-card.membership-pro {
    border-color: rgba(245, 158, 11, 0.3);
}
html.dark .membership-plan-card.membership-pro:hover {
    border-color: rgba(245, 158, 11, 0.45);
}
html.dark .membership-plan-title {
    color: #e5e5e5;
}
html.dark .membership-price-amount {
    color: #e5e5e5;
}
html.dark .membership-price-period {
    color: #a3a3a3;
}
html.dark .membership-price-original {
    color: #737373;
}
html.dark .membership-plan-features li {
    color: #d4d4d4;
}
html.dark .membership-plan-features li.membership-sub-desc {
    color: #737373;
}

/* ---- Dark mode utility classes for JS inline content ---- */
html.dark .pm-text-heading {
    color: #ffffff !important;
}
html.dark .pm-text-body {
    color: #e5e5e5 !important;
}
html.dark .pm-text-muted {
    color: #b0b0b0 !important;
}
html.dark .pm-text-subtle {
    color: #8a8a8a !important;
}
html.dark .pm-bg-glass {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html.dark .pm-bg-card {
    background: rgba(255, 255, 255, 0.08) !important;
}
html.dark .pm-bg-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
}
html.dark .pm-bg-tip {
    background: rgba(50, 45, 25, 0.85) !important;
    border-left-color: #d4a017 !important;
}
html.dark .pm-bg-tip p {
    color: #b0b0b0 !important;
}
html.dark .pm-bg-tip strong {
    color: #e5e5e5 !important;
}
html.dark .pm-btn-ghost {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #e5e5e5 !important;
}
html.dark .pm-btn-primary-gold {
    background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.3) !important;
}
html.dark .pm-input-field {
    background: rgba(30, 30, 30, 0.8) !important;
    color: #e5e5e5 !important;
    border-color: rgba(255, 87, 34, 0.3) !important;
}
html.dark .pm-stepper-btn {
    background: rgba(30, 30, 30, 0.8) !important;
    color: #FF7A65 !important;
    border-color: #FF7A65 !important;
}
html.dark .pm-stepper-btn:hover {
    background: #FF5722 !important;
    color: white !important;
}
html.dark .pm-border-separator {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}
html.dark .pm-exchange-cost-bg {
    background: rgba(255, 87, 34, 0.1) !important;
}

/* High contrast override for dark mode */
@media (prefers-contrast: high) {
    html.dark .global-payment-modal-content {
        border: 2px solid #fff;
        background: #1a1a1a;
    }
}

/* ==================== benefits-skeleton.css 迁移 ==================== */
/* Benefits页面骨架屏样?- 初始加载状?*/
/* 新版骨架?- 作为表格tbody */
/* 骨架屏tbody - 初始显示 */
.skeleton-tbody {
    display: table-row-group;
    /* 删除动画，避免表格行从下往上移动导致的抖动效果 */
}
.skeleton-tbody.hidden {
    display: none !important;
}
/* 真实数据tbody - 初始隐藏 */
.data-tbody {
    display: none;
    /* 删除动画，避免表格行从下往上移动导致的抖动效果 */
}
.data-tbody.visible {
    display: table-row-group;
}
/* 骨架屏行样式 - 使用tr结构 */
.skeleton-row-tr {
    border-bottom: 1px solid #f0f0f0;
}
.skeleton-row-tr:last-child {
    border-bottom: none;
}
/* 偶数行背景色 */
.skeleton-row-tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}
.skeleton-row-tr:nth-child(odd) {
    background-color: var(--color-secondary);
}
/* 骨架屏单元格样式 */
.skeleton-cell-td {
    padding: var(--spacing-sm) var(--spacing-md);
    vertical-align: middle;
    text-align: center;
}
/* 分页骨架屏显示控?*/
#usagePaginationLoading,
#paymentPaginationLoading {
    display: flex;
}
#usagePaginationLoading.hidden,
#paymentPaginationLoading.hidden {
    display: none !important;
}
/* 旧版兼容 - 确保骨架屏tbody在页面初始加载时立即可见 */
#usageHistoryLoading,
#paymentHistoryLoading {
    display: table-row-group !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* 当内容加载完成后隐藏骨架?*/
#usageHistoryLoading.hidden,
#paymentHistoryLoading.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* 骨架屏基础样式 */
.skeleton-loader {
    background: linear-gradient(
        90deg,
        var(--color-border) 0%,
        var(--color-background-tertiary) 25%,
        var(--color-border) 50%,
        var(--color-background-tertiary) 75%,
        var(--color-border) 100%
    ) !important;
    background-size: 400% 100% !important;
    animation: skeleton-wave 1.5s ease-in-out infinite !important;
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}
/* 图标骨架屏样?*/
.skeleton-loader.sk-icon {
    border-radius: var(--radius-md);
}
.skeleton-loader::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
/* benefits-skeleton-wave/shimmer 已合并到 skeleton-wave/shimmer (第5278/5282行) */
/* 表格骨架屏容?*/
.table-skeleton {
    width: 100%;
    padding: 0;
    background: var(--color-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
/* 旧版骨架屏样式（保留兼容性） */
/* 表头骨架屏行 - 不再使用，但保留样式兼容 */
.skeleton-header-row {
    display: none !important;
}
/* 表头骨架屏单元格 */
.skeleton-header-cell {
    display: block !important;
    height: 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, #e0e0e0 0%, #ececec 25%, #e0e0e0 50%, #ececec 75%, #e0e0e0 100%) !important;
    background-size: 400% 100% !important;
    animation: skeleton-wave 1.5s ease-in-out infinite !important;
    position: relative;
    overflow: hidden;
}
.skeleton-header-cell::after {
    content: "" !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
}
/* 表格行骨架屏 */
.skeleton-row {
    display: flex !important;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    gap: 20px;
    transition: background-color 0.2s ease;
    visibility: visible !important;
    opacity: 1 !important;
}
.skeleton-row:hover {
    background-color: #fafafa;
}
.skeleton-row:last-child {
    border-bottom: none;
}
/* 骨架屏单元格容器 */
.skeleton-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* 使用记录表格骨架屏列?- 使用data属?*/
.usage-skeleton .skeleton-row .skeleton-cell[data-col="date"] {
    width: 120px;
    min-width: 100px;
}
.usage-skeleton .skeleton-row .skeleton-cell[data-col="type"] {
    width: 80px;
    min-width: 60px;
}
.usage-skeleton .skeleton-row .skeleton-cell[data-col="details"] {
    flex: 1;
    min-width: 150px;
}
.usage-skeleton .skeleton-row .skeleton-cell[data-col="change"] {
    width: 80px;
    min-width: 60px;
}
/* 支付记录表格骨架屏列?- 使用data属?*/
.payment-skeleton .skeleton-row .skeleton-cell[data-col="time"] {
    width: 120px;
    min-width: 100px;
}
.payment-skeleton .skeleton-row .skeleton-cell[data-col="order"] {
    width: 140px;
    min-width: 120px;
}
.payment-skeleton .skeleton-row .skeleton-cell[data-col="package"] {
    flex: 1;
    min-width: 120px;
}
.payment-skeleton .skeleton-row .skeleton-cell[data-col="amount"] {
    width: 80px;
    min-width: 60px;
}
.payment-skeleton .skeleton-row .skeleton-cell[data-col="status"] {
    width: 70px;
    min-width: 50px;
}
.payment-skeleton .skeleton-row .skeleton-cell[data-col="action"] {
    width: 60px;
    min-width: 40px;
}
/* 骨架屏元素统一基类 - 公共动画与布局 */
.skeleton-date,
.skeleton-time,
.skeleton-badge,
.skeleton-text,
.skeleton-change,
.skeleton-order-id,
.skeleton-package,
.skeleton-amount,
.skeleton-status,
.skeleton-action-btn {
    display: block !important;
    background: linear-gradient(90deg, var(--color-border) 0%, var(--color-background-tertiary) 25%, var(--color-border) 50%, var(--color-background-tertiary) 75%, var(--color-border) 100%) !important;
    background-size: 400% 100% !important;
    animation: skeleton-wave 1.5s ease-in-out infinite !important;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}
.skeleton-date::after,
.skeleton-time::after,
.skeleton-badge::after,
.skeleton-text::after,
.skeleton-change::after,
.skeleton-order-id::after,
.skeleton-package::after,
.skeleton-amount::after,
.skeleton-status::after,
.skeleton-action-btn::after {
    content: "" !important;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
}
/* 骨架屏元素尺寸定义 */
.skeleton-date { width: 75px; height: 14px; }
.skeleton-time { width: 50px; height: 12px; opacity: 0.8; animation-delay: 0.1s; }
.skeleton-time::after { animation-delay: 0.1s; }
.skeleton-badge { width: 72px; height: 24px; border-radius: var(--radius-xl); }
.skeleton-text { width: 85%; height: 16px; }
.skeleton-text.skeleton-text-short { width: 60%; }
.skeleton-text.skeleton-text-long { width: 95%; }
.skeleton-change { width: 55px; height: 18px; border-radius: var(--radius-sm); }
.skeleton-order-id { width: 100%; height: 14px; }
.skeleton-package { width: 85%; height: 16px; }
.skeleton-package.skeleton-package-short { width: 60%; }
.skeleton-package.skeleton-package-long { width: 100%; }
.skeleton-amount { width: 55px; height: 16px; }
.skeleton-status { width: 56px; height: 22px; border-radius: 11px; }
.skeleton-action-btn { width: 32px; height: 32px; border-radius: var(--radius-md); }
/* 分页骨架 */
.pagination-skeleton {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-top: 16px;
    border-top: 1px solid #f0f0f0;
}
.pagination-skeleton-info {
    width: 100px;
    height: 18px;
    border-radius: var(--radius-sm);
}
.pagination-skeleton-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pagination-skeleton-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
}
.pagination-skeleton-numbers {
    display: flex;
    gap: 4px;
}
.pagination-skeleton-number {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
}
/* 行渐进式动画延迟 */
.skeleton-row:nth-child(2) .skeleton-loader {
    animation-delay: 0.05s;
}
.skeleton-row:nth-child(3) .skeleton-loader {
    animation-delay: 0.1s;
}
.skeleton-row:nth-child(4) .skeleton-loader {
    animation-delay: 0.15s;
}
.skeleton-row:nth-child(5) .skeleton-loader {
    animation-delay: 0.2s;
}
.skeleton-row:nth-child(6) .skeleton-loader {
    animation-delay: 0.25s;
}
/* 新版tr结构的行渐进式动画延迟 */
.skeleton-row-tr:nth-child(2) .skeleton-loader {
    animation-delay: 0.05s;
}
.skeleton-row-tr:nth-child(3) .skeleton-loader {
    animation-delay: 0.1s;
}
.skeleton-row-tr:nth-child(4) .skeleton-loader {
    animation-delay: 0.15s;
}
.skeleton-row-tr:nth-child(5) .skeleton-loader {
    animation-delay: 0.2s;
}
/* 单元格内元素的细微延迟 */
.skeleton-cell .skeleton-loader:nth-child(2) {
    animation-delay: 0.08s;
}
/* 移动端适配 - 表格容器最小高度，防止跳动 */
.table-wrapper-with-skeleton {
    min-height: 400px;
    position: relative;
    transition: min-height 0.3s ease;
}
/* 加载时保持高?*/
.maintaining-height {
    min-height: inherit;
    transition: min-height 0.3s ease;
}
/* 渐入动画 - 已删除，避免表格抖动 */
/* benefits-skeleton-fadeIn 已删除，避免表格行移动导致的抖动 */
/* 骨架屏脉动效果增?*/
.skeleton-loader {
    will-change: background-position;
}
/* 确保表格骨架屏内所有元素都有动?*/
.table-skeleton .skeleton-loader,
.table-skeleton .skeleton-date,
.table-skeleton .skeleton-time,
.table-skeleton .skeleton-badge,
.table-skeleton .skeleton-text,
.table-skeleton .skeleton-change,
.table-skeleton .skeleton-order-id,
.table-skeleton .skeleton-package,
.table-skeleton .skeleton-amount,
.table-skeleton .skeleton-status,
.table-skeleton .skeleton-action-btn,
.table-skeleton .skeleton-header-cell,
.table-skeleton .pagination-skeleton-info,
.table-skeleton .pagination-skeleton-btn,
.table-skeleton .pagination-skeleton-number {
    animation: skeleton-wave 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.table-skeleton .skeleton-loader::after,
.table-skeleton .skeleton-date::after,
.table-skeleton .skeleton-time::after,
.table-skeleton .skeleton-badge::after,
.table-skeleton .skeleton-text::after,
.table-skeleton .skeleton-change::after,
.table-skeleton .skeleton-order-id::after,
.table-skeleton .skeleton-package::after,
.table-skeleton .skeleton-amount::after,
.table-skeleton .skeleton-status::after,
.table-skeleton .skeleton-action-btn::after,
.table-skeleton .skeleton-header-cell::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
/* 分页区域的骨架屏样式 */
.pagination-skeleton .pagination-skeleton-info,
.pagination-skeleton .pagination-skeleton-btn,
.pagination-skeleton .pagination-skeleton-number {
    background: linear-gradient(90deg, var(--color-border) 0%, var(--color-background-tertiary) 25%, var(--color-border) 50%, var(--color-background-tertiary) 75%, var(--color-border) 100%);
    background-size: 400% 100%;
    animation: skeleton-wave 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.pagination-skeleton .pagination-skeleton-info::after,
.pagination-skeleton .pagination-skeleton-btn::after,
.pagination-skeleton .pagination-skeleton-number::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
/* ==================== correction-level-selector.css 迁移 ==================== */
/* 修正级别选择器样?- PC和移动端优化 */
/* 防止侧边栏样式影响按钮文?*/
.correction-level-selector .level-option-text,
.correction-level-selector .level-option-desc,
.correction-level-selector .level-option .level-option-text,
.correction-level-selector .level-option .level-option-desc {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    margin: 0 !important;
}
/* 特别针对侧边栏收缩状态的保护 */
[data-sidebar-collapsed="true"] .correction-level-selector .level-option-text,
[data-sidebar-collapsed="true"] .correction-level-selector .level-option-desc,
[data-sidebar-collapsed="false"] .correction-level-selector .level-option-text,
[data-sidebar-collapsed="false"] .correction-level-selector .level-option-desc {
    position: static !important;
    left: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
}
/* 防止任何全局文本隐藏规则影响 */
.correction-level-selector * {
    position: relative !important;
    left: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.correction-level-selector .level-option-content * {
    position: static !important;
    left: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}
/* CSS变量定义 */
:root {
    --level-selector-bg: var(--color-background-tertiary);
    --level-option-bg: var(--color-secondary);
    --level-option-border: #e9ecef;
    --level-option-hover: #f0f0f0;
    --level-active-bg: #000000;
    --level-active-color: var(--color-secondary);
    --level-text-primary: var(--color-dark);
    --level-text-secondary: var(--color-text-secondary);
    --level-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 修正级别选择器容器 */
.correction-level-selector {
    background: var(--level-selector-bg);
    border-radius: var(--radius-2xl);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin: 20px auto;
    max-width: 800px;
    position: relative;
    width: calc(100% - 40px);
    min-width: 600px;
    box-sizing: border-box;
}
/* 修正级别标签 */
.level-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--level-text-primary);
    padding: 0 16px;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.level-label i {
    font-size: var(--font-size-base);
    color: var(--level-text-secondary);
}
/* 级别选项容器 */
.level-options {
    display: flex;
    gap: 8px;
    flex: 1;
    align-items: center;
}
/* 单个级别选项 */
.level-option {
    flex: 1;
    background: var(--level-option-bg);
    border: 1px solid var(--level-option-border);
    border-radius: var(--radius-xl);
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--level-transition);
    text-align: center;
    position: relative;
    overflow: visible;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    flex-shrink: 1;
}
.level-option:hover {
    background: var(--level-option-hover);
    border-color: #dee2e6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.level-option.active {
    background: var(--level-active-bg);
    color: var(--level-active-color);
    border-color: var(--level-active-bg);
    font-weight: 600;
}
.level-option.active:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
/* 级别选项内容容器 */
.level-option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1;
}
/* 级别选项文本 */
.level-option-text {
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1.2;
    color: var(--level-text-primary);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    hyphens: auto;
}
.level-option-desc {
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.2;
    color: var(--level-text-secondary);
    opacity: 0.8;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    hyphens: auto;
}
.level-option.active .level-option-text,
.level-option.active .level-option-desc {
    color: var(--level-active-color);
}
/* 确保自定义样式优先级更高 */
.level-option[data-level="basic"]:not(.active) .level-option-text,
.level-option[data-level="standard"]:not(.active) .level-option-text,
.level-option[data-level="pro"]:not(.active) .level-option-text {
    color: inherit !important;
}
.level-option[data-level="basic"]:not(.active) .level-option-desc,
.level-option[data-level="standard"]:not(.active) .level-option-desc,
.level-option[data-level="pro"]:not(.active) .level-option-desc {
    color: inherit !important;
}
/* 开始修正按钮 */
.start-correction-btn {
    background: var(--level-active-bg);
    color: var(--level-active-color);
    border: none;
    border-radius: var(--radius-xl);
    padding: 12px 24px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--level-transition);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 48px;
    position: relative;
    overflow: hidden;
}
.start-correction-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}
.start-correction-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.start-correction-btn:hover::before {
    left: 100%;
}
.start-correction-btn:active {
    transform: translateY(0);
}
.start-correction-btn i {
    font-size: var(--font-size-base);
}
/* 选中指示器动?*/
.level-option::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}
.level-option.active::after {
    width: 100%;
    height: 100%;
    background: transparent;
}
/* 移动端响应式 (小于768px) *//* 超小屏幕优化 (小于480px) */
/* 无障碍优?*/
.level-option:focus,
.start-correction-btn:focus {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
}
/* 加载状?*/
.start-correction-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}
.start-correction-btn.loading i {
    animation: spin 1s linear infinite;
}
/* correction-spin 已合并到 spin (第727行) */
/* 禁用状?*/
.level-option.disabled,
.start-correction-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
/* 提示文本样式 */
.level-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    margin-bottom: 8px;
}
.level-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
}
.level-option:hover .level-tooltip {
    opacity: 1;
}
/* 侧边栏收缩状态下的紧凑显?*/
[data-sidebar-collapsed="true"] .correction-level-selector {
    max-width: calc(100vw - 100px);
    min-width: 500px;
}
[data-sidebar-collapsed="true"] .level-option {
    padding: 8px 12px;
    min-width: 70px;
}
[data-sidebar-collapsed="true"] .level-option-text {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--level-text-primary) !important;
}
[data-sidebar-collapsed="true"] .level-option-desc {
    font-size: 10px;
    line-height: 1.1;
    color: var(--level-text-secondary) !important;
    opacity: 0.8 !important;
}
[data-sidebar-collapsed="true"] .level-label {
    font-size: var(--font-size-xs);
    padding: 0 12px;
}
[data-sidebar-collapsed="true"] .start-correction-btn {
    padding: 8px 16px;
    font-size: var(--font-size-xs);
}
/* ===== 级别颜色变量定义 ===== */
.level-option[data-level="basic"] {
    --lv-color: #1a1a1a;
    --lv-color-desc: #4a4a4a;
    --lv-opacity: 0.8;
    --lv-weight: 700;
    --lv-weight-active: 800;
    --lv-spacing: 0.5px;
    --lv-hover-bg: linear-gradient(135deg, var(--color-background-tertiary) 0%, #e9ecef 100%);
    --lv-hover-border: #6c757d;
    --lv-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --lv-text-shadow: none;
}
.level-option[data-level="standard"] {
    --lv-color: #2563eb;
    --lv-color-desc: #1d4ed8;
    --lv-opacity: 0.9;
    --lv-weight: 700;
    --lv-weight-active: 700;
    --lv-spacing: 0.3px;
    --lv-hover-bg: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    --lv-hover-border: #3b82f6;
    --lv-hover-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    --lv-text-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
}
.level-option[data-level="pro"] {
    --lv-color: #059669;
    --lv-color-desc: #047857;
    --lv-opacity: 0.9;
    --lv-weight: 800;
    --lv-weight-active: 800;
    --lv-spacing: 0.4px;
    --lv-hover-bg: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    --lv-hover-border: #10b981;
    --lv-hover-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
    --lv-text-shadow: 0 1px 2px rgba(5, 150, 105, 0.1);
}
/* 非选中状态 - 统一规则 */
.level-option:not(.active) .level-option-text {
    color: var(--lv-color) !important;
    font-weight: var(--lv-weight) !important;
    font-size: 14px !important;
    letter-spacing: var(--lv-spacing) !important;
    text-shadow: var(--lv-text-shadow) !important;
}
.level-option:not(.active) .level-option-desc {
    color: var(--lv-color-desc) !important;
    font-weight: 600 !important;
    opacity: var(--lv-opacity) !important;
    font-size: 12px !important;
}
/* Pro 非选中特殊：渐变文字和斜体 */
.level-option[data-level="pro"]:not(.active) .level-option-text {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.level-option[data-level="pro"]:not(.active) .level-option-desc {
    letter-spacing: 0.2px !important;
    font-style: italic !important;
}
.level-option[data-level="standard"]:not(.active) .level-option-desc {
    letter-spacing: 0.2px !important;
}
/* 选中状态 - 统一规则 */
.level-option.active .level-option-text {
    color: var(--level-active-color) !important;
    font-weight: var(--lv-weight-active) !important;
    font-size: 14px !important;
    letter-spacing: var(--lv-spacing) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.level-option[data-level="basic"].active .level-option-text {
    color: var(--color-secondary) !important;
}
.level-option[data-level="basic"].active .level-option-desc {
    color: var(--color-background-tertiary) !important;
    font-weight: 600 !important;
    opacity: 0.95 !important;
    font-size: 12px !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
}
.level-option[data-level="standard"].active .level-option-desc,
.level-option[data-level="pro"].active .level-option-desc {
    color: var(--level-active-color) !important;
    font-weight: 600 !important;
    opacity: var(--lv-opacity) !important;
    font-size: 12px !important;
    letter-spacing: 0.2px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.level-option[data-level="pro"].active .level-option-text {
    background: none !important;
    -webkit-text-fill-color: var(--level-active-color) !important;
}
.level-option[data-level="pro"].active .level-option-desc {
    font-style: italic !important;
}
/* 悬停效果 - 统一规则 */
.level-option[data-level]:hover {
    background: var(--lv-hover-bg) !important;
    border-color: var(--lv-hover-border) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--lv-hover-shadow) !important;
}
/* Pro 悬停文字效果 */
.level-option[data-level="pro"]:hover .level-option-text {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transform: scale(1.02) !important;
    transition: transform 0.2s ease !important;
}
/* ===== 收缩状态 - 统一缩小字号 ===== */
[data-sidebar-collapsed="true"] .level-option:not(.active) .level-option-text {
    color: var(--lv-color) !important;
    font-weight: var(--lv-weight) !important;
    font-size: 12px !important;
    letter-spacing: var(--lv-spacing) !important;
}
[data-sidebar-collapsed="true"] .level-option:not(.active) .level-option-desc {
    color: var(--lv-color-desc) !important;
    font-weight: 600 !important;
    opacity: var(--lv-opacity) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}
[data-sidebar-collapsed="true"] .level-option[data-level="pro"]:not(.active) .level-option-text {
    background: none !important;
    -webkit-text-fill-color: var(--lv-color) !important;
}
[data-sidebar-collapsed="true"] .level-option[data-level="pro"]:not(.active) .level-option-desc {
    font-style: italic !important;
}
[data-sidebar-collapsed="true"] .level-option.active .level-option-text {
    color: var(--level-active-color) !important;
    font-weight: var(--lv-weight) !important;
    font-size: 12px !important;
}
[data-sidebar-collapsed="true"] .level-option.active .level-option-desc {
    color: var(--level-active-color) !important;
    font-weight: 600 !important;
    opacity: var(--lv-opacity) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}
[data-sidebar-collapsed="true"] .level-option[data-level="pro"].active .level-option-text {
    background: none !important;
    -webkit-text-fill-color: var(--level-active-color) !important;
}
[data-sidebar-collapsed="true"] .level-option[data-level="pro"].active .level-option-desc {
    font-style: italic !important;
}
/* ===== 修正级别选择器 暗黑模式 ===== */
html.dark {
    --level-option-border: #333333;
    --level-option-hover: #2a2a2a;
    --level-active-bg: #ffffff;
    --level-active-color: #0f0f0f;
}
html.dark .correction-level-selector {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
html.dark .level-option:hover {
    border-color: #444444;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
html.dark .level-option.active:hover {
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.1);
}
html.dark .level-option::after {
    background: rgba(255, 255, 255, 0.1);
}
html.dark .level-tooltip {
    background: rgba(255, 255, 255, 0.9);
    color: #0f0f0f;
}
html.dark .level-tooltip::after {
    border-top-color: rgba(255, 255, 255, 0.9);
}
html.dark .start-correction-btn:hover {
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}
html.dark .level-option:focus,
html.dark .start-correction-btn:focus {
    outline-color: #60a5fa;
}
/* 暗黑模式级别颜色覆盖 - 通过CSS变量统一处理 */
html.dark .level-option[data-level="basic"] {
    --lv-color: #d4d4d4;
    --lv-color-desc: #a3a3a3;
    --lv-hover-bg: linear-gradient(135deg, #262626 0%, #333333 100%);
    --lv-hover-border: #525252;
    --lv-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
html.dark .level-option[data-level="standard"] {
    --lv-color: #60a5fa;
    --lv-color-desc: #3b82f6;
    --lv-hover-bg: linear-gradient(135deg, #1e293b 0%, #1e3a5f 100%);
    --lv-hover-border: #3b82f6;
    --lv-hover-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
    --lv-text-shadow: 0 1px 2px rgba(96, 165, 250, 0.15);
}
html.dark .level-option[data-level="pro"] {
    --lv-color: #34d399;
    --lv-color-desc: #10b981;
    --lv-hover-bg: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    --lv-hover-border: #10b981;
    --lv-hover-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
/* Pro 暗黑模式渐变文字 */
html.dark .level-option[data-level="pro"]:not(.active) .level-option-text {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
}
html.dark .level-option[data-level="pro"]:hover .level-option-text {
    background: linear-gradient(135deg, #34d399 0%, #6ee7b7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
/* pricing.css styles moved to static/css/pricing.css to avoid loading pricing-only rules globally. */
/* ===== 购买确认模态框专用样式 ===== */
.purchase-modal .universal-modal-card {
    border: 3px solid #FF6B35 !important;
    box-shadow: 0 20px 25px -5px rgba(255, 107, 53, 0.15), 0 10px 10px -5px rgba(255, 107, 53, 0.1) !important;
}
/* ==========================================
   @media (max-width: 768px) and (orientation: landscape) - 横屏响应式样式
   ========================================== */
@media (max-width: 768px) and (orientation: landscape) {
  /* 横屏通知：避开 header，并降低高度横向铺开 */
  .notification-container {
      top: calc(var(--header-height, 60px) + 0.5rem);
      right: 0.5rem;
      left: auto;
      width: min(96vw, 560px);
      max-width: min(96vw, 560px);
      padding: 0;
  }
  .notification {
      padding: 0.5rem 0.75rem;
      border-radius: 12px;
      margin-bottom: 0.375rem;
      min-height: 40px;
      gap: 0.625rem;
      align-items: center;
  }
  .notification i,
  .notification .notification-icon {
      width: 18px;
      height: 18px;
      font-size: 0.7rem;
      border-radius: 9px;
  }
  .notification .notification-message,
  .notification span {
      font-size: 0.8rem;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .notification-close {
      width: 20px;
      height: 20px;
      border-radius: 10px;
      font-size: 0.7rem;
  }

  /* Mobile tab bar styles */
  .mobile-tab-bar {
      height: 48px;
  }
  .mobile-tab-item i {
      font-size: var(--font-size-lg);
  }
  .mobile-tab-item span {
      font-size: 10px;
  }
  #pdfTabContent,
  #chatTabContent {
      bottom: calc(48px + env(safe-area-inset-bottom)) !important;
  }
  .pdf-toolbar {
      padding: 4px 8px !important;
  }
  .pdf-toolbar .pdf-btn,
  .pdf-toolbar .pdf-btn-icon {
      min-width: 32px !important;
      min-height: 32px !important;
  }
  #pdfChatMessages > div:first-child {
      padding: 16px !important;
  }
  #pdfChatInput {
      min-height: 60px !important;
  }
  .chat-section-card > div:last-child,
  #chatTabContent > div:last-child {
      padding: 8px !important;
  }
  /* Correction level selector styles */
  .correction-level-selector {
      flex-direction: row;
      flex-wrap: wrap;
      padding: 8px;
  }
  .level-label {
      width: 100%;
      margin-bottom: 8px;
  }
  .level-options {
      flex-direction: row;
      width: calc(100% - 140px);
  }
  .level-option {
      flex: 1;
      min-height: 44px;
      padding: 10px 12px;
  }
  .start-correction-btn {
      width: 130px;
      min-height: 44px;
      padding: 10px 16px;
      margin-top: 0;
  }
  /* Tutoring stats premium styles */
  .tutoring-stats-premium {
      gap: 1.2rem;
      margin-bottom: 1rem;
  }
  .tutoring-stat-item {
      max-width: 120px;
      padding: 8px 12px;
  }
  .tutoring-stat-item i {
      font-size: 1.3rem;
      margin-bottom: 2px;
  }
  .tutoring-stat-item strong {
      font-size: 15px;
      margin-bottom: 1px;
  }
  .tutoring-stat-item span {
      font-size: 10px;
  }
}
/* ==========================================
   @media (max-width: 1024px) - 合并的平板端响应式样式
   ========================================== */
@media (max-width: 1024px) {
  /* Reduce AI styles */
  .tw-reduce-columns {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  .tw-reduce-textarea,
  .tw-reduce-output-display {
    min-height: 400px;
    height: 400px;
  }
  .tw-reduce-upload-zone,
  .tw-reduce-file-info {
    min-height: 350px;
    height: 350px;
  }
  /* PDF layout styles */
  .pdf-layout {
      flex-direction: column !important;
  }
  .pdf-viewer-area {
      height: 50% !important;
      border-right: none !important;
      border-bottom: 1px solid var(--color-border) !important;
  }
  .chat-panel {
      width: 100% !important;
      height: 50% !important;
  }
  /* Report display styles */
  .report-display-container {
      min-height: 500px;
  }
  .overview-image-container,
  .pdf-viewer-container {
      height: 500px;
  }
  .report-type-switcher {
      padding: 0.75rem 1rem;
  }
  .report-type-btn {
      padding: 0.625rem 0.75rem;
      font-size: 0.8rem;
  }
  /* Lightweight header styles - .header-right, .stat-item, .action-btn 等已合并到下方 768px 移动端响应式块 */
  .user-info .user-meta {
      display: none;
  }
  /* 平板端保持计划标签显示 */
  .user-plan-badge {
      display: flex;
  }
  .plan-badge {
      font-size: 8px;
      padding: 1px 4px;
  }
  .user-btn {
      padding: 2px 6px 2px 2px;
      gap: 4px;
      height: 36px;
  }
  .user-avatar {
      width: 28px;
      height: 28px;
      font-size: 11px;
  }
  /* Correction level selector styles */
  .correction-level-selector {
      max-width: 90%;
      padding: 6px;
  }
  .level-label {
      font-size: 13px;
      padding: 0 12px;
  }
  .level-option {
      padding: 10px 12px;
      min-height: 44px;
  }
  .level-option-text {
      font-size: 13px;
  }
  .start-correction-btn {
      padding: 10px 20px;
      font-size: 13px;
      min-height: 44px;
  }
}
/* ==========================================
   统一响应式媒体查询 (Consolidated Media Queries)
   使用 Tailwind v4 语法
   ========================================== */
/* 平板及以下 (Tablet and below - 768px) */
@media (max-width: 768px) {
  .index-hero {
      min-height: auto;
      padding: 4rem 1rem;
    }
    .index-hero::before,
    .index-hero::after {
      display: none;
    }
    .index-btn-group {
      flex-direction: column;
      align-items: stretch;
    }
    .index-feature-grid {
      gap: 0.5rem;
    }
    .index-feature-btn {
      padding: 0.625rem 1rem;
      font-size: 0.8125rem;
    }
    .index-feature-btn svg {
      width: 14px;
      height: 14px;
    }
    .index-section {
      padding: 4rem 1rem;
    }
    .index-features-grid {
      grid-template-columns: 1fr;
    }
    .index-trust-logos {
      gap: 1.5rem;
    }
    .index-trust-logos img {
      height: 24px;
    }
    .index-models-grid {
      gap: 1.5rem;
    }
.language-switcher {
    margin: 0 10px;
  }
  .language-current {
    padding: 6px 10px;
    font-size: 13px;
  }
  .language-current .flag {
    font-size: var(--font-size-lg);
    margin-right: 6px;
  }
  .language-dropdown {
    min-width: 150px;
  }
  .language-option {
    padding: 10px 12px;
    font-size: 13px;
  }
.user-dropdown-container {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }
.dropdown-overlay {
    background: rgba(0, 0, 0, 0.3);
  }
.user-dropdown-menu {
    position: fixed !important;
    top: 65px !important;
    right: 8px;
    left: auto;
    min-width: 260px;
    max-width: calc(100vw - 16px);
    width: 260px;
    z-index: 10001;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-xl);
    box-shadow:
      0 6px 24px rgba(0, 0, 0, 0.12),
      0 3px 12px rgba(0, 0, 0, 0.08);
    padding: 3px;
    transform: translate3d(0, -6px, 0) scale(0.98);
  }
  .user-dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }
  .dropdown-item {
    padding: 10px 12px;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-lg);
    gap: 6px;
    min-height: 38px;
    transition: all 0.15s ease;
  }
  .dropdown-item:hover,
  .dropdown-item:active {
    background: rgba(0, 0, 0, 0.06);
    transform: none;
  }
  .dropdown-item svg {
    width: 16px;
    height: 16px;
  }
.dropdown-privilege-card {
    padding: 8px 10px;
    gap: 8px;
    margin: 2px;
    margin-bottom: 4px;
    border-radius: 10px;
  }
  .privilege-card-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
  }
  .privilege-card-icon i {
    font-size: var(--font-size-xs);
  }
  .privilege-card-title {
    font-family: 'Cinzel', serif;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 1.2;
    margin-bottom: 1px;
  }
  .privilege-card-subtitle {
    font-size: 9px;
    line-height: 1.2;
  }
  .privilege-upgrade-btn {
    width: 24px;
    height: 24px;
  }
  .privilege-upgrade-btn i {
    font-size: 10px;
  }
  .privilege-card-content::after {
    margin-top: 4px;
  }
/* 通知响应式 - .notification-container 已合并到下方 768px 块 */
  .notification {
    padding: 1rem 1.25rem;
    border-radius: 14px;
    backdrop-filter: blur(15px) saturate(160%);
    -webkit-backdrop-filter: blur(15px) saturate(160%);
  }
  .notification i,
  .notification .notification-icon {
    width: 22px;
    height: 22px;
    border-radius: 11px;
    font-size: 0.8rem;
  }
  .notification span,
  .notification .notification-message {
    font-size: 0.85rem;
    line-height: 1.5;
  }
  .notification-close {
    width: 26px;
    height: 26px;
    border-radius: 13px;
    font-size: 0.8rem;
  }
  /* 悬浮二维码框响应?*/
  .floating-qr-box {
    bottom: 15px;
    right: 15px;
  }
  .floating-qr-content {
    padding: var(--spacing-sm);
    min-width: 120px;
    max-width: 140px;
  }
  .floating-qr-image img {
    width: 70px;
    height: 70px;
  }
  .floating-qr-title {
    font-size: var(--font-size-xs);
  }
  .floating-qr-subtitle {
    font-size: var(--font-size-2xs);
  }
  .floating-qr-icon {
    width: 20px;
    height: 20px;
    font-size: var(--font-size-xs);
  }
  /* 新用户模态框响应?*/
  .new-user-modal-content {
    padding: 32px 24px;
    margin: 20px;
    border-radius: var(--radius-2xl);
  }
  .new-user-modal-title {
    font-size: var(--font-size-2xl);
  }
  .new-user-modal-subtitle {
    font-size: var(--font-size-sm);
  }
  .new-user-modal-actions {
    flex-direction: column;
    align-items: center;
  }
  .new-user-btn {
    width: 100%;
    max-width: 280px;
  }
  /* Benefits 响应?*/
  .col-date,
  .col-type,
  .col-details,
  .col-change,
  .col-status {
    width: auto;
    min-width: 80px;
  }
  .col-details {
    min-width: 120px;
  }
  .filter-panel {
    padding: var(--spacing-md);
  }
  .data-table {
    font-size: var(--font-size-xs);
  }
  .data-table th,
  .data-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  .pagination-wrapper {
    flex-direction: column;
    gap: var(--spacing-md);
  }
.instruction-item {
    gap: 16px;
    padding: 20px;
    border-radius: var(--radius-xl);
    position: relative;
  }
  .instruction-number {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-base);
    border-radius: 10px;
  }
  .instruction-title {
    font-size: 16px !important;
  }
  .instruction-description {
    font-size: 14px !important;
  }
  .instruction-arrow {
    right: 16px;
    font-size: var(--font-size-xs);
  }
  .usage-tips-card .new-card-header {
    padding: 20px 24px 16px 24px !important;
  }
  .usage-tips-card .new-card-content {
    padding: 24px !important;
  }
  .usage-tips-card .new-card-title {
    font-size: 18px !important;
  }
  .title-icon-wrapper {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-sm);
  }
  .usage-subtitle {
    font-size: 13px;
    margin-top: 6px;
  }
  .usage-footer {
    margin-top: 24px;
    padding-top: 20px;
  }
  .usage-tip {
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 20px;
  }
  .usage-tip i {
    font-size: var(--font-size-sm);
  }
.new-card {
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
  }
  .new-card-header {
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }
  .new-card-title {
    font-size: var(--font-size-sm);
  }
  .new-card-description {
    font-size: var(--font-size-sm);
  }
  .new-card-content {
    font-size: var(--font-size-sm);
  }
.new-card:active {
    transform: scale(0.98);
  }
.pricing-tabs-container {
    padding: 0.375rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .pricing-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .pricing-tabs::-webkit-scrollbar {
    display: none;
  }
  .pricing-tabs-track {
    gap: 0.125rem;
  }
  .pricing-tabs-indicator {
    display: none;
  }
  .pricing-tab {
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    min-width: 120px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.5);
  }
  .pricing-tab.active {
    background: rgba(255, 107, 53, 0.15);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
  }
  .pricing-tab:hover {
    transform: none;
  }
  .pricing-tab i {
    font-size: 0.9rem;
  }
.new-header,
  .modern-header {
    left: 0;
    padding: 0 var(--spacing-md);
  }
  .new-header-actions,
  .header-actions {
    min-width: auto;
    gap: var(--spacing-sm);
  }
  .header-left,
  .new-header-left {
    gap: var(--spacing-sm);
  }
  .header-right,
  .new-header-right {
    gap: var(--spacing-sm);
  }
  .sidebar-collapsed .new-header,
  .sidebar-collapsed .modern-header,
  body.sidebar-collapsed .new-header,
  body.sidebar-collapsed .modern-header {
    left: 0;
  }
.skeleton-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
        min-height: auto;
    }
    .skeleton-cell { width: 100% !important; flex-direction: row; align-items: center; justify-content: space-between; }
    .col-filename { margin-bottom: 8px; }
    .sk-text { width: 100%; height: 16px; }
    /* 移动端简化显?*/
    .col-time, .col-turnitin, .col-rate, .col-action {
        width: 100% !important;
    }
    /* 新版骨架屏移动端适配 */
    .skeleton-cell-td {
        padding: 8px 4px;
    }
    .filename-skeleton {
        flex-direction: column;
        align-items: flex-start;
    }
.auth-page {
        padding: 1rem !important;
        min-height: calc(100vh - 150px) !important;
    }
    .auth-container {
        max-width: 100% !important;
    }
.error-page .logo-container {
        top: 15px;
        left: 15px;
    }
    .error-page .brand-name {
        font-size: 1rem;
    }
    .error-page .brand-url {
        font-size: 0.7rem;
    }
    .error-container {
        padding: 1.5rem 1.2rem;
        margin: 1rem;
        margin-top: 4rem;
    }
    .error-code {
        font-size: 3.5rem;
    }
    .error-message h1 {
        font-size: 1.5rem;
    }
    /* .error-actions 已合并到下方 768px 块 */
    .error-page .btn {
        width: 100%;
        max-width: 180px;
    }
    .links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
    .quick-link {
        padding: 0.6rem;
    }
.dynamic-font-container {
        font-size: 0.9em;
    }
.header-language-switcher {
        margin-right: 8px;
    }
    .header-language-switcher .language-current-btn {
        padding: 5px 8px;
        height: 30px;
    }
    .header-language-switcher .language-current-btn .flag {
        font-size: var(--font-size-sm);
    }
    .header-language-switcher .language-current-btn .lang-code {
        font-size: 11px;
    }
    .header-language-dropdown {
        min-width: 140px;
    }
    .header-language-dropdown .language-option {
        padding: 6px 10px;
        font-size: var(--font-size-xs);
    }
.balance-updated {
        animation-duration: 0.5s;
    }
.language-switch-container {
        margin: 10px 0;
        min-height: 40px;
    }
    .solver-language-selector-btn {
        width: 36px;
        height: 36px;
        font-size: 11px;
    }
.tips-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem;
  }
  .tip-item {
    padding: 0.5rem;
    font-size: 0.75rem;
  }
  .upload-main-content {
    flex-direction: column;
    text-align: center;
  }
  .upload-text-content {
    align-items: center;
    text-align: center;
  }
  .upload-icon {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  .file-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }
  .file-info-row {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  .new-file-name-container {
    justify-content: center;
  }
  .reupload-btn {
    align-self: center;
  }
.citation-header-content {
        flex-direction: column;
        text-align: center;
    }
    /* 仅对chat-with-pdf页面的主内容卡片应用固定高度 */
    .chat-with-pdf-page .new-card.main-content-card {
        height: calc(100vh - 200px) !important;
        min-height: 400px !important;
    }
.text-selection-menu {
        min-width: 240px;
        max-width: calc(100vw - 32px);
    }
    .selection-action-btn {
        padding: 12px 16px;
        font-size: 15px;
    }
    .selection-action-btn i {
        font-size: var(--font-size-lg);
    }
    .chat-message .content {
        max-width: 90%;
    }
.mobile-tab-bar {
        display: flex;
    }
    .citation-workspace-vertical {
        height: 100vh !important;
        height: 100dvh !important;
        padding-bottom: 0 !important;
        position: relative;
        overflow: hidden;
    }
    #pdfTabContent,
    #chatTabContent {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(56px + env(safe-area-inset-bottom)) !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 10 !important;
        display: none !important;
        background: white !important;
        flex-direction: column !important;
    }
    #pdfTabContent.mobile-tab-content-active,
    #chatTabContent.mobile-tab-content-active {
        display: flex !important;
        z-index: 20 !important;
    }
    .pdf-toolbar {
        padding: 6px 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: hidden;
        white-space: nowrap;
        flex-shrink: 0;
        gap: 2px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .pdf-toolbar > div {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }
    .pdf-toolbar .pdf-btn,
    .pdf-toolbar .pdf-btn-icon {
        min-width: 32px !important;
        width: 32px !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 4px !important;
        font-size: 14px !important;
        flex-shrink: 0;
        border-radius: 6px !important;
    }
    .pdf-toolbar span[style*="padding: 0 16px"] {
        padding: 0 4px !important;
        font-size: 12px !important;
    }
    .pdf-toolbar div[style*="width: 1px"] {
        display: none !important;
    }
    #zoomSelect {
        min-width: 55px !important;
        width: 55px !important;
        padding: 4px 2px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
    }
    #pdfContainer {
        height: 100% !important;
        flex: 1 !important;
        padding: 12px !important;
        padding-bottom: 24px !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #pdfPlaceholder {
        padding: 24px 16px !important;
    }
    #pdfPlaceholder > div:first-child {
        font-size: 60px !important;
        margin-bottom: 16px !important;
    }
    #pdfPlaceholder > p:first-of-type {
        font-size: 14px !important;
        margin-bottom: 16px !important;
        padding: 0 8px;
    }
    #pdfPlaceholder .pdf-btn-primary {
        padding: 12px 24px !important;
        font-size: 15px !important;
        min-height: 44px;
    }
    #pdfPlaceholder .pdf-select-file-btn {
        padding: 10px 24px !important;
        min-height: 44px;
    }
    #pdfPlaceholder > p:last-of-type {
        font-size: 11px !important;
        margin-top: 12px !important;
    }
    #historyDocsSection {
        margin-top: 24px !important;
        padding-top: 20px !important;
    }
    #historyDocsSection h4 {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }
    .history-docs-table {
        display: block;
        font-size: var(--font-size-xs);
    }
    .history-docs-table thead {
        display: none;
    }
    .history-docs-table tbody {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .history-docs-table tbody tr {
        display: flex;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        background: #f9fafb;
        border-radius: var(--radius-lg);
        padding: 10px 12px;
        border: 1px solid var(--color-border);
        gap: 8px;
    }
    .history-docs-table tbody tr:hover {
        background: var(--color-background-tertiary);
    }
    .history-docs-table td {
        padding: 0 !important;
        border: none !important;
    }
    .history-filename-cell {
        flex: 1;
        font-size: 13px !important;
        font-weight: 500;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .history-time-cell {
        font-size: 11px !important;
        color: #6b7280;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .history-count-cell {
        font-size: 11px !important;
        text-align: center !important;
        white-space: nowrap;
        flex-shrink: 0;
        color: #059669;
        min-width: 24px;
    }
    .history-count-cell::before {
        content: "??";
        margin-right: 2px;
    }
    .history-view-more {
        padding: 10px;
        margin-top: 6px;
    }
    #pdfSearchBox {
        top: 56px !important;
        right: 8px !important;
        left: 8px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }
    #pdfSearchBox > div:first-child {
        flex-wrap: wrap;
        gap: 8px !important;
    }
    #pdfSearchInput {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1;
        padding: 10px 12px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }
    #toggleHeaderBtn {
        display: none !important;
    }
    /* 横屏模式下使用紧凑布局而非隐藏卡片 */
    .citation-header-card {
        padding: 8px 12px !important;
        margin-top: -15px !important;
        margin-bottom: 8px !important;
        border-radius: 10px !important;
    }
    .citation-header-content {
        gap: 8px !important;
    }
    .citation-header-icon {
        width: 32px !important;
        height: 32px !important;
        aspect-ratio: 1 / 1 !important;
        font-size: 0.875rem !important;
    }
    .citation-header-title {
        font-size: 0.875rem !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
    }
    .citation-header-description {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    body.header-card-visible .citation-workspace-vertical .pdf-viewer-card,
    body.header-card-visible .chat-section-card {
        top: 0 !important;
    }
    .chat-section-card > div:first-child,
    #chatTabContent > div:first-child {
        padding: 10px 12px !important;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0;
        scrollbar-width: none;
        gap: 6px !important;
    }
    .chat-section-card > div:first-child::-webkit-scrollbar,
    #chatTabContent > div:first-child::-webkit-scrollbar {
        display: none;
    }
    .pdf-quick-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 36px;
        border-radius: 18px !important;
    }
    #pdfChatMessages {
        flex: 1 !important;
        padding: 16px 12px !important;
        padding-bottom: 24px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #pdfChatMessages > div:first-child {
        padding: 32px 16px !important;
    }
    #pdfChatMessages > div:first-child > div:first-child {
        font-size: 40px !important;
        margin-bottom: 16px !important;
    }
    #pdfChatMessages > div:first-child h3 {
        font-size: 16px !important;
    }
    #pdfChatMessages > div:first-child p {
        font-size: 13px !important;
    }
    #pdfChatMessages > div:first-child ul {
        max-width: 100% !important;
    }
    #pdfChatMessages > div:first-child li {
        font-size: 13px !important;
    }
    .chat-message {
        margin-bottom: 12px !important;
        gap: 8px !important;
    }
    .chat-message .content {
        max-width: 88% !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        border-radius: 16px !important;
    }
    .chat-message .content ul,
    .chat-message .content ol {
        padding-left: 16px !important;
    }
    .chat-section-card > div:last-child,
    #chatTabContent > div:last-child {
        flex-shrink: 0;
        padding: 12px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        background: white;
        border-top: 1px solid var(--color-border);
    }
    #pdfChatInput {
        min-height: 80px !important;
        max-height: 150px !important;
        padding: 12px !important;
        padding-right: 100px !important;
        font-size: 16px !important;
        border-radius: 16px !important;
        line-height: 1.5 !important;
    }
    #pdfChatInput + div,
    .chat-section-card textarea + div {
        right: 6px !important;
        bottom: 6px !important;
        gap: 6px !important;
    }
    #charCount {
        font-size: 10px !important;
    }
    .pdf-language-selector-btn,
    .pdf-model-selector-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    .pdf-language-selector-btn .language-text {
        font-size: 11px !important;
    }
    .pdf-model-selector-btn .model-icon {
        width: 18px !important;
        height: 18px !important;
    }
    #pdfSendBtn {
        min-width: 70px !important;
        min-height: 36px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 18px !important;
    }
    .pdf-language-dropdown-upward,
    .pdf-ai-model-dropdown-upward {
        right: 0 !important;
        left: auto !important;
        min-width: 140px !important;
        max-width: calc(100vw - 24px) !important;
        border-radius: 12px !important;
    }
    .pdf-ai-model-dropdown-upward {
        left: 50% !important;
        right: auto !important;
        width: min(360px, calc(100vw - 16px)) !important;
        min-width: 0 !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        padding: 12px !important;
        transform: translateX(-50%) translateY(10px) !important;
    }
    .pdf-ai-model-dropdown-upward.show {
        transform: translateX(-50%) translateY(0) !important;
    }
    .pdf-ai-model-dropdown-upward .ai-model-columns {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .ai-model-column {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
    }
    .ai-model-column:last-child {
        border-bottom: none;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .ai-model-item {
        padding: 10px 12px !important;
        min-height: 44px !important;
    }
    .ai-model-locked-overlay {
        padding: 16px !important;
    }
    .text-selection-menu {
        min-width: 240px !important;
        max-width: calc(100vw - 24px) !important;
        border-radius: 12px !important;
    }
    .selection-action-btn {
        padding: 12px !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }
    .pdf-page-wrapper {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .pdf-page-label {
        font-size: 11px !important;
        padding: 3px 6px !important;
    }
    #pdfPagesContainer {
        gap: 12px !important;
        padding: 8px 0 !important;
    }
.mobile-tab-bar {
            padding-left: max(8px, env(safe-area-inset-left));
            padding-right: max(8px, env(safe-area-inset-right));
            padding-bottom: max(0px, env(safe-area-inset-bottom));
        }
        #pdfTabContent,
        #chatTabContent {
            padding-left: max(0px, env(safe-area-inset-left));
            padding-right: max(0px, env(safe-area-inset-right));
        }
    /* citation-header-* 样式已合并到下方 @media (max-width: 768px) 移动端响应式块中 */
.new-user-points-modal-content {
        width: 95%;
        margin: 10px;
    }
    .new-user-points-modal-body {
        padding: 15px 20px 25px 20px;
    }
    .new-user-points-title {
        font-size: var(--font-size-2xl);
    }
    .new-user-points-subtitle {
        font-size: var(--font-size-sm);
    }
    .new-user-points-image img {
        width: 160px;
        height: 160px;
    }
}

/* ==================== 移动端响应式 (max-width: 768px) ==================== */
@media (max-width: 768px) {
    .sidebar {
        width: var(--spacing-sidebar) !important;
        max-width: 85vw !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
    }
    .new-main,
    .new-main-content {
        margin-left: 0 !important;
        padding-top: calc(var(--header-height, 60px) + 20px);
    }
    [data-sidebar-mobile="true"] .logo-text,
    [data-sidebar-mobile="true"] .logo-text-container,
    [data-sidebar-mobile="true"] .logo-subtitle,
    [data-sidebar-mobile="true"] .nav-text,
    [data-sidebar-mobile="true"] .nav-badge,
    [data-sidebar-mobile="true"] .nav-title,
    [data-sidebar-mobile="true"] .btn-text {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        white-space: nowrap !important;
    }
    [data-sidebar-mobile="true"] .nav-link {
        padding: 0.75rem 1rem !important;
        min-height: 48px !important;
    }
    [data-sidebar-mobile="true"] .sidebar-header {
        padding: 1rem !important;
        min-height: 70px !important;
    }
    .sidebar-overlay {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        order: 4;
    }
    .sidebar-header {
        order: 1;
    }
    .sidebar-quick-actions {
        order: 2;
        margin-top: 0 !important;
        position: static !important;
        bottom: auto !important;
        border-top: none !important;
        border-bottom: 1px solid var(--sidebar-border);
        padding: 0.75rem;
    }
    .sidebar-nav {
        order: 3;
    }
    .sidebar-quick-actions .quick-action-btn {
        width: 40px;
        height: 40px;
    }
    .sidebar-quick-actions .quick-action-btn i {
        font-size: 1.125rem;
    }
/* 允许正常滚动 */
    html, body {
        width: 100%;
        -webkit-overflow-scrolling: touch; /* 优化移动端滚动体?*/
        scroll-behavior: smooth;
        /* 防止横向溢出 */
        overflow-x: hidden;
    }
    /* 安全区域适配 - 支持iPhone X及以上刘海屏 */
    body {
        padding-left: var(--safe-area-inset-left);
        padding-right: var(--safe-area-inset-right);
    }
    /* 页面容器自然高度 - 修复check页面移动端空白问题 */
    .citation-workspace-vertical {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-bottom: var(--safe-area-inset-bottom);
        gap: var(--mobile-spacing-xs);
        margin-bottom: var(--mobile-spacing-xs);
    }
    /* 确保所有交互元素满足最小触摸目?- 仅限工作区内，避免影响Header */
    .citation-workspace-vertical button,
    .citation-workspace-vertical [role="button"],
    .citation-workspace-vertical input[type="submit"],
    .citation-workspace-vertical input[type="button"] {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }
    /* 权益卡片按钮触摸目标已统一?rights-info-card.css */
#progressCard {
        margin: 0.5rem 0 !important;
        border-radius: var(--radius-xl);
    }
    #progressCard .new-card-header {
        padding: 0.75rem 1rem 0 1rem !important;
    }
    #progressCard .new-card-title {
        font-size: 0.9rem !important;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    #progressCard .new-card-title i {
        animation: spin 1s linear infinite;
    }
    #progressCard .new-progress-bar {
        height: 6px;
        margin-bottom: 0.5rem;
    }
    #progressCard .new-progress-text {
        font-size: 0.8rem;
    }
/* 整体布局优化 - 排除权益卡片 */
    .new-card:not(.action-card) {
        margin: var(--mobile-spacing-xs) 0 !important;
        padding: var(--mobile-card-padding) !important;
        height: auto;
        max-height: none;
        /* 移动端卡片圆角优?*/
        border-radius: var(--radius-xl);
    }
    .new-card-content {
        padding: var(--mobile-card-padding) !important;
        height: auto;
        overflow: visible;
    }
    /* 权益卡片布局样式 (action-row, rights-info, convert-btn) 已统一?rights-info-card.css */
    /* 页面标题卡片优化 - 与reduce_ai页面保持一致 (已合并) */
    /* 拖拽上传组件移动端高度自适应 - 已合并到上方 .citation-workspace-vertical */
    .citation-workspace-vertical .new-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: auto;
    }
    .citation-workspace-vertical .new-card .new-card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: auto;
        padding: var(--mobile-spacing-sm) var(--mobile-spacing-xs) var(--mobile-spacing-md) var(--mobile-spacing-xs);
    }
    /* 清除所有动画和过渡效果 - 但保留进度条动画 */
    .new-card:not(#progressCard),
    .new-card-content {
        transition: none !important;
        animation: none !important;
    }
    /* 移动端文字优化 - 提升可读性 */
    .new-card-title,
    .citation-label {
        font-size: 0.95rem;
        line-height: 1.4;
        font-weight: 600;
    }
.report-showcase-header {
        padding: 1rem;
        /* 安全区域适配 */
        padding-left: max(1rem, var(--safe-area-inset-left));
        padding-right: max(1rem, var(--safe-area-inset-right));
    }
    .showcase-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .showcase-title h3 {
        font-size: 1.125rem;
        /* 改善文字可读?*/
        line-height: 1.4;
    }
    .report-display-container {
        min-height: 400px;
        /* 使用百分比高度更好适配不同设备 */
        min-height: min(400px, 60vh);
    }
    .overview-image-container,
    .pdf-viewer-container {
        height: 400px;
        height: min(400px, 60vh);
    }
    .switcher-container {
        flex-direction: column;
        gap: 0.125rem;
    }
    .report-type-btn {
        padding: 0.75rem;
        justify-content: flex-start;
        /* 确保触摸目标足够?*/
        min-height: var(--touch-target-min);
    }
    .pdf-header {
        padding: 0.75rem 1rem;
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    .pdf-actions {
        align-self: stretch;
        justify-content: space-around;
    }
    /* PDF操作按钮触摸目标优化 */
    .pdf-action-btn {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    .error-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .primary-btn, .secondary-btn {
        justify-content: center;
        min-height: var(--touch-target-min);
    }
    .report-explanation {
        padding: 0.75rem 1rem;
        /* 安全区域适配 */
        padding-left: max(0.75rem, var(--safe-area-inset-left));
        padding-right: max(0.75rem, var(--safe-area-inset-right));
    }
    .explanation-item {
        font-size: 0.8rem;
        /* 改善行高提升可读?*/
        line-height: 1.6;
    }
    .image-modal-content {
        max-width: 98%;
        max-height: 98%;
    }
    .image-modal-close {
        top: -35px;
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        font-size: var(--font-size-xl);
    }
    .image-modal-controls {
        bottom: -45px;
        padding: 8px 15px;
        /* 安全区域适配 - 底部 */
        padding-bottom: max(8px, var(--safe-area-inset-bottom));
    }
    .image-modal-btn {
        padding: 6px 10px;
        font-size: var(--font-size-xs);
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }
    /* 报告展示卡片移动端优?*/
    .report-showcase-card {
        border-radius: var(--radius-2xl);
        margin: 0.5rem 0 !important;
        /* 移除多余阴影提升性能 */
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
    /* 图片容器移动端优?*/
    .overview-image-container {
        /* 保持宽高?*/
        aspect-ratio: 4/3;
        height: auto;
        min-height: 280px;
        max-height: 60vh;
    }
    .overview-image {
        /* 禁用悬停缩放效果 - 移动端不需?*/
        transform: none !important;
    }
    /* 隐藏悬停overlay - 移动端使用点?*/
    .overview-image-container:hover .image-overlay {
        opacity: 0;
    }
.new-card[style*="margin: var(--spacing-xs) 0"] {
        margin: var(--mobile-spacing-xs) 0 !important;
    }
    .new-card-header {
        padding: var(--mobile-spacing-sm) var(--mobile-card-padding) 0 var(--mobile-card-padding) !important;
        margin-bottom: var(--mobile-spacing-sm);
    }
.lightweight-header {
        height: 56px;
        padding: 0 12px;
        left: 0 !important; /* 移动端header始终占满宽度 */
    }
    /* 移动端时即使sidebar收缩也要占满宽度 */
    .sidebar-collapsed .lightweight-header,
    body.sidebar-collapsed .lightweight-header,
    [data-sidebar-collapsed="true"] .lightweight-header {
        left: 0 !important;
    }
    .hamburger-menu {
        width: 32px;
        height: 32px;
    }
    .hamburger-menu::before {
        left: 6px;
        top: 6px;
        width: 20px;
        height: 20px;
    }
    .hamburger-menu::after {
        left: 13px;
        top: 9px;
        height: 14px;
    }
    .hamburger-menu.active::after {
        left: 19px;
    }
    .header-right {
        gap: 6px;
    }
    .stat-item {
        padding: 4px 6px;
        height: 32px;
        gap: 2px;
    }
    .stat-icon {
        display: none;
    }
    .stat-label {
        display: inline;
        font-size: 9px;
    }
    .stat-value {
        font-size: var(--font-size-xs);
    }
    .action-btn {
        padding: 6px;
        height: 32px;
    }
    .action-btn svg {
        width: 18px;
        height: 18px;
    }
    .user-info {
        display: none;
    }
    /* 移动端隐藏计划标签以节省空间 */
    .user-plan-badge {
        display: none;
    }
    .user-btn {
        padding: 2px;
        height: 32px;
        gap: 0;
    }
    .dropdown-arrow {
        display: none;
    }
    .auth-btn {
        padding: 6px 12px;
        border-radius: 10px;
        height: 32px;
        font-size: 11px;
    }
/* 覆盖桌面端的导师卡片样式 */
    .tutor-item {
        padding: 0.5rem !important;
        border-radius: var(--radius-xl);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.25rem;
    }
    .tutor-avatar {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 0.25rem !important;
        flex-shrink: 0;
    }
    /* 移动端服务流程图标样式 */
    .new-feature-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0.5rem;
        border-radius: 10px;
        flex-shrink: 0;
    }
    .new-feature-icon i {
        font-size: 18px;
        margin: 0;
        padding: 0;
        line-height: 1;
    }
    /* 移动端基础样式调整 */
    .new-card-title {
        font-size: 0.9rem !important;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .new-card-title i {
        font-size: 1rem;
    }
    /* 页面标题卡片优化 */
    .citation-header-card {
        padding: 16px 14px;
        margin-top: -20px;
        margin-bottom: 12px;
        margin-left: 0;
        margin-right: 0;
        border-radius: 16px;
        background: var(--color-background-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        height: auto;
    }
    .citation-header-content {
        gap: 12px;
        align-items: center;
    }
    .citation-header-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        aspect-ratio: 1 / 1;
        font-size: 1.125rem;
        border-radius: 12px;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }
    .citation-header-text {
        margin-left: 0;
        flex: 1;
        min-width: 0;
    }
    .citation-header-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 4px;
        line-height: 1.4;
        color: var(--color-text-primary);
    }
    .citation-header-description {
        font-size: 0.8125rem;
        line-height: 1.5;
        color: var(--color-text-secondary);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* 移动端暗色模式 - 标题卡片 */
    html.dark .citation-header-card {
        background: var(--color-background-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    html.dark .citation-header-icon {
        background: linear-gradient(135deg, #1e1e1e 0%, #262626 100%);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        color: #f5f5f5;
    }
    /* 服务介绍区域优化 */
    .action-card {
        border-radius: var(--radius-xl);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    .service-info {
        padding: var(--mobile-card-padding);
        border-radius: var(--radius-xl);
    }
    .service-description {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
    .service-description p {
        font-size: 0.8rem;
        line-height: 1.6;
    }
    .service-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    .feature-badge {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
        border-radius: var(--radius-md);
        justify-content: flex-start;
        min-height: 45px;
    }
    .feature-badge span {
        flex: 1;
        line-height: 1.3;
    }
    .feature-badge i {
        font-size: 0.9rem;
    }
    .action-buttons {
        margin-top: 1rem;
    }
    /* Grid responsive - .tutor-item 和 .tutor-avatar 已合并到上方 */
    .tutor-avatar-img {
        border-radius: 50%;
    }
    .new-feature-content {
        flex: 1;
        text-align: center;
    }
    .new-feature-title {
        font-size: 0.8rem;
        margin-bottom: 0.125rem;
        font-weight: 600;
    }
    .new-feature-text {
        font-size: 0.7rem;
        line-height: 1.2;
        margin-bottom: 0.25rem;
    }
    .tutor-tags {
        gap: 0.2rem;
        margin-top: 0.25rem;
        justify-content: center;
    }
    .tag {
        font-size: 0.6rem;
        padding: 0.1rem 0.4rem;
        border-radius: 10px;
    }
    /* 服务流程优化 */
    .new-feature-item {
        padding: 0.75rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .new-feature-item .new-feature-title {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
    }
    .new-feature-item .new-feature-text {
        font-size: 0.7rem;
        line-height: 1.2;
    }
    /* .new-feature-icon 已合并到上方 */
    /* 卡片间距调整 */
    .new-card[style*="margin"] {
        margin: var(--mobile-spacing-sm) 0 !important;
    }
.gift-coins-content {
        width: 95%;
        margin: 20px;
        max-height: calc(100vh - 40px);
    }
    .gift-coins-header {
        padding: 20px 20px 16px;
    }
    .gift-coins-header h3 {
        font-size: var(--font-size-lg);
    }
    .gift-coins-body {
        padding: 20px;
    }
    .form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .form-row label {
        text-align: left;
        min-width: auto;
        font-size: 13px;
    }
    .form-row input {
        padding: 14px 16px;
        font-size: var(--font-size-base); /* 防止iOS缩放 */
    }
    .form-actions {
        flex-direction: column;
        gap: 12px;
    }
    .btn-cancel,
    .btn-confirm {
        width: 100%;
        padding: 14px 24px;
        font-size: var(--font-size-base);
    }
.universal-modal-overlay {
        padding: 0.5rem !important;
    }
    .universal-modal-container {
        max-width: 100% !important;
    }
    .universal-modal-card {
        border-radius: 0.75rem;
        max-height: 95vh;
    }
    .universal-modal-close-btn {
        top: 0.75rem;
        right: 0.75rem;
        width: 32px;
        height: 32px;
        font-size: var(--font-size-sm);
    }
    .universal-modal-header {
        padding: 1.5rem 1.5rem 1rem;
    }
    .modal-icon {
        width: 56px;
        height: 56px;
        font-size: var(--font-size-xl);
    }
    .universal-modal-content {
        padding: 1.5rem;
        max-height: calc(95vh - 180px);
    }
    .universal-modal-footer {
        padding: 1rem 1.5rem;
        flex-direction: column;
    }
    .modal-btn {
        width: 100%;
    }
    .notification-container {
        top: calc(var(--header-height, 60px) + 0.5rem);
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: none;
        padding: 0;
    }
    .notification-container .notification {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        column-gap: 0.625rem;
        min-height: 44px;
        padding: 0.875rem 1rem;
    }
    .notification-container .notification .notification-message,
    .notification-container .notification span {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.45;
        align-self: center;
    }
    .notification-container .notification .notification-icon,
    .notification-container .notification i {
        margin-top: 0.125rem;
    }
    .notification-container .notification-close {
        align-self: center;
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
    }
    /* 权益卡片移动端适配 */
    .modal-benefits-cards-section {
        padding: 0 1rem;
        margin-bottom: 0.75rem;
    }
    .modal-benefit-card {
        padding: 16px 18px;
        gap: 12px;
        min-height: 70px;
        flex-direction: column;
        text-align: center;
    }
    .modal-benefit-card-icon {
        width: 40px;
        height: 40px;
    }
    .modal-benefit-card-icon i {
        font-size: var(--font-size-lg);
    }
    .modal-benefit-card-title {
        font-size: var(--font-size-base);
        margin-bottom: 4px;
    }
    .modal-benefit-card-description {
        font-size: 13px;
    }
    /* .new-main, .new-main-content 已合并到上方 */
  .page-content {
    padding: 1rem;
  }
.model-selector-buttons {
        gap: 0.3rem;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        overflow-x: auto;
    }
    .model-selector-buttons .model-btn {
        max-width: none;
        min-width: auto;
        flex: 1 1 0;
        padding: 0.4rem 0.4rem;
        font-size: 0.65rem;
        white-space: nowrap;
    }
/* format-selection-row 改为 row + wrap 布局 */
    .format-selection-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
    }
    /* ?label 和按钮在同一?*/
    .format-selection-row > .format-label {
        flex: 0 0 auto;
        margin-right: 0.5rem;
        margin-bottom: 0;
    }
    /* 让按钮组容器保持 row 布局 */
    .format-selection-row > .format-selection-container {
        flex-direction: row !important;
        align-items: center !important;
        flex: 0 1 auto;
        width: auto;
    }
    /* 让语言选择器和按钮组在同一?*/
    .format-selection-row > .language-switch-container {
        flex: 0 0 auto;
        margin: 0 0 0 0.5rem;
        min-height: auto;
    }
.tool-switcher-sidebar {
        left: 10px;
        width: 35px;
        height: 370px;
        display: none; /* 移动端隐藏工具条 */
    }
    .tool-switcher-sidebar.expanded {
        width: 45px;
    }
    .global-payment-modal {
        padding: 0;
        align-items: flex-end;
    }
    .global-payment-modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        max-height: calc(85vh - 60px - env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: calc(60px + env(safe-area-inset-bottom));
        z-index: 10000; /* 确保内容在遮罩层之上 */
    }
    .global-payment-modal-header {
        padding: 1rem 1.25rem;
        border-radius: 20px 20px 0 0;
    }
    .global-payment-modal-close {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        aspect-ratio: 1;
    }
    .global-payment-modal-title {
        font-size: 1.05rem;
    }
    .global-payment-modal-body {
        padding: 1rem;
    }
    /* 移动端标签样式 */
    .payment-tabs {
        padding: 3px;
    }
    .payment-tab {
        padding: 8px 12px;
        font-size: 0.875rem;
        gap: 6px;
    }
    .payment-tab i {
        font-size: 0.875rem;
    }
    /* 移动端说明区域 */
    .payment-description {
        padding: 10px 12px;
        font-size: 0.8rem;
        gap: 8px;
    }
    .payment-description i {
        font-size: 0.875rem;
    }
    /* 移动端网格布局 - 单列 */
    .payment-options-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    .payment-options-grid.compact {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    /* 重置桌面端的nth-child规则 */
    .payment-options-grid.compact > .payment-option-card.compact:nth-child(1),
    .payment-options-grid.compact > .payment-option-card.compact:nth-child(2),
    .payment-options-grid.compact > .payment-option-card.compact:nth-child(3),
    .payment-options-grid.compact > .payment-option-card.compact:nth-child(4),
    .payment-options-grid.compact > .payment-option-card.compact:nth-child(5),
    .payment-options-grid.compact > .payment-option-card.compact:nth-child(6) {
        grid-column: span 1;
    }
    .payment-method-grid {
        grid-template-columns: 1fr;
    }
    .payment-option-card {
        border-radius: var(--radius-xl);
    }
    .payment-option-card.compact {
        border-radius: var(--radius-xl);
    }
    .payment-option-header {
        padding: 1rem;
    }
    .payment-option-header.compact {
        padding: 0.875rem;
    }
    .payment-option-title {
        font-size: 1.05rem;
    }
    .payment-option-title.compact {
        font-size: 0.95rem;
    }
    .payment-option-price {
        font-size: 1.4rem;
    }
    .payment-option-price.compact {
        font-size: 1.5rem;
    }
    .payment-option-btn {
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
    }
    .payment-option-btn.compact {
        padding: 0.5rem 0.875rem;
        font-size: 0.85rem;
    }
    .payment-option-body.compact {
        padding: 0.75rem;
    }
    .payment-option-features.compact li {
        font-size: 0.78rem;
    }
.skeleton-header-row {
        padding: 12px 16px;
        gap: 12px;
    }
    .skeleton-header-cell {
        height: 12px;
    }
    .skeleton-row {
        padding: 14px 16px;
        gap: 12px;
    }
    /* 调整骨架元素尺寸 */
    .skeleton-date {
        width: 65px;
        height: 12px;
    }
    .skeleton-time {
        width: 42px;
        height: 10px;
    }
    .skeleton-badge {
        width: 60px;
        height: 20px;
    }
    .skeleton-text {
        height: 14px;
    }
    .skeleton-change {
        width: 48px;
        height: 16px;
    }
    .skeleton-order-id {
        height: 12px;
    }
    .skeleton-package {
        height: 14px;
    }
    .skeleton-amount {
        width: 48px;
        height: 14px;
    }
    .skeleton-status {
        width: 48px;
        height: 18px;
    }
    .skeleton-action-btn {
        width: 28px;
        height: 28px;
    }
    /* 分页适配 */
    .pagination-skeleton {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        padding: 16px 0;
    }
    .pagination-skeleton-info {
        width: 80px;
        height: 16px;
        align-self: center;
    }
    .pagination-skeleton-controls {
        justify-content: center;
    }
    .pagination-skeleton-btn,
    .pagination-skeleton-number {
        width: 28px;
        height: 28px;
    }
.index-paper-highlight-section {
    padding: var(--space-8) var(--space-4);
  }
  .index-paper-title {
    font-size: 1.25rem;
  }
  .index-section-title {
    font-size: 1.25rem;
  }
  .index-models-grid,
  .index-steps-grid,
  .index-resources-grid,
  .index-testimonials-grid,
  .index-security-grid {
    grid-template-columns: 1fr;
  }
  .index-features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .index-cta-buttons-grid {
    grid-template-columns: 1fr;
  }
.correction-level-selector {
        flex-direction: column;
        padding: 16px;
        gap: 16px;
        margin: 16px 12px;
        max-width: calc(100% - 24px);
        border-radius: 20px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
    .level-label {
        align-self: flex-start;
        padding: 0;
        margin-bottom: 8px;
        font-size: var(--font-size-base);
        font-weight: 700;
        color: var(--level-text-primary);
    }
    .level-label i {
        font-size: var(--font-size-lg);
    }
    .level-options {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }
    .level-option {
        width: 100%;
        padding: 18px 20px;
        min-height: 60px;
        border-radius: var(--radius-2xl);
        border: 2px solid var(--level-option-border);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: all 0.2s ease;
    }
    .level-option:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        border-color: #dee2e6;
    }
    .level-option.active {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        border-color: var(--level-active-bg);
    }
    .level-option-text {
        font-size: var(--font-size-base);
        font-weight: 700;
        line-height: 1.2;
    }
    .level-option-desc {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.2;
        opacity: 0.9;
    }
    .start-correction-btn {
        width: 100%;
        padding: 18px 24px;
        font-size: var(--font-size-base);
        font-weight: 700;
        min-height: 60px;
        justify-content: center;
        border-radius: var(--radius-2xl);
        margin-top: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }
    .start-correction-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }
    /* 移动端触摸优?*/
    .level-option:active {
        background: var(--level-option-hover);
        transform: scale(0.97);
    }
    .level-option.active:active {
        transform: scale(0.97);
    }
    .start-correction-btn:active {
        transform: scale(0.97);
    }
.level-option[data-level="basic"] .level-option-text,
    .level-option[data-level="standard"] .level-option-text,
    .level-option[data-level="pro"] .level-option-text {
        font-size: var(--font-size-base);
        font-weight: 700;
        letter-spacing: 0.3px;
    }
    .level-option[data-level="basic"] .level-option-desc,
    .level-option[data-level="standard"] .level-option-desc,
    .level-option[data-level="pro"] .level-option-desc {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.1px;
    }
    /* 移动?Pro 按钮文本渐变效果调整 */
    .level-option[data-level="pro"] .level-option-text {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    /* pricing page responsive rules moved to static/css/pricing.css */
    /* 权益卡片移动端适配 */
    .benefits-cards-section {
        margin-bottom: 30px;
    }
    .benefits-cards-container {
        padding: 0 15px;
    }
    .benefit-card {
        padding: 24px 20px;
        gap: 16px;
        min-height: 100px;
        flex-direction: column;
        text-align: center;
    }
    .benefit-card-icon {
        width: 48px;
        height: 48px;
    }
    .benefit-card-icon i {
        font-size: var(--font-size-xl);
    }
    .benefit-card-title {
        font-size: var(--font-size-xl);
        margin-bottom: 6px;
    }
    .benefit-card-description {
        font-size: var(--font-size-sm);
    }
    .service-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    /* .testimonial-grid 已在上方设为 display: none，无需设置 grid 属性 */
    .tutoring-stats-premium {
        flex-direction: row;
        gap: 0.8rem;
        flex-wrap: nowrap;
        justify-content: center;
        padding: 0 0.5rem;
        margin-bottom: 1.5rem;
    }
    .tutoring-stat-item {
        flex: 1;
        min-width: 0;
        max-width: 110px;
        background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-background-tertiary) 100%);
        border: 2px solid rgba(255, 215, 0, 0.2);
        border-radius: var(--radius-xl);
        padding: 12px 8px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .tutoring-stat-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 107, 53, 0.04) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 0;
    }
    .tutoring-stat-item:hover::before {
        opacity: 1;
    }
    .tutoring-stat-item:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        border-color: rgba(255, 215, 0, 0.4);
    }
    .tutoring-stat-item i {
        font-size: 1.4rem;
        margin-bottom: 4px;
        position: relative;
        z-index: 1;
    }
    .tutoring-stat-item span {
        font-size: 11px;
        font-weight: 600;
        color: #374151;
        letter-spacing: 0.3px;
        line-height: 1.2;
        position: relative;
        z-index: 1;
        text-align: center;
    }
    .tutoring-stat-item strong {
        background: linear-gradient(135deg, #000000, #374151);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: var(--font-size-base);
        font-weight: 800;
        letter-spacing: 0.5px;
        display: block;
        margin-bottom: 2px;
        position: relative;
        z-index: 1;
    }
    .ios-segmented-control {
        padding: 0 12px;
        margin-bottom: 24px;
    }
    .ios-segment-item {
        padding: 10px 12px;
        font-size: var(--font-size-sm);
        min-height: 40px;
    }
    .contact-qr {
        width: 150px;
        height: 150px;
    }
}

/* 手机 (Mobile - 480px) */
@media (max-width: 479px) {
    .user-dropdown-menu {
        position: fixed !important;
        top: 60px !important;
        right: 6px;
        left: auto;
        min-width: 240px;
        max-width: calc(100vw - 16px);
        width: 240px;
        z-index: 10001;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 10px;
        box-shadow:
            0 8px 28px rgba(0, 0, 0, 0.15),
            0 4px 14px rgba(0, 0, 0, 0.1);
        padding: 2px;
        transform: translate3d(0, -5px, 0) scale(0.98);
    }
    .user-dropdown-menu.show {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
    }
    .dropdown-item {
        padding: 9px 10px;
        font-size: 13px;
        min-height: 36px;
        border-radius: 7px;
        gap: 5px;
        display: flex;
        align-items: center;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
        user-select: none;
    }
    .dropdown-item svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }
    .dropdown-item:active {
        background: rgba(0, 0, 0, 0.1);
        transform: scale(0.98);
    }
    .dropdown-divider {
        margin: 2px 6px;
    }
    .dropdown-user-info {
        padding: 10px 12px 8px;
        margin: 2px 2px 0;
        gap: 10px;
    }
    .dropdown-user-avatar {
        width: 34px;
        height: 34px;
    }
    .dropdown-user-avatar span {
        font-size: 14px;
    }
    .dropdown-user-name {
        font-size: 13px;
    }
    .dropdown-user-email {
        font-size: 11px;
    }
    .dropdown-combined-card {
        margin: 3px 6px 3px;
    }
    .combined-card-header {
        padding: 10px 10px 8px;
    }
    .combined-card-plan-icon {
        width: 24px;
        height: 24px;
    }
    .combined-card-plan-icon i {
        font-size: 12px;
    }
    .combined-card-plan-name {
        font-size: 13px;
    }
    .combined-card-upgrade-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        max-width: 28px;
        max-height: 28px;
        aspect-ratio: 1 / 1;
        font-size: 14px;
    }
    .combined-stat-item {
        padding: 8px 10px;
        gap: 6px;
    }
    .combined-stat-icon {
        width: 24px;
        height: 24px;
    }
    .combined-stat-icon i {
        font-size: 12px;
    }
    .combined-stat-label {
        font-size: 9px;
    }
    .combined-stat-value {
        font-size: 12px;
    }
    /* 通知系统超小屏幕 */
    .notification-container {
        max-width: none;
        right: 0.5rem;
        left: 0.5rem;
        top: calc(var(--header-height, 60px) + 0.5rem);
        padding: 0;
    }
    .notification {
        padding: 0.75rem 0.875rem;
        border-radius: var(--radius-xl);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        margin-bottom: 0.5rem;
    }
    .notification i,
    .notification .notification-icon {
        width: 18px;
        height: 18px;
        font-size: 0.6875rem;
    }
    .notification span,
    .notification .notification-message {
        font-size: 0.8rem;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .notification-close {
        width: 20px;
        height: 20px;
        font-size: 0.6875rem;
    }
    /* 悬浮二维码框超小屏幕 */
    .floating-qr-box {
        bottom: 10px;
        right: 10px;
    }
    .floating-qr-content {
        padding: var(--spacing-xs);
        min-width: 100px;
        max-width: 120px;
    }
    .floating-qr-image img {
        width: 60px;
        height: 60px;
    }
    .floating-qr-icon {
        width: 18px;
        height: 18px;
        font-size: var(--font-size-xs);
    }
    .floating-qr-close {
        width: 16px;
        height: 16px;
        top: 4px;
        right: 4px;
    }
    /* 新用户模态框超小屏幕 */
    .new-user-modal-content {
        padding: 24px 20px;
        margin: 16px;
    }
    .new-user-modal-icon {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }
    .new-user-modal-title {
        font-size: var(--font-size-xl);
    }
    .new-user-benefit-item {
        padding: 8px;
        margin-bottom: 12px;
    }
    .new-user-benefit-text {
        font-size: 13px;
    }
    .new-user-btn {
        padding: 12px 20px;
        font-size: var(--font-size-sm);
        min-width: 120px;
    }
    .instruction-item {
        gap: 12px;
        padding: 16px;
        flex-direction: column;
        text-align: center;
        position: relative;
    }
    .instruction-number {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-sm);
    }
    .new-card {
        padding: var(--spacing-sm);
        border-radius: var(--radius-sm);
    }
    .new-card-header {
        padding-bottom: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
    }
    .new-card-title {
        font-size: var(--font-size-xs);
    }
    .new-card-description {
        font-size: var(--font-size-xs);
    }
    .new-card-content {
        font-size: var(--font-size-xs);
    }
    .pricing-tab span {
        display: none;
    }
    .pricing-tab {
        min-width: auto;
        padding: 0.75rem;
        border-radius: var(--radius-md);
    }
    .pricing-tab i {
        font-size: 1.1rem;
    }
    .new-header,
    .modern-header {
        padding: 0 var(--spacing-sm);
    }
    .auth-page {
        padding: 0.5rem !important;
    }
    .error-page .logo-container {
        top: 10px;
        left: 10px;
    }
    .error-page .brand-name {
        font-size: 0.9rem;
    }
    .error-page .brand-url {
        font-size: 0.65rem;
    }
    .error-container {
        padding: 1.2rem 1rem;
        margin-top: 3.5rem;
    }
    .error-code {
        font-size: 2.8rem;
    }
    .error-icon i {
        font-size: 2.5rem;
    }
    .links-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .quick-link {
        padding: 0.5rem;
    }
    .auth-page {
        padding: 1rem;
        min-height: calc(100vh - 150px);
    }
    /* 修改密码页面移动端调?*/
    .auth-container.change-password {
        padding: 0.5rem;
        min-height: 100vh;
        max-width: 100%;
        max-height: calc(100vh - 1rem);
        border-radius: 0.75rem;
    }
    .auth-container {
        max-width: 100%;
    }
    .auth-header {
        padding: 1.5rem 1.5rem 1rem;
    }
    /* 修改密码页面头部移动端调?*/
    .auth-container.change-password .auth-header {
        padding: 1rem 1rem 0.75rem;
    }
    .auth-container.change-password .auth-header h2 {
        font-size: 1.125rem;
    }
    .auth-container.change-password .auth-header p {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }
    .auth-container.change-password .auth-toggle {
        font-size: 0.75rem;
    }
    .auth-form {
        padding: 1.5rem;
    }
    /* 修改密码页面表单移动端调?*/
    .auth-container.change-password .auth-form {
        padding: 1rem;
        gap: 0.875rem;
    }
    /* 注册页面表单移动端调?*/
    .auth-container.register .auth-form {
        padding: 1rem;
    }
    .auth-form .form-group input {
        padding: 0.75rem 0.75rem 0.75rem 2rem;
        font-size: var(--font-size-base);
    }
    .auth-form .form-group .icon {
        left: 0.75rem;
        top: 0.75rem;
        font-size: 0.85rem;
    }
    .pwd-toggle {
        right: 0.75rem;
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }
    .submit-btn {
        padding: 0.75rem;
        min-height: 42px;
        font-size: 15px;
    }
    .auth-footer {
        padding: 0.75rem 1rem;
    }
    /* 修改密码页面底部移动端调?*/
    .auth-container.change-password .auth-footer {
        padding: 0.75rem 1rem;
    }
    .auth-footer a {
        font-size: 0.75rem;
    }
    .auth-form .error {
        font-size: 0.65rem;
    }
    .form-options {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    .tips-grid {
        grid-template-columns: 1fr;
    }
    .tip-item {
        padding: 0.4rem;
        font-size: 0.7rem;
    }
    .upload-canvas,
    .file-upload-zone,
    .file-info-display,
    .citation-textarea {
        min-height: 280px;
        height: 280px;
    }
    .upload-tips {
        margin: 0.5rem 0;
        padding: 0.75rem;
    }
    .file-info-display {
        padding: 1rem;
    }
    .citation-textarea {
        padding: 0.5rem;
    }
    .word-warning-content {
        padding: 1.5rem;
        margin: 1rem;
    }
    .pdf-toolbar {
        padding: 4px 6px !important;
        gap: 1px !important;
    }
    .pdf-toolbar > div {
        gap: 1px !important;
    }
    .pdf-toolbar .pdf-btn,
    .pdf-toolbar .pdf-btn-icon {
        min-width: 28px !important;
        width: 28px !important;
        min-height: 28px !important;
        height: 28px !important;
        padding: 2px !important;
        font-size: 12px !important;
    }
    .pdf-toolbar span[style*="padding: 0 16px"] {
        padding: 0 2px !important;
        font-size: 11px !important;
    }
    #zoomSelect {
        min-width: 48px !important;
        width: 48px !important;
        padding: 2px 1px !important;
        font-size: 10px !important;
    }
    #pdfPlaceholder > div:first-child {
        font-size: 48px !important;
        margin-bottom: 12px !important;
    }
    #pdfPlaceholder > p:first-of-type {
        font-size: 13px !important;
    }
    .history-docs-table tbody tr {
        padding: 8px 10px !important;
        gap: 6px !important;
    }
    .history-filename-cell {
        font-size: 12px !important;
    }
    .history-time-cell {
        font-size: 10px !important;
    }
    .history-count-cell {
        font-size: 10px !important;
    }
    .pdf-quick-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-height: 30px !important;
    }
    .chat-message .content {
        max-width: 92% !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    #pdfChatInput {
        min-height: 70px !important;
        padding-right: 90px !important;
        font-size: 16px !important;
    }
    #pdfSendBtn {
        min-width: 60px !important;
        font-size: 12px !important;
    }
    #pdfChatMessages > div:first-child {
        padding: 24px 12px !important;
    }
    #pdfChatMessages > div:first-child > div:first-child {
        font-size: 36px !important;
    }
    #pdfChatMessages > div:first-child h3 {
        font-size: 15px !important;
    }
    .citation-header-card {
        padding: 14px 12px;
        margin-top: -18px;
        margin-bottom: 12px;
        margin-left: 0;
        margin-right: 0;
        border-radius: 14px;
        background: var(--color-background-primary);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }
    .citation-header-content {
        gap: 10px;
        align-items: center;
    }
    .citation-header-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        aspect-ratio: 1 / 1;
        font-size: 1rem;
        border-radius: 10px;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }
    .citation-header-text {
        margin-left: 0;
        flex: 1;
        min-width: 0;
    }
    .citation-header-title {
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.35;
        margin-bottom: 3px;
        color: #1f2937;
    }
    .citation-header-description {
        font-size: 0.8125rem;
        line-height: 1.45;
        color: #6b7280;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    /* 移动端暗色模式 - 标题卡片 */
    html.dark .citation-header-card {
        background: var(--color-background-primary);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    html.dark .citation-header-icon {
        background: linear-gradient(135deg, #1e1e1e 0%, #262626 100%);
        color: #f5f5f5;
    }
    html.dark .citation-header-title {
        color: #f5f5f5;
    }
    html.dark .citation-header-description {
        color: #a3a3a3;
    }
    .new-user-points-modal-content {
        width: 98%;
        margin: 5px;
    }
    .new-user-points-title {
        font-size: 22px;
    }
    .benefit-item {
        font-size: 13px;
    }
    .new-user-points-image img {
        width: 140px;
        height: 140px;
    }
    :root {
        --sidebar-width: 260px !important;
    }
    .sidebar {
        max-width: 90vw !important;
    }
    .report-showcase-card {
        margin: var(--spacing-2xs) 0 !important;
        /* 边缘到边缘布局 */
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        border-radius: 0;
    }
    .showcase-title h3 {
        font-size: 1rem;
    }
    .showcase-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
    .report-display-container {
        min-height: 300px;
        min-height: min(300px, 55vh);
    }
    .overview-image-container,
    .pdf-viewer-container {
        height: auto;
        min-height: 280px;
        max-height: 55vh;
    }
    .report-type-btn {
        padding: 0.625rem;
        font-size: 0.75rem;
        /* 保持触摸目标 */
        min-height: var(--touch-target-min);
    }
    .report-type-btn span {
        display: none;
    }
    .pdf-error-fallback,
    .image-error-fallback {
        padding: 1rem;
    }
    .pdf-error-fallback .error-icon,
    .image-error-fallback .error-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    .pdf-error-fallback .error-content h4,
    .image-error-fallback .error-content h4 {
        font-size: 1.125rem;
    }
    /* 480px下的额外触摸优化 */
    .view-reports-btn,
    .pdf-download-link {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        font-size: 0.9rem;
    }
    .lightweight-header {
        height: 56px;
        padding: 0 12px;
    }
    .header-right {
        gap: 8px;
    }
    .auth-btn {
        padding: 8px 16px;
        font-size: var(--font-size-xs);
        border-radius: var(--radius-xl);
        height: 40px;
    }
    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 13px;
        border-radius: var(--radius-xl);
    }
    .user-btn {
        padding: 2px 6px 2px 2px;
        border-radius: var(--radius-xl);
        height: 40px;
    }
    /* 进一步减小内边距 */
    .new-card {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .new-card-header {
        padding: 0.375rem;
        margin-bottom: 0.375rem;
    }
    .new-card-content {
        padding: 0.375rem;
    }
    /* 标题卡片 */
    .citation-header-card {
        padding: 12px 10px;
        margin-top: -14px;
        margin-bottom: 10px;
        border-radius: 12px;
    }
    .citation-header-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        aspect-ratio: 1 / 1;
        font-size: 0.9375rem;
        border-radius: 9px;
    }
    .citation-header-title {
        font-size: 0.875rem;
        margin-bottom: 2px;
    }
    .citation-header-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }
    /* 服务介绍 */
    .service-info {
        padding: 0.5rem;
    }
    .service-description p {
        font-size: 0.75rem;
    }
    /* 保持特性标签两列布局 */
    .service-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }
    .feature-badge {
        font-size: 0.7rem;
        padding: 0.375rem 0.5rem;
        min-height: 40px;
    }
    .feature-badge i {
        font-size: 0.8rem;
    }
    .feature-badge span {
        line-height: 1.2;
    }
    .gift-coins-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-height: 100vh;
    }
    .gift-coins-header {
        padding: 16px 16px 12px;
    }
    .gift-coins-body {
        padding: 16px;
    }
    .gift-coins-description {
        font-size: 13px;
        padding: 12px;
    }
    .universal-modal-overlay {
        padding: 0.25rem !important;
    }
    .universal-modal-header {
        padding: 1rem 1rem 0.75rem;
    }
    .universal-modal-content {
        padding: 1rem;
    }
    .universal-modal-footer {
        padding: 0.75rem 1rem;
    }
    .new-header {
        padding: 0.5rem;
    }
    .new-header-actions {
        gap: 0.25rem;
    }
    .page-content {
        padding: 0.75rem;
    }
    .model-selector-buttons {
        gap: 0.2rem;
    }
    .model-selector-buttons .model-btn {
        padding: 0.35rem 0.3rem;
        font-size: 0.6rem;
    }
    .skeleton-header-row,
    .skeleton-row {
        padding: 12px;
        gap: 8px;
    }
    /* 隐藏部分?*/
    .usage-skeleton .skeleton-header-cell[data-col="type"],
    .usage-skeleton .skeleton-cell[data-col="type"] {
        display: none;
    }
    .payment-skeleton .skeleton-header-cell[data-col="order"],
    .payment-skeleton .skeleton-cell[data-col="order"],
    .payment-skeleton .skeleton-header-cell[data-col="action"],
    .payment-skeleton .skeleton-cell[data-col="action"] {
        display: none;
    }
    .correction-level-selector {
        margin: 12px 8px;
        max-width: calc(100% - 16px);
        padding: 14px;
        gap: 14px;
        border-radius: 18px;
    }
    .level-label {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 6px;
    }
    .level-options {
        gap: 10px;
    }
    .level-option {
        min-height: 56px;
        padding: 16px 18px;
        border-radius: 14px;
        border-width: 2px;
    }
    .level-option-text {
        font-size: var(--font-size-sm);
        font-weight: 600;
        line-height: 1.2;
    }
    .start-correction-btn {
        min-height: 56px;
        font-size: 15px;
        font-weight: 700;
        padding: 16px 20px;
        border-radius: 14px;
        margin-top: 6px;
    }
    .start-correction-btn i {
        font-size: 15px;
    }
    /* 增强触摸反馈 */
    .level-option:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }
    .start-correction-btn:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }
    .level-option[data-level="basic"] .level-option-text,
    .level-option[data-level="standard"] .level-option-text,
    .level-option[data-level="pro"] .level-option-text {
        font-size: var(--font-size-sm);
        font-weight: 600;
        letter-spacing: 0.2px;
    }
    .level-option[data-level="basic"] .level-option-desc,
    .level-option[data-level="standard"] .level-option-desc,
    .level-option[data-level="pro"] .level-option-desc {
        font-size: var(--font-size-xs);
        font-weight: 500;
        letter-spacing: 0.1px;
    }
    .tutoring-stats-premium {
        gap: 0.6rem;
        padding: 0 0.3rem;
        margin-bottom: 1.2rem;
    }
    .tutoring-stat-item {
        max-width: 95px;
        padding: 10px 6px;
        border-radius: 10px;
    }
    .tutoring-stat-item i {
        font-size: 1.2rem;
        margin-bottom: 3px;
    }
    .tutoring-stat-item strong {
        font-size: var(--font-size-sm);
        letter-spacing: 0.3px;
        margin-bottom: 1px;
    }
    .tutoring-stat-item span {
        font-size: 10px;
        letter-spacing: 0.2px;
        line-height: 1.1;
    }
    .ios-segmented-control {
        padding: 0 8px;
        margin-bottom: 20px;
    }
    .ios-segment-item {
        padding: 8px 10px;
        font-size: 13px;
        min-height: 36px;
    }
    .section-title {
        font-size: 15px;
        margin-bottom: 18px;
    }
    .section-title.choose-your-plan {
        font-size: var(--font-size-lg);
        letter-spacing: 1px;
    }
}

/* ==========================================
   工具快速导航栏 (共享: paper_tool + paper_toolbox)
   ========================================== */
.tool-nav-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-bottom: var(--spacing-md);
    padding: 10px 12px;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
}

.tool-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 999px;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.6;
}

.tool-nav-link i {
    font-size: 0.85rem;
}

.tool-nav-link:hover {
    color: var(--color-primary);
    background: var(--color-background-tertiary);
}

.tool-nav-link.active {
    color: #fff;
    background: #111;
    font-weight: 600;
}

html.dark .tool-nav-bar {
    border-color: #2a2a2a;
}

html.dark .tool-nav-link {
    color: #a3a3a3;
}

html.dark .tool-nav-link:hover {
    color: #f5f5f5;
    background: rgba(255, 255, 255, 0.05);
}

html.dark .tool-nav-link.active {
    background: #f5f5f5;
    color: #171717;
}

/* ==========================================
   统一打印样式 (Consolidated Print Styles)
   ========================================== */
@media print {
    /* 隐藏非打印元素 */
    .site-footer {
        display: none;
    }
    .modal-overlay,
    .notification-container,
    .floating-qr-box {
        display: none !important;
    }
    .new-card:first-child {
        display: none;
    }
    .text-selection-menu,
    .pdf-page-label,
    .typing-indicator,
    .pdf-model-selector-btn,
    .pdf-ai-model-dropdown-upward {
        display: none !important;
    }
    .lightweight-header {
        display: none !important;
    }
    /* 布局调整 */
    .new-main,
    .new-main-content {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }
    /* 字体打印优化 */
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    h1 {
        font-size: 24pt;
    }
    h2 {
        font-size: 18pt;
    }
    h3 {
        font-size: 14pt;
    }
    p, li {
        orphans: 3;
        widows: 3;
    }
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    /* 卡片和页面样式 */
    .new-card {
        border: none;
        page-break-inside: avoid;
    }
    .pdf-page-wrapper {
        box-shadow: none !important;
        page-break-inside: avoid;
    }
    .report-showcase-card {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }
    .overview-image {
        max-width: 100%;
        height: auto;
    }
}