/* 小小学习乐园 · 儿童配色 / 大字体 / 大按钮 / 平板触屏优先 */
:root{
  --pink:#ff7aa2; --orange:#ffa94d; --yellow:#ffd43b; --green:#69db7c;
  --blue:#4dabf7; --purple:#9775fa; --red:#ff6b6b; --ink:#33302e;
  --bg:#fff8e7; --card:#ffffff; --line:#ffe8a3; --muted:#8a7f70;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{font-size:18px;}
body{margin:0; font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;}
a{color:#1971c2; text-decoration:none;}
h1{font-size:1.7rem; margin:.4em 0;} h2{font-size:1.4rem;} h3{font-size:1.2rem;}
#topbar{display:flex; align-items:center; gap:1rem; padding:.6rem 1rem;
  background:linear-gradient(90deg,#ffd43b,#ffa94d,#ff7aa2); position:sticky; top:0; z-index:50;}
.brand{font-size:1.4rem; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.2);}
#topnav{display:flex; gap:.4rem; flex-wrap:wrap; flex:1;}
#topnav a{color:#fff; font-weight:700; padding:.45rem .8rem; border-radius:999px; background:rgba(255,255,255,.22);}
#topnav a:hover{background:rgba(255,255,255,.4);}
#userchip{color:#fff; font-weight:700; display:flex; gap:.5rem; align-items:center;}
#userchip .pill{background:#fff; color:var(--ink); border-radius:999px; padding:.15rem .7rem; font-size:.95rem;}
main{max-width:1020px; margin:0 auto; padding:1rem 1rem 6rem;}
.card{background:var(--card); border:3px solid var(--line); border-radius:24px;
  padding:1.2rem 1.4rem; margin:1rem 0; box-shadow:0 4px 0 rgba(0,0,0,.05);}
.btn{display:inline-block; border:0; cursor:pointer; font-size:1.15rem; font-weight:800;
  padding:.8rem 1.6rem; border-radius:999px; color:#fff; background:var(--blue);
  box-shadow:0 4px 0 rgba(0,0,0,.15); margin:.3rem .3rem .3rem 0; min-height:56px; min-width:120px;}
.btn:active{transform:translateY(3px); box-shadow:none;}
.btn.primary{background:var(--pink);} .btn.green{background:#40c057;} .btn.orange{background:var(--orange);}
.btn.purple{background:var(--purple);} .btn.gray{background:#adb5bd;} .btn.red{background:var(--red);}
.btn.small{font-size:1rem; padding:.5rem 1.1rem; min-height:48px; min-width:0;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.big{font-size:1.4rem; padding:1rem 2.2rem;}
input,select,textarea{font-size:1.15rem; padding:.7rem .9rem; border:3px solid var(--line);
  border-radius:16px; width:100%; background:#fff; margin:.3rem 0 .8rem;}
label{font-weight:700; display:block; margin-top:.6rem;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem;}
.module-card{border-radius:24px; padding:1.2rem; color:#fff; cursor:pointer; min-height:150px;
  box-shadow:0 4px 0 rgba(0,0,0,.12);}
.module-card h3{margin:.2rem 0; font-size:1.5rem; color:#fff;}
.module-card p{margin:.2rem 0; opacity:.95;}
.module-card.locked{filter:grayscale(1); opacity:.65; cursor:not-allowed;}
.opt{display:block; width:100%; text-align:left; background:#fff9db; border:3px solid var(--line);
  border-radius:18px; padding:.9rem 1.1rem; font-size:1.2rem; font-weight:700; margin:.5rem 0;
  cursor:pointer; min-height:60px;}
.opt:hover{border-color:var(--orange);}
.opt.selected{background:#ffd43b; border-color:#f08c00;}
.opt.correct{background:#b2f2bb; border-color:#2f9e44;}
.opt.wrong{background:#ffc9c9; border-color:#e03131;}
.qimg{max-width:100%; border-radius:16px; border:3px solid var(--line); display:block; margin:.6rem auto;}
.qimg-wrap{text-align:center;}
.audio-box{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:.6rem 0;}
.audio-box audio{width:100%; max-width:420px;}
.noaudio{background:#f1f3f5; color:var(--muted); border:2px dashed #ced4da; border-radius:16px;
  padding:.8rem 1rem; font-weight:700;}
.explain{background:#e7f5ff; border-left:6px solid var(--blue); border-radius:12px; padding:.9rem 1rem; margin:.8rem 0;}
.explain.correct{background:#ebfbee; border-left-color:#2f9e44;}
.explain.wrong{background:#fff5f5; border-left-color:#e03131;}
.progress{height:18px; background:#f1f3f5; border-radius:999px; overflow:hidden; margin:.5rem 0;}
.progress > div{height:100%; background:linear-gradient(90deg,var(--green),var(--yellow));}
.tag{display:inline-block; background:#fff3bf; border-radius:999px; padding:.1rem .8rem; font-weight:700; margin-right:.4rem;}
.badge{display:inline-block; background:#ffe3e3; color:#c92a2a; border-radius:999px; padding:.1rem .8rem; font-weight:700;}
table{width:100%; border-collapse:collapse; font-size:1rem;}
th,td{border:2px solid var(--line); padding:.5rem .6rem; text-align:left;}
th{background:#fff3bf;}
#timerbar{position:fixed; left:0; right:0; bottom:0; z-index:60; background:#343a40; color:#fff;
  padding:.5rem 1rem; font-weight:700; text-align:center;}
#timerbar .bar{height:8px; background:#495057; border-radius:99px; overflow:hidden; margin-top:.3rem;}
#timerbar .bar > div{height:100%; background:var(--yellow);}
.hidden{display:none !important;}
.modal-back{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center;
  justify-content:center; z-index:100; padding:1rem;}
.modal{background:#fff; border-radius:24px; padding:1.5rem; max-width:520px; width:100%;
  max-height:80vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.3);}
.modal h2{margin-top:0;}
#toast-root{position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:200;}
.toast{background:#343a40; color:#fff; padding:.8rem 1.4rem; border-radius:999px; font-weight:700; margin:.3rem;}
.match-cols{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.match-item{border:3px solid var(--line); border-radius:16px; padding:.9rem; font-size:1.2rem;
  font-weight:700; cursor:pointer; background:#fff; min-height:64px;}
.match-item.sel{background:#ffd43b; border-color:#f08c00;}
.match-item.paired{background:#b2f2bb; border-color:#2f9e44;}
.sort-item{display:flex; align-items:center; gap:.6rem; background:#fff9db; border:3px solid var(--line);
  border-radius:16px; padding:.8rem 1rem; margin:.5rem 0; font-size:1.2rem; font-weight:700;
  cursor:grab; touch-action:none; user-select:none;}
.sort-item.dragging{opacity:.5; border-style:dashed;}
.count-grid{display:flex; flex-wrap:wrap; gap:.6rem;}
.count-cell{width:84px; height:84px; border-radius:16px; border:3px solid var(--line); background:#fff;
  font-size:2rem; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.count-cell.tapped{background:#ffd43b; border-color:#f08c00;}
.count-cell.tapped::after{content:"✓"; position:absolute;}
.stars{font-size:1.3rem; color:#f08c00; font-weight:800;}
.shop-item{border:3px solid var(--line); border-radius:20px; padding:1rem; text-align:center; background:#fff;}
.shop-item .price{font-size:1.4rem; font-weight:800; color:#f08c00;}
.admin-nav{display:flex; gap:.5rem; flex-wrap:wrap; margin:.8rem 0;}
.admin-nav a{background:#e7f5ff; border-radius:999px; padding:.5rem 1rem; font-weight:700;}
.admin-nav a.on{background:var(--blue); color:#fff;}
.print-answers{page-break-before:always;}
@media print{
  #topbar, #timerbar, .no-print, #toast-root{display:none !important;}
  body{background:#fff;} main{max-width:none; padding:0;}
  .card{border:1px solid #999; box-shadow:none; border-radius:0;}
}
@media (max-width:640px){
  html{font-size:16px;}
  .btn{min-width:0;}
  .match-cols{grid-template-columns:1fr 1fr;}
}