:root{
  --bg:#EDF7FB; --card:#FFFFFF; --ink:#17324A; --ink2:#6E8899;
  --deep:#0D3B5E; --blue:#2E9BD6; --teal:#17B8A6; --cyan:#5BC8E8;
  --amber:#FFB627; --green:#3DBE7B; --red:#FF6B5E;
  --shadow:0 4px 16px rgba(23,50,74,.09);
  --radius:20px;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;}
body{background:var(--bg);color:var(--ink);min-height:100vh;display:flex;flex-direction:column;max-width:480px;margin:0 auto;
  background-image:radial-gradient(circle at 15% 8%, rgba(91,200,232,.14) 0 120px, transparent 121px),radial-gradient(circle at 90% 30%, rgba(23,184,166,.10) 0 90px, transparent 91px);}
.page{display:none;padding:20px 18px 96px;animation:fade .3s;}
.page.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{font-size:23px;} h2{font-size:18px;margin-bottom:12px;}
.sub{color:var(--ink2);font-size:13px;margin-top:4px;}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px;}
.row{display:flex;align-items:center;gap:10px;}
.between{justify-content:space-between;}
.tag{display:inline-block;font-size:11px;padding:3px 10px;border-radius:999px;background:#E8F2F7;color:var(--ink2);margin:2px 4px 2px 0;}
.tag.blue{background:#E3F2FB;color:#1B7FB8;} .tag.teal{background:#E0F6F3;color:#0E9384;}
.tag.amber{background:#FFF3DB;color:#C98A00;} .tag.purple{background:#ECEAFF;color:#7B6FF0;}
.tag.green{background:#E4F6EC;color:#2F9E5F;} .tag.red{background:#FFE9E6;color:#E05A4E;} .tag.deep{background:#E2ECF5;color:#0D3B5E;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:14px;padding:12px 18px;font-size:15px;font-weight:600;cursor:pointer;transition:.15s;}
.btn:active{transform:scale(.96);}
.btn.primary{background:linear-gradient(120deg,var(--blue),var(--teal));color:#fff;width:100%;box-shadow:0 6px 14px rgba(46,155,214,.3);}
.btn.teal{background:var(--teal);color:#fff;} .btn.ghost{background:#E8F2F7;color:var(--ink);}
.btn.small{padding:8px 14px;font-size:13px;border-radius:10px;}
.btn.blue{background:var(--blue);color:#fff;} .btn.deep{background:var(--deep);color:#fff;}
.progress{height:8px;background:#E8F2F7;border-radius:99px;overflow:hidden;}
.progress>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--cyan));}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;display:flex;justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(23,50,74,.08);border-radius:24px 24px 0 0;z-index:99;}
.nav button{background:none;border:none;font-size:10px;color:var(--ink2);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px 8px;}
.nav button .ic{font-size:20px;}
.nav button.on{color:var(--blue);font-weight:700;}
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.back{background:#E8F2F7;border:none;width:34px;height:34px;border-radius:12px;font-size:16px;cursor:pointer;}
.avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 4px 10px rgba(46,155,214,.3);border:2.5px solid #fff;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.big-ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;}
/* 深空 hero */
.hero{border-radius:var(--radius);padding:22px 20px;margin-bottom:14px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#0D3B5E 0%,#14638F 55%,#17A2A0 130%);
  box-shadow:0 10px 24px rgba(13,59,94,.28);}
.hero::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(2px 2px at 12% 22%,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 30% 70%,#BFE9F7 60%,transparent),radial-gradient(2.2px 2.2px at 55% 15%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 72% 45%,#fff 60%,transparent),radial-gradient(2px 2px at 88% 25%,#BFE9F7 60%,transparent),radial-gradient(1.4px 1.4px at 42% 40%,#fff 60%,transparent),radial-gradient(1.8px 1.8px at 92% 75%,#fff 60%,transparent);}
.hero *{position:relative;}
.hero .sub{color:#BFE0EF;}
.hero-img{position:absolute;right:-14px;bottom:-18px;width:120px;opacity:.95;}
.task{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed #E2EDF4;}
.task:last-child{border:none;}
.dot{width:22px;height:22px;border-radius:8px;border:2px solid #CBDEEA;flex-shrink:0;}
.dot.done{background:var(--green);border-color:var(--green);}
.chip{padding:8px 14px;border-radius:12px;background:#E8F2F7;font-size:13px;cursor:pointer;border:2px solid transparent;}
.chip.sel{border-color:var(--teal);background:#E0F6F3;}
.upload{border:2px dashed #B9D6E6;border-radius:var(--radius);padding:32px 16px;text-align:center;color:var(--ink2);cursor:pointer;}
.q-opt{display:block;width:100%;text-align:left;background:#F4FAFD;border:2px solid transparent;border-radius:14px;padding:14px;margin-bottom:10px;font-size:15px;cursor:pointer;}
.q-opt.sel{border-color:var(--blue);background:#E3F2FB;}
/* ===== 抽卡：太空主题 ===== */
.flash{perspective:1200px;height:250px;cursor:pointer;}
.flash-in{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.2,.7,.3,1.2);transform-style:preserve-3d;}
.flash.flipped .flash-in{transform:rotateY(180deg);}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px;text-align:center;box-shadow:0 12px 28px rgba(13,59,94,.22);overflow:hidden;}
.face.front{color:#fff;
  background:linear-gradient(160deg,#0D3B5E 0%,#14638F 60%,#0E9384 135%);
  transform:rotateY(0deg) translateZ(1px);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;}
.face.front::before{content:"";position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background-image:radial-gradient(2px 2px at 15% 25%,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 40% 12%,#BFE9F7 60%,transparent),radial-gradient(2px 2px at 65% 30%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 85% 18%,#fff 60%,transparent),radial-gradient(1.8px 1.8px at 25% 60%,#fff 60%,transparent),radial-gradient(1.4px 1.4px at 78% 68%,#BFE9F7 60%,transparent);}
.face.front::after{content:"";position:absolute;left:-40px;bottom:-70px;width:170px;height:170px;border-radius:50%;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border:10px solid rgba(255,201,77,.55);}
.face .mascot-float{position:absolute;right:10px;top:10px;width:64px;animation:floaty 3.2s ease-in-out infinite;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(6deg)}}
.face.front .qtext{position:relative;font-size:18px;line-height:1.65;font-weight:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.face.front .hint{position:relative;color:#BFE0EF;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.face.front .tag{position:relative;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.face.back{background:linear-gradient(150deg,#fff, #EAF7F4);transform:rotateY(180deg) translateZ(1px);border:1px solid #DDF0EC;justify-content:flex-start;overflow-y:auto;text-align:left;color:var(--ink);visibility:hidden;}
.flipped .face.back{visibility:visible;}
/* 实验页：连线/选项渲染 */
.lab-match{margin:10px 0;}
.lab-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#F4FAFD;border-radius:12px;margin-bottom:8px;font-size:14px;}
.lab-l{flex:1;font-weight:600;color:var(--ink);} .lab-ar{color:var(--teal);} .lab-r{flex:1;color:var(--ink2);}
.lab-opts{margin:10px 0;}
.lab-opt{background:#F4FAFD;border-radius:12px;padding:12px 14px;margin-bottom:8px;font-size:14px;}
/* 星球航线进度 */
.orbit-path{display:flex;align-items:center;justify-content:space-between;margin:18px 8px 4px;position:relative;}
.orbit-path::before{content:"";position:absolute;left:18px;right:18px;top:50%;height:3px;background:#D5E8F2;border-radius:9px;}
.op-dot{position:relative;width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid #CBDEEA;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:1;}
.op-dot.done{background:linear-gradient(135deg,var(--blue),var(--teal));border-color:transparent;}
.op-dot.cur{border-color:var(--amber);box-shadow:0 0 0 5px rgba(255,182,39,.25);animation:pulse 1.6s infinite;}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(255,182,39,.12)}}
/* 彩带 */
.confetti{position:fixed;top:-10px;width:9px;height:14px;border-radius:2px;z-index:999;animation:fall 1.6s ease-in forwards;}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.2;}}
.chat-ai{background:#F0F7FE;border-radius:16px 16px 16px 4px;padding:12px 14px;max-width:85%;font-size:14px;line-height:1.6;}
.chat-kid{background:linear-gradient(120deg,var(--blue),var(--teal));color:#fff;border-radius:16px 16px 4px 16px;padding:12px 14px;max-width:70%;margin-left:auto;font-size:14px;}
.heat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.cell{border-radius:12px;padding:12px 8px;text-align:center;font-size:11px;color:#fff;line-height:1.4;}
.hi{background:var(--green);} .mid{background:var(--amber);} .lo{background:var(--red);}
.stat{display:flex;gap:10px;}
.stat>div{flex:1;background:#F4FAFD;border-radius:14px;padding:14px;text-align:center;}
.stat b{font-size:22px;display:block;}
textarea,input[type=text]{width:100%;border:1.5px solid #D5E6F0;border-radius:14px;padding:12px;font-size:14px;font-family:inherit;background:#fff;resize:none;}
.banner{background:linear-gradient(135deg,#E0F6F3,#E3F2FB);border-radius:var(--radius);padding:16px;margin-bottom:14px;font-size:13px;color:#28536B;}
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:var(--deep);color:#fff;padding:10px 20px;border-radius:99px;font-size:13px;opacity:0;transition:.3s;z-index:999;}
.toast.show{opacity:1;}
.switch{margin-left:auto;background:#E8F2F7;border-radius:99px;padding:3px;display:flex;}
.switch button{border:none;background:none;font-size:12px;padding:6px 12px;border-radius:99px;cursor:pointer;color:var(--ink2);}
.switch button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:var(--shadow);}