/* ═══════════ 外壳：状态栏 / 视图切换 / 应用坞 / 浮层 ═══════════ */

/* ── 顶部状态栏 ── */
#statusbar{
  position:fixed;inset:0 0 auto 0;height:var(--sb-h);z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(var(--pad) + .3rem);
  font-size:.9rem;font-weight:600;color:rgba(255,255,255,.92);
  pointer-events:none;letter-spacing:.02em;
}
#statusbar .sb-left{display:flex;align-items:center;gap:.5rem;}
#statusbar .sb-right{display:flex;align-items:center;gap:.4rem;}
.sb-wifi{width:1.05rem;height:.9rem;color:currentColor;}
.sb-bat{width:1.45rem;height:.9rem;color:currentColor;}

/* ── 舞台与视图 ── */
#stage{position:fixed;inset:0;z-index:10;}
.view{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:var(--sb-h) var(--pad) 0;
  opacity:1;visibility:hidden;pointer-events:none;z-index:1;
  transition:none;
}
/* 所有视图切换都是"瞬时对调"，不做淡入淡出。
   原因：科目↔科目那条路径本来就不会触发动画（同一个 view 一直挂 is-active，
   class 没变化 → 动画不重播），是瞬时切换；而科目↔首页是换 view，
   会触发淡入，两个完全不同的整屏页面叠着溶解 200ms —— 即使满帧，
   看着也像"糊了一下/卡了一下"。同一种操作两条路径行为不一致，才是真正的问题。
   现在统一成瞬时；底色两页是同一张，所以对调不会闪。 */
.view.is-active{
  visibility:visible;pointer-events:auto;z-index:2;
  transition:none;
}
/* 首页的四周留白和科目页用同一套（左右 padding 归零，交给 .home-top / .home-grid 自己带） */
#view-home{padding:var(--sb-h) 0 var(--page-bottom);}

/* ── 底部应用坞（首页和科目页共用一种样式） ──
   这里**故意不用 backdrop-filter**：底下是平滑的深色渐变，18px 模糊肉眼看不出差别，
   却要每帧回读+模糊一次 629×91 的区域，平板上不划算。用深色玻璃底代替。 */
#dock{
  position:fixed;left:50%;bottom:.85rem;transform:translateX(-50%);
  z-index:55;display:flex;align-items:center;gap:.5rem;
  padding:.62rem .9rem;border-radius:1.6rem;
  background:linear-gradient(180deg,rgba(26,34,58,.9),rgba(11,17,32,.94));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 1.4rem 2.6rem rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);
  transition:opacity .3s,transform .3s;
}
#dock.is-hidden{opacity:0;transform:translateX(-50%) translateY(1.5rem);pointer-events:none;}
.dock-item{
  display:flex;flex-direction:column;align-items:center;gap:.24rem;
  width:4.05rem;padding:.2rem 0;border-radius:.9rem;
  transition:transform .18s,background .18s;
}
.dock-item:active{transform:scale(.93);background:rgba(255,255,255,.1);}
.dock-item .di-ico{
  position:relative;
  width:2.5rem;height:2.5rem;border-radius:.85rem;display:grid;place-items:center;
  color:#fff;box-shadow:0 .34rem .8rem rgba(8,4,40,.34),inset 0 1px 0 rgba(255,255,255,.4);
}
.dock-item .di-ico .ic{width:1.35rem;height:1.35rem;}
.dock-item .di-lbl{font-size:.72rem;color:rgba(255,255,255,.86);white-space:nowrap;font-weight:500;}
.dock-item:hover{background:rgba(255,255,255,.08);}

/* ── 通用卡片 ── */
.card{
  position:relative;border-radius:var(--r-xl);
  background:var(--glass);
  border:1px solid var(--stroke);
  /* 立体感三件套和科目页的卡片用同一套变量 */
  box-shadow:var(--card-drop),var(--card-ring),var(--card-top);
  overflow:hidden;
  transition:transform .2s cubic-bezier(.22,.9,.28,1),box-shadow .2s;
  cursor:pointer;
}
.card:active{transform:scale(.978);}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  /* 只在右上角一点高光（和科目页的 .bcard::after 一样），
     原来是整片 white .16 蒙版，会把卡片整体冲淡 */
  background:radial-gradient(92% 70% at 84% 0%,rgba(255,255,255,.22),transparent 62%);
}

/* ── 浮层 sheet ── */
.sheet-wrap{position:fixed;inset:0;z-index:80;}
.sheet-mask{position:absolute;inset:0;background:rgba(8,4,30,.52);backdrop-filter:blur(6px);animation:fadeIn .22s;}
.sheet{
  position:absolute;right:0;top:0;bottom:0;width:min(34rem,88vw);
  padding:1.6rem 1.5rem 1.4rem;
  background:linear-gradient(170deg,rgba(46,34,120,.96),rgba(24,15,66,.985));
  border-left:1px solid var(--stroke);
  box-shadow:-1.4rem 0 3.4rem rgba(0,0,0,.42);
  overflow-y:auto;
  animation:slideIn .3s cubic-bezier(.22,.9,.28,1);
}
@keyframes slideIn{from{transform:translateX(100%);}to{transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.sheet h2{font-size:1.3rem;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem;}
.sheet .sh-close{position:absolute;top:1.2rem;right:1.2rem;width:2.2rem;height:2.2rem;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;}
.sh-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;
  border-radius:var(--r-md);background:rgba(255,255,255,.06);margin-bottom:.6rem;font-size:.95rem;}
.sh-row .k{color:var(--ink-2);}
.sh-row .v{font-weight:700;}
.sh-input{width:100%;padding:.75rem .9rem;border-radius:var(--r-md);background:rgba(255,255,255,.09);
  border:1px solid var(--stroke-soft);color:#fff;font-size:.92rem;margin-bottom:.6rem;
  -webkit-user-select:text;user-select:text;}
.sh-input::placeholder{color:var(--ink-4);}
.btn-primary{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  padding:.85rem;border-radius:999px;font-weight:700;font-size:1rem;color:#08251f;
  background:linear-gradient(100deg,#5ef0c0,#37d5ff);box-shadow:0 .5rem 1.2rem rgba(55,213,255,.35);}
.btn-ghost{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  padding:.8rem;border-radius:999px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);
  border:1px solid var(--stroke-soft);}
.btn-danger{color:#ffd7d7;background:rgba(255,82,82,.16);border:1px solid rgba(255,82,82,.35);}
.sh-title-sm{font-size:.82rem;color:var(--ink-3);margin:1.1rem 0 .5rem;letter-spacing:.06em;}

/* ── Toast ── */
.toast-wrap{position:fixed;left:50%;top:3.4rem;transform:translateX(-50%);z-index:95;
  display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;}
.toast{
  padding:.7rem 1.2rem;border-radius:999px;font-size:.92rem;font-weight:600;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.1));
  border:1px solid var(--stroke);backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm);animation:toastIn .3s cubic-bezier(.22,.9,.28,1);white-space:nowrap;
}
.toast.ok{background:linear-gradient(180deg,rgba(47,224,176,.35),rgba(47,224,176,.15));border-color:rgba(47,224,176,.5);}
.toast.warn{background:linear-gradient(180deg,rgba(255,182,72,.35),rgba(255,182,72,.15));border-color:rgba(255,182,72,.5);}
.toast.out{animation:toastOut .3s forwards;}
@keyframes toastIn{from{opacity:0;transform:translateY(-.8rem) scale(.94);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateY(-.6rem) scale(.96);}}

/* ── 得分飘字 / 粒子 ── */
.fx-layer{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;}
.fly-points{
  position:absolute;font-weight:900;font-size:1.5rem;color:#5ef0c0;
  text-shadow:0 2px 10px rgba(0,0,0,.45),0 0 18px rgba(94,240,192,.7);
  font-family:var(--font-num);animation:flyUp 1.25s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes flyUp{
  0%{opacity:0;transform:translateY(.6rem) scale(.6);}
  22%{opacity:1;transform:translateY(-.4rem) scale(1.18);}
  70%{opacity:1;transform:translateY(-2.4rem) scale(1);}
  100%{opacity:0;transform:translateY(-4rem) scale(.9);}
}
.spark{position:absolute;width:.5rem;height:.5rem;border-radius:50%;
  background:radial-gradient(circle,#fff,#ffd166 45%,transparent 70%);animation:sparkOut 1s forwards;}
@keyframes sparkOut{0%{opacity:1;transform:translate(0,0) scale(1);}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2);}}

/* ── 锁定层 ── */
.lock-screen{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:linear-gradient(160deg,#241457,#120a35);color:#fff;text-align:center;padding:2rem;}
.lock-screen .lk-box{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:22rem;}
.lock-screen .lk-ico{width:4.2rem;height:4.2rem;border-radius:1.3rem;display:grid;place-items:center;
  background:linear-gradient(160deg,#7c5cff,#3b2ec9);box-shadow:0 .8rem 2rem rgba(90,60,255,.5);}
.lock-screen .lk-ico .ic{width:2.2rem;height:2.2rem;}
.lock-screen h2{font-size:1.35rem;}
.lock-screen p{color:var(--ink-3);font-size:.9rem;line-height:1.7;}
.lock-screen .lk-pin{display:flex;gap:.7rem;margin-top:.4rem;}
.lock-screen .lk-dot{width:.95rem;height:.95rem;border-radius:50%;background:rgba(255,255,255,.2);}
.lock-screen .lk-dot.on{background:#5ef0c0;box-shadow:0 0 12px rgba(94,240,192,.8);}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1rem;}
.pin-key{width:4.2rem;height:3.2rem;border-radius:1rem;display:grid;place-items:center;
  font-size:1.35rem;font-weight:700;background:rgba(255,255,255,.09);border:1px solid var(--stroke-soft);}
.pin-key:active{background:rgba(255,255,255,.2);}

/* ── 提示条（家长/防沉迷） ── */
.soft-tip{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--ink-3);}