/* --- 1. Core Color Scheme and Variables (Generative/Creative Theme) --- */
    /* 使用 :root 变量并将其封装在 .trends-report-wrapper 下，防止污染全局 */
    .trends-report-wrapper {
    	--bg-body: #05050f;
    	--card-bg: rgba(20, 20, 35, 0.7);
    	--card-border: 1px solid rgba(255, 255, 255, 0.08);
    	--text-main: #ffffff;
    	--text-muted: #9496a1;

    	/* Trend Indicator Colors */
    	--trend-up: #00ff9d;
    	/* Green - Sustained Growth */
    	--trend-hot: #ff4757;
    	/* Red - Urgent/Hot Topic */
    	--trend-breakout: #ffc312;
    	/* Sudden Spike */

    	/* Brand Color - Accent color changed to Purple/Pink, representing creativity and multimodality */
    	--accent-main: #a55eea;
    	/* Creative Primary (Purple) */
    	--accent-sub: #0fbcf9;
    	/* Technical/Global Secondary (Cyan) */
    	--accent-yellow: #ffc312;
    	--accent-orange: #ff7f50;
    	/* New Accent Color */

    	/* 模拟原 body 样式，应用于整个报告容器 */
    	background-color: var(--bg-body);
    	color: var(--text-main);
    	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    	margin: 0;
    	padding: 40px 20px;
    	/* Background Glow Effect - Purple/Pink Tones */
    	background-image:
    		radial-gradient(circle at 0% 0%, rgba(165, 94, 234, 0.15), transparent 40%),
    		radial-gradient(circle at 100% 100%, rgba(15, 188, 249, 0.1), transparent 40%);
    	min-height: 100vh;
    	display: flex;
    	justify-content: center;
    }

    .trends-report-wrapper .container {
    	max-width: 1400px;
    	width: 100%;
    }

    /* --- 2. Header Area --- */
    .trends-report-wrapper .header {
    	display: flex;
    	justify-content: space-between;
    	align-items: flex-end;
    	margin-bottom: 25px;
    	padding-bottom: 20px;
    	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .trends-report-wrapper .header-title h1 {
    	margin: 0;
    	font-size: 1.8rem;
    	letter-spacing: -0.5px;
    	background: linear-gradient(90deg, #fff, #a0a0ff);
    	-webkit-background-clip: text;
    	-webkit-text-fill-color: transparent;
    }

    .trends-report-wrapper .header-title p {
    	margin: 5px 0 0 0;
    	color: var(--text-muted);
    	font-size: 0.9rem;
    }

    .trends-report-wrapper .date-tag {
    	background: rgba(165, 94, 234, 0.1);
    	color: var(--accent-main);
    	border: 1px solid var(--accent-main);
    	padding: 6px 16px;
    	border-radius: 20px;
    	font-family: monospace;
    	font-weight: bold;
    }

    /* --- 3. Grid System --- */
    .trends-report-wrapper .grid-wrapper {
    	display: grid;
    	grid-template-columns: repeat(4, 1fr);
    	gap: 24px;
    }

    /* Card Base Style */
    .trends-report-wrapper .card {
    	background: var(--card-bg);
    	border: var(--card-border);
    	border-radius: 16px;
    	padding: 24px;
    	backdrop-filter: blur(10px);
    	display: flex;
    	flex-direction: column;
    	position: relative;
    	overflow: hidden;
    }

    .trends-report-wrapper .card-label {
    	font-size: 0.75rem;
    	text-transform: uppercase;
    	letter-spacing: 1px;
    	color: var(--text-muted);
    	margin-bottom: 15px;
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    }

    /* --- 4. Module: Hero (Top 1) --- */
    .trends-report-wrapper .card-hero {
    	grid-column: span 2;
    	background: linear-gradient(135deg, rgba(35, 25, 45, 0.9), rgba(25, 10, 20, 0.95));
    	border: 1px solid var(--accent-main);
    }

    .trends-report-wrapper .hero-content {
    	z-index: 2;
    }

    .trends-report-wrapper .hero-rank {
    	font-size: 4rem;
    	position: absolute;
    	right: 20px;
    	top: -10px;
    	font-weight: 900;
    	color: rgba(255, 255, 255, 0.03);
    	z-index: 1;
    }

    .trends-report-wrapper .keyword-main {
    	font-size: 2.5rem;
    	font-weight: 700;
    	margin: 10px 0;
    	line-height: 1.1;
    }

    .trends-report-wrapper .hero-stats {
    	display: flex;
    	gap: 30px;
    	margin-top: 30px;
    }

    .trends-report-wrapper .stat-box .val {
    	font-size: 1.5rem;
    	font-weight: bold;
    	display: block;
    }

    /* 样式调整: 确保 Hero Card 中的百分比徽章清晰可见 */
    .trends-report-wrapper .stat-box .val .trend-badge.breakout {
    	font-size: 1.1rem;
    	/* 稍微放大 */
    	padding: 4px 10px;
    	margin-left: 5px;
    	vertical-align: middle;
    }

    .trends-report-wrapper .stat-box .label {
    	font-size: 0.8rem;
    	color: var(--text-muted);
    }

    .trends-report-wrapper .trend-badge.breakout {
    	display: inline-block;
    	background: rgba(255, 195, 18, 0.15);
    	color: var(--trend-breakout);
    	padding: 2px 8px;
    	border-radius: 4px;
    	font-size: 0.9rem;
    	margin-left: 10px;
    }

    /* --- 5. Module: Trending List (List) --- */
    .trends-report-wrapper .card-list {
    	grid-column: span 1;
    }

    .trends-report-wrapper .list-row {
    	display: flex;
    	/* 修复: 确保列表项顶部对齐，防止描述文本挤压主标题 */
    	align-items: flex-start;
    	padding: 12px 0;
    	border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    }

    .trends-report-wrapper .list-row:last-child {
    	border: none;
    }

    .trends-report-wrapper .rank-small {
    	width: 24px;
    	height: 24px;
    	background: rgba(255, 255, 255, 0.1);
    	border-radius: 4px;
    	text-align: center;
    	line-height: 24px;
    	font-size: 0.8rem;
    	font-weight: bold;
    	color: var(--text-muted);
    	margin-right: 12px;
    	flex-shrink: 0;
    	/* 防止数字被压缩 */
    }

    /* Top List Accent Change */
    .trends-report-wrapper .rank-small.top {
    	background: var(--accent-main);
    	color: #000;
    }

    .trends-report-wrapper .row-info {
    	flex: 1;
    	min-width: 0;
    	/* 确保信息区域可以灵活收缩 */
    }

    .trends-report-wrapper .row-title {
    	display: block;
    	font-size: 0.95rem;
    	font-weight: 600;
    }

    .trends-report-wrapper .row-meta {
    	font-size: 0.75rem;
    	color: var(--text-muted);
    	word-break: break-word;
    	/* 强制长文本换行 */
    }

    /* 修复: 确保 Rising Star 的指数值不换行，且与关键词有足够间距 */
    .trends-report-wrapper .row-trend {
    	font-size: 0.85rem;
    	font-weight: bold;
    	white-space: nowrap;
    	/* 强制不换行 */
    	margin-left: auto;
    	/* 关键修复: 确保它推到最右侧 */
    	flex-shrink: 0;
    	/* 关键修复: 防止趋势指标被压缩 */
    	padding-left: 10px;
    	/* 确保左右元素有足够间距 */
    }

    .trends-report-wrapper .up {
    	color: var(--trend-up);
    }

    .trends-report-wrapper .stable {
    	color: #70a1ff;
    }

    /* --- 6. Module: Related News (News Feed) */
    .trends-report-wrapper .card-news {
    	grid-column: span 1;
    	border-left: 3px solid var(--accent-main);
    }

    .trends-report-wrapper .news-item {
    	margin-bottom: 15px;
    	padding-bottom: 15px;
    	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .trends-report-wrapper .news-item:last-child {
    	border: none;
    	margin: 0;
    	padding: 0;
    }

    .trends-report-wrapper .news-time {
    	font-size: 0.7rem;
    	color: var(--accent-main);
    	font-weight: bold;
    	margin-bottom: 4px;
    	display: block;
    }

    /* Styling for the new anchor tag headlines */
    .trends-report-wrapper .news-headline {
    	font-size: 0.9rem;
    	line-height: 1.4;
    	color: #ddd;
    	text-decoration: none;
    	/* Remove default underline */
    	display: block;
    	/* Make the whole headline clickable */
    }

    .trends-report-wrapper .news-headline:hover {
    	color: #fff;
    	text-decoration: underline;
    	cursor: pointer;
    }

    /* --- 7. Module: Daily Insight (Insight) --- */
    .trends-report-wrapper .card-insight {
    	grid-column: span 2;
    	background: linear-gradient(90deg, rgba(50, 25, 45, 0.8), rgba(20, 20, 35, 0.8));
    }

    .trends-report-wrapper .insight-text {
    	line-height: 1.6;
    	color: #d1d5db;
    }

    .trends-report-wrapper .highlight {
    	color: var(--accent-main);
    	font-weight: bold;
    }

    /* --- 8. Module: Audience Profile (Audience) --- */
    .trends-report-wrapper .card-audience {
    	grid-column: span 2;
    	display: flex;
    	flex-direction: row;
    	justify-content: space-around;
    	align-items: center;
    }

    .trends-report-wrapper .card-label {
    	/* Keep this definition */
    }

    .trends-report-wrapper .audience-stat {
    	text-align: center;
    }

    .trends-report-wrapper .audience-bar {
    	width: 100%;
    	height: 6px;
    	background: #333;
    	border-radius: 3px;
    	margin-top: 8px;
    	overflow: hidden;
    	width: 120px;
    }

    .trends-report-wrapper .bar-fill {
    	height: 100%;
    	border-radius: 3px;
    }

    /* --- 9. Module: Detailed Data Breakdown (Breakdown) --- */
    .trends-report-wrapper .card-breakdown {
    	grid-column: span 4;
    	margin-top: 10px;
    }

    .trends-report-wrapper .breakdown-grid {
    	display: flex;
    	gap: 30px;
    }

    .trends-report-wrapper .category-split,
    .trends-report-wrapper .language-split {
    	flex: 1;
    	min-width: 0;
    }

    .trends-report-wrapper .breakdown-title {
    	font-size: 1.1rem;
    	font-weight: 600;
    	color: var(--accent-sub);
    	margin-bottom: 15px;
    	padding-bottom: 5px;
    	border-bottom: 1px solid rgba(15, 188, 249, 0.2);
    	margin-top: 0;
    }

    .trends-report-wrapper .breakdown-row {
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	margin-bottom: 14px;
    	font-size: 0.9rem;
    }

    .trends-report-wrapper .breakdown-label {
    	flex: 1;
    	color: #ddd;
    	min-width: 120px;
    }

    .trends-report-wrapper .breakdown-percentage {
    	width: 100%;
    	max-width: 200px;
    	height: 8px;
    	background: #333;
    	border-radius: 4px;
    	margin: 0 15px;
    	overflow: hidden;
    }

    .trends-report-wrapper .percentage-fill {
    	height: 100%;
    	border-radius: 4px;
    }

    .trends-report-wrapper .breakdown-value {
    	font-weight: bold;
    	color: var(--text-main);
    	width: 40px;
    	text-align: right;
    }

    /* --- 10. Module: Tool Focus (Tools Focus) --- */
    .trends-report-wrapper .card-tools {
    	grid-column: span 4;
    	border-top: 3px solid var(--accent-sub);
    }

    .trends-report-wrapper .tool-item {
    	display: flex;
    	justify-content: space-between;
    	/* 修复: 确保列表项顶部对齐 */
    	align-items: flex-start;
    	padding: 10px 0;
    	border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    }

    .trends-report-wrapper .tool-item-info {
    	flex: 1;
    	min-width: 0;
    }

    .trends-report-wrapper .tool-name {
    	font-weight: 600;
    	color: var(--accent-sub);
    }

    /* 修复: 确保 Tool Count 的百分比不换行，且与描述有间距 */
    .trends-report-wrapper .tool-count {
    	/* Updated to represent a ratio/multiple */
    	font-weight: bold;
    	color: var(--text-main);
    	white-space: nowrap;
    	/* 强制不换行 */
    	margin-left: auto;
    	/* 关键修复: 确保它推到最右侧 */
    	flex-shrink: 0;
    	/* 关键修复: 防止百分比被压缩 */
    	padding-left: 15px;
    	/* 确保左右元素有足够间距 */
    }

    .trends-report-wrapper .tool-desc {
    	font-size: 0.8rem;
    	color: var(--text-muted);
    	word-break: break-word;
    	/* 强制长文本换行 */
    }

    /* --- 11. Module: SEO Extended Content (New SEO Block) --- */
    .trends-report-wrapper .card-seo-content {
    	grid-column: span 4;
    	background: linear-gradient(135deg, rgba(25, 25, 40, 0.9), rgba(15, 15, 25, 0.9));
    	border-left: 5px solid var(--accent-orange);
    	margin-top: 20px;
    }

    .trends-report-wrapper .seo-section {
    	margin-bottom: 30px;
    }

    .trends-report-wrapper .seo-title {
    	font-size: 1.5rem;
    	color: var(--accent-orange);
    	margin-bottom: 15px;
    	padding-bottom: 5px;
    	border-bottom: 1px solid rgba(255, 127, 80, 0.2);
    	margin-top: 0;
    	/* Important for fragment H2 */
    }

    .trends-report-wrapper .seo-subtitle {
    	font-size: 1.1rem;
    	font-weight: 600;
    	color: var(--text-main);
    	margin-top: 20px;
    	margin-bottom: 10px;
    }

    .trends-report-wrapper .seo-text {
    	line-height: 1.7;
    	color: #ccc;
    	font-size: 0.95rem;
    }

    .trends-report-wrapper .seo-text strong {
    	color: var(--accent-main);
    }

    .trends-report-wrapper .tool-link {
    	color: var(--trend-up);
    	text-decoration: underline;
    	cursor: pointer;
    }


    /* --- Responsive Design --- */
    @media (max-width: 1024px) {

    	/* On medium screens, all cards span two columns */
    	.trends-report-wrapper .grid-wrapper {
    		grid-template-columns: repeat(2, 1fr);
    	}

    	.trends-report-wrapper .card-hero,
    	.trends-report-wrapper .card-insight,
    	.trends-report-wrapper .card-audience,
    	.trends-report-wrapper .card-tools,
    	.trends-report-wrapper .card-seo-content,
    	.trends-report-wrapper .card-breakdown {
    		grid-column: span 2 !important;
    	}

    	.trends-report-wrapper .card-list,
    	.trends-report-wrapper .card-news {
    		grid-column: span 1;
    	}

    	.trends-report-wrapper .breakdown-grid {
    		flex-direction: column;
    		gap: 20px;
    	}

    	/* 确保在小屏幕上列表项不会拥挤 */
    	.trends-report-wrapper .row-info {
    		flex: 1;
    	}

    	.trends-report-wrapper .row-trend {
    		padding-left: 5px;
    	}
    }

    @media (max-width: 768px) {

    	/* On small screens, all cards stack vertically */
    	.trends-report-wrapper .grid-wrapper {
    		display: flex;
    		flex-direction: column;
    	}

    	.trends-report-wrapper .hero-stats {
    		gap: 15px;
    	}

    	.trends-report-wrapper .keyword-main {
    		font-size: 2rem;
    	}

    	.trends-report-wrapper .breakdown-percentage {
    		max-width: 100%;
    	}
    }