:root{
  --bg:#FFF8EF; --card:#FFFFFF; --ink:#3A2E22; --ink2:#7A6A55; --ink3:#A89680;
  --line:#EFE2D0; --brand:#E8863C; --brand2:#F2A65A; --brand-soft:#FFF1E2;
  --green:#3E9E6A; --green-soft:#E7F6EE; --blue:#3C7BD6; --blue-soft:#E7F0FC;
  --purple:#7A5CC4; --purple-soft:#F0EBFB; --red:#D9534F; --red-soft:#FCEAE9;
  --amber:#E0A012; --amber-soft:#FDF3DC;
  --r:14px; --shadow:0 2px 10px rgba(120,90,50,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px}

.wrap{max-width:1180px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.muted{color:var(--ink2);font-size:13px}
.small{font-size:12px;color:var(--ink3)}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}

.btn{
  background:var(--brand);color:#fff;border-radius:10px;padding:9px 16px;font-size:14px;
  font-weight:500;transition:.15s;white-space:nowrap;
}
.btn:hover{background:#D9762F}
.btn:disabled{background:#D8CDBC;cursor:not-allowed}
.btn.ghost{background:var(--brand-soft);color:#B4601F}
.btn.ghost:hover{background:#FFE4CC}
.btn.green{background:var(--green)}.btn.green:hover{background:#358A5C}
.btn.blue{background:var(--blue)}.btn.blue:hover{background:#3369BC}
.btn.purple{background:var(--purple)}.btn.purple:hover{background:#694DB0}
.btn.red{background:var(--red)}.btn.red:hover{background:#C1433F}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn.xs{padding:3px 8px;font-size:12px;border-radius:7px}

.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500}
.tag.brand{background:var(--brand-soft);color:#B4601F}
.tag.green{background:var(--green-soft);color:#2C7A50}
.tag.blue{background:var(--blue-soft);color:#2F62B0}
.tag.purple{background:var(--purple-soft);color:#60489C}
.tag.red{background:var(--red-soft);color:#B23C38}
.tag.gray{background:#F2ECE3;color:var(--ink2)}

/* 顶部条 */
.topbar{
  background:linear-gradient(90deg,#E8863C,#F2A65A);color:#fff;padding:12px 18px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  box-shadow:0 2px 8px rgba(200,120,50,.2);
}
.topbar h1{font-size:18px;font-weight:500;letter-spacing:.5px}
.topbar .who{font-size:14px;background:rgba(255,255,255,.22);padding:4px 12px;border-radius:999px}

/* 电脑号选择 */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px}
.pick{
  aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;font-size:17px;font-weight:500;
  color:var(--ink);transition:.12s;
}
.pick:hover{border-color:var(--brand);background:var(--brand-soft)}
.pick.on{border-color:var(--green);background:var(--green-soft);color:#2C7A50}
.pick small{font-size:10px;font-weight:400;color:var(--ink3);margin-top:1px}
.pick.on small{color:#2C7A50}

/* 关卡 */
.levels{display:flex;flex-direction:column;gap:10px}
.lv{
  border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;transition:.15s;
}
.lv.open{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.lv.done{border-color:var(--green);background:var(--green-soft)}
.lv-head{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.lv-badge{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--brand-soft);color:#B4601F;
  display:flex;align-items:center;justify-content:center;font-weight:500;font-size:15px;
}
.lv.done .lv-badge{background:var(--green);color:#fff}
.lv-title{flex:1;min-width:0}
.lv-title b{font-size:15px;font-weight:500}
.lv-title span{display:block;font-size:12px;color:var(--ink2)}
.lv-body{display:none;padding:0 14px 14px;border-top:1px dashed var(--line);margin-top:-1px}
.lv.open .lv-body,.lv.done .lv-body{display:block;padding-top:12px}
/* 任务单默认全部展开（可点标题收起） */
.lv.expanded .lv-body{display:block;padding-top:12px}
.lv-body dl{margin:0}
.lv-body dt{font-size:12px;color:var(--ink3);margin-top:10px;font-weight:500}
.lv-body dd{font-size:14px;margin-top:3px}
.lv-body dd.task{background:var(--brand-soft);padding:10px 12px;border-radius:9px;border-left:3px solid var(--brand)}
.lv-body dd.check{color:var(--green);font-weight:500}

video{width:100%;border-radius:10px;background:#000;display:block;max-height:320px}
.vph{
  width:100%;aspect-ratio:16/9;border:2px dashed var(--line);border-radius:10px;background:#FBF6EF;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink3);font-size:13px;
}

/* 自评星星 */
.stars{display:flex;gap:8px;margin-top:8px}
.star{font-size:30px;line-height:1;color:#DDD3C4;transition:.12s;user-select:none}
.star.on{color:#F5B301}

/* 榜单 */
.rank{display:flex;flex-direction:column;gap:6px}
.rk{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;background:#FBF6EF}
.rk.me{background:var(--brand-soft);outline:1.5px solid var(--brand)}
.rk .g{font-weight:500;font-size:14px;flex:1}
.rk .bar{height:7px;border-radius:4px;background:linear-gradient(90deg,#E8863C,#F5B301)}
.rk .num{font-weight:500;font-variant-numeric:tabular-nums}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--line)}
th{background:#FBF6EF;font-weight:500;color:var(--ink2);font-size:12px;white-space:nowrap}
td{font-variant-numeric:tabular-nums}
tbody tr:hover{background:#FDFAF5}
.tbl-scroll{max-height:440px;overflow:auto}

/* 弹窗 */
.mask{
  position:fixed;inset:0;background:rgba(58,46,34,.55);display:flex;align-items:center;
  justify-content:center;z-index:99;padding:20px;
}
.modal{background:#fff;border-radius:16px;padding:22px;max-width:420px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.modal h3{font-size:17px;font-weight:500;margin-bottom:10px}
.modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* 大字闪出 */
.flash{
  position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:200;background:rgba(255,248,239,.94);animation:fade 2.4s ease forwards;text-align:center;padding:20px;
}
.flash .big{
  font-size:44px;font-weight:500;color:var(--brand);letter-spacing:2px;
  animation:pop .6s cubic-bezier(.2,1.4,.4,1);text-shadow:0 2px 0 #fff;
}
.flash .sub{margin-top:12px;font-size:16px;color:var(--ink2)}
.flash .em{margin-top:10px;font-size:30px}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes fade{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}

/* 提醒浮层 */
.toasts{position:fixed;right:14px;bottom:14px;z-index:150;display:flex;flex-direction:column;gap:8px;max-width:330px}
.toast{
  background:#fff;border-left:4px solid var(--brand);border-radius:10px;padding:11px 13px;
  box-shadow:0 4px 16px rgba(0,0,0,.14);font-size:13px;animation:slidein .3s ease;
}
.toast.honor{border-left-color:#E0A012;background:var(--amber-soft)}
.toast.tip{border-left-color:var(--blue);background:var(--blue-soft)}
.toast.improve{border-left-color:var(--red);background:var(--red-soft)}
.toast b{display:block;font-size:12px;margin-bottom:3px;font-weight:500}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}}
.stat{background:#FBF6EF;border-radius:10px;padding:10px 12px}
.stat b{display:block;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--ink2)}
.hidden{display:none !important}

/* 学生端：左边任务单宽、右边小组榜窄 */
.grid2.wide-left{grid-template-columns:minmax(0,2.25fr) minmax(0,1fr)}
@media(max-width:820px){.grid2.wide-left{grid-template-columns:1fr}}

/* 掌握度：三个大按钮 */
.mastery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
@media(max-width:520px){.mastery{grid-template-columns:1fr}}
.mbtn{
  border:2px solid var(--line);background:#fff;border-radius:14px;padding:14px 6px;text-align:center;
  transition:.15s;line-height:1.35;
}
.mbtn b{display:block;font-size:17px;font-weight:600;color:var(--ink)}
.mbtn small{display:block;font-size:12px;color:var(--ink3);margin-top:2px}
.mbtn em{display:block;font-style:normal;font-size:13px;color:var(--brand);font-weight:600;margin-top:4px}
.mbtn:hover{border-color:var(--brand2);background:#FFFCF8}
.mbtn.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 4px 14px rgba(232,134,60,.22)}
.mbtn.on b{color:#B4601F}
.mbtn:disabled{opacity:.45;cursor:not-allowed}

/* 关卡徽章改成"第X关"，自动变宽 */
.lv-badge{width:auto!important;min-width:52px;padding:0 8px;border-radius:8px!important;font-size:13px!important}

/* WPS 操作步骤示意图 */
.stepimg{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;display:block;margin-top:6px}
.stepnote{font-size:12px;color:var(--ink3);margin-top:6px}

/* 右上角"重新输入电脑号" */
.repick{background:rgba(255,255,255,.24);color:#fff;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500}
.repick:hover{background:rgba(255,255,255,.4)}

/* 烟花画布 */
.fwcanvas{position:fixed;inset:0;pointer-events:none;z-index:210}

/* 顶部互通小按钮 */
.topbtn{background:rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:6px 14px;font-size:13px;text-decoration:none;display:inline-block}
.topbtn:hover{background:rgba(255,255,255,.4)}
.dot{width:7px;height:7px;border-radius:50%;background:#C9BCA8;display:inline-block;margin-right:5px}
.dot.on{background:var(--green)}

/* 举手求助按钮 */
.helpbtn{background:rgba(255,255,255,.24);color:#fff;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500}
.helpbtn:hover{background:rgba(255,255,255,.4)}
.helpbtn.on{background:#E8552F;color:#fff;box-shadow:0 0 0 3px rgba(232,85,47,.35);animation:helppulse 1.2s infinite}
@keyframes helppulse{0%,100%{box-shadow:0 0 0 3px rgba(232,85,47,.35)}50%{box-shadow:0 0 0 8px rgba(232,85,47,.08)}}

/* 老师端：求助提示 */
.helptag{background:#E8552F;color:#fff;border-radius:8px;padding:2px 8px;font-size:12px;font-weight:600}
.helpbox{background:#FFEDE8;border:1px solid #F6C6B8;border-radius:12px;padding:10px 14px;margin-top:10px;font-size:14px;color:#B43A1C}

/* 电脑号格子：学生自填标记 */
.pick.self{border-color:var(--brand);background:var(--brand-soft)}
.pick i{display:block;font-style:normal;font-size:10px;color:#B4601F;font-weight:600;margin-top:1px}

/* ===================== 童趣版（四年级小朋友） ===================== */

/* —— 选号页 —— */
.kid-card{
  border:3px solid #F5C89A!important;border-radius:26px!important;padding:28px 24px!important;
  background:linear-gradient(180deg,#FFFCF6 0%,#FFF5E7 100%);
  box-shadow:0 10px 28px rgba(232,134,60,.16)!important;
}
.kid-hello{display:flex;align-items:center;gap:16px;text-align:left}
.kid-avatar{
  width:64px;height:64px;flex:0 0 64px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFEBD2,#FFD2A0);
  display:flex;align-items:center;justify-content:center;font-size:38px;
  box-shadow:0 3px 0 rgba(200,140,80,.25);animation:bob 2.6s ease-in-out infinite;
}
.kid-avatar.big{width:56px;height:56px;flex:0 0 56px;font-size:32px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.kid-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.kid-form{grid-template-columns:1fr}}
.kid-field{
  display:flex;align-items:center;gap:8px;background:#fff;border:2.5px solid var(--line);
  border-radius:18px;padding:12px 14px;transition:.15s;
}
.kid-field:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.kid-emo{font-size:26px;line-height:1;flex:0 0 auto}
.kid-label{font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap}
.kid-field input{
  width:70px;min-width:52px;flex:1;border:none;outline:none;background:var(--brand-soft);
  border-radius:12px;padding:7px 8px;font-size:24px;font-weight:800;text-align:center;
  color:#B4601F;font-variant-numeric:tabular-nums;
}
.kid-field input::-webkit-outer-spin-button,
.kid-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kid-field input[type=number]{-moz-appearance:textfield}
.kid-tip{
  background:var(--amber-soft);border:2px dashed #F0CF8E;border-radius:16px;
  padding:12px 15px;font-size:14px;color:#8A6114;line-height:1.75;
}
.kid-btn{
  font-size:17px!important;font-weight:700;padding:12px 24px!important;
  border-radius:999px!important;box-shadow:0 4px 0 rgba(0,0,0,.13);
}
.kid-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.13)}
.kid-btn:disabled{box-shadow:none;opacity:.5}

/* —— 顶部：我的进度 + 勋章 + 倒计时 —— */
.kid-hero{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.45fr) minmax(0,.95fr);
  gap:18px;align-items:center;margin-top:14px;padding:16px 20px!important;
  border:3px solid #F5C89A!important;border-radius:24px!important;
  background:linear-gradient(120deg,#FFFAF2,#FFEED8)!important;
}
@media(max-width:900px){.kid-hero{grid-template-columns:1fr}}
.kid-hero-l{display:flex;align-items:center;gap:12px;min-width:0}
.kid-name{font-size:19px;font-weight:800;line-height:1.25;color:var(--ink)}
.kid-sub{font-size:13px;color:var(--ink2)}
.kid-prog-wrap{margin-top:4px}
.kid-prog{
  height:16px;border-radius:999px;background:#F0E0CC;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.09);
}
.kid-prog i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#F5B301,#E8863C);
  transition:width .55s cubic-bezier(.3,1.2,.4,1);
}
.medals{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.medal{
  width:48px;display:flex;flex-direction:column;align-items:center;gap:3px;
}
.medal-em{
  width:42px;height:42px;border-radius:50%;background:#F0E4D4;color:#BBA98F;
  border:2px dashed #DCCDB8;display:flex;align-items:center;justify-content:center;
  font-size:21px;font-style:normal;transition:.25s;
}
.medal.got .medal-em{
  background:radial-gradient(circle at 35% 30%,#FFEEB4,#F5B301);color:#7A5100;
  border:2px solid #E0A012;box-shadow:0 3px 0 rgba(180,120,20,.28);
  animation:pop .45s cubic-bezier(.2,1.4,.4,1);
}
.medal small{font-size:10px;color:var(--ink3);line-height:1}
.medal.got small{color:#B47A05;font-weight:700}

/* 学生端也能看到倒计时 */
.cdbar{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px;
  background:#fff;border:2.5px solid var(--line);border-radius:18px;padding:10px 14px;transition:.2s;
}
.cdbar-emo{font-size:22px}
.cdbar-num{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px}
.cdbar-txt{flex:1 0 100%;text-align:center;font-size:12px;color:var(--ink2)}
.cdbar.idle{background:#FBF6EF;border-color:#E8DCCB}
.cdbar.idle .cdbar-num{color:#C4B49A}
.cdbar.run{background:var(--blue-soft);border-color:#A9C8F0}
.cdbar.run .cdbar-num{color:#2F62B0}
.cdbar.hurry{background:var(--red-soft);border-color:#F0A9A5;animation:cdblink 1s infinite}
.cdbar.hurry .cdbar-num{color:#C1433F}
.cdbar.over{background:var(--red-soft);border-color:var(--red)}
.cdbar.over .cdbar-num{color:#C1433F}
@keyframes cdblink{0%,100%{opacity:1}50%{opacity:.5}}

/* —— 关卡卡片 —— */
.lv-emo{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;font-size:23px;
}
.lv.done .lv-emo{background:#fff;box-shadow:0 0 0 2px var(--green-soft)}
.lv.focus{border-color:#E0A012;animation:focusglow 1.9s ease-in-out infinite}
@keyframes focusglow{
  0%,100%{box-shadow:0 0 0 4px var(--amber-soft)}
  50%{box-shadow:0 0 0 10px rgba(224,160,18,.10)}
}
.lv.focus .lv-title span{color:#B47A05;font-weight:700}
.lv-head{padding:14px!important}

/* 自评提问条 + 大按钮里的动物 */
.askme{
  background:var(--purple-soft);border:2px dashed #CDBCF0;border-radius:16px;
  padding:10px 14px;font-size:15px;font-weight:600;color:#5B3FA0;
}
.me1{display:block;font-size:32px;line-height:1.1;margin-bottom:2px;transition:.2s}
.mbtn.on .me1{transform:scale(1.15)}

/* —— 小组榜 —— */
.rk{position:relative;padding:9px 12px;border-radius:14px;gap:8px}
.rk-emo{font-size:22px;flex:0 0 auto}
.rk .tag{font-size:12px}
.rk-crown{
  position:absolute;top:-11px;right:4px;font-size:19px;
  animation:bob 2s ease-in-out infinite;
}
.rk.me{background:linear-gradient(90deg,#FFF1E2,#FFE3C9);outline:2px solid var(--brand)}