/* 博主推荐是课程资源库的阅读页，沿用首页的颜色和字体。 */
:root {
  --source-bg: var(--site-bg, #070709);
  --source-panel: var(--site-panel, #131317);
  --source-text: var(--site-text, #f2f0eb);
  --source-muted: var(--site-muted, #a3a097);
  --source-line: var(--site-line, rgba(242, 240, 235, .14));
  --source-mark: var(--site-mark, #ffd84d);
  --source-gutter: clamp(18px, 4.4vw, 72px);
  font-family: var(--site-sans, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif);
  color: var(--source-text);
  background: var(--source-bg);
  color-scheme: dark;
  font-synthesis: none;
  scroll-behavior: auto;
  scroll-padding-top: 28px;
  -webkit-text-size-adjust: 100%;
}

/* 基础排版与键盘操作 */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--source-bg);
  color: var(--source-text);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-underline-offset: 5px; overflow-wrap: anywhere; }
a:hover { color: var(--source-mark); }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a, input, select, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--source-mark);
  outline-offset: 4px;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 {
  font-weight: 600;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
p { overflow-wrap: anywhere; }
::selection { background: var(--source-mark); color: var(--source-bg); }
.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10;
  background: var(--source-mark);
  color: var(--source-bg);
  padding: 12px 16px;
}
.skip:focus { top: 12px; }
.skip:hover { color: var(--source-bg); }
[hidden] { display: none !important; }

/* 课程导航与资源库层级 */
.source-header {
  padding: 20px var(--source-gutter);
  border-bottom: 1px solid var(--source-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
}
.brand { font-size: 16px; font-weight: 600; text-decoration: none; letter-spacing: .01em; }
.source-header nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.source-header nav a { font-size: 15px; text-decoration: none; color: var(--source-muted); }
.source-header nav a:hover,
.source-header nav a[aria-current="page"] { color: var(--source-mark); }
.source-header nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; }
main, body > footer { max-width: 1380px; padding: 0 var(--source-gutter); margin: auto; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 28px;
  font-size: 14px;
  color: var(--source-muted);
}
.breadcrumb a { text-decoration: none; }
.breadcrumb [aria-current="page"] { color: var(--source-text); }

/* 开篇与首推作者 */
.opening {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 7vw;
  padding: 44px 0 56px;
  align-items: end;
}
.eyebrow { font-size: 14px; letter-spacing: .02em; color: var(--source-muted); margin-bottom: 18px; }
h1 { font-size: clamp(40px, 5.8vw, 88px); letter-spacing: -.04em; line-height: 1.12; }
.opening-copy { max-width: 36em; }
.opening-copy p { margin-bottom: 16px; }
.opening-copy > p:first-child { font-size: 1.25rem; font-weight: 600; }
.opening-copy > a { color: var(--source-mark); }
.annotation { font-size: .86rem; color: var(--source-muted); }
.first-pick {
  background: var(--source-panel);
  border-top: 1px solid var(--source-line);
  border-bottom: 1px solid var(--source-line);
  padding: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 36px;
  align-items: center;
}
.first-pick .eyebrow { color: var(--source-mark); }
.first-pick h2 { font-size: clamp(1.8rem, 3vw, 3rem); margin: 8px 0 20px; letter-spacing: -.02em; }
.first-pick p { margin-bottom: 15px; }
.first-pick .top-recommendation { font-size: 1.22rem; color: var(--source-mark); }
.first-pick .entry-links { margin-top: 20px; }
.first-pick figure { align-self: start; }

/* 所有截图保持原图颜色，点击后在弹窗查看 */
.shot-button { display: block; padding: 0; border: 0; background: transparent; width: 100%; text-align: left; }
.shot-button img { width: 100%; height: auto; border: 1px solid var(--source-line); }
figcaption { font-size: .8rem; line-height: 1.65; color: var(--source-muted); margin-top: 10px; overflow-wrap: anywhere; }
.entry-shot { max-width: 580px; margin-top: 22px; }
.entry-shot img { aspect-ratio: 1.52; object-fit: cover; object-position: top; }
.first-pick img { aspect-ratio: auto; }

/* 阅读习惯与分节标题 */
.source-habit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
  gap: 7vw;
  padding: 52px 0;
  border-bottom: 1px solid var(--source-line);
}
.source-habit h2 { font-size: 1.6rem; max-width: 10em; }
.source-habit p + p { margin-top: 18px; }
.source-habit a { color: var(--source-mark); }
.reading-path { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 22px 0; }
.reading-path li { font-size: .9rem; }
.reading-path li + li::before { content: '→'; margin-right: 20px; color: var(--source-muted); }
.section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; margin: 0 0 14px; }
.section-heading h2, .references h2 { font-size: 2rem; letter-spacing: -.02em; }
.section-heading > a, .section-heading > span { font-size: .9rem; color: var(--source-muted); }
.section-heading > a:hover { color: var(--source-mark); }

/* 搜索、筛选与完整推荐清单 */
.directory { padding: 56px 0; }
.tier-guide { max-width: 60em; color: var(--source-muted); font-size: .9rem; }
.filters {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) repeat(3, minmax(0, 1fr)) auto;
  gap: 16px;
  align-items: end;
  margin: 28px 0 12px;
}
.filters label { font-size: .85rem; display: grid; gap: 8px; min-width: 0; color: var(--source-muted); }
.filters input, .filters select {
  width: 100%;
  min-width: 0;
  height: 49px;
  padding: 11px;
  border: 1px solid var(--source-line);
  background: var(--source-panel);
  color: var(--source-text);
  border-radius: 0;
}
.filters input::placeholder { color: var(--source-muted); opacity: 1; }
.filters select option { background: var(--source-panel); color: var(--source-text); }
.filters input:focus, .filters select:focus { border-color: var(--source-mark); }
.filters button { height: 49px; background: transparent; border: 0; text-decoration: underline; text-underline-offset: 5px; padding: 0 4px; }
.filters button:hover { color: var(--source-mark); }
.result-count { font-size: .85rem; color: var(--source-muted); margin-bottom: 22px; }
.source-entry {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 32px;
  border-top: 1px solid var(--source-line);
  padding: 26px 0;
  scroll-margin-top: 24px;
}
.entry-identity, .entry-content { min-width: 0; }
.entry-identity h3 { font-size: 1.32rem; font-weight: 600; margin: 8px 0; }
.entry-tier { font-size: .85rem; }
.entry-tier[data-tier="强推"] { font-weight: 600; color: var(--source-mark); }
.entry-platform, .entry-topics { font-size: .85rem; color: var(--source-muted); }
.entry-content p + p { margin-top: 10px; }
.entry-description { font-size: 1rem; max-width: 48em; }
.entry-start { font-size: .94rem; max-width: 48em; }
.entry-start strong { font-weight: 600; }
.entry-note { font-size: .86rem; color: var(--source-muted); max-width: 55em; }
.entry-links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 14px; font-size: .88rem; }
.entry-links button { border: 0; background: transparent; padding: 0; text-decoration: underline; text-underline-offset: 5px; }
.entry-links button:hover { color: var(--source-mark); }
.empty-state, .loading-error { padding: 32px 0; border-top: 1px solid var(--source-line); }
.empty-state button, .loading-error button {
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--source-mark);
  color: var(--source-bg);
  border: 1px solid var(--source-mark);
  font-weight: 600;
}

/* 一手信息入口 */
.first-party { padding: 36px; border-top: 1px solid var(--source-line); background: var(--source-panel); }
.first-party > p { max-width: 60em; }
.official-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--source-line); }
.official-row > div { min-width: 0; }
.official-row h3 { font-size: 1.12rem; }
.official-row p { font-size: .95rem; }
.official-row .entry-links { margin-top: 10px; }

/* 可追溯来源与返回入口 */
.references { padding: 56px 0; }
.references > p { max-width: 65em; margin-top: 16px; font-size: .9rem; color: var(--source-muted); }
.references ol { padding-left: 28px; margin-top: 28px; }
.references li { padding: 12px 0 12px 6px; border-top: 1px solid var(--source-line); font-size: .9rem; scroll-margin-top: 24px; }
.references li p { font-size: .83rem; color: var(--source-muted); }
.references li:target { background: rgba(255, 216, 77, .09); outline: 1px solid var(--source-mark); outline-offset: 3px; }
.references details { margin-top: 32px; border-top: 1px solid var(--source-line); padding-top: 20px; }
.references summary { cursor: pointer; font-weight: 600; }
.references details p { font-size: .9rem; margin-top: 12px; color: var(--source-muted); }
.download { margin-top: 25px !important; }
.download a { color: var(--source-mark); }
body > footer {
  padding-top: 24px;
  padding-bottom: 35px;
  border-top: 1px solid var(--source-line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  font-size: .9rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 24px; }

/* 截图弹窗：保留原图，黄色按钮在深色背景上可辨认 */
dialog {
  max-width: min(1200px, 96vw);
  max-height: 92vh;
  border: 1px solid var(--source-line);
  padding: 20px;
  background: var(--source-panel);
  color: var(--source-text);
  overflow: auto;
}
dialog::backdrop { background: rgba(0, 0, 0, .82); }
.viewer-top { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 16px; }
.viewer-top h2 { font-size: 1.1rem; }
.viewer-top button { flex: none; padding: 6px 15px; border: 1px solid var(--source-mark); background: var(--source-mark); color: var(--source-bg); font-weight: 600; }
dialog > img { width: 100%; height: auto; }
#viewer-caption { font-size: .85rem; margin-top: 14px; color: var(--source-muted); }

/* 窄屏保持导航与筛选可换行，正文不横向溢出 */
@media (max-width: 1000px) {
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters .search-label { grid-column: 1 / -1; }
  .filters button { height: auto; justify-self: start; }
  .source-entry, .official-row { grid-template-columns: 175px minmax(0, 1fr); gap: 24px; }
  .first-pick { padding: 28px; gap: 26px; }
  .opening { gap: 30px; }
}

@media (max-width: 700px) {
  .source-header { gap: 14px; padding-top: 16px; padding-bottom: 16px; }
  .source-header nav { width: 100%; gap: 12px 20px; }
  .source-header nav a { font-size: 14px; }
  .breadcrumb { padding-top: 22px; font-size: 13px; }
  .opening { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 0; }
  h1 { font-size: 2.7rem; max-width: 7em; }
  .opening-copy > p:first-child { font-size: 1.1rem; }
  .first-pick { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 20px; }
  .first-pick h2 { font-size: 1.9rem; }
  .source-habit { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 36px 0; }
  .source-habit h2 { max-width: none; font-size: 1.5rem; }
  .reading-path { display: grid; gap: 6px; }
  .reading-path li + li::before { margin-right: 10px; }
  .directory { padding: 36px 0; }
  .section-heading { align-items: start; flex-wrap: wrap; gap: 10px; }
  .section-heading h2, .references h2 { font-size: 1.6rem; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .source-entry, .official-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0; }
  .entry-identity h3 { font-size: 1.3rem; }
  .entry-topics { margin-top: 7px; }
  .first-party { padding: 24px; }
  .references { padding: 36px 0; }
  .references ol { padding-left: 22px; }
  .entry-links { gap: 12px 18px; }
  .entry-shot { margin-top: 18px; }
  .viewer-top { gap: 15px; }
}

@media (max-width: 380px) {
  .first-pick, .first-party { padding: 18px; }
  .filters { grid-template-columns: minmax(0, 1fr); }
  .viewer-top { flex-wrap: wrap; }
  dialog { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}