/* PenPoint 设计系统 - 全局CSS变量和基础样式 */

/* ========================================
   设计系统变量定义
   ======================================== */

:root {
  /* 🎨 主色彩系统 - 智慧蓝主题 */
  --primary-50: #e6f4ff;
  --primary-100: #bae0ff;
  --primary-200: #91caff;
  --primary-300: #69b1ff;
  --primary-400: #4096ff;
  --primary-500: #1677ff;
  --primary-600: #0958d9;
  --primary-700: #003eb3;
  --primary-800: #002c8c;
  --primary-900: #001d66;

  /* 🌈 功能色彩 */
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #ff4d4f;
  --info-color: #1677ff;

  /* 🎯 特色功能色 */
  --ai-accent: #722ed1;
  --scoring-accent: #eb2f96;
  --analytics-accent: #13c2c2;

  /* 🌫️ 中性色系 */
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #f0f0f0;
  --gray-300: #d9d9d9;
  --gray-400: #bfbfbf;
  --gray-500: #8c8c8c;
  --gray-600: #595959;
  --gray-700: #434343;
  --gray-800: #262626;
  --gray-900: #141414;

  /* 🌅 渐变系统 */
  --gradient-primary: linear-gradient(135deg, #1677ff 0%, #69b1ff 100%);
  --gradient-success: linear-gradient(135deg, #52c41a 0%, #95de64 100%);
  --gradient-warning: linear-gradient(135deg, #faad14 0%, #ffd666 100%);
  --gradient-error: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  --gradient-ai: linear-gradient(135deg, #722ed1 0%, #b37feb 100%);
  --gradient-scoring: linear-gradient(135deg, #eb2f96 0%, #f759ab 100%);
  --gradient-analytics: linear-gradient(135deg, #13c2c2 0%, #5cdbd3 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%);

  /* 📝 字体系统 */
  --font-family-primary: 'PingFang SC', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 
                          'Segoe UI', Roboto, 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  --font-family-heading: 'PingFang SC', 'Source Han Sans CN', 'Noto Sans CJK SC', sans-serif;

  /* 📏 字体尺寸 */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 36px;
  --font-size-6xl: 48px;

  /* 📐 行高系统 */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.8;

  /* 🔤 字重系统 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 📦 间距系统 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-base: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;

  /* 🔄 圆角系统 */
  --radius-sm: 4px;
  --radius-base: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 50%;

  /* 🌫️ 阴影系统 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

  /* ✨ 特殊阴影 */
  --shadow-glow: 0 0 20px rgba(22, 119, 255, 0.3);
  --shadow-error: 0 0 0 1px #ff4d4f, 0 0 6px rgba(255, 77, 79, 0.2);
  --shadow-success: 0 0 0 1px #52c41a, 0 0 6px rgba(82, 196, 26, 0.2);

  /* 📱 响应式断点 */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  /* ⚡ 动画系统 */
  --transition-fast: 0.1s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   全局重置和基础样式
   ======================================== */

* {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--gray-800);
  background-color: var(--gray-50);
  min-height: 100vh;
}

/* ========================================
   现代UI组件基础样式
   ======================================== */

/* 🔮 玻璃拟态效果 */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: 
    0 8px 32px rgba(31, 38, 135, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all var(--transition-smooth);
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 40px rgba(31, 38, 135, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.glass-button {
  background: rgba(22, 119, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(22, 119, 255, 0.3);
  border-radius: var(--radius-md);
  padding: 12px 24px;
  color: var(--primary-600);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-smooth);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.glass-button:hover {
  background: rgba(22, 119, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(22, 119, 255, 0.2);
  color: var(--primary-700);
}

/* 🏔️ 新拟态效果 */
.neomorphic-card {
  background: var(--gray-100);
  border-radius: var(--radius-xl);
  box-shadow: 
    9px 9px 18px #d1d1d1,
    -9px -9px 18px #ffffff;
  transition: all var(--transition-smooth);
  padding: var(--spacing-lg);
}

.neomorphic-card:hover {
  box-shadow: 
    12px 12px 24px #c8c8c8,
    -12px -12px 24px #ffffff;
}

.neomorphic-inset {
  background: var(--gray-100);
  border-radius: var(--radius-md);
  box-shadow: 
    inset 6px 6px 12px #d1d1d1,
    inset -6px -6px 12px #ffffff;
  padding: var(--spacing-base);
}

.neomorphic-button {
  background: linear-gradient(145deg, #e6e6e6, #ffffff);
  box-shadow: 
    5px 5px 10px #d1d1d1,
    -5px -5px 10px #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--gray-700);
  font-weight: var(--font-weight-medium);
}

.neomorphic-button:active {
  box-shadow: 
    inset 3px 3px 6px #d1d1d1,
    inset -3px -3px 6px #ffffff;
  transform: scale(0.98);
}

/* ========================================
   现代按钮组件
   ======================================== */

.btn-gradient {
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--radius-base);
  padding: 12px 24px;
  color: white;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  filter: brightness(1.05);
}

.btn-gradient:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--primary-500);
  color: var(--primary-500);
  border-radius: var(--radius-base);
  padding: 10px 22px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-outline:hover {
  background: var(--primary-500);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ========================================
   卡片组件样式
   ======================================== */

.modern-card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  padding: var(--spacing-md);
  transition: all var(--transition-smooth);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  position: relative;
}

.modern-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--primary-200);
}

.stat-card {
  background: var(--gradient-primary);
  color: white;
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-smooth);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: rotate(45deg);
}

.stat-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-xl);
}

/* ========================================
   表单组件样式
   ======================================== */

.form-input {
  background: white;
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-base);
  padding: 12px 16px;
  font-size: var(--font-size-base);
  font-family: var(--font-family-primary);
  transition: all var(--transition-smooth);
  width: 100%;
  outline: none;
}

.form-input:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.1);
}

.form-input:hover {
  border-color: var(--primary-300);
}

.search-input {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  padding: 10px 20px 10px 40px;
  position: relative;
  transition: all var(--transition-smooth);
}

.search-input:focus {
  background: white;
  border-color: var(--primary-500);
  box-shadow: var(--shadow-sm);
}

/* ========================================
   动画和过渡效果
   ======================================== */

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

/* 动画类 */
.animate-slide-up {
  animation: slideInUp 0.6s var(--transition-smooth);
}

.animate-slide-down {
  animation: slideInDown 0.6s var(--transition-smooth);
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.4s var(--transition-smooth);
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* ========================================
   加载状态和骨架屏
   ======================================== */

.skeleton {
  background: linear-gradient(90deg, 
    var(--gray-200) 25%, 
    var(--gray-100) 50%, 
    var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: var(--radius-base);
}

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

.skeleton-card {
  padding: var(--spacing-lg);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
}

.skeleton-header {
  height: 24px;
  width: 60%;
  margin-bottom: var(--spacing-base);
}

.skeleton-line {
  height: 16px;
  width: 100%;
  margin-bottom: var(--spacing-sm);
}

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

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

/* ========================================
   工具类
   ======================================== */

/* 文本颜色 */
.text-primary { color: var(--primary-500); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-error { color: var(--error-color); }
.text-gray { color: var(--gray-500); }
.text-muted { color: var(--gray-400); }

/* 背景色 */
.bg-primary { background-color: var(--primary-500); }
.bg-success { background-color: var(--success-color); }
.bg-warning { background-color: var(--warning-color); }
.bg-error { background-color: var(--error-color); }
.bg-gray { background-color: var(--gray-100); }

/* 渐变背景 */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-success { background: var(--gradient-success); }
.bg-gradient-ai { background: var(--gradient-ai); }

/* 间距工具类 */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-base); }
.m-4 { margin: var(--spacing-md); }
.m-5 { margin: var(--spacing-lg); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-base); }
.p-4 { padding: var(--spacing-md); }
.p-5 { padding: var(--spacing-lg); }

/* 边距类 */
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-base); }
.mt-4 { margin-top: var(--spacing-md); }
.mt-5 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-base); }
.mb-4 { margin-bottom: var(--spacing-md); }
.mb-5 { margin-bottom: var(--spacing-lg); }

.mr-1 { margin-right: var(--spacing-xs); }
.mr-2 { margin-right: var(--spacing-sm); }
.mr-3 { margin-right: var(--spacing-base); }

.ml-1 { margin-left: var(--spacing-xs); }
.ml-2 { margin-left: var(--spacing-sm); }
.ml-3 { margin-left: var(--spacing-base); }

/* 字体工具类 */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* 显示工具类 */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flexbox工具类 */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

/* 位置工具类 */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* 阴影工具类 */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/* 圆角工具类 */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-base); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* 过渡工具类 */
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* GPU 加速 */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* 可访问性 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 焦点指示器 */
.focusable:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.2);
}

/* ========================================
   响应式工具类
   ======================================== */

@media (max-width: 767px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  .sm\:text-sm { font-size: var(--font-size-sm); }
  .sm\:text-base { font-size: var(--font-size-base); }
  .sm\:p-2 { padding: var(--spacing-sm); }
  .sm\:p-3 { padding: var(--spacing-base); }
  .sm\:m-2 { margin: var(--spacing-sm); }
}

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
  .md\:text-lg { font-size: var(--font-size-lg); }
  .md\:text-xl { font-size: var(--font-size-xl); }
  .md\:p-4 { padding: var(--spacing-md); }
  .md\:p-5 { padding: var(--spacing-lg); }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
  .lg\:text-xl { font-size: var(--font-size-xl); }
  .lg\:text-2xl { font-size: var(--font-size-2xl); }
  .lg\:p-5 { padding: var(--spacing-lg); }
  .lg\:p-6 { padding: var(--spacing-xl); }
}

/* ========================================
   AntDesign 样式覆盖
   ======================================== */

/* AntDesign 主题定制 */
.ant-btn-primary {
  background: var(--gradient-primary);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
}

.ant-btn-primary:hover {
  background: var(--gradient-primary);
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.ant-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-smooth);
}

.ant-card:hover {
/*  box-shadow: var(--shadow-lg);*/
/*  transform: translateY(-2px);*/
}

.ant-table {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ant-table-thead > tr > th {
  background: var(--gray-50);
  border-bottom: 2px solid var(--gray-200);
  font-weight: var(--font-weight-semibold);
}

.ant-input {
  border-radius: var(--radius-base);
  border: 2px solid var(--gray-300);
  transition: all var(--transition-smooth);
}

.ant-input:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.1);
}

/* 确保样式优先级 */
.penpoint-design-system {
  font-family: var(--font-family-primary);
}

/* ========================================
   性能优化
   ======================================== */

/* 减少重绘的优化 */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* 完成动画后清理 */
.animation-complete {
  will-change: auto;
}

/* ========================================
   应用布局系统
   ======================================== */

/* 主应用容器 */
.app-layout {
  display: block;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--gray-100);
  position: relative;
}

/* ========================================
   侧边栏样式
   ======================================== */

.sidebar {
  width: 280px;
  min-width: 280px;
  background: linear-gradient(180deg, 
    var(--primary-700) 0%, 
    var(--primary-800) 50%, 
    var(--primary-900) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: fixed;
  top: 8px;
  left: 8px;
  bottom: 8px;
  z-index: 1000;
  border-radius: 12px;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="4" height="4" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="0.5" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

/* 侧边栏收缩状态 */
.sidebar.collapsed {
  width: 80px;
  min-width: 80px;
}

.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-section-title span,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .version-info {
  opacity: 0;
  transform: translateX(-20px);
}

/* 收缩状态下的导航项布局优化 */
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 12px;
  margin: 2px 12px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.sidebar.collapsed .nav-item:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

.sidebar.collapsed .nav-item.active {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.15);
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

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

/* 收缩状态下确保所有元素垂直居中 */
.sidebar.collapsed .nav-item * {
  line-height: 1;
  vertical-align: middle;
}

/* 收缩状态下的按钮样式统一 */
.sidebar.collapsed .nav-item,
.sidebar.collapsed .nav-item:hover,
.sidebar.collapsed .nav-item.active {
  overflow: hidden;
  position: relative;
}

.sidebar.collapsed .nav-icon {
  margin: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.sidebar.collapsed .nav-section-title {
  justify-content: center;
  padding: 6px;
  height: auto;
  min-height: 28px;
  margin: 4px 12px;
}

.sidebar.collapsed .nav-section-title i {
  margin: 0;
  font-size: 14px;
}

/* 收缩状态下的品牌Logo */
.sidebar.collapsed .brand-logo {
  justify-content: center;
}

.sidebar.collapsed .logo-icon {
  margin: 0;
}

/* 收缩状态下隐藏状态指示器和徽章 */
.sidebar.collapsed .nav-status,
.sidebar.collapsed .nav-badge {
  display: none;
}

/* 收缩状态下的工具提示 */
.sidebar.collapsed .nav-item {
  position: relative;
}

.sidebar.collapsed .nav-item:hover::after {
  content: attr(title);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1001;
  pointer-events: none;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease-out forwards;
}

.sidebar.collapsed .nav-item:hover::before {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 6px;
  border: 6px solid transparent;
  border-right-color: rgba(0, 0, 0, 0.9);
  z-index: 1001;
  pointer-events: none;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* 品牌标识区域 */
.sidebar-header {
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.brand-text {
  flex: 1;
  transition: all 0.3s ease;
}

.brand-title {
  font-size: 24px;
  font-weight: 700;
  color: white;
  margin: 0;
  letter-spacing: -0.5px;
}

.brand-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin: 4px 0 0 0;
  font-weight: 400;
}

/* 侧边栏内容区域 */
.sidebar-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 0;
}

.sidebar-content::-webkit-scrollbar {
  width: 4px;
}

.sidebar-content::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 侧边栏底部 */
.sidebar-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.version-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.3s ease;
}

.version-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.build-text {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

/* ========================================
   导航菜单优化
   ======================================== */

.navigation-container {
  padding: 0 16px;
}

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

.nav-section-title {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.nav-section-title span {
  transition: all 0.3s ease;
}

.nav-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
  gap: 12px;
  margin: 2px 8px;
  min-height: 40px;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.18);
  color: white;
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.15);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: white;
  border-radius: 0 2px 2px 0;
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.nav-text {
  flex: 1;
  transition: all 0.3s ease;
}

.nav-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;
}

.nav-badge.ai-badge {
  background: var(--gradient-ai);
  padding: 2px 8px;
}

.nav-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-status.status-active {
  background: var(--success-color);
  box-shadow: 0 0 8px rgba(82, 196, 26, 0.6);
}

.nav-status.status-processing {
  background: var(--warning-color);
  animation: pulse 2s infinite;
}

/* ========================================
   主内容区域
   ======================================== */

.main-content {
  position: fixed;
  top: 8px;
  right: 8px;
  bottom: 8px;
  left: 300px; /* 280px侧边栏 + 8px左边距 + 12px间隔 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  background: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
}

.main-content.expanded {
  left: 100px; /* 80px收缩侧边栏 + 8px左边距 + 12px间隔 */
}

/* 顶部工具栏 */
.top-header {
  height: 64px;
  background: white;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: relative;
  z-index: 999;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 12px 0 0 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sidebar-toggle {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--gray-100);
  border-radius: 8px;
  display: flex; /* 始终显示菜单按钮 */
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-toggle:hover {
  background: var(--gray-200);
  color: var(--primary-600);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--gray-600);
  min-height: 32px; /* 确保有足够高度 */
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--gray-600);
  font-weight: 400;
  height: 100%; /* 继承父容器高度 */
}

.breadcrumb-item.active .breadcrumb-text {
  color: var(--gray-900);
  font-weight: 500;
}

.breadcrumb-link {
  color: var(--gray-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-link:hover {
  color: var(--primary-600);
}

.breadcrumb-separator {
  font-size: 12px;
  color: var(--gray-400);
  margin: 0 4px;
}

.breadcrumb i:not(.breadcrumb-separator) {
  font-size: 14px;
}

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

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--gray-100);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.action-btn:hover {
  background: var(--gray-200);
  color: var(--primary-600);
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background: var(--error-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  font-weight: 600;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  margin-left: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
}

/* 页面内容区域 */
.page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--gray-50);
  position: relative;
  border-radius: 0 0 0 12px;
}

/* ========================================
   响应式设计
   ======================================== */

@media (max-width: 1024px) {
  /* 响应式状态下，侧边栏完全隐藏 */
  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    z-index: 1001;
    border-radius: 0 12px 12px 0;
    width: 280px !important; /* 重置宽度，不使用collapsed状态 */
    min-width: 280px !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 响应式状态下移除collapsed类的影响 */
  .sidebar.collapsed {
    width: 280px !important;
    min-width: 280px !important;
    left: -280px; /* 确保收缩状态也是隐藏的 */
  }

  /* 响应式显示状态 - 抽屉模式 */
  .sidebar.show {
    left: 0;
    transform: translateX(0);
  }

  /* 响应式状态下强制显示所有内容 */
  .sidebar.show .brand-text,
  .sidebar.show .nav-text,
  .sidebar.show .nav-section-title span,
  .sidebar.show .nav-badge,
  .sidebar.show .version-info {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  /* 响应式状态下重置nav-item样式 */
  .sidebar.show .nav-item {
    justify-content: flex-start !important;
    padding: 10px 16px !important;
    margin: 2px 8px !important;
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
    gap: 12px !important;
  }

  /* 响应式状态下重置图标样式 */
  .sidebar.show .nav-icon {
    margin: 0 !important;
    margin-right: 12px !important;
    width: 20px !important;
    height: 20px !important;
  }

  /* 主内容区域完全撑满 */
  .main-content {
    left: 8px; /* 完全撑满到左边，只保留右边的边距 */
    margin-left: 0;
  }

  .main-content.expanded {
    left: 8px; /* 响应式状态下主内容区域位置保持一致 */
  }

  /* 显示侧边栏切换按钮 */
  .sidebar-toggle {
    display: flex;
  }

  /* 响应式状态下的遮罩层 - 抽屉模式必需 */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    cursor: pointer; /* 点击遮罩关闭 */
  }

  .sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  /* 抽屉模式下的阴影效果 */
  .sidebar.show {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }
}

@media (max-width: 768px) {
  .top-header {
    padding: 0 16px;
  }

  .header-actions {
    gap: 8px;
  }

  .breadcrumb {
    display: none;
  }
}

/* ========================================
   动画和过渡效果
   ======================================== */

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

.sidebar {
  animation: slideInFromLeft 0.3s ease-out;
}

.page-content {
  animation: fadeInUp 0.4s ease-out;
}

/* ========================================
   特殊导航项样式
   ======================================== */

/* 用户登出按钮 */
.logout-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.logout-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transform: translateX(4px);
}

/* 管理员区域特殊样式 */
.admin-section {
  color: rgba(255, 165, 0, 0.8) !important;
}

.admin-item {
  border-left: 2px solid transparent;
}

.admin-item:hover {
  border-left-color: rgba(255, 165, 0, 0.6);
  background: rgba(255, 165, 0, 0.1);
}

.admin-item.active {
  border-left-color: #ffa500;
  background: rgba(255, 165, 0, 0.15);
}

/* 用户区域样式 */
.user-section .nav-item {
  border-left: 2px solid transparent;
}

.user-section .nav-item:hover {
  border-left-color: rgba(255, 255, 255, 0.6);
}

.user-section .nav-item.active {
  border-left-color: white;
}

/* 认证区域样式 */
.auth-section .nav-item {
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

.auth-section .nav-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ========================================
   Logo图片样式
   ======================================== */

.brand-logo img {
  max-width: 100%;
  height: auto;
  max-height: 40px;
  object-fit: contain;
  filter: brightness(1.1) saturate(1.1);
  transition: all 0.3s ease;
}

.brand-logo img:hover {
  filter: brightness(1.2) saturate(1.2);
  transform: scale(1.05);
}

/* 响应式Logo处理 */
@media (max-width: 768px) {
  .brand-logo img {
    max-height: 32px;
  }
}

/* 侧边栏收缩时的Logo */
.sidebar.collapsed .brand-logo img {
  max-height: 28px;
  opacity: 0.8;
}

/* 深色模式下的Logo调整 */
@media (prefers-color-scheme: dark) {
  .brand-logo img {
    filter: brightness(1.2) saturate(0.9);
  }
}

/* ========================================
   虚拟管理员样式
   ======================================== */

.virtual-admin-info {
  margin-top: 8px;
  padding: 8px;
  background: var(--warning-color);
  border-radius: var(--radius-sm);
}

.virtual-admin-info .badge {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--warning-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 4px;
}

.virtual-admin-info .original-admin-info {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-weight: var(--font-weight-medium);
}

.switch-back-btn {
  background: var(--primary-500) !important;
  color: white !important;
  border: none;
  transition: all 0.2s ease;
}

.switch-back-btn:hover {
  background: var(--primary-600) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
}

.badge-warning {
  background-color: var(--warning-color);
  color: white;
}