/* ============================================================
   spark1.cn /tools/ — 暗色主题（与全站品牌统一）
   设计系统：shared/design-tokens.css + shared/dark-base.css?v=9
   （经 subdomain-common.css 已加载，token/组件类直接可用）
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* body 不再覆盖浅色——交由 dark-base.css 治理（#0f172a 底 + Noto Sans SC + 颗粒纹理） */
body { line-height: 1.6; }
.container { max-width: 900px; margin: 0 auto; padding: 20px; }

/* ====== 页头（工具页自有 header，暗色玻璃） ====== */
header#toolsHeader { background: rgba(15,23,42,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--hairline, rgba(255,255,255,0.10)); color: #e2e8f0; padding: 12px 16px; text-align: left; transition: padding 0.25s ease; position: relative; z-index: 10; }
#toolsHeader .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.header-inner { flex-wrap: wrap; }
#toolsHeader .header-text { min-width: 0; }
#toolsHeader h1 { font-family: var(--font-display, 'Noto Serif SC', serif); font-weight: 900; font-size: 1.25rem; margin-bottom: 2px; line-height: 1.2; letter-spacing: var(--display-tracking, -0.01em); color: var(--text-heading, #e0e7ff); }
#toolsHeader p { font-size: 0.85rem; color: var(--ui-muted, rgba(255,255,255,0.60)); margin: 0; }
#toolsHeader .nav-link { display: inline-flex; align-items: center; padding: 5px 12px; background: var(--surface-1, rgba(255,255,255,0.035)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); border-radius: var(--radius-full, 9999px); color: #c7d2fe; text-decoration: none; font-size: 0.8rem; white-space: nowrap; transition: all var(--transition-fast, 150ms); margin: 0; }
#toolsHeader .nav-link:hover { background: var(--surface-2, rgba(255,255,255,0.06)); border-color: var(--c-primary, #6366f1); color: #e0e7ff; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hairline-strong, rgba(255,255,255,0.16)); background: var(--surface-1, rgba(255,255,255,0.035)); color: #c7d2fe; border-radius: var(--radius-sm, 6px); cursor: pointer; font-size: 1rem; line-height: 1; transition: all var(--transition-fast, 150ms); }
.header-toggle:hover { background: var(--surface-2, rgba(255,255,255,0.06)); border-color: var(--c-primary, #6366f1); }
/* 折叠状态 */
#toolsHeader.collapsed { padding-top: 8px; padding-bottom: 8px; }
#toolsHeader.collapsed .header-text p,
#toolsHeader.collapsed .nav-link { display: none; }
#toolsHeader.collapsed h1 { font-size: 1rem; }
/* 英雄搜索行 */
.hero-search-row { padding: 0 0 14px 0; }
.hero-search { max-width: 600px; margin: 0 auto; }
.hero-search #toolSearchInput { padding: 14px 18px 14px 48px; font-size: 1rem; border-radius: 14px; border-color: var(--hairline-strong, rgba(255,255,255,0.16)); background: var(--surface-2, rgba(255,255,255,0.06)); box-shadow: 0 0 0 1px rgba(99,102,241,0.08); transition: all 0.25s; }
.hero-search #toolSearchInput:focus { border-color: var(--c-primary, #6366f1); box-shadow: 0 0 0 4px rgba(99,102,241,0.18), 0 8px 24px -8px rgba(99,102,241,0.25); }
.hero-search #toolSearchInput::placeholder { opacity: 0.55; }
.hero-search::before { content: '🔍'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; pointer-events: none; z-index: 2; }
#toolsHeader.collapsed .hero-search-row { display: none; }
@media(max-width: 640px){ #toolsHeader .nav-link { display: none; } #toolsHeader h1 { font-size: 1.05rem; } .hero-search #toolSearchInput { font-size: 0.9rem; padding: 12px 14px 12px 42px; } }

/* ====== 免费工具 tab + 面板 ====== */
.tool-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 30px 0; }
.tool-tab { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 40%, transparent 70%), var(--glass-bg, rgba(255,255,255,0.06)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); box-shadow: inset 0 1px 0 var(--surface-hi, rgba(255,255,255,0.07)); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; transition: all var(--transition-base, 250ms); }
.tool-tab:hover { border-color: var(--c-primary, #6366f1); transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--surface-hi, rgba(255,255,255,0.07)), 0 8px 24px -10px var(--c-glow, rgba(99,102,241,0.4)); }
.tool-tab.active { border-color: var(--c-primary, #6366f1); background: rgba(99,102,241,0.10); }
.tool-tab .icon { font-size: 1.8rem; margin-bottom: 8px; }
.tool-tab .name { font-size: 0.85rem; font-weight: 600; color: var(--text-heading, #e0e7ff); }

.tool-panel { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015) 30%, transparent 65%), var(--glass-bg, rgba(255,255,255,0.06)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); box-shadow: inset 0 1px 0 var(--surface-hi, rgba(255,255,255,0.07)), 0 12px 32px -24px rgba(0,0,0,0.8); border-radius: var(--radius-card, 16px); padding: clamp(20px, 4vw, 30px); display: none; scroll-margin-top: 80px; }
.tool-panel.active { display: block; animation: panelEnter var(--transition-slow, 350ms) ease-out; }
.tool-panel h2 { font-family: var(--font-display, 'Noto Serif SC', serif); font-weight: 900; font-size: clamp(1.3rem, 3vw, 1.5rem); margin-bottom: 8px; color: var(--text-heading, #e0e7ff); letter-spacing: var(--display-tracking, -0.01em); }
.tool-panel .desc { color: var(--ui-muted, rgba(255,255,255,0.60)); margin-bottom: 20px; font-size: 0.9rem; max-width: 65ch; }

/* ====== 表单（输入控件由 dark-base 表单 token 治理，此处只管 label/辅助） ====== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; color: var(--form-label, rgba(255,255,255,0.85)); }
.form-group textarea { resize: vertical; min-height: 80px; }
.textarea-voice-wrap { position: relative; display: flex; align-items: flex-start; gap: 6px; }
.textarea-voice-wrap textarea { flex: 1; }
.voice-input-btn { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border-subtle, rgba(255,255,255,0.15)); background: var(--card-bg, rgba(255,255,255,0.06)); cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s; padding: 0; line-height: 1; }
.voice-input-btn:hover { border-color: var(--c-accent, #6366f1); background: var(--c-accent, #6366f1); color: #fff; }
.voice-input-btn.listening { border-color: #ef4444; background: #ef4444; color: #fff; animation: voice-pulse 1.2s ease-in-out infinite; }
@keyframes voice-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
.req-star { color: var(--c-accent-warm, #f59e0b); margin-left: 2px; }
.char-counter { text-align: right; font-size: 0.75rem; color: var(--ui-subtle, rgba(255,255,255,0.50)); margin-top: 4px; font-variant-numeric: tabular-nums; }
.form-help { font-size: 0.82rem; color: var(--form-help, rgba(255,255,255,0.55)); margin-top: 6px; }

/* ====== 按钮：采用 dark-base .btn/.btn-primary（品牌渐变 + 扫光 + 禁用态） ====== */
.tool-panel .btn-primary, .ai-tool-panel .btn-primary { width: 100%; text-align: center; justify-content: center; }
.btn-regenerate { margin-top: 12px; padding: 8px 16px; min-height: 40px; font-size: 0.85rem; background: transparent; border: 1px solid var(--hairline, rgba(255,255,255,0.10)); border-radius: var(--radius-md, 10px); color: var(--ui-muted, rgba(255,255,255,0.60)); cursor: pointer; transition: all var(--transition-fast, 150ms); }
.btn-regenerate:hover { background: var(--surface-1, rgba(255,255,255,0.035)); border-color: var(--hairline-strong, rgba(255,255,255,0.16)); color: var(--text-heading, #e0e7ff); }

/* ====== 结果区 ====== */
.result-box { margin-top: 24px; padding: 20px; background: var(--surface-1, rgba(255,255,255,0.035)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); box-shadow: inset 0 1px 0 var(--surface-hi, rgba(255,255,255,0.07)); border-left: 3px solid var(--c-primary, #6366f1); border-radius: var(--radius-card, 16px); color: var(--a11y-text-primary, rgba(226,232,240,0.96)); animation: resultEnter 0.4s ease-out; }
.result-box h3 { font-family: var(--font-display, 'Noto Serif SC', serif); font-weight: 700; font-size: 1.1rem; margin-bottom: 12px; color: var(--text-heading, #e0e7ff); }
.result-box h4 { color: var(--text-heading, #e0e7ff); margin: 12px 0 6px; }
.result-box hr { border: none; border-top: 1px solid var(--hairline, rgba(255,255,255,0.10)); margin: 12px 0; }
.result-box a { color: #818cf8; }
.result-box pre { background: rgba(2,6,23,0.6); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); border-radius: var(--radius-md, 10px); padding: 14px; overflow-x: auto; }
.result-item { padding: 10px 0; border-bottom: 1px solid var(--hairline, rgba(255,255,255,0.10)); }
.result-item:last-child { border-bottom: none; }
.result-item .title { font-weight: 600; color: var(--text-heading, #e0e7ff); }
.result-item .subtitle { font-size: 0.85rem; color: var(--ui-muted, rgba(255,255,255,0.60)); margin-top: 4px; }
.error-msg { padding: 12px 16px; background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.35); border-radius: var(--radius-md, 10px); color: #fca5a5; }

/* ====== 渲染器长尾：中和 40+ 渲染器的内联浅色（inline style 需 !important） ====== */
.result-box h3, .result-box h4 { color: var(--text-heading, #e0e7ff) !important; }
/* 深色文字（浅底用）→ 暗底可读 */
.result-box [style*="color:#2d3748"], .result-box [style*="color: #2d3748"],
.result-box [style*="color:#1a202c"], .result-box [style*="color: #1a202c"],
.result-box [style*="color:#374151"], .result-box [style*="color:#1e3a5f"],
.result-box [style*="color:#1e40af"], .result-box [style*="color:#0f172a"],
.result-box [style*="color:#334155"], .result-box [style*="color:#111827"] { color: var(--a11y-text-primary, rgba(226,232,240,0.96)) !important; }
/* 灰色文字 → ui-muted */
.result-box [style*="color:#718096"], .result-box [style*="color: #718096"],
.result-box [style*="color:#4a5568"], .result-box [style*="color: #4a5568"],
.result-box [style*="color:#64748b"], .result-box [style*="color:#6b7280"],
.result-box [style*="color:#78716c"], .result-box [style*="color:#92400e"],
.result-box [style*="color:#475569"] { color: var(--ui-muted, rgba(255,255,255,0.60)) !important; }
/* 浅色底 → surface */
.result-box [style*="background:#f7fafc"], .result-box [style*="background: #f7fafc"],
.result-box [style*="background:#f8fafc"], .result-box [style*="background:#f0fdf4"],
.result-box [style*="background:#ecfdf5"], .result-box [style*="background:#fffbeb"],
.result-box [style*="background:#fef3c7"], .result-box [style*="background:#fef2f2"],
.result-box [style*="background:#fee2e2"], .result-box [style*="background:#eff6ff"],
.result-box [style*="background:#f5f3ff"], .result-box [style*="background:#fefce8"],
.result-box [style*="background:#f0f9ff"], .result-box [style*="background:#f1f5f9"],
.result-box [style*="background:#faf5ff"], .result-box [style*="background:#f9fafb"],
.result-box [style*="background:#fffdf7"], .result-box [style*="background:#fff7ed"],
.result-box [style*="background:#fdf2f8"] { background: var(--surface-1, rgba(255,255,255,0.035)) !important; }
/* 白底卡片 → surface-2 */
.result-box [style*="background:white"], .result-box [style*="background: white"],
.result-box [style*="background:#fff,"], .result-box [style*="background:#fff;"],
.result-box [style*="background: #fff;"], .result-box [style*="background:#ffffff"] { background: var(--surface-2, rgba(255,255,255,0.06)) !important; }
/* 浅色边框 → hairline */
.result-box [style*="#e2e8f0"] { border-color: var(--hairline, rgba(255,255,255,0.10)) !important; }
.result-box [style*="border:1px solid #e"], .result-box [style*="border: 1px solid #e"],
.result-box [style*="border-top:1px solid #"], .result-box [style*="border-bottom:1px solid #"],
.result-box [style*="border:1px solid #bae6fd"], .result-box [style*="border:1px solid #fde68a"],
.result-box [style*="border:1px solid #a7f3d0"], .result-box [style*="border:1px solid #fecaca"],
.result-box [style*="border:1px solid #c7d2fe"] { border-color: var(--hairline, rgba(255,255,255,0.10)) !important; }
/* 品牌/语义色调亮（暗底可读） */
.result-box [style*="color:#667eea"], .result-box [style*="color: #667eea"],
.result-box [style*="color:#4f46e5"], .result-box [style*="color:#4338ca"] { color: #818cf8 !important; }
.result-box [style*="color:#6366f1"] { color: #a5b4fc !important; }
.result-box [style*="color:#16a34a"], .result-box [style*="color:#059669"],
.result-box [style*="color:#10b981"], .result-box [style*="color:#15803d"],
.result-box [style*="color:#065f46"] { color: #34d399 !important; }
.result-box [style*="color:#dc2626"], .result-box [style*="color:#ef4444"],
.result-box [style*="color:#991b1b"], .result-box [style*="color:#e53e3e"] { color: #f87171 !important; }
.result-box [style*="color:#d97706"], .result-box [style*="color:#b45309"] { color: #fbbf24 !important; }
.result-box [style*="color:#e11d48"] { color: #fb7185 !important; }
.result-box [style*="color:#6d28d9"], .result-box [style*="color:#7c3aed"],
.result-box [style*="color:#8b5cf6"] { color: #a78bfa !important; }
.result-box [style*="color:#ec4899"] { color: #f472b6 !important; }
.result-box [style*="color:#2563eb"], .result-box [style*="color:#1d4ed8"],
.result-box [style*="color:#3b82f6"] { color: #60a5fa !important; }
.result-box [style*="color:#0891b2"], .result-box [style*="color:#0e7490"] { color: #22d3ee !important; }
/* 彩色 pill：浅底 → 同色 12% 透明底 */
.result-box [style*="background:#fff1f2"] { background: rgba(225,29,72,0.12) !important; }
.result-box [style*="background:#eef2ff"] { background: rgba(99,102,241,0.14) !important; }
.result-box [style*="background:#ede9fe"] { background: rgba(139,92,246,0.14) !important; }
.result-box [style*="background:#ebf5ff"], .result-box [style*="background:#dbeafe"] { background: rgba(59,130,246,0.14) !important; }
.result-box [style*="background:#ecfdf5"], .result-box [style*="background:#d1fae5"] { background: rgba(16,185,129,0.12) !important; }
.result-box [style*="background:#fef2f2"], .result-box [style*="background:#fee2e2"] { background: rgba(239,68,68,0.12) !important; }
.result-box [style*="background:#fffbeb"], .result-box [style*="background:#fef3c7"] { background: rgba(245,158,11,0.12) !important; }
.result-box [style*="background:linear-gradient(135deg,#fffbeb"],
.result-box [style*="background:linear-gradient(135deg,#ecfdf5"],
.result-box [style*="background:linear-gradient(135deg,#fef2f2"],
.result-box [style*="background:linear-gradient(135deg,#f0f4ff"] { background: var(--surface-1, rgba(255,255,255,0.035)) !important; }

/* ====== 复制按钮（ghost 风格） ====== */
.copy-btn { background: transparent; color: var(--ui-muted, rgba(255,255,255,0.60)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); padding: 8px 16px; border-radius: var(--radius-sm, 6px); font-size: 0.85rem; cursor: pointer; margin-top: 12px; transition: all var(--transition-fast, 150ms); }
.copy-btn:hover { background: var(--surface-1, rgba(255,255,255,0.035)); border-color: var(--hairline-strong, rgba(255,255,255,0.16)); color: var(--text-heading, #e0e7ff); }

/* ====== CTA / 相关链接 / 日历（免费工具） ====== */
.cta-box { margin-top: 24px; padding: 20px; background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.25); border-radius: 12px; text-align: center; }
.cta-box p { font-size: 0.9rem; color: var(--ui-muted, rgba(255,255,255,0.60)); margin-bottom: 10px; }
.cta-box .highlight { font-weight: 700; color: #fbbf24; font-size: 1.1rem; }
.related-links { margin-top: 30px; padding: 20px; background: var(--surface-1, rgba(255,255,255,0.035)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); border-radius: 12px; }
.related-links h3 { font-size: 1rem; margin-bottom: 12px; color: var(--text-heading, #e0e7ff); }
.related-links a { display: block; padding: 10px; color: #818cf8; text-decoration: none; border-radius: 6px; transition: background 0.3s; }
.related-links a:hover { background: rgba(99,102,241,0.10); }
.calendar-grid { display: grid; gap: 12px; margin-top: 16px; }
.calendar-day { background: var(--surface-1, rgba(255,255,255,0.035)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); border-radius: 8px; padding: 14px; }
.calendar-day .day-label { font-family: var(--font-display, 'Noto Serif SC', serif); font-weight: 700; color: #818cf8; font-size: 0.85rem; margin-bottom: 6px; }
.calendar-day .topic-title { font-weight: 600; color: var(--text-heading, #e0e7ff); margin-bottom: 4px; }
.calendar-day .topic-angle { font-size: 0.85rem; color: var(--ui-muted, rgba(255,255,255,0.60)); }
footer { text-align: center; padding: 30px 20px; color: var(--ui-muted, rgba(255,255,255,0.60)); font-size: 0.85rem; margin-top: 40px; }
footer a { color: #818cf8; text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ====== AI 增强工具区 ====== */
.ai-section-divider { text-align: center; margin: 40px 0 30px; position: relative; }
.ai-section-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-primary, #6366f1), transparent); }
.ai-section-divider span { position: relative; background: var(--bg-page, #0f172a); padding: 0 20px; font-family: var(--font-display, 'Noto Serif SC', serif); font-size: 1.1rem; font-weight: 700; color: #a5b4fc; }

.ai-tool-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 20px; }
.ai-tool-tab { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 40%, transparent 70%), var(--glass-bg, rgba(255,255,255,0.06)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); box-shadow: inset 0 1px 0 var(--surface-hi, rgba(255,255,255,0.07)); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; transition: all var(--transition-base, 250ms); position: relative; }
.ai-tool-tab:hover { border-color: var(--c-accent-warm, #f59e0b); transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--surface-hi, rgba(255,255,255,0.07)), 0 8px 24px -10px rgba(245,158,11,0.35); }
.ai-tool-tab.active { border-color: var(--c-accent-warm, #f59e0b); background: rgba(245,158,11,0.08); }
.ai-tool-tab .icon { font-size: 1.5rem; margin-bottom: 6px; }
.ai-tool-tab .name { font-size: 0.8rem; font-weight: 600; color: var(--text-heading, #e0e7ff); }
.ai-tool-tab .cost { font-size: 0.7rem; color: var(--c-accent-warm, #f59e0b); margin-top: 4px; font-variant-numeric: tabular-nums; }
.ai-tool-tab.hidden { display: none; }

/* ====== AI 工具操作面板（shell） ====== */
.ai-tool-panel { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015) 30%, transparent 65%), var(--glass-bg, rgba(255,255,255,0.06)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); box-shadow: inset 0 1px 0 var(--surface-hi, rgba(255,255,255,0.07)), 0 12px 32px -24px rgba(0,0,0,0.8); border-radius: var(--radius-card, 16px); padding: clamp(20px, 4vw, 32px); display: none; scroll-margin-top: 80px; }
.ai-tool-panel.active { display: block; animation: panelEnter var(--transition-slow, 350ms) ease-out; }
/* 面板头区：kicker 眉题 + 衬线大标题 + 人话描述 */
.panel-head { margin-bottom: 20px; }
.panel-kicker { margin-bottom: 12px; }
.ai-tool-panel h2 { font-family: var(--font-display, 'Noto Serif SC', serif); font-weight: 900; font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: 8px; color: var(--text-heading, #e0e7ff); letter-spacing: var(--display-tracking, -0.01em); line-height: 1.25; }
.ai-tool-panel .desc { color: var(--ui-muted, rgba(255,255,255,0.60)); margin-bottom: 14px; font-size: 0.95rem; max-width: 65ch; }
.ai-panel-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ai-cost-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.30); border-radius: var(--radius-full, 9999px); color: #fbbf24; font-size: 0.8rem; font-weight: 600; }
.ai-free-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.30); border-radius: var(--radius-full, 9999px); color: #34d399; font-size: 0.8rem; font-weight: 600; }
.ai-stats-bar { display: flex; align-items: center; gap: 12px; font-size: 0.82rem; color: var(--ui-subtle, rgba(255,255,255,0.50)); }
.ai-stats-bar .stat { display: flex; align-items: center; gap: 4px; }
.ai-stats-bar .stat-count, .ai-stats-bar .stat-rate { color: var(--ui-muted, rgba(255,255,255,0.60)); font-variant-numeric: tabular-nums; }

/* ====== 加载态：骨架屏（shimmer 来自 dark-base .skeleton） ====== */
.ai-loading { display: none; padding: 8px 0 0; }
.ai-loading.show { display: block; animation: fadeIn 0.25s ease-out; }
.ai-loading .skeleton { margin-bottom: 10px; }
.ai-loading .spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--hairline, rgba(255,255,255,0.10)); border-top-color: var(--c-primary, #6366f1); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ====== 状态卡（登录门/次数尽/积分不足/错误） ====== */
.gate-card { margin-top: 20px; padding: 24px 20px; background: var(--surface-1, rgba(255,255,255,0.035)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); border-top: 3px solid var(--c-accent-warm, #f59e0b); border-radius: var(--radius-card, 16px); text-align: center; animation: resultEnter 0.35s ease-out; }
.gate-card h3 { font-family: var(--font-display, 'Noto Serif SC', serif); font-weight: 700; font-size: 1.1rem; color: var(--text-heading, #e0e7ff); margin-bottom: 8px; }
.gate-card p { font-size: 0.88rem; color: var(--ui-muted, rgba(255,255,255,0.60)); margin-bottom: 14px; max-width: 46ch; margin-left: auto; margin-right: auto; }
.gate-card .gate-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.gate-card .gate-actions .btn { width: auto; min-height: 44px; padding: 10px 22px; text-decoration: none; }
.gate-card.gate-exhausted, .gate-card.gate-insufficient { border-top-color: #f87171; }
.gate-card.gate-error { border-top-color: var(--ui-subtle, rgba(255,255,255,0.50)); }

/* ====== 积分信息 chip 行 ====== */
.credits-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.credits-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--radius-full, 9999px); font-size: 0.8rem; font-weight: 500; }
.credits-chip.free { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.30); color: #34d399; }
.credits-chip.spent { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.30); color: #fbbf24; }
.credits-chip.remaining { background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.30); color: #a5b4fc; }
.credits-chip.times { background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.25); color: #6ee7b7; }
.credits-info a { color: #818cf8; font-weight: 600; font-size: 0.8rem; }

/* ====== 登录提示 / 免费试用 / 升级引导 / 积分指南 ====== */
.ai-login-notice { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.30); border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 20px; }
.ai-login-notice p { color: #fbbf24; margin-bottom: 10px; }
.ai-login-notice a { color: #818cf8; font-weight: 600; }
.free-trial-banner { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.30); border-radius: 12px; padding: 16px 20px; text-align: center; margin-bottom: 16px; }
.free-trial-banner p { color: #34d399; font-size: 0.9rem; margin-bottom: 8px; }
.free-trial-banner .btn-login, .btn-login { display: inline-block; padding: 8px 18px; background: var(--grad-btn, linear-gradient(135deg, #6366f1, #8b5cf6)); color: white; border-radius: var(--radius-md, 10px); font-size: 0.85rem; font-weight: 600; text-decoration: none; margin-left: 8px; transition: transform var(--transition-fast, 150ms); }
.btn-login:hover { transform: translateY(-1px); }
.ai-upgrade-box { margin-top: 20px; padding: 16px; background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.28); border-radius: 12px; text-align: center; }
.ai-upgrade-box .utitle { font-weight: 700; color: #fbbf24; margin-bottom: 6px; }
.ai-upgrade-box .udesc { font-size: 0.85rem; color: var(--ui-muted, rgba(255,255,255,0.60)); margin-bottom: 10px; }
.ai-upgrade-box .ubtn { display: inline-block; padding: 8px 20px; background: linear-gradient(135deg, #f59e0b, #d97706); color: white; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: none; text-decoration: none; }
.credits-guide { background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.25); border-radius: 12px; padding: 16px; margin-top: 16px; }
.credits-guide h4 { color: #a5b4fc; margin-bottom: 8px; font-size: 0.95rem; }
.credits-guide ul { list-style: none; padding: 0; }
.credits-guide li { padding: 4px 0; font-size: 0.85rem; color: var(--ui-muted, rgba(255,255,255,0.60)); }
.credits-guide li::before { content: '✅ '; }

/* ====== 视觉工具上传区（拖拽 + 预览 + 移除） ====== */
.upload-drop { border: 2px dashed var(--hairline-strong, rgba(255,255,255,0.16)); border-radius: 12px; padding: 28px 20px; text-align: center; cursor: pointer; background: var(--surface-1, rgba(255,255,255,0.035)); transition: all var(--transition-base, 250ms); }
.upload-drop:hover, .upload-drop.dragover { border-color: var(--c-accent-warm, #f59e0b); background: rgba(245,158,11,0.06); }
.upload-drop.ready { border-color: rgba(16,185,129,0.5); border-style: solid; }
.upload-drop .up-icon { font-size: 2.2rem; margin-bottom: 8px; }
.upload-drop .up-text { color: #fbbf24; font-weight: 600; font-size: 0.95rem; }
.upload-drop .up-hint { color: var(--ui-subtle, rgba(255,255,255,0.50)); font-size: 0.82rem; margin-top: 4px; }
.upload-preview-card { position: relative; display: inline-block; max-width: 100%; }
.upload-preview-card img { max-width: 100%; max-height: 200px; border-radius: 8px; border: 1px solid var(--hairline, rgba(255,255,255,0.10)); }
.upload-preview-meta { font-size: 0.8rem; color: #34d399; margin-top: 6px; }
.upload-remove { margin-top: 8px; padding: 5px 14px; background: transparent; border: 1px solid rgba(239,68,68,0.4); color: #f87171; border-radius: var(--radius-full, 9999px); font-size: 0.78rem; cursor: pointer; transition: all var(--transition-fast, 150ms); }
.upload-remove:hover { background: rgba(239,68,68,0.12); }

/* ====== AI 家教练习模式 ====== */
.tutor-mode-switch { display: flex; gap: 8px; margin-bottom: 16px; }
.tutor-mode-btn { padding: 8px 16px; min-height: 40px; border: 1px solid rgba(99,102,241,0.30); border-radius: 8px; background: rgba(99,102,241,0.06); color: var(--ui-muted, rgba(255,255,255,0.60)); font-size: 0.9rem; cursor: pointer; transition: all 0.25s; font-weight: 500; }
.tutor-mode-btn:hover { border-color: var(--c-primary, #6366f1); color: #a5b4fc; }
.tutor-mode-btn.active { background: var(--c-primary, #6366f1); border-color: var(--c-primary, #6366f1); color: white; font-weight: 600; }
.tutor-qa-area, .tutor-practice-area { transition: opacity 0.3s; }
.tutor-practice-area { border: 1px dashed rgba(99,102,241,0.25); border-radius: 12px; padding: 20px; background: rgba(99,102,241,0.03); }
.practice-question-box { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.30); border-radius: 10px; padding: 16px; margin: 12px 0; font-size: 0.95rem; line-height: 1.8; color: var(--a11y-text-primary, rgba(226,232,240,0.96)); }
.practice-question-box .q-label { font-size: 0.8rem; color: #60a5fa; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.practice-question-box .q-type { display: inline-block; padding: 3px 10px; background: rgba(59,130,246,0.18); color: #93c5fd; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-bottom: 8px; }
.practice-hint { margin-top: 10px; padding: 10px 14px; background: rgba(245,158,11,0.08); border-left: 3px solid var(--c-accent-warm, #f59e0b); border-radius: 0 8px 8px 0; font-size: 0.85rem; color: #fbbf24; }
.practice-grade-result { margin-top: 12px; padding: 16px; border-radius: 10px; border: 1px solid; }
.practice-grade-result.correct { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.35); }
.practice-grade-result.incorrect { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.35); }
.practice-grade-result .grade-score { font-family: var(--font-display, 'Noto Serif SC', serif); font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.practice-grade-result.correct .grade-score { color: #34d399; }
.practice-grade-result.incorrect .grade-score { color: #f87171; }
.practice-grade-result .grade-explain { font-size: 0.9rem; line-height: 1.7; color: var(--ui-muted, rgba(255,255,255,0.60)); margin-bottom: 8px; }
.practice-grade-result .grade-correct-answer { background: var(--surface-1, rgba(255,255,255,0.035)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); padding: 10px 14px; border-radius: 8px; font-size: 0.88rem; line-height: 1.7; color: var(--a11y-text-primary, rgba(226,232,240,0.96)); }
.practice-grade-result .grade-takeaway { margin-top: 8px; padding: 8px 12px; background: rgba(245,158,11,0.08); border-radius: 6px; font-size: 0.85rem; color: #fbbf24; }
.practice-grade-result .grade-cheer { margin-top: 8px; font-size: 0.9rem; color: #a5b4fc; font-weight: 500; }

/* ====== 站点导航（已暗色，保留） ====== */
.site-nav{background:rgba(15,23,42,0.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.08);position:sticky;top:0;z-index:100;font-family:'Noto Sans SC','Microsoft YaHei',sans-serif}
.site-nav .nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}
.site-nav .nav-logo{color:#fff;text-decoration:none;font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,#818cf8,#c084fc,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.site-nav ul{display:flex;list-style:none;gap:0.3rem;align-items:center}
.site-nav a{color:rgba(255,255,255,0.8);text-decoration:none;padding:0.5rem 0.7rem;font-size:0.85rem;transition:color 0.3s}
.site-nav a:hover{color:#e0e7ff}
.site-nav li{position:relative}
.site-nav .sub{display:none;position:absolute;background:rgba(15,23,42,0.95);backdrop-filter:blur(20px);min-width:160px;box-shadow:0 8px 32px rgba(0,0,0,0.3);z-index:1;border-radius:10px;top:100%;left:0;border:1px solid rgba(255,255,255,0.12);padding:6px 0}
.site-nav .sub a{display:block;padding:8px 14px;font-size:0.82rem}
.site-nav .sub a:hover{background:rgba(99,102,241,0.15);color:#c7d2fe}
.site-nav li:hover .sub{display:block}
@media(max-width:768px){.site-nav ul{flex-wrap:wrap}}

/* ====== 分类筛选 pill ====== */
.tool-cat-pill { padding: 10px 16px; min-height: 44px; border: 1px solid var(--hairline, rgba(255,255,255,0.10)); background: var(--surface-1, rgba(255,255,255,0.035)); border-radius: var(--radius-full, 9999px); cursor: pointer; font-size: 14px; color: var(--ui-muted, rgba(255,255,255,0.60)); transition: all 0.2s; display: inline-flex; align-items: center; }
.tool-cat-pill:hover { border-color: var(--c-accent-warm, #f59e0b); color: #fbbf24; }
.tool-cat-pill.active { background: var(--grad-btn, linear-gradient(135deg, #6366f1, #8b5cf6)); color: #fff; border-color: transparent; }

/* ====== 工具页导航 header 紧凑化（保留） ====== */
.site-header { padding: 0.25rem 0; }
.site-header .logo { font-size: 1.15rem; }
.site-header nav a { font-size: 0.8rem; padding: 0.3rem 0.5rem; }
.site-header .submenu-trigger { font-size: 0.8rem; padding: 0.3rem 0.5rem; }

/* ====== 面板内小组件 ====== */
.panel-warning { padding: 10px 14px; background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.28); border-radius: 8px; font-size: 0.82rem; color: #fbbf24; margin-bottom: 16px; }
.panel-warning.warn-red { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.30); color: #fca5a5; }
.tutor-section-header { grid-column: 1/-1; text-align: center; padding: 14px 12px; margin: 8px 0; font-size: 0.95rem; font-weight: 700; color: #93c5fd; background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.18); border-radius: 8px; letter-spacing: 1px; }
.tutor-section-header a { margin-left: 12px; font-size: 0.82rem; font-weight: 500; color: #34d399; text-decoration: none; letter-spacing: 0; }
.loading-note { font-size: 0.82rem; color: var(--ui-subtle, rgba(255,255,255,0.50)); margin-bottom: 12px; }
.copy-btn.copied { color: #34d399; border-color: rgba(16,185,129,0.45); }
.practice-question-box .q-type.kp { background: rgba(245,158,11,0.16); color: #fbbf24; }

/* ====== 搜索框 / 百宝箱 / 试用横幅链接 ====== */
#toolSearchInput { width: 100%; padding: 12px 14px 12px 42px; border: 1px solid var(--hairline-strong, rgba(255,255,255,0.16)); border-radius: 12px; font-size: 14px; color: inherit; background: var(--surface-1, rgba(255,255,255,0.035)); box-sizing: border-box; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
#toolSearchInput::placeholder { color: inherit; opacity: 0.5; }
#toolSearchInput:focus { border-color: var(--c-primary, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.treasure-box { margin: 30px 0; padding: 24px; background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.06)); border: 1px solid rgba(99,102,241,0.22); border-radius: 16px; }
.treasure-box h3 { text-align: center; margin-bottom: 20px; color: var(--text-heading, #e0e7ff); font-family: var(--font-display, 'Noto Serif SC', serif); font-weight: 700; font-size: 1.1rem; }
.treasure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.treasure-card { display: block; padding: 16px; background: var(--surface-1, rgba(255,255,255,0.035)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); box-shadow: inset 0 1px 0 var(--surface-hi, rgba(255,255,255,0.07)); border-radius: 12px; text-decoration: none; text-align: center; transition: all var(--transition-base, 250ms); }
.treasure-card:hover { border-color: #818cf8; transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--surface-hi, rgba(255,255,255,0.07)), 0 8px 24px -10px var(--c-glow, rgba(99,102,241,0.4)); }
.treasure-card .t-icon { font-size: 1.5rem; }
.treasure-card .t-name { font-weight: 700; color: var(--text-heading, #e0e7ff); margin-top: 4px; }
.treasure-card .t-sub { font-size: 0.78rem; color: var(--ui-muted, rgba(255,255,255,0.60)); }
.free-trial-banner .ft-sub { font-size: 0.8rem; color: var(--ui-muted, rgba(255,255,255,0.60)); }
.free-trial-banner a { color: #a5b4fc; font-weight: 600; text-decoration: none; }
.free-trial-banner a:hover { text-decoration: underline; }

/* ====== Toast（class 化，替代内联 cssText） ====== */
.toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 9999; padding: 12px 24px; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(2,6,23,0.5); transition: opacity 0.4s; animation: resultEnter 0.25s ease-out; }
.toast-info { background: #3b82f6; }
.toast-success { background: #10b981; }
.toast-error { background: #ef4444; }
.toast-warn { background: #f59e0b; }

/* ====== 重磅工具推荐卡（原内联渐变卡 → class 化；首卡旧紫 #667eea→#764ba2 换品牌 indigo） ====== */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 30px 0; }
.promo-card { display: block; padding: 24px; border-radius: 16px; text-decoration: none; color: #fff; transition: transform var(--transition-base, 250ms), box-shadow var(--transition-base, 250ms); }
.promo-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -12px rgba(0,0,0,0.55); }
.promo-card .promo-icon { font-size: 2rem; margin-bottom: 8px; }
.promo-card .promo-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; color: #fff; }
.promo-card .promo-sub { font-size: 0.85rem; opacity: 0.85; }
.promo-card .promo-cost { margin-top: 8px; font-size: 0.8rem; opacity: 0.75; }
.promo-card[data-tone="indigo"] { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.promo-card[data-tone="amber"] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.promo-card[data-tone="pink"] { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.promo-card[data-tone="violet"] { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.promo-card[data-tone="violet-indigo"] { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.promo-card[data-tone="teal"] { background: linear-gradient(135deg, #14b8a6, #059669); }
.promo-card[data-tone="sky"] { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }
.promo-card[data-tone="blue"] { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.promo-card[data-tone="orange"] { background: linear-gradient(135deg, #f97316, #ea580c); }

/* ====== 一键任务流推荐带（原内联 → class 化） ====== */
.flow-band { max-width: 900px; margin: 2.5rem auto; padding: 2.2rem 2rem; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 16px; box-shadow: 0 10px 36px rgba(99,102,241,0.35); text-align: center; }
.flow-band .flow-title { font-family: var(--font-display, 'Noto Serif SC', serif); font-size: 1.5rem; font-weight: 900; color: #fff; margin-bottom: 0.6rem; }
.flow-band .flow-sub { color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: 1.4rem; line-height: 1.7; }
.flow-band .flow-sub .hl { color: #fcd34d; }
.flow-band .flow-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.flow-chip { display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; min-height: 44px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.4); border-radius: 10px; color: #fff; text-decoration: none; font-size: 0.92rem; font-weight: 700; transition: all var(--transition-fast, 150ms); }
.flow-chip:hover { background: rgba(255,255,255,0.28); transform: translateY(-2px); }
.flow-chip[data-tone="green"] { background: rgba(16,185,129,0.35); border-color: rgba(110,231,183,0.55); color: #d1fae5; }
.flow-chip[data-tone="green"]:hover { background: rgba(16,185,129,0.5); }
.flow-chip[data-tone="red"] { background: rgba(239,68,68,0.32); border-color: rgba(252,165,165,0.55); color: #fee2e2; }
.flow-chip[data-tone="red"]:hover { background: rgba(239,68,68,0.48); }
.flow-band .flow-foot { margin-top: 1.2rem; font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.flow-band .flow-foot a { color: #fcd34d; font-weight: 700; text-decoration: none; }

/* ====== 常见问题（原内联 → class 化） ====== */
.tools-faq { max-width: 800px; margin: 3rem auto; padding: 2rem 1rem; }
.tools-faq h2 { text-align: center; margin-bottom: 1.5rem; font-size: 1.5rem; font-family: var(--font-display, 'Noto Serif SC', serif); font-weight: 900; color: var(--text-heading, #e0e7ff); }
.tools-faq details { margin-bottom: 1rem; background: var(--surface-1, rgba(255,255,255,0.035)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); border-radius: 10px; padding: 1rem 1.1rem; }
.tools-faq summary { cursor: pointer; font-weight: 600; color: #c4b5fd; }
.tools-faq details p { margin-top: 0.5rem; color: var(--ui-muted, rgba(255,255,255,0.60)); line-height: 1.6; }

/* ====== 分类筛选条容器（原内联 → class 化） ====== */
.tool-filter-bar { margin-bottom: 16px; }
.tool-cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* ====== 搜索即时结果（搜索框正下方悬浮） ====== */
.tool-search-wrap { position: relative; }
.tool-search-results { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 300; background-image: linear-gradient(var(--surface-2, #111c33), var(--surface-2, #111c33)); background-color: #0d1526; border: 1px solid var(--hairline-strong, rgba(255,255,255,0.16)); border-radius: 14px; box-shadow: 0 18px 48px -14px rgba(0,0,0,0.65), 0 0 0 1px rgba(99,102,241,0.10), inset 0 1px 0 var(--surface-hi, rgba(255,255,255,0.07)); overflow: hidden; }
.tool-search-results.open { display: block; animation: tsrEnter 0.18s ease-out; }
@keyframes tsrEnter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.tsr-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--hairline, rgba(255,255,255,0.10)); font-size: 0.76rem; color: var(--ui-muted, rgba(255,255,255,0.60)); }
.tsr-head b { color: #a5b4fc; font-size: 0.92rem; font-family: var(--font-display, 'Noto Serif SC', serif); }
.tsr-clear { background: none; border: none; color: var(--ui-muted, rgba(255,255,255,0.60)); font-size: 0.74rem; cursor: pointer; padding: 2px 8px; border-radius: 6px; transition: color 0.2s, background 0.2s; }
.tsr-clear:hover { color: #a5b4fc; background: rgba(99,102,241,0.14); }
.tsr-list { max-height: min(52vh, 380px); overflow-y: auto; padding: 6px; }
.tsr-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; border-left: 2px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.tsr-row:hover, .tsr-row.active { background: rgba(99,102,241,0.11); border-left-color: var(--c-primary, #6366f1); transform: translateX(2px); }
.tsr-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.2rem; background: var(--surface-1, rgba(255,255,255,0.035)); border: 1px solid var(--hairline, rgba(255,255,255,0.10)); border-radius: 10px; }
.tsr-main { flex: 1; min-width: 0; }
.tsr-name { display: block; font-weight: 700; font-size: 0.92rem; color: var(--text-heading, #e0e7ff); }
.tsr-name mark { background: rgba(245,158,11,0.26); color: #fcd34d; border-radius: 3px; padding: 0 1px; }
.tsr-desc { display: block; margin-top: 2px; font-size: 0.74rem; color: var(--ui-muted, rgba(255,255,255,0.60)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsr-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tsr-group { font-size: 0.64rem; line-height: 1.4; padding: 0 7px; border-radius: 999px; border: 1px solid var(--hairline-strong, rgba(255,255,255,0.16)); color: var(--ui-muted, rgba(255,255,255,0.60)); }
.tsr-cost { font-size: 0.72rem; font-weight: 700; color: #fbbf24; white-space: nowrap; }
.tsr-empty { padding: 22px 16px; text-align: center; color: var(--ui-muted, rgba(255,255,255,0.60)); font-size: 0.85rem; }
.tsr-try { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; font-size: 0.78rem; color: var(--ui-muted, rgba(255,255,255,0.60)); }
.tsr-try--pad { margin-top: 0; padding: 14px 16px; }
.tsr-chip { background: var(--surface-1, rgba(255,255,255,0.035)); border: 1px solid var(--hairline-strong, rgba(255,255,255,0.16)); color: inherit; font-size: 0.78rem; padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: border-color 0.2s, color 0.2s, transform 0.2s; }
.tsr-chip:hover { border-color: #818cf8; color: #a5b4fc; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
    .tool-search-results.open { animation: none; }
    .tsr-row:hover, .tsr-row.active { transform: none; }
}

/* ====== 动效 ====== */
@keyframes panelEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes resultEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .ai-tool-panel.active, .tool-panel.active, .result-box, .gate-card, .toast { animation: none; }
    .tool-tab:hover, .ai-tool-tab:hover, .promo-card:hover, .flow-chip:hover { transform: none; }
}

/* ====== 移动端 ====== */
@media (max-width: 768px) {
    .ai-tool-tabs { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
    .form-group input, .form-group select, .form-group textarea { font-size: 16px; } /* iOS 聚焦防缩放 */
    .site-header .header-content { min-height: 40px; }
    .site-header .logo { font-size: 1.05rem; }
}
@media (max-width: 480px) {
    .container { padding: 14px; }
    .ai-stats-bar { font-size: 0.78rem; }
    .gate-card .gate-actions { flex-direction: column; }
    .gate-card .gate-actions .btn { width: 100%; }
    .flow-band { padding: 1.6rem 1.2rem; }
    .promo-card { padding: 20px; }
}