* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #app { width: 100%; min-height: 100vh; position: relative; } /* 自定义滚动条 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; transition: background 0.3s ease; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } /* 链接样式 */ a { color: inherit; text-decoration: none; } /* 按钮基础样式重置 */ button { font-family: inherit; border: none; outline: none; cursor: pointer; } /* 输入框基础样式 */ input { font-family: inherit; } /* 通用动画类 */ .fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } .slide-up-enter-active, .slide-up-leave-active { transition: transform 0.3s ease, opacity 0.3s ease; } .slide-up-enter-from, .slide-up-leave-to { transform: translateY(20px); opacity: 0; } /* 工具类 */ .text-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .backdrop-glass { backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.1); } /* 响应式栅格 */ .grid-responsive { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } /* 移动端优化 */ @media (max-width: 768px) { body { -webkit-text-size-adjust: 100%; } /* 防止 iOS 缩放 */ input, textarea, select { font-size: 16px !important; } } /* 高对比度模式支持 */ @media (prefers-contrast: high) { .smart-card, .search-box, .tag-item { border-width: 2px; } } /* 减少动画模式 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* 打印样式优化 */ @media print { body { background: white; } .glass-bg, .app-footer, .controls-section, .hero-header { display: none; } .cards-grid { grid-template-columns: repeat(2, 1fr); } .smart-card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; } } /* 选中文本样式 */ ::selection { background: rgba(102, 126, 234, 0.3); color: white; } /* 焦点可见性 */ :focus-visible { outline: 2px solid #667eea; outline-offset: 2px; } /* 隐藏类 */ .hidden { display: none !important; } /* 文本截断 */ .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 多行文本截断 */ .text-ellipsis-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .text-ellipsis-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }