src/assets/css/page-specific-enhanced.css
/* 特定页面增强样式 - 基于安装完成页面的设计语言 */

/* 主页增强 */
.home-view {
  background: transparent;
}

.home-view .dashboard-grid {
  gap: 1.5rem;
}

.home-view .dashboard-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-medium));
  -webkit-backdrop-filter: blur(var(--blur-medium));
  border: 1px solid var(--glass-border);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s var(--ease-smooth);
  overflow: hidden;
  position: relative;
}

.home-view .dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
}

.home-view .dashboard-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-large);
  border-color: oklch(var(--p) / 0.3);
}

.home-view .stats-card {
  background: var(--gradient-success);
  border: 1px solid oklch(var(--su) / 0.2);
}

.home-view .chart-card {
  background: var(--gradient-primary);
  border: 1px solid oklch(var(--p) / 0.2);
}

/* 实例管理页面增强 */
.instances-panel {
  background: transparent;
}

.instances-panel .instance-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-medium));
  -webkit-backdrop-filter: blur(var(--blur-medium));
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.instances-panel .instance-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, oklch(var(--p)) 0%, oklch(var(--s)) 100%);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease-smooth);
}

.instances-panel .instance-card:hover::before {
  transform: scaleX(1);
}

.instances-panel .instance-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-large);
  border-color: oklch(var(--p) / 0.3);
}

.instances-panel .instance-status.running {
  background: var(--gradient-success);
  color: oklch(var(--suc));
  animation: status-pulse 2s ease-in-out infinite;
}

.instances-panel .instance-status.stopped {
  background: oklch(var(--er) / 0.1);
  color: oklch(var(--erc));
}

@keyframes status-pulse {
  0%, 100% {
    box-shadow: 0 0 5px oklch(var(--su) / 0.3);
  }
  50% {
    box-shadow: 0 0 15px oklch(var(--su) / 0.6);
  }
}

/* 下载中心页面增强 */
.downloads-panel {
  background: transparent;
}

.downloads-panel .download-stage-container {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-medium));
  -webkit-backdrop-filter: blur(var(--blur-medium));
  border: 1px solid var(--glass-border);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.downloads-panel .install-complete-page {
  background: var(--gradient-primary);
  border: 2px solid oklch(var(--p) / 0.2);
}

.downloads-panel .install-complete-page .card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-heavy));
  -webkit-backdrop-filter: blur(var(--blur-heavy));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-large);
}

.downloads-panel .progress-container {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-light));
  -webkit-backdrop-filter: blur(var(--blur-light));
  border-radius: 1rem;
  padding: 1.5rem;
}

.downloads-panel .version-dropdown {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-medium));
  -webkit-backdrop-filter: blur(var(--blur-medium));
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
}

/* 设置页面增强 */
.settings-tab,
.settings-drawer {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-heavy));
  -webkit-backdrop-filter: blur(var(--blur-heavy));
}

.settings-section {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-medium));
  -webkit-backdrop-filter: blur(var(--blur-medium));
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 1.5rem;
  transition: all 0.3s var(--ease-smooth);
}

.settings-section:hover {
  box-shadow: var(--shadow-medium);
  border-color: oklch(var(--p) / 0.2);
}

.settings-section-title {
  background: var(--gradient-primary);
  color: oklch(var(--pc));
  padding: 1rem 1.5rem;
  border-radius: 1.25rem 1.25rem 0 0;
  font-weight: 600;
  border-bottom: 1px solid var(--glass-border);
}

/* 日志查看器增强 */
.logs-tab {
  background: transparent;
}

.log-viewer-container {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-medium));
  -webkit-backdrop-filter: blur(var(--blur-medium));
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.log-header {
  background: var(--gradient-primary);
  color: oklch(var(--pc));
  padding: 1rem 1.5rem;
  font-weight: 600;
  border-bottom: 1px solid var(--glass-border);
}

.log-content {
  background: rgba(0, 0, 0, 0.02);
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  line-height: 1.5;
}

.log-line {
  padding: 0.25rem 1rem;
  border-bottom: 1px solid var(--glass-border);
  transition: background-color 0.1s ease;
}

.log-line:hover {
  background: oklch(var(--p) / 0.05);
}

.log-line.error {
  background: oklch(var(--er) / 0.1);
  color: oklch(var(--erc));
}

.log-line.warning {
  background: oklch(var(--wa) / 0.1);
  color: oklch(var(--wac));
}

.log-line.info {
  background: oklch(var(--in) / 0.1);
  color: oklch(var(--inc));
}

.log-line.success {
  background: oklch(var(--su) / 0.1);
  color: oklch(var(--suc));
}

/* 聊天室增强 */
.chat-room {
  background: transparent;
}

.chat-container {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-medium));
  -webkit-backdrop-filter: blur(var(--blur-medium));
  border: 1px solid var(--glass-border);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.chat-header {
  background: var(--gradient-primary);
  color: oklch(var(--pc));
  padding: 1rem 1.5rem;
  font-weight: 600;
  border-bottom: 1px solid var(--glass-border);
}

.chat-messages {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(var(--blur-light));
  -webkit-backdrop-filter: blur(var(--blur-light));
}

.chat-bubble {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-light));
  -webkit-backdrop-filter: blur(var(--blur-light));
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
  margin: 0.5rem;
  transition: all 0.2s var(--ease-smooth);
}

.chat-bubble:hover {
  box-shadow: var(--shadow-medium);
}

.chat-bubble.user {
  background: var(--gradient-primary);
  color: oklch(var(--pc));
  margin-left: 2rem;
}

.chat-bubble.bot {
  background: var(--gradient-secondary);
  margin-right: 2rem;
}

.chat-input-container {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-medium));
  -webkit-backdrop-filter: blur(var(--blur-medium));
  border-top: 1px solid var(--glass-border);
  padding: 1rem;
}

/* 插件页面增强 */
.plugins-view {
  background: transparent;
}

.plugin-grid {
  gap: 1.5rem;
}

.plugin-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-medium));
  -webkit-backdrop-filter: blur(var(--blur-medium));
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s var(--ease-smooth);
  overflow: hidden;
  position: relative;
}

.plugin-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease-smooth);
}

.plugin-card:hover::before {
  transform: scaleX(1);
}

.plugin-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-large);
  border-color: oklch(var(--p) / 0.3);
}

.plugin-header {
  background: var(--gradient-secondary);
  padding: 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.plugin-status.enabled {
  background: var(--gradient-success);
  color: oklch(var(--suc));
  animation: status-pulse 2s ease-in-out infinite;
}

.plugin-status.disabled {
  background: oklch(var(--bc) / 0.1);
  color: oklch(var(--bc) / 0.6);
}

/* 表单样式增强 */
.form-container {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-medium));
  -webkit-backdrop-filter: blur(var(--blur-medium));
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-soft);
  padding: 2rem;
}

.form-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
  border: 1px solid var(--glass-border);
}

.form-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: oklch(var(--bc));
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid oklch(var(--p) / 0.2);
}

/* 响应式优化 */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .plugin-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-grid,
  .plugin-grid {
    grid-template-columns: 1fr;
  }
  
  .home-view .dashboard-card:hover,
  .instances-panel .instance-card:hover,
  .plugin-card:hover {
    transform: none;
  }
  
  .chat-bubble.user {
    margin-left: 1rem;
  }
  
  .chat-bubble.bot {
    margin-right: 1rem;
  }
}

/* 动画性能优化 */
@media (prefers-reduced-motion: reduce) {
  .dashboard-card,
  .instance-card,
  .plugin-card,
  .chat-bubble {
    transition: none;
    animation: none;
  }
  
  .dashboard-card:hover,
  .instance-card:hover,
  .plugin-card:hover {
    transform: none;
  }
}

/* 高对比度模式适配 */
@media (prefers-contrast: high) {
  .dashboard-card,
  .instance-card,
  .plugin-card,
  .form-container,
  .settings-section {
    border-width: 2px;
    border-style: solid;
  }
  
  .log-line.error,
  .log-line.warning,
  .log-line.info,
  .log-line.success {
    border-left: 4px solid currentColor;
  }
}
