:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --border: rgba(0, 0, 0, 0.08);
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-tint: rgba(0, 113, 227, 0.1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.18);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 980px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --glass-bg: rgba(255, 255, 255, 0.68);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-bg-soft: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: 24px;
  --reader-font-size: 17px;
  --reader-max-width: 700px;
  --reader-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: #131314;
    --border: rgba(255, 255, 255, 0.1);
    --text: #f5f5f7;
    --text-secondary: #98989d;
    --accent: #2997ff;
    --accent-hover: #4fa9ff;
    --accent-tint: rgba(41, 151, 255, 0.16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
    --glass-bg: rgba(28, 28, 30, 0.6);
    --glass-bg-strong: rgba(28, 28, 30, 0.74);
    --glass-bg-soft: rgba(28, 28, 30, 0.42);
    --glass-border: rgba(255, 255, 255, 0.1);
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.35);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 通用按钮 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background var(--ease) 0.15s, transform var(--ease) 0.15s, opacity var(--ease) 0.15s;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.96);
  opacity: 0.85;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  background: var(--accent-tint);
  border-color: transparent;
  color: var(--accent);
}

.btn-danger {
  background: var(--surface);
  color: #ff3b30;
  border: 1px solid rgba(255, 59, 48, 0.35);
}

.btn-danger:hover {
  background: rgba(255, 59, 48, 0.1);
  border-color: transparent;
}

.settingsDangerZone {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.btn-small {
  padding: 5px 12px;
  font-size: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 顶栏 ---------- */

#topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(245, 245, 247, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}

@media (prefers-color-scheme: dark) {
  #topbar {
    background: rgba(28, 28, 30, 0.72);
  }
}

/* 只有原生 App 壳离线兜底显示缓存内容时才会出现，网页版永远不会触发(见 app.js 的
   setOfflineBanner) */
#offlineBanner {
  position: sticky;
  top: 0;
  z-index: 101;
  text-align: center;
  font-size: 12px;
  padding: 6px 12px;
  background: #ff9500;
  color: #fff;
}

#offlineBanner.hidden {
  display: none;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.usageBadge {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.doc-select {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  max-width: 220px;
  cursor: pointer;
}

/* ---------- 字号/版式设置 ---------- */

.readerSettingsWrap {
  position: relative;
}

.readerSettingsBtn {
  font-weight: 600;
  font-size: 13px;
  font-family: Georgia, "Times New Roman", serif;
}

#readerSettingsPanel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--glass-border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 150;
  animation: popIn 0.22s var(--spring-ease);
}

#readerSettingsPanel.hidden {
  display: none;
}

.settingsRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settingsLabel {
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.settingsOptions {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 3px;
}

.settingsOptions button {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--ease) 0.15s, color var(--ease) 0.15s;
}

.settingsOptions button.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.settingsRow-slider {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.settingsRow-slider.hidden {
  display: none;
}

.settingsRow-slider input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.settingsSliderValue {
  font-size: 12px;
  color: var(--text-secondary);
  align-self: flex-end;
}

/* ---------- 粘贴文章弹层 ---------- */

#pastePanelOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#pastePanelOverlay.hidden {
  display: none;
}

#pastePanel {
  width: min(560px, 90vw);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: popIn 0.28s var(--spring-ease);
}

.pasteTabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  margin-bottom: 4px;
}

.pasteTab {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--ease) 0.15s, color var(--ease) 0.15s;
}

.pasteTab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.pasteTabContent {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pasteTabContent.hidden {
  display: none;
}

.urlHint {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

#pasteFromRecommendHint.hidden {
  display: none;
}

#pastePanel input[type="text"] {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
}

#pastePanel textarea {
  min-height: 220px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
}

#pastePanel input[type="text"]:focus,
#pastePanel textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.pasteActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- AI 推荐文章弹层 ---------- */

#recommendPanelOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#recommendPanelOverlay.hidden {
  display: none;
}

#recommendPanel {
  width: min(640px, 90vw);
  max-height: 82vh;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: popIn 0.28s var(--spring-ease);
}

.recommendHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recommendHeader h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#recommendLangHint {
  margin: -6px 0 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

#recommendList {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.recommend-loading {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 30px 0;
  margin: 0;
}

#nativeNewsPanelOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#nativeNewsPanelOverlay.hidden {
  display: none;
}

#nativeNewsPanel {
  width: min(640px, 90vw);
  max-height: 82vh;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: popIn 0.28s var(--spring-ease);
}

#nativeNewsLangHint {
  margin: -6px 0 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

#nativeNewsList {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.recCard {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: var(--glass-bg-soft);
}

.recCard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.rec-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent);
}

.rec-tag-difficulty {
  background: rgba(52, 199, 89, 0.14);
  color: #248a3d;
}

@media (prefers-color-scheme: dark) {
  .rec-tag-difficulty {
    color: #30d158;
  }
}

.recCard-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
  color: var(--text);
}

.recCard-reason {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.recCard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recCard-source {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ---------- 全局搜索弹层 ---------- */

#searchPanelOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#searchPanelOverlay.hidden {
  display: none;
}

#searchPanel {
  width: min(560px, 90vw);
  max-height: 78vh;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: popIn 0.28s var(--spring-ease);
}

#searchPanel h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#searchInput {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
}

#searchInput:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

#searchResults {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.searchResultCard {
  cursor: pointer;
  transition: transform var(--ease) 0.15s, box-shadow var(--ease) 0.15s;
}

.searchResultCard:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.searchToolbar {
  display: flex;
  gap: 8px;
}

.searchBulkBar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.searchBulkBar.hidden {
  display: none;
}

.searchSelectedCount {
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
}

.searchCard-checkbox {
  margin-right: 10px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.searchResultCard-row {
  display: flex;
  align-items: flex-start;
}

/* ---------- 文章管理弹层 ---------- */

#docManagerPanelOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#docManagerPanelOverlay.hidden {
  display: none;
}

#docManagerPanel {
  width: min(560px, 90vw);
  max-height: 78vh;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: popIn 0.28s var(--spring-ease);
}

#docManagerPanel h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#docManagerList {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.docCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--glass-bg-soft);
  transition: transform var(--ease) 0.15s;
}

.docCard-info {
  min-width: 0;
}

.docCard-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docCard-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.docCard-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.docCard-open,
.docCard-delete {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background var(--ease) 0.15s, color var(--ease) 0.15s;
}

.docCard-open {
  background: var(--accent-tint);
  color: var(--accent);
}

.docCard-open:hover {
  background: var(--accent);
  color: #fff;
}

/* ---------- 生词复习弹层 ---------- */

#reviewPanelOverlay,
#reviewSessionOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#reviewPanelOverlay.hidden,
#reviewSessionOverlay.hidden {
  display: none;
}

#reviewPanel,
#reviewSessionPanel {
  width: min(440px, 90vw);
  max-height: 78vh;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: popIn 0.28s var(--spring-ease);
}

#reviewPanel h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#reviewDueCount {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

#reviewProgress {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

#reviewCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  min-height: 160px;
  justify-content: center;
  text-align: center;
}

.reviewCard-front {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reviewCard-word {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.reviewCard-back {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.reviewCard-back.hidden {
  display: none;
}

.reviewCard-meta {
  font-size: 13px;
  color: var(--text-secondary);
}

.reviewCard-meaning {
  font-size: 16px;
  color: var(--text);
}

.reviewCard-sentence {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

.reviewCard-forms {
  font-size: 12px;
  color: var(--text-secondary);
}

.reviewCard-forms.hidden {
  display: none;
}

#btnReviewPronounce.hidden,
#btnReviewReveal.hidden,
#btnReviewDontKnow.hidden,
#btnReviewKnow.hidden {
  display: none;
}

/* ---------- 学习统计弹层 ---------- */

#statsPanelOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#statsPanelOverlay.hidden {
  display: none;
}

#statsPanel {
  width: min(480px, 90vw);
  max-height: 82vh;
  overflow-y: auto;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: popIn 0.28s var(--spring-ease);
}

#statsPanel h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.statsStreakRow {
  text-align: center;
}

.statsStreakBig {
  font-size: 40px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.statsStreakRow p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

#statsWeekStrip {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.statsWeekCell {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.statsWeekCell.active {
  background: var(--accent);
  border-color: var(--accent);
}

.statsTiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.statTile {
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
}

.statTile-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.statTile-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.statsBlockLabel {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

#statsAccuracyChart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
}

.accBar {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.accBar-fill {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 3px;
}

.accBar-fill.know {
  background: #34c759;
}

.accBar-fill.dontknow-only {
  background: #ff3b30;
}

.accBar-fill.empty {
  background: var(--border);
}

/* ---------- 升级到 Pro（邮箱登记 + 自愿支持）---------- */

#proPanelOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#proPanelOverlay.hidden {
  display: none;
}

#proPanel {
  width: min(480px, 90vw);
  max-height: 82vh;
  overflow-y: auto;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: popIn 0.28s var(--spring-ease);
}

#proPanel h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#iapProBlock.hidden,
#proWaitlistBlock.hidden,
#proSupportBlock.hidden {
  display: none;
}

.proFeatureList {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ---------- 站长专属统计页面 ---------- */

#adminStatsPanelOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#adminStatsPanelOverlay.hidden {
  display: none;
}

#adminStatsPanel {
  width: min(480px, 90vw);
  max-height: 82vh;
  overflow-y: auto;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: popIn 0.28s var(--spring-ease);
}

#adminStatsPanel h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.adminStatsTiles {
  grid-template-columns: 1fr 1fr;
}

.adminStatsChart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
}

/* ---------- 沉浸阅读结束后的"保存本次生词"确认弹层 ---------- */

#immersionSaveOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#immersionSaveOverlay.hidden {
  display: none;
}

#immersionSavePanel {
  width: min(480px, 90vw);
  max-height: 78vh;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: popIn 0.28s var(--spring-ease);
}

#immersionSavePanel h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#immersionSaveList {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.immersionSaveRow {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--glass-bg-soft);
}

.immersionSaveRow-text {
  font-size: 13px;
  min-width: 0;
}

.immersionSaveRow-target {
  font-weight: 600;
}

.immersionSaveRow-original {
  color: var(--text-secondary);
}

.docCard-delete {
  background: transparent;
  color: var(--text-secondary);
}

.docCard-delete:hover {
  background: rgba(255, 59, 48, 0.12);
  color: #ff3b30;
}

/* ---------- 左侧导航栏 ---------- */

#sideNav {
  width: 84px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 16px 10px;
  border-right: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.navItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.2s var(--spring-ease), color 0.2s var(--spring-ease), transform 0.15s var(--spring-ease);
  font-family: inherit;
}

.navItem:hover:not(:disabled) {
  background: var(--accent-tint);
  color: var(--accent);
}

.navItem.active {
  background: var(--accent-tint);
  color: var(--accent);
}

.navItem:active:not(:disabled) {
  transform: scale(0.94);
  opacity: 0.85;
}

.navItem-disabled {
  opacity: 0.4;
  cursor: default;
}

.navItem.hidden {
  display: none;
}

.navItem.navTour-highlight {
  box-shadow: 0 0 0 3px var(--accent-tint), 0 0 0 6px rgba(0, 113, 227, 0.15);
  border-radius: var(--radius-md);
  animation: navTourPulse 1.6s ease-in-out infinite;
}

@keyframes navTourPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-tint), 0 0 0 6px rgba(0, 113, 227, 0.15); }
  50% { box-shadow: 0 0 0 5px var(--accent-tint), 0 0 0 10px rgba(0, 113, 227, 0.08); }
}

#navTourTooltip {
  position: fixed;
  z-index: 300;
  width: 260px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
  animation: popIn 0.22s var(--spring-ease);
}

#navTourTooltip.hidden {
  display: none;
}

#navTourTooltip p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}

.navTourFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#navTourStep {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.navTourBtns {
  display: flex;
  gap: 8px;
}

.navIcon {
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navIcon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.navLabel {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.navDivider {
  height: 1px;
  background: var(--border);
  margin: 8px 6px;
}

/* ---------- "更多"收纳菜单(生词本搜索/母语新闻/复习/统计/设置/站长统计) ---------- */

.navMoreWrap {
  position: relative;
}

#navMoreMenu {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 0;
  width: 200px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--glass-border);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 150;
  animation: popIn 0.22s var(--spring-ease);
}

#navMoreMenu.hidden {
  display: none;
}

.navMoreItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  text-align: left;
  width: 100%;
}

.navMoreItem:hover {
  background: var(--accent-tint);
  color: var(--accent);
}

.navMoreItem .navIcon svg {
  width: 18px;
  height: 18px;
}

.navMoreItem.hidden {
  display: none;
}

/* 这两个按钮只在窄屏(见文件末尾的响应式区块)才用得上——桌面端 #sidebar 一直显示，不需要开关 */
#btnToggleSidebar,
#btnCloseSidebar {
  display: none;
}

/* ---------- 欢迎弹层(注册成功) ---------- */

#welcomeModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#welcomeModalOverlay.hidden {
  display: none;
}

#welcomePanel {
  width: min(480px, 90vw);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: popIn 0.28s var(--spring-ease);
}

#welcomePanel h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#welcomeTagline {
  margin: 0 0 4px;
}

#welcomeFeatureGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}

.welcomeFeatureCard {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg-soft);
  padding: 12px;
}

.welcomeFeatureIcon {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
}

.welcomeFeatureIcon svg {
  width: 20px;
  height: 20px;
}

.welcomeFeatureTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.welcomeFeatureDesc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.pasteLanguageRow {
  margin-top: 2px;
}

/* ---------- 首次访问的语言选择弹窗 ---------- */

#languagePickerOverlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#languagePickerOverlay.hidden {
  display: none;
}

#languagePickerPanel {
  width: min(360px, 90vw);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  animation: popIn 0.28s var(--spring-ease);
}

#languagePickerHeading {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--text);
}

#languagePickerOptions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.langPickerOption {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--ease) 0.15s, background var(--ease) 0.15s, transform 0.15s var(--spring-ease), opacity var(--ease) 0.15s;
}

.langPickerOption:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.langPickerOption:active {
  transform: scale(0.97);
  opacity: 0.88;
}

.langPickerOption.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.languagePickerSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.languagePickerSection .settingsBlockLabel {
  margin: 0;
}

.languagePickerSection .doc-select {
  width: 100%;
  max-width: none;
}

#languagePickerHint {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
}

#btnLanguagePickerConfirm {
  width: 100%;
}

/* ---------- 主体布局 ---------- */

#main {
  display: flex;
  height: calc(100vh - 57px);
}

#viewer {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

#readingProgress {
  position: sticky;
  top: 0;
  height: 3px;
  flex-shrink: 0;
  background: transparent;
  z-index: 10;
}

#readingProgressFill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.15s linear;
}

#viewerContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 32px;
}

#emptyState {
  margin: auto;
  color: var(--text-secondary);
  font-size: 15px;
  text-align: center;
  max-width: 420px;
}

.emptyState-hint {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
}

.emptyStateActions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.emptyState-or {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.text-doc {
  max-width: var(--reader-max-width);
  width: 100%;
  background: var(--surface);
  padding: 48px 56px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  font-family: var(--reader-font-family);
  transition: max-width 0.2s var(--ease);
}

.articleHeader {
  width: 100%;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.articleTitle {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text);
}

.articleMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.articleSource {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.articleSource:hover {
  text-decoration: underline;
}

.articleReadAloudBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
}

.articleReadAloudBtn:hover {
  text-decoration: underline;
}

.tts-sentence-active {
  background: var(--accent-tint);
  border-radius: 3px;
}

#readAloudBar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}

#readAloudBar.hidden {
  display: none;
}

#readAloudBar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--ease) 0.15s;
}

#readAloudBar button:hover {
  background: var(--accent-tint);
}

#immersionLoadingBar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  color: var(--text-secondary);
}

#immersionLoadingBar.hidden {
  display: none;
}

.spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid var(--glass-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.text-para {
  font-size: var(--reader-font-size);
  line-height: 1.85;
  letter-spacing: -0.003em;
  color: var(--text);
  margin: 0 0 20px;
  cursor: text;
  transition: font-size 0.15s var(--ease);
}

.text-para:last-child {
  margin-bottom: 0;
}

.text-para::selection,
.text-para ::selection {
  background: var(--accent-tint);
}

.known-word {
  background: transparent;
  color: inherit;
  border-bottom: 2px solid rgba(52, 199, 89, 0.55);
  padding-bottom: 1px;
  cursor: pointer;
}

/* 沉浸模式里 AI 自动替换的词——虚线下划线，跟已经存进生词本的实线 .known-word 区分开，
   一眼能看出"这个还没学"跟"这个已经学过了"的区别 */
.immersion-word {
  background: transparent;
  color: inherit;
  border-bottom: 2px dashed var(--accent);
  padding-bottom: 1px;
  cursor: pointer;
}

/* ---------- 已存生词的释义弹层(点击文章里的高亮词触发) ---------- */

#wordPopup {
  position: absolute;
  z-index: 1000;
  width: 260px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--glass-border);
  padding: 14px 16px;
  animation: popIn 0.22s var(--spring-ease);
}

#wordPopup.hidden {
  display: none;
}

.wordPopup-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.wordPopup-word {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.wordPopup-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.wordPopup-meaning {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
}

.wordPopup-sentence {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-bottom: 10px;
}

.wordPopup-forms {
  font-size: 12px;
  color: var(--text-secondary);
  margin: -6px 0 10px;
}

.wordPopup-forms.hidden {
  display: none;
}

.wordPopup-actions {
  display: flex;
  justify-content: flex-end;
}

.wordPopup-delete {
  font-size: 11px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--ease) 0.15s, color var(--ease) 0.15s;
}

.wordPopup-delete:hover {
  background: rgba(255, 59, 48, 0.12);
  color: #ff3b30;
}

/* ---------- 侧栏 ---------- */

#sidebar {
  width: 360px;
  flex-shrink: 0;
  border-left: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  overflow-y: auto;
  padding: 20px;
}

.sidebarHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 4px 14px;
}

#sidebar h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 0;
  flex-shrink: 0;
}

.sidebarHeaderActions {
  display: flex;
  gap: 6px;
}

.history-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 40px;
  line-height: 1.6;
}

.annotation {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--glass-bg-soft);
  box-shadow: var(--shadow-sm);
  animation: popIn 0.24s var(--spring-ease);
}

.annotation-saved {
  box-shadow: none;
}

.ann-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
  background: var(--accent-tint);
  color: var(--accent);
}

.ann-type-passage {
  background: rgba(255, 149, 0, 0.14);
  color: #c9720a;
}

@media (prefers-color-scheme: dark) {
  .ann-type-passage {
    color: #ffb340;
  }
}

.ann-text-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.ann-text {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

/* ---------- 全站统一的线条图标(禁止用 emoji，见 DESIGN_GUIDELINES.md) ---------- */

.inline-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  vertical-align: -3px;
  margin-right: 4px;
  color: currentColor;
}

#welcomePanel h2 .inline-icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: -4px;
}

.pronounce-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: background var(--ease) 0.15s;
}

.pronounce-btn .inline-icon {
  margin-right: 0;
}

.pronounce-btn:hover {
  background: var(--surface-2);
}

.ann-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.ann-explanation {
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--text);
  opacity: 0.85;
  margin-bottom: 10px;
}

.ann-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ann-save {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--ease) 0.15s, color var(--ease) 0.15s;
}

.ann-save:hover:not(:disabled) {
  background: var(--accent-tint);
}

.ann-save:disabled {
  opacity: 0.5;
  cursor: default;
  border-color: var(--border);
  color: var(--text-secondary);
}

.ann-sync-status {
  font-size: 11px;
  color: var(--text-secondary);
}

.ann-explanation-error {
  color: var(--danger, #ff3b30);
  opacity: 1;
}

.ann-retry {
  margin-top: 4px;
}

.ann-retry.hidden {
  display: none;
}

.ann-actions.hidden {
  display: none;
}

.ann-retry-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--ease) 0.15s;
}

.ann-retry-btn:hover {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: transparent;
}

.ann-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

.ann-footer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ann-source {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ann-date {
  flex-shrink: 0;
}

.ann-delete-btn {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--ease) 0.15s, color var(--ease) 0.15s;
}

.ann-delete-btn:hover {
  background: rgba(255, 59, 48, 0.12);
  color: #ff3b30;
}

.ann-context {
  font-size: 12px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-secondary);
  margin: -4px 0 10px;
}

.ann-lemma,
.ann-forms {
  font-size: 12px;
  color: var(--text-secondary);
  margin: -2px 0 6px;
}

.ann-lemma.hidden,
.ann-forms.hidden {
  display: none;
}

.ann-footer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ann-edit-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: background var(--ease) 0.15s, color var(--ease) 0.15s;
}

.ann-edit-btn:hover {
  background: var(--accent-tint);
  color: var(--accent);
}

.ann-edit-btn .inline-icon {
  margin-right: 0;
}

.ann-edit-input,
.ann-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
  margin-bottom: 8px;
}

.ann-edit-input:focus,
.ann-edit-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.ann-edit-textarea {
  min-height: 56px;
  resize: vertical;
}

/* ---------- 划词/划句浮动工具条 ---------- */

#selectionToolbar {
  position: absolute;
  z-index: 1000;
  background: rgba(29, 29, 31, 0.82);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 4px;
  box-shadow: var(--shadow-lg);
  animation: popIn 0.22s var(--spring-ease);
}

#selectionToolbar.hidden {
  display: none;
}

#selectionToolbar button {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #fff;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background var(--ease) 0.15s, transform 0.15s var(--spring-ease), opacity var(--ease) 0.15s;
}

#btnPronounce {
  padding: 8px 10px;
}

#btnPronounce .inline-icon {
  margin-right: 0;
}

#selectionToolbar button:hover {
  background: rgba(255, 255, 255, 0.15);
}

#selectionToolbar button:active {
  transform: scale(0.94);
  opacity: 0.85;
}

#btnPronounce.hidden {
  display: none;
}

/* ---------- 账号设置(顶栏齿轮图标) ---------- */

.accountSettingsBtn {
  font-size: 15px;
  padding: 8px 12px;
}

#accountSettingsPanelOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}

#accountSettingsPanelOverlay.hidden {
  display: none;
}

#accountSettingsPanel {
  width: min(440px, 90vw);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: popIn 0.28s var(--spring-ease);
}

#accountSettingsPanel h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.settingsUserLine {
  margin: -6px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.settingsBlock {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settingsBlockRow {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.settingsBlockLabel {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

#aiRelayBlock.hidden {
  display: none;
}

.settingsSelect,
#accountSettingsPanel input[type="password"],
#accountSettingsPanel input[type="text"],
#accountSettingsPanel input[type="email"] {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
}

.settingsSelect:focus,
#accountSettingsPanel input[type="password"]:focus,
#accountSettingsPanel input[type="text"]:focus,
#accountSettingsPanel input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

#sheetsSyncToggle {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---------- 登录(邀请码) ---------- */

#loginOverlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

#loginOverlay.hidden {
  display: none;
}

#loginPanel {
  width: min(380px, 90vw);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: popIn 0.28s var(--spring-ease);
}

#loginFormView,
#forgotPasswordView,
#resetPasswordView {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#loginFormView.hidden,
#forgotPasswordView.hidden,
#resetPasswordView.hidden {
  display: none;
}

#loginPanel h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#loginPanel input[type="text"],
#loginPanel input[type="password"],
#loginPanel input[type="email"] {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
}

#loginPanel input[type="text"]:focus,
#loginPanel input[type="password"]:focus,
#loginPanel input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

#loginPanel .pasteActions {
  justify-content: stretch;
}

#loginPanel .pasteActions .btn {
  flex: 1;
}

.linkBtn {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin: -4px 0 0;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--accent);
  cursor: pointer;
}

.linkBtn:hover {
  text-decoration: underline;
}

.loginError {
  margin: 0;
  font-size: 12px;
  color: #ff3b30;
}

.loginError.hidden {
  display: none;
}

#turnstileWidget {
  display: flex;
  justify-content: center;
  margin: 4px 0;
}

.loginLegalLinks {
  margin: 10px 0 0;
  font-size: 11px;
  text-align: center;
  color: var(--text-secondary);
}

.loginLegalLinks a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.loginDivider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.loginDivider::before,
.loginDivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.loginGoogleBtn,
.loginAppleBtn {
  width: 100%;
}

/* ---------- 打印(文章 + 生词表 + 句子笔记) ---------- */

#printArea {
  display: none;
}

.printTitle {
  font-size: 22px;
  margin: 0 0 4px;
}

.printMeta {
  font-size: 12px;
  color: #555;
  margin: 0 0 20px;
  word-break: break-all;
}

.printArticleBody p {
  font-size: 13px;
  line-height: 1.8;
  margin: 0 0 14px;
}

.printMarkLabel {
  font-size: 0.7em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}

.printMarkLabelWord {
  color: #0071e3;
}

.printMarkLabelSentence {
  color: #c9720a;
}

.printMarkSentence {
  border-bottom: 1px dashed #c9720a;
}

.printSectionTitle {
  font-size: 15px;
  margin: 24px 0 10px;
  padding-top: 14px;
  border-top: 1px solid #ccc;
}

.printVocabTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.printVocabTable th,
.printVocabTable td {
  border: 1px solid #ccc;
  padding: 5px 8px;
  text-align: left;
}

.printVocabTable th {
  background: #f2f2f2;
}

.printSentenceList {
  font-size: 12px;
  line-height: 1.6;
  padding-left: 20px;
  margin: 0;
}

.printSentenceList li {
  margin-bottom: 10px;
}

.printSentenceOriginal {
  font-weight: 600;
}

.printSentenceAnalysis {
  color: #444;
  white-space: pre-wrap;
  margin-top: 2px;
}

/* Word "普通"模板的标准页边距是上下左右各 1 英寸，浏览器默认的打印页边距比这个窄很多。 */
@page {
  margin: 1in;
}

@media print {
  /* html/body 平时靠 overflow-x:hidden 防止横向滚动，但 CSS 规则规定"x/y 只设一边
     为非 visible 时，另一边会被浏览器当成 auto 处理"，于是 html/body 变成了一个
     带滚动条的容器。Chrome 打印分页时，只要祖先节点是"可滚动容器"就不会真正分页，
     只会把第一屏那么高的内容当成唯一一页，后面的文章正文/生词表/句子表全部被截断。
     打印时强制把 html/body 的 overflow 改回 visible，让内容变成能正常分页的普通文档流。 */
  html,
  body {
    overflow: visible !important;
    height: auto !important;
  }

  body > *:not(#printArea) {
    display: none !important;
  }

  #printArea {
    display: block !important;
  }
}

/* ---------- 响应式：窄屏(平板及以下) ---------- */

@media (max-width: 860px) {
  /* 顶栏在窄屏下可能换行变成两行，高度不再是固定的 57px，#main 也就不能再用
     calc(100vh - 57px) 这种写死的算法——改成让 body 用 flex 竖着排列，
     顶栏按实际内容撑开高度，#main 自动吃掉剩下的空间，不用猜顶栏到底多高。 */
  body {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  #topbar {
    flex-shrink: 0;
    padding: 12px 16px;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .topbar-actions {
    flex-wrap: wrap;
    row-gap: 8px;
    justify-content: flex-end;
  }

  /* 高度交给上面的 body flex 布局自动算，这里只需要额外用 padding-bottom
     留出贴底导航栏(64px)的空间，不然 #viewer 的框会延伸到导航栏底下。 */
  #main {
    height: auto;
    flex: 1;
    min-height: 0; /* 让里面 #viewer 的 overflow:auto 在 flex 容器里正常生效 */
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  /* 左侧图标栏在桌面是竖排的侧栏，这里改成贴底的横向 Tab 栏 */
  #sideNav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: 64px;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-right: none;
    border-top: 1px solid var(--glass-border);
    z-index: 150;
  }

  .navItem {
    flex: 1;
    padding: 4px 2px;
  }

  /* "更多功能开发中" 占位按钮和分隔线在底部栏这么窄的空间里意义不大，先藏起来 */
  .navDivider,
  .navItem-disabled {
    display: none;
  }

  /* .navMoreWrap 本身不是 .navItem，手动补上跟其它 nav 按钮一样的等分空间；
     里面的 #btnNavMore 已经是 .navItem，会在这个 flex 容器内再拿到 flex:1 撑满。 */
  .navMoreWrap {
    flex: 1;
    display: flex;
  }

  /* 桌面端菜单往侧栏右侧展开；手机端 #sideNav 变成贴底横条，改成往上方展开 */
  #navMoreMenu {
    left: auto;
    right: 6px;
    bottom: calc(100% + 8px);
    top: auto;
  }

  #btnToggleSidebar {
    display: flex;
  }

  #viewerContent {
    padding: 24px 16px;
  }

  .text-doc {
    padding: 24px 20px;
  }

  /* 历史记录侧栏桌面端一直显示；窄屏下默认收起，点开时整块滑到最前面盖满全屏。
     桌面端半透明的玻璃背景是设计给"旁边露一点内容"的窄栏用的，盖满全屏之后
     半透明反而看不清，这里改成跟其它全屏弹层一样的不透明背景。 */
  #sidebar {
    position: fixed;
    inset: 0;
    width: 100%;
    border-left: none;
    z-index: 190;
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateX(100%);
    transition: transform 0.25s var(--spring-ease);
  }

  #sidebar.mobile-open {
    transform: translateX(0);
  }

  #btnCloseSidebar {
    display: inline-flex;
  }

  #pastePanel,
  #welcomePanel,
  #accountSettingsPanel {
    max-height: 82vh;
    overflow-y: auto;
  }

  #languagePickerPanel,
  #loginPanel {
    max-height: 78vh;
    overflow-y: auto;
  }

  /* "Aa" 阅读设置下拉写死 260px 宽、靠右绝对定位，窄屏下没有任何兜底——
     跟原来的 260px 取更小的那个，宽屏不受影响，窄屏不会顶到屏幕外面去。 */
  #readerSettingsPanel {
    max-width: calc(100vw - 32px);
  }

  /* 这几个弹层外层容器本来就用 min(Npx, 90vw) 不会横向溢出，但高度这块从来没
     专门为手机调过，紧一点给底部贴底的 Tab 栏(64px)留出安全余量。 */
  #searchPanel,
  #docManagerPanel,
  #reviewPanel,
  #reviewSessionPanel,
  #statsPanel,
  #adminStatsPanel,
  #immersionSavePanel,
  #recommendPanel,
  #nativeNewsPanel,
  #proPanel {
    max-height: 72vh;
  }
}

@media (max-width: 480px) {
  .doc-select {
    max-width: 140px;
  }

  #viewerContent {
    padding: 16px 12px;
  }

  .text-doc {
    padding: 20px 16px;
  }
}