/* Brand Design Tokens - Podcast Intelligence Hub */
:root {
  --color-bg: #FFFFFF;
  --color-bg-secondary: #F5F5F5;
  --color-bg-tertiary: #FAFAFA;
  --color-bg-mint: #F0F7F4;
  --color-bg-blue: #F0F4F8;
  --color-bg-pink: #FFF0F0;
  --color-border: #E5E5E5;
  --color-border-subtle: #F0F0F0;
  --color-text: #111111;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  --color-text-inverse: #FFFFFF;
  --color-primary: #07C160;
  --color-primary-hover: #06AD55;
  --color-dark: #0A0A0A;
  --tier-high: #E54D42;
  --tier-high-bg: #FFF0F0;
  --tier-medium: #4A90D9;
  --tier-medium-bg: #F0F4F8;
  --tier-low: #07C160;
  --tier-low-bg: #F0F7F4;
  --state-warning: #F5A623;
  --state-warning-muted: #FFF8EC;
  --font-display: -apple-system, "PingFang SC", "SF Pro Display", "Microsoft YaHei", sans-serif;
  --font-body: -apple-system, "PingFang SC", "SF Pro Text", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
  --text-h1: 40px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-h4: 18px;
  --text-body-large: 18px;
  --text-body: 15px;
  --text-body-small: 13px;
  --text-caption: 12px;
  --leading-tight: 1.1;
  --leading-snug: 1.15;
  --leading-normal: 1.6;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.04);
  --transition-fast: 200ms ease;
}
* { box-sizing: border-box; }
html { background: var(--color-bg); }
body { margin: 0; min-height: 100vh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
button:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
.page-container, .nav-container, .filter-container, .content-section, .footer-container { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.top-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--color-border-subtle); backdrop-filter: blur(12px); }
.nav-container { position: relative; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 12px; padding-bottom: 12px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; border: 0; background: transparent; padding: 0; text-align: left; }
.brand-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--color-text); white-space: nowrap; }
.brand-subtitle { font-size: var(--text-caption); color: var(--color-text-tertiary); white-space: nowrap; }
.week-control { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
.week-dropdown-btn { display: flex; align-items: center; gap: 8px; min-width: 112px; justify-content: center; color: var(--color-text); background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: 8px 16px; font-weight: 500; white-space: nowrap; transition: var(--transition-fast); }
.week-dropdown-btn:hover, .week-arrow:hover { border-color: var(--color-border); }
.chevron { font-size: 16px; line-height: 1; transform: translateY(-1px); }
.week-arrows { display: flex; align-items: center; gap: 4px; }
.week-arrow { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-subtle); background: var(--color-bg); color: var(--color-text-secondary); font-size: 22px; line-height: 1; transition: var(--transition-fast); }
.week-dropdown-panel { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 8px; z-index: 120; width: 360px; box-shadow: 0 12px 40px rgba(0,0,0,.08); }
.week-panel-title { font-size: var(--text-caption); color: var(--color-text-tertiary); padding: 4px 12px 8px; font-weight: 500; }
.week-options { max-height: 320px; overflow-y: auto; }
.week-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 0; background: transparent; text-align: left; transition: background var(--transition-fast); }
.week-option:hover { background: var(--color-bg-secondary); }
.week-option.is-active { background: var(--color-bg-mint); font-weight: 500; }
.week-option span:first-child { color: var(--color-text); font-size: var(--text-body-small); }
.week-option span:last-child { color: var(--color-text-tertiary); font-size: var(--text-caption); font-family: var(--font-mono); }
.nav-actions { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.topic-action { color: var(--color-primary); background: none; border: 0; font-size: var(--text-body-small); font-weight: 500; transition: color var(--transition-fast); }
.topic-action:hover, .site-footer a:hover, .card-footer a:hover { color: var(--color-primary-hover); }
.search-action { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--color-text-tertiary); background: none; border: 0; border-radius: var(--radius-full); font-size: 18px; line-height: 1; }
.search-action:hover { background: var(--color-bg-secondary); color: var(--color-text); }

.hero-section { max-width: 1200px; margin: 0 auto; padding: 128px 32px 64px; }
.hero-shell { display: flex; gap: 48px; align-items: flex-start; }
.hero-copy { flex: 0 0 55%; max-width: 600px; }
.hero-kicker { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-tertiary); margin-bottom: 16px; letter-spacing: .02em; }
.hero-copy h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 600; line-height: var(--leading-tight); margin-bottom: 24px; }
.hero-copy p { font-size: var(--text-body-large); line-height: var(--leading-normal); color: var(--color-text-secondary); margin-bottom: 32px; }
.hero-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-meta span:first-child { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); color: var(--color-primary); background: var(--color-bg-mint); padding: 6px 14px; border-radius: var(--radius-full); font-weight: 500; }
.hero-meta span:last-child { font-size: var(--text-caption); color: var(--color-text-tertiary); }
.hero-side { flex: 1; min-width: 0; }
.quick-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.quick-stats div { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: 16px 20px; text-align: center; }
.quick-stats strong { display: block; font-family: var(--font-mono); font-size: 28px; font-weight: 700; line-height: 1; }
.quick-stats span { display: block; font-size: var(--text-caption); color: var(--color-text-tertiary); margin-top: 4px; }
.quick-stats .high { color: var(--tier-high); }
.quick-stats .medium { color: var(--tier-medium); }
.quick-stats .low { color: var(--tier-low); }
.hot-topic-card { background: var(--color-bg-secondary); border-radius: var(--radius-lg); padding: 24px; }
.hot-title { font-size: var(--text-caption); font-weight: 500; color: var(--color-text-tertiary); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .05em; }
.hot-topic-list { display: flex; flex-direction: column; gap: 12px; }
.hot-topic-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hot-topic-row span { display: flex; align-items: center; gap: 12px; font-size: var(--text-body-small); color: var(--color-text); font-weight: 500; }
.hot-topic-row i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.hot-topic-row em { font-size: var(--text-caption); color: var(--color-text-tertiary); font-family: var(--font-mono); font-style: normal; }
.hero-topic-link { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border-subtle); }
.hero-topic-link button { border: 0; background: transparent; padding: 0; font-size: var(--text-body-small); color: var(--color-primary); font-weight: 500; }

.filter-section { background: var(--color-bg-secondary); width: 100%; padding: 24px 0; }
.filter-container { display: flex; align-items: center; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.filter-container::-webkit-scrollbar { display: none; }
.filter-group { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.filter-group > span { font-size: var(--text-caption); color: var(--color-text-tertiary); font-weight: 500; white-space: nowrap; }
.filter-options { display: flex; align-items: center; gap: 4px; }
.filter-chip { font-size: var(--text-body-small); padding: 5px 14px; border-radius: var(--radius-full); border: 0; background: transparent; color: var(--color-text-secondary); font-weight: 500; white-space: nowrap; transition: var(--transition-fast); }
.filter-chip:hover { color: var(--color-text); }
.filter-chip.is-active { background: var(--color-dark); color: var(--color-text-inverse); }
.filter-divider { width: 1px; height: 24px; background: var(--color-border-subtle); flex: 0 0 auto; }
.reset-filter { flex: 0 0 auto; font-size: var(--text-body-small); color: var(--color-text-tertiary); background: none; border: 0; white-space: nowrap; }
.content-section { padding-top: 48px; padding-bottom: 96px; }
.active-filter-line { font-size: var(--text-caption); color: var(--color-text-tertiary); margin-bottom: 24px; }
.podcast-list { display: flex; flex-direction: column; gap: 32px; }
.podcast-card { background: var(--color-bg); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: 32px; transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.podcast-card:hover { border-color: var(--color-border); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.tier-badge { font-size: var(--text-caption); font-weight: 500; padding: 4px 12px; border-radius: var(--radius-full); }
.tier-badge.high { color: var(--tier-high); background: var(--tier-high-bg); }
.tier-badge.medium { color: var(--tier-medium); background: var(--tier-medium-bg); }
.tier-badge.low { color: var(--tier-low); background: var(--tier-low-bg); }
.publish-date { font-size: var(--text-caption); color: var(--color-text-tertiary); font-family: var(--font-mono); }
.podcast-card h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-snug); margin-bottom: 12px; }
.meta { font-size: var(--text-body-small); color: var(--color-text-secondary); margin-bottom: 24px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tag-row span { font-size: var(--text-caption); color: var(--color-text-secondary); background: var(--color-bg-secondary); padding: 3px 10px; border-radius: var(--radius-full); }
.summary { font-size: var(--text-body); line-height: var(--leading-normal); color: var(--color-text-secondary); margin-bottom: 32px; }
.key-point-block { border-top: 1px solid var(--color-border-subtle); padding-top: 24px; margin-bottom: 24px; }
.key-point-block h4, .episode-summary h4 { font-size: var(--text-caption); font-weight: 500; color: var(--color-text-tertiary); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .05em; }
.key-points { display: flex; flex-direction: column; gap: 16px; }
.key-point { display: flex; gap: 16px; align-items: flex-start; }
.key-point i { width: 2px; min-height: 20px; background: var(--color-primary); border-radius: 1px; margin-top: 2px; flex: 0 0 auto; }
.key-point p { font-size: var(--text-body); line-height: var(--leading-normal); color: var(--color-text); }
.episode-summary { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 24px; margin-bottom: 24px; }
.episode-summary p { color: var(--color-text-secondary); font-size: var(--text-body-small); }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--color-border-subtle); padding-top: 16px; }
.claim-status { font-size: var(--text-caption); color: var(--color-primary); background: var(--color-bg-mint); padding: 4px 10px; border-radius: var(--radius-full); }
.card-footer a { font-size: var(--text-body-small); color: var(--color-primary); text-decoration: none; font-weight: 500; }
.empty-state { border: 1px dashed var(--color-border); border-radius: var(--radius-lg); padding: 48px; text-align: center; color: var(--color-text-tertiary); }

.topic-hero { padding: 96px 0 64px; }
.topic-hero h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 600; line-height: var(--leading-tight); margin-bottom: 16px; }
.topic-hero p { max-width: 560px; font-size: var(--text-body-large); line-height: var(--leading-normal); color: var(--color-text-secondary); margin-bottom: 48px; }
.topic-pill-list { display: flex; flex-wrap: wrap; gap: 12px; }
.topic-pill { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: var(--radius-full); border: 1px solid transparent; background: var(--color-bg-secondary); color: var(--color-text); font-size: var(--text-body); font-weight: 500; white-space: nowrap; transition: var(--transition-fast); }
.topic-pill.is-active { background: var(--color-dark); color: var(--color-text-inverse); }
.topic-pill span:last-child { font-family: var(--font-mono); font-size: var(--text-caption); opacity: .6; }
.stats-row { background: var(--color-bg-secondary); padding: 32px 0; }
.stats-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.stats-container div { flex: 1; text-align: center; }
.stats-container strong { display: block; font-family: var(--font-mono); font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-tight); }
.stats-container span { display: block; font-size: var(--text-caption); color: var(--color-text-tertiary); margin-top: 4px; }
.stats-container i { width: 1px; height: 40px; background: var(--color-border-subtle); }
.topic-main { padding: 96px 0; }
.topic-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.topic-section-title { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; margin-bottom: 48px; }
.topic-section-title h2, .topic-insights h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; }
.topic-section-title p { color: var(--color-text-tertiary); font-size: var(--text-caption); }
.topic-timeline { position: relative; padding-left: 40px; }
.topic-timeline::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--color-border); }
.timeline-week { position: relative; margin-bottom: 48px; }
.timeline-week::before { content: ""; position: absolute; left: -40px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-dark); }
.timeline-week-header { margin-bottom: 16px; }
.timeline-week-header strong { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-secondary); font-weight: 500; }
.timeline-week-header span { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-tertiary); margin-left: 8px; }
.topic-episode-card, .insight-card { background: var(--color-bg); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; transition: var(--transition-fast); }
.topic-episode-card:hover, .insight-card:hover { border-color: var(--color-border); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.topic-card-meta { font-size: var(--text-caption); color: var(--color-text-secondary); margin-bottom: 8px; }
.topic-episode-card h4 { font-size: var(--text-body); font-weight: 500; color: var(--color-text); line-height: var(--leading-normal); margin-bottom: 12px; }
.topic-episode-card p, .insight-card p { color: var(--color-text-secondary); line-height: var(--leading-normal); }
.topic-card-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; color: var(--color-text-tertiary); font-size: var(--text-caption); }
.topic-card-footer a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.sentiment-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--text-caption); font-weight: 500; white-space: nowrap; }
.sentiment-bullish { background: var(--color-bg-mint); color: var(--tier-low); }
.sentiment-neutral { background: var(--color-bg-blue); color: var(--tier-medium); }
.sentiment-cautious { background: var(--state-warning-muted); color: var(--state-warning); }
.topic-insights { position: sticky; top: 88px; }
.topic-insights h2 { font-size: var(--text-h3); margin-bottom: 48px; }
#topic-insight-list { display: grid; gap: 24px; }
.insight-card div { font-family: var(--font-mono); font-size: var(--text-h2); font-weight: 700; color: var(--color-primary); line-height: var(--leading-tight); margin-bottom: 12px; }
.insight-card h3 { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 600; margin-bottom: 8px; line-height: var(--leading-snug); }
.site-footer { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border-subtle); }
.footer-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; padding-bottom: 24px; }
.footer-container span, .footer-container a { font-size: var(--text-caption); color: var(--color-text-tertiary); text-decoration: none; }
.footer-container a { color: var(--color-primary); }

@media (max-width: 840px) {
  .page-container, .nav-container, .filter-container, .content-section, .footer-container { padding-left: 24px; padding-right: 24px; }
  .nav-container { display: grid; grid-template-columns: 1fr auto; }
  .week-control { position: static; transform: none; grid-column: 1 / -1; order: 3; justify-content: center; }
  .hero-section { padding: 80px 24px 48px; }
  .hero-shell { flex-direction: column; }
  .hero-copy { flex: 1 1 auto; max-width: none; }
  .filter-container { align-items: flex-start; }
  .topic-main-grid { grid-template-columns: 1fr; }
  .topic-insights { position: static; }
  .episode-summary { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero-copy h1, .topic-hero h1 { font-size: 34px; }
  .quick-stats, .stats-container { display: grid; grid-template-columns: 1fr; }
  .stats-container i { display: none; }
  .podcast-card { padding: 24px; }
  .card-footer, .footer-container { flex-direction: column; align-items: flex-start; }
  .week-dropdown-panel { width: calc(100vw - 32px); }
}