/* ===== 全局 ===== */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #f4f6fb;
  color: #333;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #4f8cff, #7b5cff);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.logo { font-size: 20px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.search-wrap { flex: 1; max-width: 560px; }
#search {
  width: 100%;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  outline: none;
}
.stats { font-size: 13px; opacity: .9; white-space: nowrap; }

main { max-width: 960px; margin: 0 auto; padding: 18px 14px 60px; }

/* ===== 首页: 学科墙 ===== */
.hero { text-align: center; margin: 6px 0 18px; color: #7a869e; font-size: 14px; }
.subj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.subj-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 14px 16px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(30,50,100,.08);
  transition: transform .12s, box-shadow .12s;
  border-top: 4px solid var(--c, #4f8cff);
}
.subj-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(30,50,100,.14); }
.subj-card .icon { font-size: 40px; }
.subj-card .sname { font-size: 19px; font-weight: 700; margin-top: 8px; color: #333; }
.subj-card .scount { font-size: 13px; color: #98a2b8; margin-top: 4px; }
.subj-card .sdone { font-size: 12px; margin-top: 6px; color: #2f9e6e; }

/* ===== 专题列表 ===== */
.page-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.back-btn {
  border: none;
  background: #fff;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(30,50,100,.1);
  color: #4a5a80;
}
.page-title { font-size: 20px; font-weight: 700; }
.page-sub { font-size: 13px; color: #98a2b8; }

.topic-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(30,50,100,.06);
}
.topic-row:hover { background: #f7faff; }
.topic-row .tname { font-size: 16px; font-weight: 600; flex: 1; word-break: break-all; }
.topic-row .tmeta { font-size: 12px; color: #98a2b8; white-space: nowrap; }
.topic-row .tdone {
  font-size: 12px;
  color: #2f9e6e;
  background: #e8f7ef;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.topic-row .arrow { color: #c3cbdd; font-size: 18px; }

/* ===== 工具条 ===== */
.toolbar { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.tool-btn {
  border: 1px solid #dfe5f2;
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  color: #5a6a90;
}
.tool-btn.on { background: #4f8cff; border-color: #4f8cff; color: #fff; }

/* ===== 卡片 ===== */
.note-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(30,50,100,.07);
  margin-bottom: 16px;
  overflow: hidden;
}
.note-card.known { opacity: .55; }
.note-card.known .known-btn { background: #2f9e6e; color: #fff; border-color: #2f9e6e; }
.note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f8faff;
  border-bottom: 1px solid #eef1f8;
  font-size: 12px;
  color: #8a94ab;
}
.note-meta .topic-chip {
  background: #e8efff;
  color: #4a6fd8;
  border-radius: 999px;
  padding: 2px 9px;
}
.note-meta .sub-chip {
  border-radius: 999px;
  padding: 2px 9px;
  color: #fff;
}
.note-meta .tag-chip { background: #eef2f6; border-radius: 999px; padding: 2px 8px; }
.note-meta .date { margin-left: auto; }
.known-btn {
  border: 1px solid #cfe3d8;
  background: #fff;
  color: #2f9e6e;
  border-radius: 999px;
  font-size: 12px;
  padding: 2px 10px;
  cursor: pointer;
}
.side-tabs { display: flex; gap: 4px; }
.side-tab {
  border: 1px solid #d8e0f0;
  background: #fff;
  border-radius: 6px;
  font-size: 11px;
  padding: 1px 7px;
  cursor: pointer;
  color: #7a86a0;
}
.side-tab.on { background: #4f8cff; border-color: #4f8cff; color: #fff; }

.note-body { padding: 14px 18px; font-size: 18px; line-height: 1.7; }
.note-body img { max-width: 100%; height: auto; border-radius: 6px; }

.flip-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 0 14px 14px;
  padding: 9px;
  border: none;
  border-radius: 10px;
  background: #eef3ff;
  color: #3b62c9;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.flip-btn:hover { background: #dfeaff; }
.flip-btn.back { background: #fff4e5; color: #b26a00; }

#moreWrap { text-align: center; padding: 10px 0 30px; }
#moreBtn {
  padding: 10px 34px;
  border: none;
  border-radius: 999px;
  background: #4f8cff;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.empty { text-align: center; color: #98a2b8; padding: 60px 0; font-size: 16px; }

/* ===== 卡片内容通用 ===== */
.snd-btn {
  border: none;
  background: #eef3ff;
  border-radius: 999px;
  font-size: 16px;
  padding: 2px 8px;
  cursor: pointer;
  vertical-align: middle;
}
.snd-btn:hover { background: #dfeaff; }

/* ===== 填空题 ===== */
.cloze-hide, .cloze-blank {
  display: inline-block;
  min-width: 44px;
  padding: 0 6px;
  text-align: center;
  font-weight: bold;
  color: #2097f3;
  border-bottom: 2px solid #2097f3;
  cursor: pointer;
}
.cloze-blank::before { content: "？"; }
.cloze-answer, .cloze-show {
  font-weight: bold;
  color: #2097f3;
  border-bottom: 2px solid #2097f3;
}
.cloze-hide2, .cloze-blank2 {
  display: inline-block;
  min-width: 44px;
  padding: 0 6px;
  text-align: center;
  font-weight: bold;
  color: #f67c01;
  border-bottom: 2px solid #f67c01;
  cursor: pointer;
}
.cloze-blank2::before { content: "？"; }
.cloze-show2, .cloze-answer2 {
  font-weight: bold;
  color: #f67c01;
  border-bottom: 2px solid #f67c01;
}
mark.red { background-color: red; color: #fff; }
mark.yellow { background-color: yellow; }
mark.green { background-color: green; color: #fff; }
mark.blue { background-color: blue; color: #fff; }

/* ===== 选择题 ===== */
.qz-badge {
  display: inline-block;
  padding: 4px 12px;
  color: #00c482;
  background: #e8f7ec;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}
.qz-question {
  font-size: 19px;
  font-weight: bold;
  color: #262626;
  line-height: 1.8;
  margin: 14px 0;
}
.qz-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  margin: 12px 0;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.qz-option:hover { border-color: #ba9e83; }
.qz-option .opt-label { font-weight: 700; color: #7a86a0; flex-shrink: 0; }
.qz-option.correct { background: #edf8f0; color: #3a8f52; border-color: #64bd7b; font-weight: bold; }
.qz-option.wrong { background: #fbebeb; color: #d33; border-color: #df4a48; font-weight: bold; }
.qz-option.chosen { border-color: #ba9e83; }
.qz-submit {
  margin: 8px 0;
  padding: 8px 22px;
  border: none;
  border-radius: 8px;
  background: #4f8cff;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.qz-remarks, .qz-notes {
  background: #fbfcff;
  border: 1px solid #eef1f8;
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.8;
}
.qz-remarks .qz-badge { background: #e8f0ff; color: #42a5f5; }
.qz-notes .qz-badge { background: #eef2f6; color: #78909c; }

/* ===== 乐读遮罩 ===== */
.ledu-io { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.ledu-io img { display: block; max-width: 100%; height: auto; }
.ledu-io svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ledu-io rect { cursor: pointer; fill: #FF7E7E; stroke: #2D2D2D; stroke-width: 1; }

/* ===== 单词卡 ===== */
#danci, #yinbiao { text-align: center; }
.back img { max-width: 100%; }

@media (max-width: 640px) {
  .stats { display: none; }
  main { padding: 12px 10px 60px; }
  .subj-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .note-body { padding: 12px 14px; font-size: 17px; }
}