/* EnglishTutor HR英语网页书 - 排版与主题样式
 * 遵循 book_design_style v1.0：Navy+Gold 商务沉稳型
 */

:root {
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --reading-width: 720px;
  --font-size: 18px;
  --line-height: 1.85;
  --gold: #b8860b;
  --gold-light: #d4a843;
  --navy: #1e3a5f;
  --navy-200: #adc2d9;
  --ink: #111827;
  --ink-muted: #6b7280;
  --bg: #ffffff;
  --card-bg: #f8fafc;
  --border: #e2e8f0;
}

.dark {
  --gold: #d4a843;
  --gold-light: #d4a843;
  --navy: #adc2d9;
  --navy-200: #84a3c7;
  --ink: #e2e8f0;
  --ink-muted: #9a9a9a;
  --bg: #0f172a;
  --card-bg: #1e293b;
  --border: #334155;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  transition: background-color .3s, color .3s;
}

/* ===== 顶部进度条 ===== */
.progress-track {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; background: transparent; z-index: 60;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width .1s linear;
}

/* ===== 阅读区 ===== */
.reading-area { max-width: var(--reading-width); margin: 0 auto; }

/* ===== Markdown 排版 ===== */
.markdown {
  font-family: var(--font-serif);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--ink);
}
.markdown h1 {
  font-size: 1.75em; font-weight: 700; color: var(--navy);
  border-bottom: 2px solid var(--gold);
  padding-bottom: .3em; margin: 1.2em 0 .8em;
}
.markdown h2 {
  font-size: 1.3em; font-weight: 600; color: var(--navy);
  margin: 1.4em 0 .6em;
  padding-left: .5em; border-left: 4px solid var(--gold);
}
.markdown h3 {
  font-size: 1.1em; font-weight: 600; color: var(--ink);
  margin: 1.2em 0 .5em;
}
.markdown p {
  text-align: justify; text-justify: inter-ideograph;
  margin: 1em 0;
}
.markdown blockquote {
  border-left: 4px solid var(--gold);
  background: var(--card-bg);
  padding: .6em 1em; margin: 1em 0;
  color: var(--ink-muted); border-radius: 0 4px 4px 0;
}
.markdown blockquote p { margin: .3em 0; }
.markdown ul, .markdown ol { margin: 1em 0; padding-left: 1.8em; }
.markdown li { margin: .4em 0; }
.markdown strong { color: var(--navy); font-weight: 600; }
.markdown em { font-style: italic; }
.markdown code {
  font-family: "JetBrains Mono", Consolas, monospace;
  background: var(--card-bg); padding: .1em .35em;
  border-radius: 3px; font-size: .9em;
}
.markdown pre {
  background: var(--card-bg); padding: .8em 1em;
  border-radius: 6px; overflow-x: auto; margin: 1em 0;
  border: 1px solid var(--border);
}
.markdown pre code { background: none; padding: 0; }
.markdown table {
  width: 100%; border-collapse: collapse; margin: 1em 0;
  font-size: .95em; display: block; overflow-x: auto;
}
.markdown th, .markdown td {
  border: 1px solid var(--border); padding: .5em .75em; text-align: left;
}
.markdown th { background: var(--card-bg); color: var(--navy); font-weight: 600; }
.markdown tr:nth-child(even) td { background: var(--card-bg); }
.markdown hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
.markdown a { color: var(--gold); text-decoration: underline; }

/* ===== 卡片 ===== */
.card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: all .25s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-2px); }

/* ===== 侧边目录 ===== */
.sidebar {
  transition: transform .3s ease;
}
@media (max-width: 1023px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; z-index: 50; transform: translateX(-100%);
    overflow-y: auto; background: var(--bg); box-shadow: 2px 0 12px rgba(0,0,0,.1);
  }
  .sidebar.open { transform: translateX(0); }
}
.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40;
}

/* 目录项 */
.toc-item {
  display: block; padding: .5rem .75rem; border-radius: 6px;
  color: var(--ink-muted); font-size: .9rem; line-height: 1.5;
  transition: all .15s; cursor: pointer;
}
.toc-item:hover { background: var(--card-bg); color: var(--navy); }
.toc-item.active {
  background: var(--card-bg); color: var(--navy); font-weight: 600;
  border-left: 3px solid var(--gold); padding-left: calc(.75rem - 3px);
}
.toc-part-title {
  font-size: .8rem; font-weight: 600; color: var(--gold);
  text-transform: uppercase; letter-spacing: .05em;
  padding: .75rem .75rem .35rem; margin-top: .5rem;
}

/* ===== 工具栏按钮 ===== */
.tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  color: var(--ink-muted); cursor: pointer; transition: all .15s;
}
.tool-btn:hover { background: var(--card-bg); color: var(--navy); }

/* ===== 封面 ===== */
.cover-wrap { max-width: 320px; margin: 0 auto; }
.cover-wrap img, .cover-wrap svg { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,.25); }

/* ===== 金句 ===== */
.quote-card { border-left: 3px solid var(--gold); }
.quote-card .quote-text { font-family: var(--font-serif); font-size: 1.05em; line-height: 1.6; }
.quote-card .quote-from { font-size: .8rem; color: var(--gold); margin-top: .5rem; }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--card-bg); }
::-webkit-scrollbar-thumb { background: var(--ink-muted); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--navy); }
* { scrollbar-width: thin; scrollbar-color: var(--ink-muted) var(--card-bg); }

/* ===== 翻页按钮 ===== */
.page-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.2rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--navy); font-weight: 500; cursor: pointer;
  transition: all .2s;
}
.page-btn:hover:not(:disabled) { background: var(--navy); color: #fff; border-color: var(--navy); }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ===== 加载态 ===== */
.loading-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); margin: 0 3px; animation: dotPulse 1.2s infinite ease-in-out;
}
.loading-dot:nth-child(2) { animation-delay: .2s; }
.loading-dot:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse { 0%,80%,100% { transform: scale(.6); opacity:.5; } 40% { transform: scale(1); opacity:1; } }

/* ===== 字号变量应用 ===== */
.font-size-host { font-size: var(--font-size); }