/* ===== S2 Summer Revision — iPad friendly ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:17px; }
body {
  font-family: -apple-system, "PingFang HK", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background:#f2f5fa; color:#1c2333; min-height:100vh;
}
#app { max-width:960px; margin:0 auto; padding:0 16px 60px; }

/* topbar */
.topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 4px; position:sticky; top:0; background:rgba(242,245,250,.94); backdrop-filter:blur(8px); z-index:10; }
.brand { font-weight:800; font-size:1.15rem; cursor:pointer; }
nav { display:flex; gap:8px; }
.navbtn { border:none; background:#fff; padding:10px 16px; border-radius:12px; font-size:.95rem; font-weight:600; color:#444; box-shadow:0 1px 3px rgba(0,0,0,.07); cursor:pointer; }
.navbtn.active { background:#2f6bff; color:#fff; }
.badge { background:#ff5252; color:#fff; border-radius:10px; padding:1px 7px; font-size:.75rem; margin-left:2px; }

.view { display:none; animation:fade .25s; }
.view.show { display:block; }
@keyframes fade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* hero */
.hero { display:flex; justify-content:space-between; align-items:center; gap:16px; background:linear-gradient(120deg,#2f6bff,#7a5cff); color:#fff; border-radius:20px; padding:26px 28px; margin-top:8px; }
.hero h1 { font-size:1.6rem; margin-bottom:6px; }
.hero p { opacity:.9; }
.streak-card { text-align:center; background:rgba(255,255,255,.16); border-radius:16px; padding:12px 22px; min-width:120px; }
.streak-num { font-size:2.2rem; font-weight:800; }
.streak-label { font-size:.8rem; opacity:.9; }

.daily-card { background:#fff; border-radius:16px; padding:18px 22px; margin:16px 0; box-shadow:0 2px 8px rgba(20,40,90,.06); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }

.sec-title { margin:20px 0 12px; font-size:1.2rem; }

/* subject grid */
.subject-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.subject-card { background:#fff; border-radius:18px; padding:20px; cursor:pointer; box-shadow:0 2px 8px rgba(20,40,90,.06); transition:transform .12s; border-left:6px solid var(--c,#2f6bff); }
.subject-card:active { transform:scale(.97); }
.subject-card .s-top { display:flex; justify-content:space-between; align-items:center; }
.subject-card h3 { font-size:1.1rem; }
.subject-card .s-en { color:#8b93a7; font-size:.82rem; margin-top:2px; }
.s-icon { font-size:1.8rem; }
.mastery-wrap { margin-top:14px; background:#eef1f7; border-radius:8px; height:10px; overflow:hidden; }
.mastery-bar { height:100%; border-radius:8px; background:var(--c,#2f6bff); transition:width .4s; }
.mastery-txt { font-size:.8rem; color:#667; margin-top:6px; display:flex; justify-content:space-between; }

/* buttons */
.btn { border:none; border-radius:14px; padding:14px 26px; font-size:1.02rem; font-weight:700; cursor:pointer; background:#2f6bff; color:#fff; box-shadow:0 3px 10px rgba(47,107,255,.3); }
.btn.ghost { background:#fff; color:#2f6bff; border:2px solid #2f6bff; box-shadow:none; }
.btn.big { width:100%; padding:17px; font-size:1.1rem; margin-top:10px; }
.btn.locked { opacity:.55; cursor:not-allowed; filter:grayscale(.3); }
.btn:active { transform:scale(.97); }
.back { border:none; background:#fff; border-radius:12px; padding:10px 18px; margin:14px 0; font-size:.95rem; font-weight:600; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.back.small { margin:0; }

/* subject detail */
.sd-head { background:#fff; border-radius:18px; padding:24px; margin-bottom:14px; border-left:6px solid var(--c); }
.sd-head h1 { font-size:1.5rem; }
.topic-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:10px; margin-top:14px; }
.topic-item { background:#fff; border-radius:14px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 1px 4px rgba(20,40,90,.05); }
.topic-item .t-name { font-size:.95rem; font-weight:600; }
.pill { font-size:.78rem; padding:4px 10px; border-radius:20px; font-weight:700; }
.pill.good { background:#e3f7e9; color:#1d9e50; }
.pill.mid { background:#fff3dc; color:#c98a00; }
.pill.bad { background:#ffe5e5; color:#e03131; }
.pill.new { background:#eef1f7; color:#778; }

/* quiz */
.quiz-head { display:flex; align-items:center; gap:14px; padding:14px 0; }
.progress-wrap { flex:1; height:12px; background:#e4e9f2; border-radius:8px; overflow:hidden; }
.progress-bar { height:100%; background:linear-gradient(90deg,#2f6bff,#7a5cff); width:0; border-radius:8px; transition:width .3s; }
.quiz-count { font-weight:700; color:#556; }
.q-card { background:#fff; border-radius:20px; padding:26px; box-shadow:0 3px 12px rgba(20,40,90,.07); }
.q-meta { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.tag { font-size:.76rem; background:#eef3ff; color:#2f6bff; padding:4px 10px; border-radius:16px; font-weight:600; }
.tag.diff { background:#f6eeff; color:#8a4bff; }
.q-text { font-size:1.18rem; line-height:1.65; margin-bottom:20px; font-weight:600; }
.passage { font-weight:400; font-size:1rem; background:#f7f9fc; border-left:4px solid #cfd8ea; padding:14px 16px; border-radius:10px; margin-bottom:18px; line-height:1.85; color:#33405a; white-space:pre-wrap; max-height:320px; overflow:auto; }
.q-text .passage { display:block; font-weight:400; font-size:1rem; background:#f7f9fc; border-left:4px solid #cfd8ea; padding:12px 14px; border-radius:8px; margin-bottom:12px; line-height:1.8; }
.opts { display:grid; gap:12px; }
.opt { text-align:left; border:2px solid #e4e9f2; background:#fbfcfe; border-radius:14px; padding:16px 18px; font-size:1.05rem; cursor:pointer; display:flex; gap:12px; align-items:flex-start; line-height:1.5; }
.opt .ol { font-weight:800; color:#2f6bff; min-width:24px; }
.opt.sel { border-color:#2f6bff; background:#eef3ff; }
.opt.right { border-color:#2bb673; background:#e8f9f0; }
.opt.wrongopt { border-color:#ff6b6b; background:#ffefef; }
.opt:disabled { cursor:default; }
.explain { margin-top:18px; border-radius:14px; padding:16px 18px; line-height:1.7; font-size:.98rem; display:none; }
.explain.show { display:block; animation:fade .3s; }
.explain.ok { background:#e8f9f0; border:1px solid #bfe9d2; }
.explain.no { background:#fff4f4; border:1px solid #ffd4d4; }
.quiz-actions { margin-top:18px; display:flex; justify-content:flex-end; gap:10px; }

/* result */
.result-hero { text-align:center; background:#fff; border-radius:20px; padding:36px 24px; margin-top:20px; box-shadow:0 3px 12px rgba(20,40,90,.07); }
.score-big { font-size:3.4rem; font-weight:800; }
.score-big.good { color:#1d9e50; } .score-big.mid { color:#c98a00; } .score-big.bad { color:#e03131; }
.result-msg { font-size:1.1rem; margin:8px 0 4px; }
.result-detail { background:#fff; border-radius:16px; padding:20px; margin-top:14px; box-shadow:0 2px 8px rgba(20,40,90,.05); }
.rd-row { display:flex; justify-content:space-between; padding:10px 4px; border-bottom:1px solid #f0f2f7; font-size:.96rem; }
.rd-row:last-child { border:none; }

/* wrong book */
.wrong-item { background:#fff; border-radius:14px; padding:18px; margin:10px 0; box-shadow:0 1px 4px rgba(20,40,90,.05); }
.wrong-item .wq { font-weight:600; line-height:1.6; margin:6px 0; }
.wrong-item .wa { font-size:.92rem; color:#1d9e50; margin-top:6px; }
.wrong-item .we { font-size:.88rem; color:#667; margin-top:4px; line-height:1.6; }
.wrong-tags { display:flex; gap:6px; flex-wrap:wrap; }

/* stats */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:14px 0; }
.stat-card { background:#fff; border-radius:16px; padding:18px; text-align:center; box-shadow:0 1px 4px rgba(20,40,90,.05); }
.stat-card .num { font-size:1.9rem; font-weight:800; color:#2f6bff; }
.stat-card .lbl { font-size:.85rem; color:#778; margin-top:4px; }
.bar-row { display:flex; align-items:center; gap:10px; margin:8px 0; }
.bar-row .bl { width:170px; font-size:.88rem; font-weight:600; text-align:right; }
.bar-row .bwrap { flex:1; background:#eef1f7; height:16px; border-radius:8px; overflow:hidden; }
.bar-row .bfill { height:100%; border-radius:8px; }
.bar-row .bv { width:52px; font-size:.85rem; color:#556; }
.muted { color:#8b93a7; font-size:.92rem; margin:8px 0 14px; }
.panel { background:#fff; border-radius:16px; padding:20px; margin:12px 0; box-shadow:0 2px 8px rgba(20,40,90,.05); }
.panel h3 { margin-bottom:10px; }
.empty { text-align:center; color:#99a; padding:50px 0; font-size:1rem; }

@media (max-width:640px){
  .hero { flex-direction:column; text-align:center; }
  nav .navbtn { padding:9px 12px; font-size:.85rem; }
  .bar-row .bl { width:120px; font-size:.8rem; }
}

/* student bar + sync + parent */
.student-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; font-size:.95rem; }
.student-bar label{ color:#9aa6bd; }
.student-bar input{ background:#1a2030; color:#e8edf5; border:1px solid #2a3245; border-radius:9px; padding:7px 10px; font-size:.95rem; width:120px; }
.sync-status{ font-size:.82rem; color:#9aa6bd; }
.parent-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 4px; }
.parent-bar .btn.ghost.small{ width:auto; padding:9px 14px; font-size:.9rem; margin-top:0; }

/* quiz timer */
.quiz-timer{ font-weight:700; color:#2f6bff; background:#eef3ff; border-radius:10px; padding:6px 12px; font-variant-numeric:tabular-nums; min-width:66px; text-align:center; }
.quiz-head{ flex-wrap:wrap; }
/* favourites star */
.star{ border:none; background:transparent; font-size:1.4rem; cursor:pointer; color:#f5a623; line-height:1; margin-left:auto; padding:2px 6px; }
.star:active{ transform:scale(1.18); }

/* ===== print / PDF export of wrong book ===== */
#printRoot{ display:none; }
@media print {
  body{ background:#fff !important; color:#111; }
  #app, .topbar, nav, .back{ display:none !important; }
  #printRoot{ display:block !important; }
  .pr-head h1{ font-size:21px; margin-bottom:4px; }
  .pr-head p{ font-size:12px; color:#555; margin-bottom:14px; }
  .pr-sub{ font-size:15px; margin:16px 0 6px; border-bottom:2px solid #333; padding-bottom:4px; }
  .pr-item{ border:1px solid #ccc; border-radius:6px; padding:10px 14px; margin:8px 0; page-break-inside:avoid; }
  .pr-q{ font-weight:700; margin-bottom:6px; font-size:13px; }
  .pr-o{ padding:3px 0; font-size:12.5px; }
  .pr-correct{ color:#1d9e50; font-weight:700; }
  .pr-e{ font-size:11.5px; color:#555; margin-top:5px; }
  .pr-empty{ font-size:13px; }
  @page{ margin:14mm; }
}