/* ============================================================= AI 一体站 - 全局样式 丛雨现代化 · 深翠绿 + 精致玻璃 · Bento Grid 字体通过 index.html 的 加载（非 @import） ============================================================= */ /* ---------- CSS 变量：亮色（默认） ---------- */ :root { /* 丛雨现代化配色 */ --color-primary: #2E7D5B; --color-primary-deep: #1B5E45; --color-primary-glow: #5BB88A; --color-primary-soft: #EAF6EF; --color-accent: #E89A4F; --color-accent-deep: #C7743A; --color-accent-soft: #FBE8D0; /* 文字 */ --color-text: #1A2B22; --color-text-muted: #5C7268; --color-text-invert: #FFFFFF; /* 玻璃面板 */ --color-surface: rgba(255, 255, 255, 0.62); --color-surface-strong: rgba(255, 255, 255, 0.78); --border-subtle: rgba(46, 125, 91, 0.12); --border-hover: rgba(46, 125, 91, 0.35); --board-blur: 16px; --board-saturate: 160%; /* 三层阴影系统 */ --shadow-ambient: 0 1px 2px rgba(16, 40, 30, 0.04), 0 8px 24px rgba(16, 40, 30, 0.06); --shadow-elevated: 0 2px 4px rgba(16, 40, 30, 0.05), 0 16px 40px rgba(16, 40, 30, 0.10), 0 0 0 1px rgba(46, 125, 91, 0.08); --shadow-glow: 0 8px 32px rgba(46, 125, 91, 0.18); /* 背景遮罩 */ --overlay-opacity: 0.5; --overlay-gradient: linear-gradient(180deg, rgba(234, 246, 239, 0.6) 0%, rgba(168, 230, 207, 0.3) 100%); /* 圆角 */ --radius-card: 20px; --radius-btn: 12px; --radius-pill: 999px; /* 字体栈 */ --font-display: 'Noto Serif SC', 'Songti SC', 'STSong', serif; --font-body: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-numeric: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace; /* 缓动曲线 */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* 布局 */ --max-width: 1280px; --header-h: 64px; /* 过渡（兼容旧引用） */ --t-fast: 180ms var(--ease-out); --t-base: 280ms var(--ease-out); --t-slow: 500ms var(--ease-out); } /* ---------- CSS 变量：暗色 ---------- */ [data-theme="dark"] { --color-primary: #4ECCA3; --color-primary-deep: #2E7D5B; --color-primary-glow: #6FE0BC; --color-primary-soft: #0F1F18; --color-accent: #FFB86B; --color-accent-deep: #E89A4F; --color-accent-soft: #3A2A14; --color-text: #E8F0EC; --color-text-muted: #9AB0A6; --color-text-invert: #1A2B22; --color-surface: rgba(20, 32, 26, 0.62); --color-surface-strong: rgba(20, 32, 26, 0.82); --border-subtle: rgba(78, 204, 163, 0.14); --border-hover: rgba(78, 204, 163, 0.40); --shadow-ambient: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25); --shadow-elevated: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(78, 204, 163, 0.10); --shadow-glow: 0 8px 32px rgba(78, 204, 163, 0.20); --overlay-gradient: linear-gradient(180deg, rgba(15, 31, 24, 0.7) 0%, rgba(10, 25, 18, 0.6) 100%); } /* ---------- 基础重置 ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); color: var(--color-text); background: var(--color-primary-soft); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: color var(--t-base), background var(--t-slow); } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select { font-family: inherit; } img { max-width: 100%; display: block; } /* ---------- 背景图层叠 ---------- */ .bg-layer { position: fixed; inset: 0; z-index: -3; background-image: url('assets/bg/bg-light.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity var(--t-slow), background-image var(--t-slow); } [data-theme="dark"] .bg-layer { background-image: url('assets/bg/bg-dark.jpg'); } .bg-overlay { position: fixed; inset: 0; z-index: -2; background: var(--overlay-gradient); opacity: var(--overlay-opacity); pointer-events: none; transition: opacity var(--t-base), background var(--t-base); } /* ---------- CSS 流动光斑（纯色背景也能看到层次） ---------- */ .bg-blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; animation: blob-drift 22s var(--ease-smooth) infinite; will-change: transform; } .blob-1 { width: 520px; height: 520px; background: var(--color-primary-glow); top: -12%; left: -8%; } .blob-2 { width: 420px; height: 420px; background: var(--color-primary); bottom: -10%; right: -6%; animation-delay: -7s; opacity: 0.25; } .blob-3 { width: 320px; height: 320px; background: var(--color-accent); top: 38%; left: 48%; opacity: 0.12; animation-delay: -14s; } [data-theme="dark"] .blob { opacity: 0.18; } [data-theme="dark"] .blob-3 { opacity: 0.08; } @keyframes blob-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, -40px) scale(1.1); } 66% { transform: translate(-40px, 50px) scale(0.95); } } /* ---------- Canvas 粒子 ---------- */ .particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .particle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* ---------- 容器 ---------- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ---------- 顶栏 ---------- */ .header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: var(--color-surface-strong); backdrop-filter: blur(20px) saturate(var(--board-saturate)); -webkit-backdrop-filter: blur(20px) saturate(var(--board-saturate)); border-bottom: 1px solid var(--border-subtle); transition: background var(--t-base), border-color var(--t-base); } .header .container { display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: 0.5px; } .logo-mark { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary-glow), var(--color-primary-deep)); display: grid; place-items: center; color: #fff; box-shadow: 0 2px 10px rgba(46, 125, 91, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .logo-text { background: linear-gradient(120deg, var(--color-primary-deep), var(--color-primary) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="dark"] .logo-text { background: linear-gradient(120deg, var(--color-primary-glow), var(--color-text) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; } .header-actions { display: flex; align-items: center; gap: 8px; } .icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--border-subtle); transition: all var(--t-fast); } .icon-btn:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(46, 125, 91, 0.35); } /* ---------- Hero ---------- */ .hero { padding: 56px 0 32px; text-align: center; position: relative; } .hero::before { content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(ellipse at center, rgba(91, 184, 138, 0.15), transparent 70%); pointer-events: none; z-index: -1; } .hero-title { font-family: var(--font-display); font-size: clamp(34px, 5vw, 52px); font-weight: 700; margin: 0 0 12px; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-text); } .hero-title .title-accent { background: linear-gradient(120deg, var(--color-primary), var(--color-primary-glow)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { font-size: 15px; color: var(--color-text-muted); margin: 0 0 28px; } /* Hero 内嵌搜索 */ .hero-search { position: relative; max-width: 560px; margin: 0 auto 28px; } .hero-search .search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; color: var(--color-text-muted); pointer-events: none; } .hero-search .search-input { width: 100%; height: 52px; padding: 0 60px 0 50px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: var(--color-surface-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--color-text); font-size: 15px; outline: none; box-shadow: var(--shadow-ambient); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .hero-search .search-input::placeholder { color: var(--color-text-muted); } .hero-search .search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(46, 125, 91, 0.12), var(--shadow-elevated); } .search-kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 3px 8px; border-radius: 6px; font-family: var(--font-numeric); font-size: 11px; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--border-subtle); pointer-events: none; } .hero-stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; } .stat { text-align: center; } .stat-num { font-family: var(--font-numeric); font-size: 30px; font-weight: 600; color: var(--color-primary-deep); line-height: 1; } [data-theme="dark"] .stat-num { color: var(--color-primary-glow); } .stat-label { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; letter-spacing: 0.5px; } /* ---------- 搜索筛选条 ---------- */ .filters { margin: 8px 0 32px; padding: 20px 24px; background: var(--color-surface); backdrop-filter: blur(14px) saturate(var(--board-saturate)); -webkit-backdrop-filter: blur(14px) saturate(var(--board-saturate)); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-ambient); } .filter-section { margin-bottom: 14px; } .filter-section:last-child { margin-bottom: 0; } .filter-section-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .filter-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; } .filter-chips::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; padding: 7px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--border-subtle); transition: all 0.25s var(--ease-out); white-space: nowrap; } .chip:hover { color: var(--color-text); border-color: var(--border-hover); transform: translateY(-1px); } .chip.active { background: var(--color-primary); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(46, 125, 91, 0.3); } [data-theme="dark"] .chip.active { box-shadow: 0 4px 14px rgba(78, 204, 163, 0.3); } .category-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; } .category-tabs::-webkit-scrollbar { display: none; } .cat-tab { flex-shrink: 0; padding: 8px 18px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--border-subtle); transition: all 0.25s var(--ease-out); white-space: nowrap; } .cat-tab:hover { color: var(--color-text); border-color: var(--border-hover); } .cat-tab.active { background: var(--color-primary); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(46, 125, 91, 0.3); } [data-theme="dark"] .cat-tab.active { box-shadow: 0 4px 14px rgba(78, 204, 163, 0.3); } /* ---------- 收藏分区 ---------- */ .section-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 36px 0 18px; color: var(--color-text); } .section-title .dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary-glow), var(--color-primary-deep)); } .section-title .count { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--color-text-muted); } .favorites-section[hidden] { display: none; } /* ---------- 工具卡片网格（Bento Grid） ---------- */ .tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, auto); gap: 20px; margin-bottom: 44px; } .tools-grid.simple { grid-auto-rows: auto; } .tools-grid.filtering .tool-card { opacity: 0; transform: scale(0.96) translateY(8px); transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out); } .tool-card { position: relative; padding: 24px; background: var(--color-surface); backdrop-filter: blur(var(--board-blur)) saturate(var(--board-saturate)); -webkit-backdrop-filter: blur(var(--board-blur)) saturate(var(--board-saturate)); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-ambient); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s var(--ease-out); opacity: 0; transform: translateY(20px); overflow: hidden; } .tool-card.in-view { opacity: 1; transform: translateY(0); transition: opacity 0.5s var(--ease-out-expo) calc(var(--i, 0) * 40ms), transform 0.5s var(--ease-out-expo), box-shadow 0.4s var(--ease-out), border-color 0.3s var(--ease-out); } /* 顶部高光线（替代旧左侧装饰条） */ .tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(91, 184, 138, 0.5), transparent); opacity: 0; transition: opacity 0.3s var(--ease-out); } .tool-card.in-view:hover { transform: translateY(-6px); box-shadow: var(--shadow-elevated), var(--shadow-glow); border-color: var(--border-hover); transition: transform 0.2s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out); transition-delay: 0s; } .tool-card:hover::before { opacity: 1; } /* 鼠标跟随光晕 */ .card-glow { position: absolute; inset: 0; background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 184, 138, 0.12), transparent 60%); opacity: 0; transition: opacity 0.3s var(--ease-out); pointer-events: none; z-index: 0; } .tool-card:hover .card-glow { opacity: 1; } /* 特色卡 / 宽卡 */ .tool-card.featured { grid-column: span 2; grid-row: span 2; } .tool-card.wide { grid-column: span 2; } .tool-card.featured .tool-logo { width: 64px; height: 64px; border-radius: 18px; } .tool-card.featured .tool-name { font-size: 18px; } .tool-card.featured .tool-desc { -webkit-line-clamp: 3; } .card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; position: relative; z-index: 1; } .tool-logo { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3); overflow: hidden; transition: transform 0.3s var(--ease-spring); } .tool-logo.has-icon { background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6); } [data-theme="dark"] .tool-logo.has-icon { background: rgba(245, 245, 245, 0.94); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .tool-logo-img { width: 68%; height: 68%; object-fit: contain; display: block; } .tool-info { flex: 1; min-width: 0; } .tool-name { font-size: 16px; font-weight: 700; margin: 0 0 2px; color: var(--color-text); } .tool-name mark { background: rgba(91, 184, 138, 0.25); color: var(--color-primary-deep); border-radius: 3px; padding: 0 2px; } [data-theme="dark"] .tool-name mark { color: var(--color-primary-glow); background: rgba(78, 204, 163, 0.2); } .tool-desc { font-size: 12.5px; color: var(--color-text-muted); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tool-desc mark { background: rgba(91, 184, 138, 0.2); color: var(--color-primary-deep); border-radius: 3px; padding: 0 2px; } [data-theme="dark"] .tool-desc mark { color: var(--color-primary-glow); background: rgba(78, 204, 163, 0.15); } .favorite-btn { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--border-subtle); transition: all var(--t-fast); z-index: 2; } .favorite-btn:hover { transform: scale(1.1); color: var(--color-accent); border-color: var(--color-accent); } .favorite-btn.active { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent); animation: fav-burst 0.5s var(--ease-spring); } @keyframes fav-burst { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } .fav-particle { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); pointer-events: none; animation: fav-fly 0.6s var(--ease-out) forwards; } @keyframes fav-fly { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } } .tool-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; position: relative; z-index: 1; } .tag { font-size: 11px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--border-subtle); white-space: nowrap; } .tag.tag-freemium { color: var(--color-primary-deep); background: rgba(91, 184, 138, 0.15); border-color: transparent; } .tag.tag-free { color: var(--color-primary-deep); background: rgba(91, 184, 138, 0.2); border-color: transparent; } .tag.tag-paid { color: var(--color-accent-deep); background: rgba(232, 154, 79, 0.15); border-color: transparent; } .tag.tag-opensource { color: #1565C0; background: rgba(144, 202, 249, 0.18); border-color: transparent; } .tag.tag-china.tag-ok { color: var(--color-primary-deep); background: rgba(91, 184, 138, 0.18); border-color: transparent; } .tag.tag-china.tag-no { color: var(--color-accent-deep); background: rgba(232, 154, 79, 0.18); border-color: transparent; } [data-theme="dark"] .tag.tag-freemium, [data-theme="dark"] .tag.tag-free, [data-theme="dark"] .tag.tag-china.tag-ok { color: var(--color-primary-glow); background: rgba(78, 204, 163, 0.15); } [data-theme="dark"] .tag.tag-paid, [data-theme="dark"] .tag.tag-china.tag-no { color: var(--color-accent); background: rgba(255, 184, 107, 0.15); } [data-theme="dark"] .tag.tag-opensource { color: #90CAF9; background: rgba(144, 202, 249, 0.15); } .tool-actions { display: flex; gap: 8px; position: relative; z-index: 1; } .btn { flex: 1; height: 38px; display: grid; place-items: center; border-radius: var(--radius-btn); font-size: 13px; font-weight: 500; transition: all var(--t-fast); text-align: center; } .btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 3px 10px rgba(46, 125, 91, 0.25); } .btn-primary:hover { transform: translateY(-1px); background: var(--color-primary-deep); box-shadow: 0 6px 18px rgba(46, 125, 91, 0.35); } [data-theme="dark"] .btn-primary { box-shadow: 0 3px 10px rgba(78, 204, 163, 0.25); } .btn-secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--border-subtle); } .btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-1px); } /* ---------- 空状态 ---------- */ .empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--color-text-muted); } .empty .kaomoji { font-size: 40px; display: block; margin-bottom: 12px; opacity: 0.7; } /* ---------- 页脚 ---------- */ .footer { margin-top: 60px; padding: 32px 0; background: var(--color-surface-strong); backdrop-filter: blur(18px) saturate(var(--board-saturate)); -webkit-backdrop-filter: blur(18px) saturate(var(--board-saturate)); border-top: 1px solid var(--border-subtle); transition: background var(--t-base), border-color var(--t-base); } .footer .container { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; } .footer-credits { font-size: 14px; color: var(--color-text); line-height: 1.8; } .footer-credits strong { font-family: var(--font-display); color: var(--color-primary-deep); } [data-theme="dark"] .footer-credits strong { color: var(--color-primary-glow); } .footer-copy { font-size: 12px; color: var(--color-text-muted); line-height: 1.7; max-width: 640px; } .footer-contact a { color: var(--color-primary-deep); } [data-theme="dark"] .footer-contact a { color: var(--color-primary-glow); } .footer-contact a:hover { text-decoration: underline; } /* ---------- 设置面板 ---------- */ .settings-panel { position: fixed; top: 0; right: 0; width: 360px; max-width: 90vw; height: 100vh; z-index: 100; background: var(--color-surface-strong); backdrop-filter: blur(24px) saturate(var(--board-saturate)); -webkit-backdrop-filter: blur(24px) saturate(var(--board-saturate)); border-left: 1px solid var(--border-subtle); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12); transform: translateX(100%); transition: transform 0.4s var(--ease-out-expo); overflow-y: auto; padding: 24px; } .settings-panel.open { transform: translateX(0); } .settings-overlay { position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity var(--t-base); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .settings-overlay.open { opacity: 1; pointer-events: auto; } .settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .settings-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0; color: var(--color-text); } .settings-close { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface); border: 1px solid var(--border-subtle); transition: all var(--t-fast); } .settings-close:hover { background: var(--color-accent); color: #fff; transform: rotate(90deg); } .setting-group { margin-bottom: 22px; } .setting-label { display: block; font-size: 13px; font-weight: 500; color: var(--color-text); margin-bottom: 8px; } .setting-hint { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; } .upload-btn { display: block; width: 100%; height: 42px; border-radius: var(--radius-btn); border: 1px dashed var(--color-primary); background: rgba(46, 125, 91, 0.06); color: var(--color-primary-deep); font-size: 13px; font-weight: 500; transition: all var(--t-fast); } .upload-btn:hover { background: rgba(46, 125, 91, 0.12); } [data-theme="dark"] .upload-btn { background: rgba(78, 204, 163, 0.08); color: var(--color-primary-glow); } .url-row { display: flex; gap: 8px; } .url-input { flex: 1; height: 38px; padding: 0 12px; border-radius: var(--radius-btn); border: 1px solid var(--border-subtle); background: var(--color-surface); color: var(--color-text); font-size: 13px; outline: none; } .url-input:focus { border-color: var(--color-primary); } .url-apply { padding: 0 16px; height: 38px; border-radius: var(--radius-btn); background: var(--color-primary); color: #fff; font-size: 13px; transition: background var(--t-fast); } .url-apply:hover { background: var(--color-primary-deep); } .range-row { display: flex; align-items: center; gap: 10px; } .range-input { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: rgba(46, 125, 91, 0.2); outline: none; } [data-theme="dark"] .range-input { background: rgba(78, 204, 163, 0.2); } .range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); cursor: pointer; transition: transform var(--t-fast); } .range-input::-webkit-slider-thumb:hover { transform: scale(1.15); } .range-input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); border: 2px solid #fff; cursor: pointer; } .range-value { width: 44px; text-align: right; font-family: var(--font-numeric); font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .source-tabs { display: flex; gap: 6px; margin-bottom: 10px; } .source-tab { flex: 1; padding: 8px; border-radius: var(--radius-btn); font-size: 12px; background: var(--color-surface); border: 1px solid var(--border-subtle); color: var(--color-text-muted); transition: all var(--t-fast); } .source-tab.active { background: var(--color-primary); color: #fff; border-color: transparent; } .toggle-row { display: flex; align-items: center; justify-content: space-between; } .switch { position: relative; width: 44px; height: 24px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--border-subtle); transition: background var(--t-fast); cursor: pointer; } .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: transform 0.3s var(--ease-spring); } .switch.on { background: var(--color-primary); border-color: transparent; } .switch.on::after { transform: translateX(20px); } .reset-btn { width: 100%; height: 42px; margin-top: 8px; border-radius: var(--radius-btn); background: rgba(232, 154, 79, 0.1); color: var(--color-accent-deep); border: 1px solid var(--color-accent); font-size: 13px; font-weight: 500; transition: all var(--t-fast); } .reset-btn:hover { background: rgba(232, 154, 79, 0.2); } /* ---------- 响应式 ---------- */ @media (max-width: 1200px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } .tool-card.featured { grid-column: span 2; grid-row: span 1; } .tool-card.wide { grid-column: span 2; } } @media (max-width: 560px) { .container { padding: 0 16px; } .tools-grid { grid-template-columns: 1fr; } .tool-card.featured, .tool-card.wide { grid-column: span 1; grid-row: span 1; } .hero { padding: 36px 0 20px; } .hero-stats { gap: 24px; } .stat-num { font-size: 26px; } .settings-panel { width: 100%; } } /* ---------- 减弱动效 ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .particle-canvas { display: none; } .blob { animation: none; } .tool-card { opacity: 1; transform: none; } }