/* 配色取自 Magoosh Vocabulary Builder 原版 quiz.css */
:root {
  --brand: #4d2079;
  --brand-dark: #3a1860;
  --green: #26b67c;
  --red: #de5458;
  --border: #57415f;
  --gray: #817e85;
  --bg: #f6f5f8;
  --light: #eeeeef;
  --amber: #fbc77d;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: #333;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- 顶栏 ---------- */
#topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  background: var(--brand); color: #fff;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
}
#topbar h1 { flex: 1; margin: 0; font-size: 17px; font-weight: 600; text-align: center; }
#topbar a { color: #fff; font-size: 20px; text-decoration: none; cursor: pointer; min-width: 26px; }
#topbar a[hidden] { visibility: hidden; display: block; }

main { max-width: 620px; margin: 0 auto; padding: 14px; }
.loading { text-align: center; color: var(--gray); padding: 40px 0; }

/* ---------- section / level 列表 ---------- */
.tile {
  display: block; background: #fff; border: 1px solid #ddd9e0; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer; text-decoration: none; color: inherit;
}
.tile:active { background: var(--light); }
.tile-head { display: flex; align-items: baseline; justify-content: space-between; }
.tile-name { font-weight: 600; font-size: 16px; }
.tile-sub { color: var(--gray); font-size: 13px; }

.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; }
.level-cell {
  background: #fff; border: 1px solid #ddd9e0; border-radius: 8px;
  padding: 10px 6px; text-align: center; cursor: pointer;
}
.level-cell:active { background: var(--light); }
.level-cell .n { font-weight: 600; font-size: 15px; }
.level-cell .c { font-size: 11px; color: var(--gray); margin-top: 2px; }
.level-cell.done { border-color: var(--green); background: #f0fbf6; }
.level-cell.done .c { color: var(--green); }

/* ---------- 进度条（原版 .progress / .bar） ---------- */
.progress {
  overflow: hidden; height: 10px; background: #e6e3ea;
  border-radius: 6px; margin: 8px 0 0;
}
.progress .bar { height: 100%; float: left; background: var(--amber); transition: width .25s; }
.progress .bar.success { background: var(--green); }

/* ---------- 答题卡（对应原版 level.html） ---------- */
.card-front, .card-back {
  background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.card-header {
  font-weight: 700; font-size: 1.05em; color: #fff;
  background: var(--brand); padding: 9px 18px;
}
.card-header .lbl { display: block; font-weight: 400; font-size: 12px; opacity: .8; }
.card-header.right { background: var(--green); }
.card-header.wrong { background: var(--red); }

.card-question { padding: 22px 18px; text-align: center; }
.card-question h3 { margin: 0; font-size: 24px; font-weight: 600; }
.card-question h3.completion { font-size: 17px; font-weight: 400; line-height: 1.6; text-align: left; }
.card-question .ph { color: var(--gray); font-size: 14px; margin-top: 6px; }

.card-choice {
  display: block; width: 100%; text-align: left; background: #fff;
  border: 0; border-top: 1px solid #e2dee6; padding: 14px 18px;
  font: inherit; color: #333; cursor: pointer;
}
.card-choice:active { background: var(--light); }
.card-choice.unsure { color: var(--gray); }

/* 翻面 */
.card-section { border-top: 1px solid #e2dee6; padding: 14px 18px; }
.answer-line { font-size: 18px; font-weight: 600; }
.answer-line .tick { color: var(--green); }

/* 中文 —— 这个 app 存在的理由 */
.zh {
  margin-top: 10px; padding: 11px 13px;
  background: #f4f0f9; border-left: 3px solid var(--brand); border-radius: 4px;
  font-size: 17px; line-height: 1.6;
}
.zh .src { display: block; margin-top: 5px; font-size: 11px; color: var(--gray); }
.zh-extra { margin-top: 7px; font-size: 14px; color: #666; }
.zh-toggle {
  display: inline-block; margin-top: 7px; font-size: 13px;
  color: var(--brand); cursor: pointer; text-decoration: underline;
}

.example { margin-top: 12px; font-size: 15px; color: #555; line-height: 1.65; }
.example strong { color: var(--brand); }

.card-actions { display: flex; border-top: 1px solid #e2dee6; }
.card-btn {
  flex: 1; text-align: center; padding: 13px 18px; font-size: 16px;
  background: #fff; border: 0; border-left: 1px solid #e2dee6;
  color: var(--brand); font-weight: 600; cursor: pointer; font-family: inherit;
}
.card-btn:first-child { border-left: 0; }
.card-btn:active { background: var(--light); }

.lv-progress { margin-top: 14px; }
.lv-progress .txt { font-size: 13px; color: var(--gray); display: flex; justify-content: space-between; }

/* ---------- 统计 ---------- */
.stat-row { display: flex; gap: 10px; margin-bottom: 14px; }
.stat-box { flex: 1; background: #fff; border: 1px solid #ddd9e0; border-radius: 8px; padding: 12px; text-align: center; }
.stat-box .v { font-size: 24px; font-weight: 700; color: var(--brand); }
.stat-box .k { font-size: 12px; color: var(--gray); margin-top: 2px; }
.danger { color: var(--red); border-color: var(--red); background: #fff; }

.done-banner {
  background: #f0fbf6; border: 1px solid var(--green); border-radius: 8px;
  padding: 18px; text-align: center; margin-bottom: 12px;
}
.done-banner h2 { margin: 0 0 6px; font-size: 19px; color: var(--green); }