*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --max-w: 720px;
  --fg: #1a1a1a;
  --fg-muted: #666;
  --bg: #fff;
  --bg-alt: #f7f7f7;
  --border: #e0e0e0;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e4e4e4;
    --fg-muted: #999;
    --bg: #1a1a1a;
    --bg-alt: #242424;
    --border: #333;
    --accent: #60a5fa;
    --accent-hover: #93bbfd;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--max-w); margin: 0 auto; padding: 2rem 1.5rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Header */
.site-header { margin-bottom: 2.5rem; }
.site-header h1 { font-size: 1.75rem; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; }
.rss-link { display: inline-flex; flex-shrink: 0; }
.rss-link:hover { opacity: 0.7; text-decoration: none; }
.feed-icon { width: 18px; height: 18px; }
.site-header .description { color: var(--fg-muted); margin-bottom: 1rem; }

.header-row { display: flex; gap: 1.5rem; align-items: flex-start; }
.header-cover { width: 120px; height: 120px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; }
.header-text { flex: 1; min-width: 0; }

/* Language switcher */
.lang-switcher { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; font-size: 0.875rem; }
.lang-switcher a, .lang-switcher span { padding: 0.25rem 0.625rem; border-radius: var(--radius); border: 1px solid var(--border); }
.lang-switcher .current { background: var(--accent); color: #fff; border-color: var(--accent); }
.lang-switcher .unavailable { color: var(--fg-muted); opacity: 0.4; cursor: not-allowed; }

/* Episode list */
.episode-list { list-style: none; }
.episode-item { padding: 1rem 0; border-bottom: 1px solid var(--border); display: flex; gap: 1rem; align-items: flex-start; }
.episode-item:last-child { border-bottom: none; }
.episode-thumb { width: 92px; height: 92px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; }
.episode-content { flex: 1; min-width: 0; }
.episode-meta { font-size: 0.875rem; color: var(--fg-muted); margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.25rem; }
.episode-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; display: block; }
.episode-item audio { width: 100%; height: 36px; }

/* Episode detail */
.episode-header { margin-bottom: 2rem; }
.episode-header h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.episode-header .meta { color: var(--fg-muted); font-size: 0.9rem; margin-bottom: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.episode-header audio { width: 100%; margin-bottom: 1rem; }
.episode-cover-wrap { width: 220px; flex-shrink: 0; border-radius: var(--radius); }
.episode-cover-wrap.wide { overflow: hidden; }
.episode-cover { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.episode-cover-wrap.wide .episode-cover { width: 111.11%; margin-left: -5.556%; border-radius: 0; }
.vocab-link { text-decoration: none; white-space: nowrap; }
.vocab-link:hover { text-decoration: underline; }

.transcript h2 { font-size: 1.25rem; margin: 1.75rem 0 0.75rem; }
.transcript p { margin-bottom: 1rem; }

.back-link { display: inline-block; font-size: 0.9rem; }
.back-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.back-row .lang-switcher { margin-bottom: 0; }
.site-header .lang-switcher { margin-top: 0.75rem; margin-bottom: 0; }

/* Vocabulary */
.vocab-word { color: var(--fg); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-color: var(--accent); position: relative; }
.vocab-word:hover { color: var(--accent); text-decoration-style: solid; }

/* Vocab tooltip bubble */
.vocab-tip {
  display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.5rem 0.75rem; min-width: 240px; max-width: min(420px, calc(100vw - 1rem)); width: max-content;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12); z-index: 10;
  font-size: 0.85rem; line-height: 1.4; text-decoration: none; color: var(--fg); text-align: left;
}
.vocab-tip::after {
  content: ""; position: absolute; top: 100%; left: var(--vocab-tip-arrow-x, 50%); transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--border);
}
.vocab-tip.below { bottom: auto; top: calc(100% + 10px); }
.vocab-tip.below::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: var(--border);
}
.vocab-tip .ipa { color: var(--fg-muted); font-weight: normal; font-size: 0.8rem; }
.vocab-tip .pos { color: var(--fg-muted); font-weight: normal; font-size: 0.8rem; }
.vocab-tip-def { display: block; margin-top: 0.25rem; color: var(--fg-muted); }
.vocab-word:hover .vocab-tip { display: block; }
.vocab-word.show-tip .vocab-tip { display: block; }

.vocabulary { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.vocabulary h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.vocabulary h3 { font-size: 0.95rem; color: var(--fg-muted); margin: 1.25rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.vocabulary dl { margin: 0; }
.vocabulary dt { font-size: 1rem; margin-top: 0.5rem; }
.vocabulary dt .ipa { color: var(--fg-muted); font-weight: normal; font-size: 0.875rem; }
.vocabulary dt .pos { color: var(--fg-muted); font-weight: normal; font-size: 0.875rem; }
.vocabulary dd { margin-left: 0; padding-left: 1rem; color: var(--fg-muted); font-size: 0.9rem; margin-bottom: 0.25rem; }
.vocabulary dd .original { font-style: italic; }
.vocabulary dd[data-vocab-lang]:not(.active) { display: none; }

/* Vocab language switcher */
.vocab-lang-switcher { display: inline-flex; gap: 0.25rem; margin-left: 0.5rem; vertical-align: middle; }
.vocab-lang-switcher button { font: inherit; font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--fg-muted); cursor: pointer; }
.vocab-lang-switcher button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.vocab-lang-switcher button:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

/* Vocab tooltip multi-language */
.vocab-tip-def[data-vocab-lang]:not(.active) { display: none; }

/* Audio speed selector */
.meta .speed-selector { margin-left: auto; }
.speed-selector { font: inherit; font-size: 0.75rem; padding: 0.1rem 0.2rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--fg-muted); cursor: pointer; }

/* Footer */
.site-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--fg-muted); }
.site-footer a { color: var(--fg-muted); }

@media (max-width: 480px) {
  .container { padding: 1.25rem 1rem; }
  .header-row { flex-direction: column; align-items: center; text-align: center; }
  .header-cover { width: 100px; height: 100px; }
}