:root{
  --bg:#fff7ec;
  --card:#ffffff;
  --ink:#3a2f25;
  --muted:#8a7a66;
  --accent:#ff8a3d;
  --accent2:#4fb0c6;
  --green:#3fae6b;
  --red:#e8604c;
  --shadow:0 8px 24px rgba(180,120,60,.18);
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.app{max-width:920px;margin:0 auto;padding:16px 16px 40px;}
header{text-align:center;padding:8px 0 4px;}
header h1{font-size:26px;margin:0;color:var(--accent);letter-spacing:1px;}
.subtitle{margin:4px 0 0;color:var(--muted);font-size:14px;}

/* tabs */
.grade-tabs,.mode-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
.grade-tabs button,.mode-tabs button{
  border:none;cursor:pointer;font-size:16px;font-weight:600;
  padding:10px 18px;border-radius:999px;background:#fff;color:var(--muted);
  box-shadow:var(--shadow);transition:.15s;
}
.grade-tabs button.active{background:var(--accent);color:#fff;}
.mode-tabs button.active{background:var(--accent2);color:#fff;}
.mode-tabs button:disabled{opacity:.45;cursor:not-allowed;}

/* views */
.view{margin-top:18px;}
.hidden{display:none !important;}
.msg{text-align:center;color:var(--muted);padding:24px;line-height:1.7;}

/* textbook toolbar */
.toolbar{
  display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
  background:#fff;border-radius:14px;padding:10px;box-shadow:var(--shadow);
}
.toolbar button{
  border:none;cursor:pointer;background:var(--accent2);color:#fff;
  padding:8px 12px;border-radius:10px;font-size:14px;font-weight:600;
}
.toolbar .zoom button{background:var(--accent);padding:6px 12px;}
.pageinfo{font-size:15px;color:var(--muted);}
.pageinfo input{width:56px;font-size:15px;padding:4px 6px;border:1px solid #e3d5c0;border-radius:8px;text-align:center;}
.zoom{display:flex;align-items:center;gap:6px;}
#zoomVal{font-size:14px;color:var(--muted);min-width:46px;text-align:center;}
.canvas-wrap{margin-top:14px;display:flex;justify-content:center;background:#fff;border-radius:14px;padding:10px;box-shadow:var(--shadow);}
#pdfCanvas{max-width:100%;height:auto;border-radius:6px;}

/* unit bar */
.unit-bar{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:14px;}
.unit-bar label{font-weight:600;color:var(--muted);}
.unit-bar select{padding:8px 10px;border-radius:10px;border:1px solid #e3d5c0;font-size:15px;background:#fff;}
.unit-bar button{border:none;cursor:pointer;background:var(--accent);color:#fff;padding:8px 14px;border-radius:10px;font-weight:600;}

/* flashcard */
.card{
  background:var(--card);border-radius:20px;box-shadow:var(--shadow);
  min-height:300px;display:flex;align-items:center;justify-content:center;
  padding:30px 24px;cursor:pointer;user-select:none;transition:.2s;margin:0 auto;max-width:560px;
}
.card:hover{transform:translateY(-3px);}
.card-front,.card-back{text-align:center;width:100%;}
.card-word{font-size:42px;font-weight:700;color:var(--ink);margin-bottom:18px;word-break:break-word;}
.card-phon{font-size:20px;color:var(--accent2);margin-bottom:10px;}
.card-meaning{font-size:28px;color:var(--ink);margin-bottom:18px;}
.hint{color:var(--muted);font-size:14px;}
.speak-btn{
  border:none;cursor:pointer;background:var(--accent2);color:#fff;
  padding:12px 20px;border-radius:999px;font-size:16px;font-weight:600;
}
.speak-btn:active{transform:scale(.96);}
.card-nav{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:16px;}
.card-nav button{border:none;cursor:pointer;background:#fff;color:var(--muted);padding:10px 16px;border-radius:999px;font-weight:600;box-shadow:var(--shadow);}
#cardCounter{color:var(--muted);font-size:15px;min-width:70px;text-align:center;}

/* quiz */
#quizArea{max-width:560px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:26px 22px;text-align:center;}
.quiz-progress{font-size:16px;color:var(--muted);margin-bottom:14px;}
.quiz-progress .score{color:var(--accent);font-weight:700;margin-left:8px;}
.quiz-meaning{font-size:30px;font-weight:700;color:var(--ink);margin-bottom:12px;}
#quizInput{
  width:90%;font-size:22px;padding:12px 14px;border:2px solid #e3d5c0;border-radius:12px;
  text-align:center;margin:10px 0;outline:none;
}
#quizInput:focus{border-color:var(--accent2);}
.quiz-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px;}
.quiz-btns button{border:none;cursor:pointer;padding:10px 14px;border-radius:10px;font-weight:600;font-size:14px;background:#f0e7da;color:var(--ink);}
#quizCheck{background:var(--accent);color:#fff;}
#quizNext{background:var(--green);color:#fff;}
.feedback{min-height:26px;margin-top:14px;font-size:18px;font-weight:600;}
.feedback.ok{color:var(--green);}
.feedback.bad{color:var(--red);}
#quizResult{max-width:560px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:26px;text-align:center;line-height:1.8;}
#quizResult h2{color:var(--accent);margin:0 0 8px;}
#quizResult ul{text-align:left;display:inline-block;margin:8px 0;}
#quizRestart{display:block;margin:16px auto 0;border:none;cursor:pointer;background:var(--accent2);color:#fff;padding:10px 22px;border-radius:999px;font-weight:600;}

footer{text-align:center;margin-top:30px;color:var(--muted);font-size:12px;}

/* ===== 手机端适配（屏幕窄于 600px）===== */
@media (max-width:600px){
  .app{padding:10px 10px 28px;}
  header h1{font-size:21px;}
  .subtitle{font-size:12px;}
  .grade-tabs,.mode-tabs{gap:6px;margin-top:10px;}
  .grade-tabs button,.mode-tabs button{font-size:14px;padding:9px 13px;}
  .toolbar{gap:6px;padding:8px;}
  .toolbar button{padding:11px 12px;font-size:14px;}
  .zoom button{padding:9px 12px !important;font-size:16px !important;}
  .unit-bar{gap:8px;margin-bottom:10px;}
  .unit-bar select{padding:10px;font-size:15px;flex:1;min-width:120px;}
  .unit-bar button{padding:10px 14px;font-size:15px;flex:1;}
  .card{min-height:240px;padding:24px 16px;}
  .card-word{font-size:34px;margin-bottom:14px;}
  .card-phon{font-size:18px;}
  .card-meaning{font-size:24px;}
  .card-nav{gap:10px;}
  .card-nav button{padding:12px 14px;font-size:15px;}
  #quizArea{padding:20px 14px;}
  .quiz-meaning{font-size:26px;}
  #quizInput{font-size:20px;padding:14px;}
  .quiz-btns button{padding:12px 12px;font-size:15px;flex:1 1 40%;}
  #quizResult{padding:20px 14px;}
  #quizResult li{margin:4px 0;}
}

/* ---------- 单词短语详解 ---------- */
.detail-list{display:flex;flex-direction:column;gap:14px;}
.detail-card{background:var(--card);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);}
.detail-card .detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.detail-card .detail-word{font-size:24px;font-weight:700;color:var(--ink);word-break:break-word;}
.detail-card .detail-phon{font-size:16px;color:var(--accent2);margin-top:4px;}
.detail-card .detail-pos{font-size:13px;color:#fff;background:var(--accent2);padding:4px 10px;border-radius:999px;white-space:nowrap;}
.detail-card .detail-section-tag{font-size:12px;color:var(--accent);background:#fff3e6;padding:3px 8px;border-radius:6px;margin-left:8px;}
.detail-card .detail-body{line-height:1.75;}
.detail-card .detail-row{margin-top:8px;}
.detail-card .detail-row label{font-weight:700;color:var(--accent);font-size:14px;margin-right:6px;}
.detail-card .detail-row span{font-size:15px;color:var(--ink);}
.detail-card .detail-example{background:#f8f4ee;border-radius:10px;padding:10px 12px;margin-top:10px;}
.detail-card .detail-example label{display:block;margin-bottom:4px;}
.detail-card .detail-example .en{font-size:16px;font-weight:600;color:var(--ink);}
.detail-card .detail-example .cn{font-size:14px;color:var(--muted);margin-top:2px;}
.detail-card .detail-speak{border:none;cursor:pointer;background:var(--accent2);color:#fff;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;}
#detailSearch{padding:8px 12px;border-radius:10px;border:1px solid #e3d5c0;font-size:15px;background:#fff;min-width:160px;}

@media (max-width:600px){
  .detail-card{padding:14px;}
  .detail-card .detail-word{font-size:21px;}
  .detail-card .detail-header{gap:8px;}
  #detailSearch{flex:1 1 100%;min-width:auto;}
}

/* ---------- 课文朗读 ---------- */
.read-tip{color:var(--muted);font-size:13px;margin:6px 2px 14px;text-align:center;}
.lesson-blocks{display:flex;flex-direction:column;gap:18px;}
.lesson-block{background:var(--card);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);}
.block-label{font-weight:700;color:var(--accent);font-size:15px;margin-bottom:8px;}
.dialogue-line{font-size:19px;line-height:1.7;padding:3px 6px;border-radius:8px;transition:background .2s;}
.speaker{color:var(--accent2);font-weight:700;margin-right:4px;}
.dtext{color:var(--ink);}
.para{font-size:19px;line-height:1.9;margin:0;}
.sentence{transition:background .2s;border-radius:6px;padding:1px 2px;}
.reading{background:#ffe7c2!important;box-shadow:0 0 0 2px var(--accent) inset;}
.block-ctrl{margin-top:10px;text-align:right;}
.speak-btn.small{padding:8px 14px;font-size:14px;flex:none;}

/* ---------- 使用者切换 ---------- */
.user-switcher{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:10px;}
.user-pill{display:flex;align-items:center;background:#fff;border-radius:999px;box-shadow:var(--shadow);overflow:hidden;}
.user-pill.active{outline:3px solid var(--accent);}
.user-btn{border:none;background:transparent;cursor:pointer;font-size:15px;font-weight:700;color:var(--muted);padding:7px 14px;}
.user-pill.active .user-btn{color:var(--accent);}
.user-edit{border:none;background:transparent;cursor:pointer;color:var(--muted);font-size:13px;padding:6px 10px 6px 2px;}
.user-edit:hover{color:var(--accent);}

/* ---------- 进度条 / 我的进度 ---------- */
.tab-badge{display:inline-block;margin-left:6px;font-size:12px;font-weight:700;color:#fff;background:var(--green);border-radius:999px;padding:1px 7px;vertical-align:middle;}
.mode-tabs button:not(.active) .tab-badge{background:#cdb89a;}
.progress-head{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.progress-user{font-size:17px;font-weight:700;color:var(--accent);}
.progress-hint{font-size:13px;color:var(--muted);}
.progress-banner{text-align:center;margin:0 auto 18px;max-width:420px;}
.progress-banner img{width:100%;max-width:240px;height:auto;border-radius:24px;box-shadow:var(--shadow);background:#fff;padding:6px;}
.progress-banner-title{margin-top:10px;font-size:16px;font-weight:700;color:#6b5c4d;}
.progress-list{display:flex;flex-direction:column;gap:16px;max-width:640px;margin:0 auto;}
.prog-row{display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);position:relative;}
.prog-label{width:96px;font-size:15px;font-weight:700;color:var(--ink);flex:none;display:flex;align-items:center;gap:4px;}
.prog-track{flex:1;height:24px;background:#f5e6ca;border-radius:999px;position:relative;border:2px dashed #e8d4b0;}
.prog-fill{height:100%;width:0;background:linear-gradient(90deg,#ffd16b,#ff8a5b);border-radius:999px;transition:width .5s cubic-bezier(.34,1.56,.64,1);position:relative;min-width:22px;}
.prog-fill.na{background:#d9cbb6;}
.prog-fill::after{content:'🐢';position:absolute;right:-8px;top:50%;transform:translateY(-50%);font-size:18px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));z-index:2;}
.prog-track::after{content:'🐰';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:18px;line-height:1;opacity:.85;z-index:1;}
.prog-fill.finished{background:linear-gradient(90deg,#8fd9a8,#3fae6b);}
.prog-fill.finished::after{content:'🏆';}
.prog-text{width:116px;font-size:13px;color:var(--muted);text-align:right;flex:none;background:#fff6e8;border-radius:999px;padding:4px 10px;}
.progress-foot{text-align:center;margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.progress-backup{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.progress-tip{color:var(--muted);font-size:13px;max-width:560px;line-height:1.6;margin:0;}
.ghost-btn{border:1px solid #e0cdb2;background:#fff;color:var(--muted);cursor:pointer;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;}
.ghost-btn:hover{color:var(--red);border-color:var(--red);}
.ghost-btn.danger{color:var(--red);border-color:#f0c0b6;}
.ghost-btn.danger:hover{background:var(--red);color:#fff;border-color:var(--red);}

/* 单词详解：已学会按钮 */
.detail-card .detail-learn{margin-top:12px;border:none;cursor:pointer;background:#f0e7da;color:var(--ink);padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;}
.detail-card .detail-learn.learned{background:var(--green);color:#fff;}

@media (max-width:600px){
  .user-btn{font-size:14px;padding:7px 11px;}
  .prog-row{gap:8px;padding:12px 12px;}
  .prog-label{width:84px;font-size:14px;}
  .prog-text{width:100px;font-size:12px;padding:3px 8px;}
  .progress-banner img{max-width:180px;}
}