* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft YaHei","PingFang SC",sans-serif; background:#fff8f2;
  color:#33475b; font-size:17px; line-height:1.7; }
.container { max-width:860px; margin:0 auto; padding:16px; }
.header { background:linear-gradient(135deg,#ff9a44,#ff6a3d); color:#fff;
  border-radius:18px; padding:24px 22px; margin-bottom:18px; text-align:center; }
.header h1 { font-size:26px; margin-bottom:6px; }
.header p { font-size:15px; opacity:.95; }
.header .chips { margin-top:12px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.header .chip { background:rgba(255,255,255,.22); border-radius:20px; padding:4px 14px; font-size:13px; }
.notice { background:#fff4e6; border:2px solid #ffd9b0; border-radius:14px;
  padding:12px 16px; margin-bottom:16px; font-size:15px; }
.notice b { color:#e8590c; }
.name-box { background:#fff; border:2px solid #ffe1cc; border-radius:14px;
  padding:16px 18px; margin-bottom:16px; }
.name-row { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
.name-row .field { flex:1 1 220px; }
.name-row label { display:block; font-size:15px; font-weight:700; margin-bottom:6px; }
.name-row input, .name-row select { width:100%; padding:11px 14px; font-size:17px;
  border:2px solid #e6ecf5; border-radius:10px; background:#fff; }
.name-row input:focus, .name-row select:focus { border-color:#ff9a44; outline:none; }
.hint { font-size:13px; color:#8a9bb0; margin-top:4px; }
.name-warn { display:none; margin-top:10px; padding:10px 14px; border-radius:10px;
  background:#ffe8e4; color:#c92a2a; font-size:15px; font-weight:700; }
.q-card { background:#fff; border:2px solid #ffe1cc; border-radius:16px;
  padding:18px; margin-bottom:18px; box-shadow:0 3px 12px rgba(255,138,76,.08); }
.q-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.q-num { background:#ff7a45; color:#fff; font-size:14px; font-weight:700;
  padding:3px 12px; border-radius:20px; }
.q-tag { background:#e8f1fc; color:#2f80ed; font-size:13px; padding:2px 10px; border-radius:6px; }
.q-points { background:#fff3e0; color:#e65100; font-size:13px; padding:2px 10px; border-radius:6px; }
.read-btn { margin-left:auto; background:#e8f1fc; color:#2f80ed; border:none;
  padding:6px 14px; border-radius:20px; font-size:14px; cursor:pointer; font-weight:700; }
.read-btn:hover { background:#d3e6ff; }
.q-title { font-size:21px; font-weight:700; line-height:1.6; margin:8px 0 14px; }
.q-fig { background:#f7fbff; border-radius:12px; padding:10px 10px 6px; margin-bottom:12px; }
.fig-cap { text-align:center; font-size:13px; color:#6b7c93; padding:4px 0 2px; }
.q-tip { font-size:14px; color:#e8590c; background:#fff8f2; border-radius:8px;
  padding:6px 12px; margin-bottom:12px; }
.opts { display:block; }
.opt { display:flex; align-items:center; gap:12px; padding:11px 14px; margin-bottom:10px;
  border:2px solid #e6ecf5; border-radius:12px; font-size:18px; cursor:pointer;
  transition:all .15s; background:#fff; }
.opt:hover { border-color:#ff9a44; background:#fff8f2; }
.opt input { width:22px; height:22px; flex-shrink:0; accent-color:#ff7a45; }
.opt-ic { display:flex; align-items:center; }
.opt span.txt { flex:1; }
.opt.judge { font-size:20px; font-weight:700; justify-content:flex-start; }
.opt.judge .big-emoji { font-size:26px; }
.submit-bar { text-align:center; margin:22px 0; }
.btn-submit { background:linear-gradient(135deg,#ff9a44,#ff6a3d); color:#fff;
  border:none; padding:14px 56px; border-radius:30px; font-size:19px; font-weight:700;
  cursor:pointer; box-shadow:0 4px 14px rgba(255,106,61,.28); }
.btn-submit:hover { transform:translateY(-2px); }
.btn-submit:disabled { opacity:.55; cursor:not-allowed; }
.save-msg { text-align:center; font-size:14px; color:#6b7c93; margin-top:8px; }
.result-panel { display:none; background:#fff; border:3px solid #ffb37a;
  border-radius:18px; padding:20px; margin-bottom:20px; }
.score-display { text-align:center; padding:8px 0 16px; border-bottom:2px dashed #ffe1cc; }
.score-display .score { font-size:56px; font-weight:800; color:#ff7a45; line-height:1.1; }
.score-display .max { font-size:20px; color:#9aaec4; }
.score-display .label { font-size:16px; color:#6b7c93; margin-top:6px; }
.cheer { text-align:center; font-size:18px; font-weight:700; color:#27ae60; margin:12px 0; }
.analysis-item { margin-top:12px; padding:12px 14px; border-radius:12px; }
.analysis-item.correct { background:#e9f8ee; border-left:5px solid #27ae60; }
.analysis-item.wrong { background:#ffefec; border-left:5px solid #e5533d; }
.analysis-q { font-size:16px; font-weight:700; margin-bottom:4px; }
.analysis-ans { font-size:15px; }
.analysis-ans .bad { color:#e5533d; font-weight:700; }
.analysis-ans .good { color:#27ae60; font-weight:700; }
.analysis-explain { font-size:14px; color:#5b6b7f; margin-top:6px;
  padding:8px 12px; background:#fff; border-radius:8px; }
.analysis-fig { max-width:340px; margin:8px auto; }
.result-actions { text-align:center; margin-top:18px; display:flex; gap:12px;
  justify-content:center; flex-wrap:wrap; }
.btn-soft { background:#e8f1fc; color:#2f80ed; border:none; padding:10px 22px;
  border-radius:22px; font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; }
.btn-warm { background:#fff3e0; color:#e65100; border:none; padding:10px 22px;
  border-radius:22px; font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; }
.back-link { text-align:center; margin:22px 0; }
.back-link a { color:#ff7a45; text-decoration:none; font-size:15px; font-weight:700; }
.footer { text-align:center; margin-top:26px; padding:18px 10px;
  color:#9aaec4; font-size:12px; line-height:1.8; }
/* 首页 */
.lessons-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.lesson-card { display:block; background:#fff; border:2px solid #ffe1cc; border-radius:16px;
  padding:18px; text-decoration:none; color:#33475b; transition:all .18s; }
.lesson-card:hover { transform:translateY(-3px); border-color:#ff9a44;
  box-shadow:0 8px 20px rgba(255,138,76,.18); }
.lesson-card.final { background:linear-gradient(135deg,#fff0d9,#ffe3c2); border-color:#ffb37a; }
.lc-top { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.lc-emoji { font-size:30px; }
.lc-num { background:#fff3e0; color:#e65100; font-size:13px; font-weight:700;
  padding:2px 10px; border-radius:6px; }
.lc-age { margin-left:auto; font-size:12px; color:#6b7c93; }
.lc-name { font-size:19px; font-weight:800; margin-bottom:4px; }
.lc-intro { font-size:14px; color:#6b7c93; line-height:1.6; }
.lc-meta { font-size:12px; color:#9aaec4; margin-top:8px; }
.section-title { font-size:19px; font-weight:800; margin:24px 0 14px;
  padding-left:12px; border-left:5px solid #ff7a45; }
.teacher-link { display:inline-block; margin-top:12px; padding:9px 22px;
  background:rgba(255,255,255,.24); color:#fff; text-decoration:none;
  border-radius:22px; font-size:14px; font-weight:700; }
@media (max-width:600px) {
  .q-title { font-size:19px; } .opt { font-size:16px; }
  .header h1 { font-size:22px; } .container { padding:12px; }
  .btn-submit { width:100%; padding:14px 0; }
}
/* ---- 绘本插画风格（覆盖在基础样式之上）---- */
body {
  background-color:#fff8f2;
  background-image:
    radial-gradient(circle at 12% 16%, rgba(255,214,170,.30), transparent 26%),
    radial-gradient(circle at 88% 58%, rgba(183,220,255,.28), transparent 28%),
    radial-gradient(circle at 38% 92%, rgba(255,235,188,.34), transparent 26%);
  background-attachment:fixed;
}
.header { border:3px solid rgba(255,255,255,.65);
  box-shadow:0 8px 22px rgba(255,138,76,.20); }
.q-card { border-style:dashed; border-color:#ffd0a8; }
.q-fig { background:#fffaf0; border:2px dashed #ffd9b0; border-radius:16px;
  padding:12px 12px 6px; margin-bottom:14px; }
.q-fig img.ill-img { display:block; width:100%; max-width:520px; margin:0 auto;
  border-radius:12px; box-shadow:0 5px 16px rgba(120,90,60,.16); }
.fig-cap { font-size:14px; color:#8a745f; font-weight:700; padding:8px 0 3px; }
.analysis-fig img, .wrong-item .fig img, .fig img { display:block; width:100%;
  max-width:340px; margin:0 auto; border-radius:10px; }
.opt-ic { flex-shrink:0; padding:5px; border-radius:50%; background:#fff6e8;
  border:2px dashed #ffcf9e; }
.opt-ic svg { width:30px; height:30px; }
.hero-ill { display:block; width:100%; max-height:250px; object-fit:cover;
  object-position:center 45%; border-radius:20px; margin:0 0 18px;
  border:3px solid #fff; box-shadow:0 8px 22px rgba(255,138,76,.18); }
.page-hero { display:block; width:100%; max-width:660px; max-height:210px;
  object-fit:cover; object-position:center 45%; margin:0 auto 18px;
  border-radius:18px; border:3px solid #fff;
  box-shadow:0 6px 18px rgba(255,138,76,.16); }
.lc-img { display:block; width:100%; height:112px; object-fit:cover;
  object-position:center 45%; border-radius:12px; margin-bottom:12px;
  border:2px solid #fff; box-shadow:0 3px 10px rgba(120,90,60,.12); }
.lesson-card:hover .lc-img { transform:scale(1.02); }
.lesson-card { overflow:hidden; }
@media (max-width:600px) {
  .hero-ill { max-height:170px; } .page-hero { max-height:150px; }
  .q-fig img.ill-img { max-width:100%; }
}