ai4scholar 0.1.0

package/assets/styles.css

@@ -0,0 +1,588 @@
+/* ===== 全局样式 ===== */
+html { scroll-behavior: smooth; }
+
+/* ===== 主题变量 ===== */
+:root {
+    --primary: #1e40af;
+    --primary-light: #3b82f6;
+    --primary-dark: #1e3a8a;
+    --accent: #06b6d4;
+    --bg: #f8fafc;
+    --card: #ffffff;
+    --text: #0f172a;
+    --text-secondary: #475569;
+    --text-muted: #94a3b8;
+    --border: #e2e8f0;
+    --border-light: #f1f5f9;
+    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
+    --shadow: 0 2px 8px rgb(0 0 0 / 0.08);
+    --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.1);
+    --radius-sm: 6px;
+    --radius: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+}
+
+[data-theme="sepia"] {
+    --primary: #b45309;
+    --primary-light: #d97706;
+    --primary-dark: #92400e;
+    --accent: #059669;
+    --bg: #faf7f2;
+    --card: #fffcf7;
+    --text: #292524;
+    --text-secondary: #57534e;
+    --text-muted: #a8a29e;
+    --border: #e7e5e4;
+    --border-light: #f5f5f4;
+}
+
+[data-theme="dark"] {
+    --primary: #7c9ab8;
+    --primary-light: #94b0c8;
+    --primary-dark: #5a7a96;
+    --accent: #6eb4bf;
+    --bg: #121417;
+    --card: #1a1d21;
+    --text: #e8e9eb;
+    --text-secondary: #a3a8b0;
+    --text-muted: #5c6370;
+    --border: #2a2e35;
+    --border-light: #1f2227;
+}
+
+[data-theme="green"] {
+    --primary: #059669;
+    --primary-light: #10b981;
+    --primary-dark: #047857;
+    --accent: #0891b2;
+    --bg: #f0fdf4;
+    --card: #ffffff;
+    --text: #1a3d2e;
+    --text-secondary: #3d6b56;
+    --text-muted: #6b9c85;
+    --border: #a7e3c4;
+    --border-light: #d1f5e0;
+}
+
+[data-theme="pink"] {
+    --primary: #db2777;
+    --primary-light: #ec4899;
+    --primary-dark: #be185d;
+    --accent: #8b5cf6;
+    --bg: #fdf2f8;
+    --card: #ffffff;
+    --text: #4a1942;
+    --text-secondary: #7c3a6d;
+    --text-muted: #b58aa8;
+    --border: #f5d0e8;
+    --border-light: #fce7f3;
+}
+
+[data-theme="perplexity"] {
+    --primary: #20b8cd;
+    --primary-light: #5dd3e2;
+    --primary-dark: #1a9aab;
+    --accent: #22d3ee;
+    --bg: #0a0a0a;
+    --card: #141414;
+    --text: #f5f5f5;
+    --text-secondary: #a8a8a8;
+    --text-muted: #6b6b6b;
+    --border: #262626;
+    --border-light: #1a1a1a;
+}
+
+/* ===== 基础重置 ===== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
+    font-size: 15px;
+    background: var(--bg);
+    color: var(--text);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+}
+
+/* ===== 主题切换器 ===== */
+.theme-switcher { position: fixed; top: 16px; right: 16px; z-index: 1000; }
+
+.theme-toggle {
+    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
+    cursor: pointer; display: flex; align-items: center; justify-content: center;
+    background: var(--card); box-shadow: var(--shadow); transition: all 0.2s;
+    color: var(--text-muted); padding: 0;
+}
+
+.theme-toggle:hover { transform: scale(1.08); border-color: var(--primary); color: var(--primary); }
+.theme-toggle svg { width: 18px; height: 18px; }
+
+.theme-panel {
+    position: absolute; top: 44px; right: 0; background: var(--card);
+    border: 1px solid var(--border); border-radius: var(--radius); padding: 6px;
+    box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden;
+    transform: translateY(-8px); transition: all 0.2s; display: flex; gap: 4px;
+}
+
+.theme-switcher:hover .theme-panel { opacity: 1; visibility: visible; transform: translateY(0); }
+
+.theme-btn {
+    width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
+    cursor: pointer; transition: all 0.15s;
+}
+
+.theme-btn:hover { transform: scale(1.1); }
+.theme-btn.active { border-color: var(--primary); }
+
+.theme-btn[data-theme="light"] { background: linear-gradient(135deg, #f8fafc, #e2e8f0); }
+.theme-btn[data-theme="sepia"] { background: linear-gradient(135deg, #fef3c7, #fde68a); }
+.theme-btn[data-theme="dark"] { background: linear-gradient(135deg, #1e293b, #0f172a); }
+.theme-btn[data-theme="green"] { background: linear-gradient(135deg, #a7f3d0, #34d399); }
+.theme-btn[data-theme="pink"] { background: linear-gradient(135deg, #fbcfe8, #f472b6); }
+.theme-btn[data-theme="perplexity"] { background: linear-gradient(135deg, #0a0a0a, #20b8cd); }
+
+/* ===== 主容器 ===== */
+.container { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }
+
+/* ===== 报告头部 ===== */
+.report-header {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+    border-radius: var(--radius-xl); padding: 24px 28px; margin-bottom: 20px;
+    position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
+}
+
+.report-header::before {
+    content: ''; position: absolute; top: -50%; right: -30%; width: 50%; height: 200%;
+    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
+}
+
+.report-header::after {
+    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
+    background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.3), var(--accent));
+}
+
+[data-theme="dark"] .report-header {
+    background: linear-gradient(135deg, #1e2328 0%, #15181c 100%);
+    border: 1px solid #2a2e35;
+}
+
+[data-theme="perplexity"] .report-header {
+    background: linear-gradient(135deg, #141414 0%, #0a0a0a 100%);
+    border: 1px solid #262626;
+}
+
+.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; position: relative; z-index: 1; }
+.header-brand { display: flex; align-items: center; gap: 12px; }
+
+.brand-logo { display: flex; align-items: center; }
+.brand-logo-img { 
+    height: 42px; width: auto; 
+    border-radius: 6px;
+    transition: opacity 0.2s;
+}
+.brand-logo:hover .brand-logo-img { opacity: 0.85; }
+.brand-name { font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.95); }
+a.brand-name { text-decoration: none; transition: color 0.2s; }
+a.brand-name:hover { color: white; text-decoration: underline; }
+
+.header-links { display: flex; align-items: center; gap: 10px; font-size: 13px; }
+.header-links a { color: rgba(255,255,255,0.9); text-decoration: none; transition: color 0.2s; font-weight: 500; }
+.header-links a:hover { color: white; text-decoration: underline; }
+.header-links .header-text { color: rgba(255,255,255,0.6); }
+.header-divider { color: rgba(255,255,255,0.3); }
+
+.header-links .more-skills {
+    background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 12px;
+    color: white; font-weight: 600; backdrop-filter: blur(4px);
+    border: 1px solid rgba(255,255,255,0.3); transition: all 0.2s;
+}
+.header-links .more-skills:hover {
+    background: rgba(255,255,255,0.3); text-decoration: none; transform: translateY(-1px);
+}
+
+.report-title { font-size: 26px; font-weight: 700; color: white; margin-bottom: 6px; }
+.report-subtitle { font-size: 13px; color: rgba(255,255,255,0.7); }
+
+/* ===== 搜索参数卡片 ===== */
+.search-params-card {
+    background: var(--card); border-radius: var(--radius-lg); padding: 16px 20px;
+    margin-bottom: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);
+}
+
+.search-query-section { margin-bottom: 12px; }
+
+.search-query-label {
+    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
+    letter-spacing: 1px; font-weight: 600; margin-bottom: 8px;
+    display: flex; align-items: center; gap: 6px;
+}
+
+.search-query-label svg { width: 12px; height: 12px; color: var(--primary); }
+.search-query-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
+
+.query-tag {
+    display: inline-flex; align-items: center; gap: 8px; background: var(--bg);
+    border: 1px solid var(--border); border-radius: var(--radius-sm);
+    padding: 8px 14px; font-size: 13px; font-weight: 500; max-width: 400px;
+}
+
+.query-tag .lang-badge {
+    font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 700; text-transform: uppercase;
+}
+
+.query-tag .lang-badge.zh { background: #8b5cf6; color: white; }
+.query-tag .lang-badge.en { background: var(--primary); color: white; }
+.query-arrow { color: var(--text-muted); font-size: 14px; }
+
+.search-params-row, .search-results-row {
+    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0;
+}
+
+.search-params-row { border-bottom: 1px dashed var(--border-light); }
+.row-label { font-size: 11px; color: var(--text-muted); font-weight: 600; min-width: 60px; }
+.search-params-tags { display: flex; flex-wrap: wrap; gap: 6px; }
+
+.param-tag {
+    font-size: 11px; color: var(--text-secondary); background: var(--bg);
+    padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border-light);
+}
+
+.param-tag .val { color: var(--primary); font-weight: 600; }
+.search-stats { display: flex; gap: 16px; flex-wrap: wrap; }
+
+.stat-item { display: flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--text-secondary); }
+.stat-num { font-size: 18px; font-weight: 700; color: var(--primary); }
+
+/* ===== 章节标题 ===== */
+.section-header { display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; }
+
+.section-icon {
+    width: 36px; height: 36px;
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    border-radius: var(--radius-sm); display: flex; align-items: center;
+    justify-content: center; box-shadow: var(--shadow-sm);
+}
+
+.section-icon svg { width: 18px; height: 18px; color: white; }
+.section-title { font-size: 18px; font-weight: 700; color: var(--text); }
+.section-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
+
+[data-theme="dark"] .section-icon { background: linear-gradient(135deg, #3a4550 0%, #2a3138 100%); }
+[data-theme="perplexity"] .section-icon { background: linear-gradient(135deg, #20b8cd 0%, #1a9aab 100%); }
+
+/* ===== AI 总结卡片 ===== */
+.summary-card {
+    background: var(--card); border-radius: var(--radius-lg); padding: 16px 20px;
+    margin-bottom: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);
+    position: relative;
+}
+
+.summary-card::before {
+    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
+    background: linear-gradient(180deg, var(--primary), var(--accent)); border-radius: 4px 0 0 4px;
+}
+
+[data-theme="dark"] .summary-card::before { background: linear-gradient(180deg, #7c9ab8, #5a7a96); }
+[data-theme="perplexity"] .summary-card::before { background: linear-gradient(180deg, #20b8cd, #22d3ee); }
+
+.summary-content { font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
+.summary-content strong { color: var(--text); font-weight: 600; }
+.summary-content a { color: var(--primary); text-decoration: none; font-weight: 500; }
+.summary-content a:hover { text-decoration: underline; }
+
+/* ===== 筛选栏 ===== */
+.filter-bar {
+    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
+    padding: 12px 16px; background: var(--card); border: 1px solid var(--border-light);
+    border-radius: var(--radius); margin-bottom: 16px;
+}
+
+.filter-group { display: flex; align-items: center; gap: 6px; }
+.filter-group label { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
+
+.filter-group select {
+    padding: 5px 24px 5px 8px; font-size: 11px; border: 1px solid var(--border);
+    background: var(--card); color: var(--text); border-radius: var(--radius-sm);
+    cursor: pointer; appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 6px center;
+}
+
+.filter-buttons { display: flex; gap: 4px; }
+
+.filter-btn {
+    padding: 4px 10px; font-size: 11px; border: 1px solid var(--border);
+    background: var(--card); color: var(--text-secondary); border-radius: var(--radius-sm);
+    cursor: pointer; transition: all 0.15s; font-weight: 500;
+}
+
+.filter-btn:hover { border-color: var(--primary); color: var(--primary); }
+.filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
+
+.search-group { flex: 1; min-width: 140px; max-width: 200px; }
+
+.search-group input {
+    width: 100%; padding: 5px 8px 5px 28px; font-size: 11px;
+    border: 1px solid var(--border); background: var(--card); color: var(--text);
+    border-radius: var(--radius-sm);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: 8px center;
+}
+
+.filter-stats { font-size: 11px; color: var(--text-muted); margin-left: auto; }
+.filter-stats span { font-weight: 700; color: var(--primary); }
+
+/* ===== 片段卡片网格 ===== */
+.snippets-grid { display: grid; gap: 12px; }
+
+/* ===== 片段卡片 ===== */
+.snippet-card {
+    background: var(--card); border: 1px solid var(--border-light);
+    border-radius: var(--radius); padding: 14px 16px; cursor: pointer;
+    transition: all 0.2s; position: relative;
+}
+
+.snippet-card::before {
+    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+    background: var(--border); border-radius: 3px 0 0 3px; transition: all 0.2s;
+}
+
+.snippet-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow); }
+.snippet-card:hover::before { background: var(--primary); }
+
+.snippet-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 8px; }
+.snippet-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+
+/* 匹配类型徽章 - 标题/摘要/正文 */
+.snippet-kind {
+    font-size: 10px; padding: 3px 8px; border-radius: 10px; font-weight: 600;
+    background: rgba(59, 130, 246, 0.1); color: var(--primary);
+}
+.snippet-kind.body { background: #dcfce7; color: #16a34a; }
+.snippet-kind.abstract { background: #fef3c7; color: #d97706; }
+.snippet-kind.title { background: #dbeafe; color: #2563eb; }
+
+/* 相关度徽章 - 颜色深浅随分数变化 */
+.score-badge {
+    font-size: 10px; padding: 3px 8px; border-radius: 10px; font-weight: 600;
+    background: hsl(210, var(--score-sat, 40%), var(--score-light, 85%));
+    color: hsl(210, 70%, 35%);
+}
+[data-theme="dark"] .score-badge { 
+    background: hsl(210, var(--score-sat, 40%), 25%); 
+    color: hsl(210, 60%, 70%); 
+}
+
+/* 开放获取徽章 - 不同状态不同颜色 */
+.oa-badge {
+    font-size: 9px; padding: 2px 6px; border-radius: 8px; font-weight: 700;
+    text-transform: uppercase; letter-spacing: 0.3px;
+}
+.oa-badge.gold { background: #fef3c7; color: #b45309; }
+.oa-badge.green { background: #dcfce7; color: #15803d; }
+.oa-badge.bronze { background: #fed7aa; color: #c2410c; }
+.oa-badge.hybrid { background: #e0e7ff; color: #4338ca; }
+.oa-badge.closed { background: #f1f5f9; color: #64748b; }
+
+/* 原文摘录标签 */
+.snippet-text-label {
+    font-size: 11px; font-weight: 600; color: var(--text-muted);
+    margin-bottom: 6px; display: flex; align-items: center; gap: 4px;
+}
+.snippet-text-label::before {
+    content: ''; display: inline-block; width: 3px; height: 12px;
+    background: var(--primary-light); border-radius: 2px;
+}
+
+.snippet-title {
+    font-size: 14px; font-weight: 600; margin-bottom: 6px; line-height: 1.4;
+    display: flex; align-items: flex-start; gap: 6px;
+}
+
+.snippet-num { color: var(--primary); font-weight: 700; font-size: 12px; flex-shrink: 0; }
+.snippet-title a { color: var(--text); text-decoration: none; }
+.snippet-title a:hover { color: var(--primary); }
+
+.snippet-title-cn {
+    font-size: 13px; color: var(--text-secondary); margin-bottom: 6px;
+    padding-left: 22px; line-height: 1.4;
+}
+.modal-title-cn {
+    font-size: 14px; color: var(--text-secondary); margin: -8px 0 12px 0;
+    font-style: italic;
+}
+
+.snippet-meta {
+    font-size: 12px; color: var(--text-muted); margin-bottom: 10px;
+    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+}
+
+.snippet-meta .venue { font-style: italic; color: var(--text-secondary); }
+.snippet-meta .year { font-weight: 600; color: var(--text-secondary); }
+.snippet-meta .authors { color: var(--text-muted); }
+.snippet-meta .pdf-link { 
+    color: #dc2626; font-weight: 600; text-decoration: none;
+    padding: 1px 4px; border-radius: 3px; background: rgba(220, 38, 38, 0.08);
+}
+.snippet-meta .pdf-link:hover { background: rgba(220, 38, 38, 0.15); }
+
+.snippet-text {
+    font-size: 13px; line-height: 1.6; color: var(--text-secondary);
+    background: var(--bg); padding: 10px 12px; border-radius: var(--radius-sm);
+    border-left: 2px solid var(--primary-light);
+    max-height: 130px; overflow: hidden;
+    position: relative;
+}
+.snippet-text::after {
+    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px;
+    background: linear-gradient(transparent, var(--bg));
+}
+
+[data-theme="dark"] .snippet-text { border-left-color: #5a7a96; }
+[data-theme="perplexity"] .snippet-text { border-left-color: #20b8cd; }
+
+/* Dark theme 徽章适配 */
+[data-theme="dark"] .snippet-kind.body { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
+[data-theme="dark"] .snippet-kind.abstract { background: rgba(217, 119, 6, 0.15); color: #fbbf24; }
+[data-theme="dark"] .snippet-kind.title { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
+[data-theme="dark"] .oa-badge.gold { background: rgba(180, 83, 9, 0.2); color: #fbbf24; }
+[data-theme="dark"] .oa-badge.green { background: rgba(21, 128, 61, 0.2); color: #4ade80; }
+[data-theme="dark"] .oa-badge.bronze { background: rgba(194, 65, 12, 0.2); color: #fb923c; }
+[data-theme="dark"] .oa-badge.hybrid { background: rgba(67, 56, 202, 0.2); color: #a5b4fc; }
+[data-theme="dark"] .oa-badge.closed { background: rgba(100, 116, 139, 0.2); color: #94a3b8; }
+[data-theme="dark"] .snippet-meta .pdf-link { background: rgba(220, 38, 38, 0.15); color: #f87171; }
+
+.view-detail {
+    display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
+    color: var(--primary); font-size: 11px; font-weight: 600;
+}
+
+.view-detail svg { width: 12px; height: 12px; transition: transform 0.2s; }
+.snippet-card:hover .view-detail svg { transform: translateX(2px); }
+
+/* ===== 弹窗 ===== */
+.modal {
+    display: none; position: fixed; z-index: 1000; inset: 0;
+    background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
+    padding: 16px; overflow-y: auto; justify-content: center; align-items: flex-start;
+}
+
+.modal.show { display: flex; }
+
+.modal-content {
+    background: var(--card); padding: 24px; width: 100%; max-width: 700px;
+    margin: 40px 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); position: relative;
+}
+
+.close {
+    position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
+    border-radius: 50%; background: var(--bg); border: 1px solid var(--border);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 18px; cursor: pointer; color: var(--text-muted); transition: all 0.2s;
+}
+
+.close:hover { background: var(--primary); color: white; border-color: var(--primary); }
+
+.modal-content h3 {
+    font-size: 16px; font-weight: 700; color: var(--text);
+    margin-bottom: 16px; padding-right: 40px; line-height: 1.4;
+}
+
+.modal-content h3 a { color: var(--text); text-decoration: none; }
+.modal-content h3 a:hover { color: var(--primary); }
+.modal-content p { margin: 8px 0; font-size: 13px; color: var(--text-secondary); }
+.modal-content p strong { color: var(--text); }
+.modal-content p a { color: var(--primary); text-decoration: none; font-weight: 500; }
+.modal-content p a:hover { text-decoration: underline; }
+
+[data-theme="dark"] .modal-content p a { color: #93c5fd; }
+[data-theme="dark"] .modal-content p a:hover { color: #bfdbfe; }
+[data-theme="perplexity"] .modal-content p a { color: #22d3ee; }
+[data-theme="perplexity"] .modal-content p a:hover { color: #67e8f9; }
+
+.modal-snippet {
+    background: var(--bg); padding: 16px; border-radius: var(--radius);
+    border-left: 3px solid var(--primary); margin: 12px 0;
+    font-size: 13px; line-height: 1.7; color: var(--text-secondary);
+}
+
+.citation-box {
+    background: var(--bg); padding: 12px; border-radius: var(--radius-sm);
+    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
+    border: 1px solid var(--border-light); margin-top: 12px;
+}
+
+.citation-text { font-size: 12px; line-height: 1.6; color: var(--text-secondary); flex: 1; }
+
+.copy-btn {
+    background: var(--card); border: 1px solid var(--border); cursor: pointer;
+    padding: 6px 10px; border-radius: var(--radius-sm); display: flex;
+    align-items: center; gap: 4px; flex-shrink: 0; transition: all 0.2s;
+    color: var(--text-secondary); font-size: 11px; font-weight: 500;
+}
+
+.copy-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }
+
+/* ===== 页脚 ===== */
+footer {
+    text-align: center; margin-top: 40px; padding: 24px;
+    background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--border-light);
+}
+
+footer .footer-main { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
+footer .footer-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
+
+footer .footer-links {
+    display: flex; justify-content: center; align-items: center;
+    gap: 8px 14px; flex-wrap: wrap; font-size: 13px; margin-bottom: 16px;
+}
+
+footer .footer-links span { color: var(--text-secondary); }
+footer .footer-links .sep { color: var(--text-muted); opacity: 0.5; display: none; }
+footer a { color: var(--primary); text-decoration: none; font-weight: 500; }
+footer a:hover { text-decoration: underline; }
+
+footer .footer-api { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
+
+footer .footer-blessing { font-size: 15px; color: var(--text-secondary); margin-top: 12px; font-weight: 500; }
+
+/* ===== 高亮 ===== */
+mark { background: #fef08a; color: #854d0e; padding: 1px 4px; border-radius: 3px; font-weight: 500; }
+[data-theme="sepia"] mark { background: #fde68a; }
+[data-theme="dark"] mark { background: #d4a853; color: #1a1d21; }
+[data-theme="green"] mark { background: #86efac; color: #14532d; }
+[data-theme="pink"] mark { background: #fbcfe8; color: #9d174d; }
+[data-theme="perplexity"] mark { background: #20b8cd; color: #0a0a0a; }
+
+/* ===== 滚动条 ===== */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* ===== 响应式 ===== */
+@media (max-width: 768px) {
+    .container { padding: 12px; }
+    .report-header { padding: 20px; }
+    .report-title { font-size: 22px; }
+    .header-top { flex-direction: column; gap: 12px; align-items: flex-start; }
+    .header-links { flex-wrap: wrap; }
+    .filter-bar { padding: 10px 12px; }
+    .filter-buttons { flex-wrap: wrap; }
+    .snippet-card { padding: 12px; }
+    .snippet-text { max-height: 160px; }
+    .modal-content { padding: 16px; margin: 16px 0; }
+    footer { padding: 20px 16px; }
+    footer .footer-links { 
+        display: grid; 
+        grid-template-columns: repeat(2, auto); 
+        justify-content: center;
+        gap: 6px 20px; 
+        font-size: 12px; 
+    }
+    footer .footer-main { font-size: 13px; }
+    footer .footer-desc { font-size: 11px; }
+    footer .footer-api { font-size: 11px; }
+    footer .footer-blessing { font-size: 13px; }
+}