/** * Apple Dark Theme - 专为苹果风格优化的黑白科技感主题 * * 设计理念： * - 高对比度黑白配色 * - 苹果极简主义美学 * - 强制覆盖系统主题 * - 符合WCAG AA级无障碍标准 * * 使用方式：给添加类 .ui-apple-dark */ .ui-apple-dark { /* ========== 强制覆盖所有可能的主题继承 ========== */ color-scheme: dark !important; forced-color-adjust: none !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; /* ========== 苹果风格颜色系统 ========== */ /* 主背景色 - 纯黑 */ --apple-bg-primary: #000000; /* 次级背景色 - 深灰层级 */ --apple-bg-secondary: #1a1a1a; --apple-bg-tertiary: #2c2c2c; --apple-bg-elevated: #1c1c1e; /* 主文字色 - 纯白 */ --apple-text-primary: #ffffff; /* 次级文字色 - 灰度层级 */ --apple-text-secondary: #e6e6e6; --apple-text-tertiary: #b8b8b8; --apple-text-quaternary: #8e8e93; /* 强调色 - 苹果系统蓝 */ --apple-accent-blue: #007AFF; --apple-accent-blue-hover: #0051D5; --apple-accent-blue-active: #004BB8; /* 功能色 */ --apple-success: #30D158; --apple-warning: #FF9F0A; --apple-danger: #FF453A; /* 分隔线 */ --apple-separator: #38383a; --apple-separator-strong: #48484a; /* 毛玻璃效果 */ --apple-glass-bg: rgba(28, 28, 30, 0.72); --apple-glass-border: rgba(255, 255, 255, 0.1); /* 阴影系统 */ --apple-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --apple-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6); --apple-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.7); /* 圆角 - 苹果标准 */ --apple-radius-sm: 6px; --apple-radius-md: 10px; --apple-radius-lg: 14px; --apple-radius-xl: 20px; /* 间距系统 */ --apple-space-xs: 4px; --apple-space-sm: 8px; --apple-space-md: 16px; --apple-space-lg: 24px; --apple-space-xl: 32px; /* 过渡效果 */ --apple-transition-fast: 150ms cubic-bezier(0.4, 0.0, 0.2, 1); --apple-transition-normal: 250ms cubic-bezier(0.4, 0.0, 0.2, 1); --apple-transition-slow: 350ms cubic-bezier(0.4, 0.0, 0.2, 1); /* ========== 基础样式 ========== */ background: var(--apple-bg-primary) !important; color: var(--apple-text-primary) !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; font-feature-settings: "kern" 1 !important; letter-spacing: -0.022em !important; } /* ========== 容器样式 ========== */ .ui-apple-dark .container { background: var(--apple-bg-secondary) !important; color: var(--apple-text-primary) !important; border-radius: var(--apple-radius-lg) !important; box-shadow: var(--apple-shadow-lg) !important; border: 1px solid var(--apple-separator) !important; } /* ========== 标题系统 ========== */ .ui-apple-dark h1, .ui-apple-dark h2, .ui-apple-dark h3, .ui-apple-dark h4, .ui-apple-dark h5, .ui-apple-dark h6 { color: var(--apple-text-primary) !important; font-weight: 600 !important; letter-spacing: -0.028em !important; } .ui-apple-dark h1 { font-size: 34px !important; line-height: 1.176 !important; } .ui-apple-dark h2 { font-size: 28px !important; line-height: 1.214 !important; } .ui-apple-dark h3 { font-size: 22px !important; line-height: 1.273 !important; } /* ========== 卡片与表面 ========== */ .ui-apple-dark .card, .ui-apple-dark .result-box, .ui-apple-dark .modal, .ui-apple-dark .fees-card, .ui-apple-dark .cost-card, .ui-apple-dark .scenario-a-card, .ui-apple-dark .scenario-b-card, .ui-apple-dark .common-params, .ui-apple-dark .sku-row, .ui-apple-dark .analysis-summary, .ui-apple-dark .analysis-item { background: var(--apple-bg-elevated) !important; color: var(--apple-text-primary) !important; border: 1px solid var(--apple-separator) !important; border-radius: var(--apple-radius-md) !important; box-shadow: var(--apple-shadow-sm) !important; } /* 毛玻璃效果卡片 */ .ui-apple-dark .card.glass, .ui-apple-dark .modal.glass { background: var(--apple-glass-bg) !important; border: 1px solid var(--apple-glass-border) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; backdrop-filter: blur(20px) saturate(180%) !important; } /* ========== 按钮系统 - 增强视觉效果 ========== */ /* 主按钮 - 苹果蓝 - 醒目设计 */ .ui-apple-dark .btn-primary, .ui-apple-dark .btn-calculate, .ui-apple-dark .btn-add, .ui-apple-dark button[type="submit"] { background: linear-gradient(180deg, #0A84FF 0%, #007AFF 100%) !important; color: var(--apple-text-primary) !important; border: 2px solid rgba(10, 132, 255, 0.5) !important; border-radius: var(--apple-radius-md) !important; font-weight: 700 !important; padding: 14px 28px !important; font-size: 18px !important; line-height: 1.235 !important; letter-spacing: -0.018em !important; cursor: pointer !important; transition: all var(--apple-transition-normal) !important; box-shadow: 0 4px 16px rgba(0, 122, 255, 0.45), 0 0 0 0 rgba(0, 122, 255, 0.3) !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; position: relative !important; overflow: hidden !important; } /* 按钮光泽效果 */ .ui-apple-dark .btn-primary::before, .ui-apple-dark .btn-calculate::before, .ui-apple-dark .btn-add::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%) !important; transition: left 0.5s ease !important; } .ui-apple-dark .btn-primary:hover::before, .ui-apple-dark .btn-calculate:hover::before, .ui-apple-dark .btn-add:hover::before { left: 100% !important; } .ui-apple-dark .btn-primary:hover, .ui-apple-dark .btn-calculate:hover, .ui-apple-dark .btn-add:hover { background: linear-gradient(180deg, #1E90FF 0%, #0A84FF 100%) !important; transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 8px 24px rgba(0, 122, 255, 0.5), 0 0 0 4px rgba(0, 122, 255, 0.15) !important; border-color: rgba(30, 144, 255, 0.8) !important; } .ui-apple-dark .btn-primary:active, .ui-apple-dark .btn-calculate:active, .ui-apple-dark .btn-add:active { background: linear-gradient(180deg, #007AFF 0%, #0051D5 100%) !important; transform: translateY(0) scale(0.98) !important; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4), 0 0 0 2px rgba(0, 122, 255, 0.2) !important; } /* 次级按钮 - 深灰背景 - 增强对比 */ .ui-apple-dark .btn-secondary, .ui-apple-dark .button, .ui-apple-dark button:not([class]) { background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2c 100%) !important; color: var(--apple-text-primary) !important; border: 2px solid var(--apple-separator-strong) !important; border-radius: var(--apple-radius-md) !important; font-weight: 600 !important; padding: 14px 28px !important; font-size: 18px !important; line-height: 1.235 !important; letter-spacing: -0.018em !important; cursor: pointer !important; transition: all var(--apple-transition-normal) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 255, 255, 0.1) !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; position: relative !important; } .ui-apple-dark .btn-secondary:hover, .ui-apple-dark .button:hover { background: linear-gradient(180deg, #48484a 0%, #3a3a3c 100%) !important; border-color: #606062 !important; transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.08) !important; } .ui-apple-dark .btn-secondary:active, .ui-apple-dark .button:active { background: linear-gradient(180deg, #2c2c2c 0%, #1a1a1a 100%) !important; transform: translateY(0) scale(0.98) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important; } /* 危险按钮 - 红色 - 醒目警告 */ .ui-apple-dark .btn-danger, .ui-apple-dark .btn-reset, .ui-apple-dark .remove-sku { background: linear-gradient(180deg, #FF6B5F 0%, #FF453A 100%) !important; color: var(--apple-text-primary) !important; border: 2px solid rgba(255, 69, 58, 0.6) !important; border-radius: var(--apple-radius-md) !important; font-weight: 700 !important; padding: 14px 28px !important; font-size: 18px !important; cursor: pointer !important; transition: all var(--apple-transition-normal) !important; box-shadow: 0 4px 16px rgba(255, 69, 58, 0.45), 0 0 0 0 rgba(255, 69, 58, 0.3) !important; position: relative !important; } .ui-apple-dark .btn-danger:hover, .ui-apple-dark .btn-reset:hover, .ui-apple-dark .remove-sku:hover { background: linear-gradient(180deg, #FF8A7F 0%, #FF6B5F 100%) !important; transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 8px 24px rgba(255, 69, 58, 0.5), 0 0 0 4px rgba(255, 69, 58, 0.15) !important; border-color: rgba(255, 138, 127, 0.8) !important; } .ui-apple-dark .btn-danger:active, .ui-apple-dark .btn-reset:active, .ui-apple-dark .remove-sku:active { background: linear-gradient(180deg, #FF453A 0%, #D93A31 100%) !important; transform: translateY(0) scale(0.98) !important; box-shadow: 0 2px 8px rgba(255, 69, 58, 0.4) !important; } /* 导出按钮 - 成功绿 - 醒目提示 */ .ui-apple-dark .btn-export { background: linear-gradient(180deg, #40D968 0%, #30D158 100%) !important; color: var(--apple-bg-primary) !important; border: 2px solid rgba(48, 209, 88, 0.6) !important; border-radius: var(--apple-radius-md) !important; font-weight: 700 !important; padding: 14px 28px !important; font-size: 18px !important; transition: all var(--apple-transition-normal) !important; box-shadow: 0 4px 16px rgba(48, 209, 88, 0.4), 0 0 0 0 rgba(48, 209, 88, 0.2) !important; } .ui-apple-dark .btn-export:hover { background: linear-gradient(180deg, #52E47A 0%, #40D968 100%) !important; transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 8px 24px rgba(48, 209, 88, 0.5), 0 0 0 4px rgba(48, 209, 88, 0.15) !important; border-color: rgba(82, 228, 122, 0.8) !important; } .ui-apple-dark .btn-export:active { background: linear-gradient(180deg, #30D158 0%, #28B149 100%) !important; transform: translateY(0) scale(0.98) !important; } /* 禁用状态 - 清晰视觉反馈 */ .ui-apple-dark button:disabled, .ui-apple-dark .btn:disabled { background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%) !important; color: var(--apple-text-quaternary) !important; border-color: #282828 !important; opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; filter: grayscale(1) !important; } /* 焦点状态 - 增强可访问性 */ .ui-apple-dark button:focus-visible, .ui-apple-dark .btn:focus-visible { outline: none !important; box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.5) !important; z-index: 10 !important; } /* ========== 输入框系统 - 增强视觉反馈 ========== */ .ui-apple-dark input, .ui-apple-dark select, .ui-apple-dark textarea { background: linear-gradient(180deg, #2c2c2c 0%, #252525 100%) !important; color: var(--apple-text-primary) !important; border: 2px solid var(--apple-separator) !important; border-radius: var(--apple-radius-sm) !important; padding: 12px 14px !important; font-size: 17px !important; line-height: 1.235 !important; transition: all var(--apple-transition-normal) !important; -webkit-appearance: none !important; appearance: none !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important; } .ui-apple-dark input::placeholder, .ui-apple-dark textarea::placeholder { color: var(--apple-text-quaternary) !important; font-weight: 400 !important; } .ui-apple-dark input:hover, .ui-apple-dark select:hover, .ui-apple-dark textarea:hover { border-color: var(--apple-separator-strong) !important; background: linear-gradient(180deg, #343434 0%, #2c2c2c 100%) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(255, 255, 255, 0.05) !important; } .ui-apple-dark input:focus, .ui-apple-dark select:focus, .ui-apple-dark textarea:focus { outline: none !important; border-color: var(--apple-accent-blue) !important; background: linear-gradient(180deg, #2c2c2c 0%, #1f1f1f 100%) !important; box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.2) !important; transform: scale(1.01) !important; } /* 数字输入框箭头样式 */ .ui-apple-dark input[type="number"]::-webkit-inner-spin-button, .ui-apple-dark input[type="number"]::-webkit-outer-spin-button { opacity: 1 !important; height: auto !important; } /* ========== 表格样式 ========== */ .ui-apple-dark .result-table, .ui-apple-dark .suggest-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; } .ui-apple-dark .result-table th, .ui-apple-dark .suggest-table th { background: var(--apple-bg-elevated) !important; color: var(--apple-text-secondary) !important; font-weight: 600 !important; font-size: 15px !important; text-align: left !important; padding: 12px 16px !important; border-bottom: 1px solid var(--apple-separator) !important; letter-spacing: -0.022em !important; } .ui-apple-dark .result-table td, .ui-apple-dark .suggest-table td { background: var(--apple-bg-secondary) !important; color: var(--apple-text-primary) !important; padding: 12px 16px !important; border-bottom: 1px solid var(--apple-separator) !important; font-size: 17px !important; } /* 表格行悬停效果 */ .ui-apple-dark .result-table tbody tr:hover, .ui-apple-dark .suggest-table tbody tr:hover { background: var(--apple-bg-tertiary) !important; } /* 强调单元格 */ .ui-apple-dark .suggest-table td.price-cell, .ui-apple-dark .suggest-table td.profit-cell { background: var(--apple-accent-blue) !important; color: var(--apple-text-primary) !important; font-weight: 600 !important; border-radius: var(--apple-radius-sm) !important; } /* 盈利状态行 */ .ui-apple-dark .result-table tr.high-profit td { background: rgba(48, 209, 88, 0.15) !important; border-left: 3px solid var(--apple-success) !important; } .ui-apple-dark .result-table tr.medium-profit td { background: rgba(48, 209, 88, 0.1) !important; border-left: 3px solid var(--apple-success) !important; } .ui-apple-dark .result-table tr.profit td { background: rgba(48, 209, 88, 0.05) !important; border-left: 3px solid var(--apple-success) !important; } .ui-apple-dark .result-table tr.loss td { background: rgba(255, 69, 58, 0.15) !important; border-left: 3px solid var(--apple-danger) !important; } /* ========== 标签与徽章 ========== */ .ui-apple-dark label { color: var(--apple-text-secondary) !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: -0.022em !important; } /* ========== 分隔线 ========== */ .ui-apple-dark hr { border: none !important; height: 1px !important; background: var(--apple-separator) !important; margin: var(--apple-space-lg) 0 !important; } /* ========== 导航栏 - 增强视觉效果 ========== */ .ui-apple-dark .nav-bar { background: var(--apple-bg-elevated) !important; border: 2px solid var(--apple-separator) !important; border-radius: var(--apple-radius-md) !important; padding: var(--apple-space-md) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } .ui-apple-dark .nav-bar .button { font-size: 16px !important; font-weight: 600 !important; padding: 10px 20px !important; border-radius: var(--apple-radius-sm) !important; transition: all var(--apple-transition-normal) !important; } .ui-apple-dark .nav-bar .button:hover { transform: translateY(-1px) scale(1.03) !important; } /* ========== 分析摘要 ========== */ .ui-apple-dark .analysis-summary { background: var(--apple-bg-elevated) !important; padding: var(--apple-space-lg) !important; } .ui-apple-dark .analysis-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: var(--apple-space-md) !important; } .ui-apple-dark .analysis-item { display: flex !important; flex-direction: column !important; gap: var(--apple-space-xs) !important; } .ui-apple-dark .analysis-item .label { color: var(--apple-text-secondary) !important; font-size: 15px !important; font-weight: 500 !important; } .ui-apple-dark .analysis-item .value { color: var(--apple-text-primary) !important; font-size: 22px !important; font-weight: 600 !important; letter-spacing: -0.022em !important; } /* ========== 错误消息 ========== */ .ui-apple-dark .error-message { background: rgba(255, 69, 58, 0.1) !important; border-left: 3px solid var(--apple-danger) !important; color: var(--apple-text-primary) !important; padding: var(--apple-space-md) !important; border-radius: var(--apple-radius-sm) !important; } .ui-apple-dark .error-message strong { color: var(--apple-danger) !important; } /* 成功消息 */ .ui-apple-dark .success-message { background: rgba(48, 209, 88, 0.1) !important; border-left: 3px solid var(--apple-success) !important; color: var(--apple-text-primary) !important; padding: var(--apple-space-md) !important; border-radius: var(--apple-radius-sm) !important; } /* ========== 工具提示 ========== */ .ui-apple-dark .tooltip .tooltip-text, .ui-apple-dark .ui-tooltip { background: var(--apple-bg-elevated) !important; color: var(--apple-text-primary) !important; border: 1px solid var(--apple-separator) !important; border-radius: var(--apple-radius-sm) !important; box-shadow: var(--apple-shadow-md) !important; font-size: 13px !important; padding: 8px 12px !important; } /* ========== 加载状态 ========== */ .ui-apple-dark .loading { color: var(--apple-text-secondary) !important; } /* ========== 可访问性增强 ========== */ /* 移除动画偏好 */ @media (prefers-reduced-motion: reduce) { .ui-apple-dark * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* 高对比度模式 */ @media (prefers-contrast: high) { .ui-apple-dark { --apple-separator: #606060 !important; --apple-separator-strong: #808080 !important; } .ui-apple-dark input:focus, .ui-apple-dark select:focus, .ui-apple-dark textarea:focus { border-width: 2px !important; } } /* ========== 响应式优化 ========== */ @media (max-width: 768px) { .ui-apple-dark h1 { font-size: 28px !important; } .ui-apple-dark h2 { font-size: 22px !important; } .ui-apple-dark h3 { font-size: 20px !important; } .ui-apple-dark .btn-primary, .ui-apple-dark .btn-secondary, .ui-apple-dark .button { font-size: 15px !important; padding: 10px 20px !important; } .ui-apple-dark .analysis-grid { grid-template-columns: 1fr !important; } } /* ========== 打印样式 ========== */ @media print { .ui-apple-dark { background: white !important; color: black !important; } .ui-apple-dark .container { background: white !important; box-shadow: none !important; border: 1px solid #ddd !important; } } /* ========== 小鱼容器适配 ========== */ .ui-apple-dark #jsi-flying-fish-container { background: transparent !important; border: none !important; } /* ========== 滚动条样式 ========== */ .ui-apple-dark ::-webkit-scrollbar { width: 12px !important; height: 12px !important; } .ui-apple-dark ::-webkit-scrollbar-track { background: var(--apple-bg-secondary) !important; border-radius: var(--apple-radius-sm) !important; } .ui-apple-dark ::-webkit-scrollbar-thumb { background: var(--apple-bg-tertiary) !important; border-radius: var(--apple-radius-sm) !important; border: 2px solid var(--apple-bg-secondary) !important; } .ui-apple-dark ::-webkit-scrollbar-thumb:hover { background: #3a3a3c !important; } /* ========== 选择文本样式 ========== */ .ui-apple-dark ::selection { background: var(--apple-accent-blue) !important; color: var(--apple-text-primary) !important; } .ui-apple-dark ::-moz-selection { background: var(--apple-accent-blue) !important; color: var(--apple-text-primary) !important; } /* ========== 链接样式 ========== */ .ui-apple-dark a { color: var(--apple-accent-blue) !important; text-decoration: none !important; transition: opacity var(--apple-transition-fast) !important; } .ui-apple-dark a:hover { opacity: 0.8 !important; } .ui-apple-dark a:active { opacity: 0.6 !important; } /* ========== 大按钮样式 ========== */ .ui-apple-dark .large-button { background: var(--apple-bg-elevated) !important; color: var(--apple-text-primary) !important; border: 1px solid var(--apple-separator) !important; padding: 16px 32px !important; font-size: 17px !important; font-weight: 600 !important; } .ui-apple-dark .large-button:hover { background: var(--apple-bg-tertiary) !important; border-color: var(--apple-separator-strong) !important; } /* ========== 复选框样式 - 醒目设计 ========== */ .ui-apple-dark .big-checkbox { appearance: none !important; -webkit-appearance: none !important; width: 28px !important; height: 28px !important; background: linear-gradient(180deg, #2c2c2c 0%, #252525 100%) !important; border: 3px solid var(--apple-separator-strong) !important; border-radius: var(--apple-radius-sm) !important; cursor: pointer !important; transition: all var(--apple-transition-normal) !important; position: relative !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(0, 122, 255, 0) !important; } .ui-apple-dark .big-checkbox:hover { border-color: #606062 !important; background: linear-gradient(180deg, #343434 0%, #2c2c2c 100%) !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.05) !important; transform: scale(1.05) !important; } .ui-apple-dark .big-checkbox:checked { background: linear-gradient(180deg, #0A84FF 0%, #007AFF 100%) !important; border-color: var(--apple-accent-blue) !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(0, 122, 255, 0.25), 0 4px 12px rgba(0, 122, 255, 0.4) !important; } .ui-apple-dark .big-checkbox:checked::after { content: '✓' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -52%) !important; color: #ffffff !important; font-size: 18px !important; font-weight: 900 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; } .ui-apple-dark .big-checkbox:checked:hover { background: linear-gradient(180deg, #1E90FF 0%, #0A84FF 100%) !important; transform: scale(1.08) !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 122, 255, 0.3), 0 6px 16px rgba(0, 122, 255, 0.5) !important; } .ui-apple-dark .big-checkbox:active { transform: scale(0.95) !important; } /* ========== 特殊状态指示 ========== */ .ui-apple-dark .warn-low, .ui-apple-dark .warn-loss { color: var(--apple-danger) !important; } .ui-apple-dark .rate-low { border-left: 4px solid var(--apple-danger) !important; } .ui-apple-dark .rate-mid { border-left: 4px solid var(--apple-warning) !important; } .ui-apple-dark .rate-high { border-left: 4px solid var(--apple-success) !important; } /* ========== 主题切换选择器 - 醒目设计 ========== */ .ui-apple-dark #theme-select { background: linear-gradient(180deg, #2c2c2c 0%, #252525 100%) !important; color: var(--apple-text-primary) !important; border: 2px solid var(--apple-separator-strong) !important; border-radius: var(--apple-radius-sm) !important; padding: 8px 14px !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; transition: all var(--apple-transition-normal) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important; } .ui-apple-dark #theme-select:hover { border-color: #606062 !important; background: linear-gradient(180deg, #343434 0%, #2c2c2c 100%) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.05) !important; } .ui-apple-dark #theme-select:focus { outline: none !important; border-color: var(--apple-accent-blue) !important; box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.25) !important; } /* ========== 底部页脚 ========== */ .ui-apple-dark footer { color: var(--apple-text-tertiary) !important; border-top: 1px solid var(--apple-separator) !important; } /* ========== 按钮行样式 - 增强间距 ========== */ .ui-apple-dark .button-row { display: flex !important; justify-content: space-between !important; margin-top: var(--apple-space-xl) !important; gap: var(--apple-space-lg) !important; } .ui-apple-dark .button-row button { flex: 1 !important; cursor: pointer !important; transition: all var(--apple-transition-medium) !important; min-height: 52px !important; } /* ========== 大按钮样式 - 醒目设计 ========== */ .ui-apple-dark .large-button { background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2c 100%) !important; color: var(--apple-text-primary) !important; border: 2px solid var(--apple-separator-strong) !important; padding: 18px 36px !important; font-size: 19px !important; font-weight: 700 !important; border-radius: var(--apple-radius-md) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } .ui-apple-dark .large-button:hover { background: linear-gradient(180deg, #48484a 0%, #3a3a3c 100%) !important; border-color: #606062 !important; transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; } .ui-apple-dark .large-button:active { transform: translateY(0) scale(0.98) !important; }