/* ============================================================
   学生名单 / 爱心（本地记录，不联网）
   侧栏只放可点按的数字块：不写说明文字，提示统一走 TIPS。
   ============================================================ */
#coinSide{display:flex;flex-direction:column;gap:.45rem;min-height:0}
.hp-top{flex:0 0 auto;display:flex;align-items:center;gap:.3rem}
.hp-btn{
  height:2.8rem;padding:0 .6rem;border-radius:.7rem;display:inline-flex;align-items:center;
  justify-content:center;gap:.25rem;font-size:.75rem;font-weight:900;white-space:nowrap;
  background:#fff;box-shadow:var(--shadow);transition:transform .15s,background .18s;
}
.hp-btn:active{transform:scale(.96)}
.hp-btn.draw{color:var(--primary-d);box-shadow:inset 0 0 0 .075rem rgba(249,115,22,.3),var(--shadow)}
.hp-btn.end{margin-left:auto;color:#BE123C;background:rgba(244,63,94,.1);box-shadow:inset 0 0 0 .075rem rgba(244,63,94,.22)}
.hp-num{
  width:2.5rem;height:2.8rem;border-radius:.6rem;border:.075rem solid var(--line);
  background:#fff;text-align:center;font:inherit;font-size:.8rem;font-weight:900;color:var(--ink);
  -moz-appearance:textfield;appearance:textfield;
}
.hp-num::-webkit-outer-spin-button,.hp-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hp-add{flex:0 0 auto;display:flex;gap:.3rem}
.hp-name{
  flex:1 1 auto;min-width:0;height:2.4rem;border-radius:.6rem;border:.075rem solid var(--line);
  background:#fff;padding:0 .55rem;font:inherit;font-size:.75rem;color:var(--ink);
}
.hp-name:focus{outline:none;border-color:rgba(249,115,22,.5)}
.hp-add-btn{
  flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:.6rem;display:grid;place-items:center;
  background:var(--primary);color:#fff;font-size:1.15rem;font-weight:900;line-height:1;
}
.hp-grid{
  flex:1 1 auto;min-height:0;overflow:auto;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;align-content:start;padding-right:.1rem;
}
.hp-cell{position:relative}
.hp-stu{
  width:100%;min-height:4.4rem;padding:.5rem .55rem;border-radius:1rem;background:#fff;
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:.08rem;transition:transform .15s,box-shadow .2s;
}
.hp-stu:active{transform:scale(.97)}
.hp-stu.bump{animation:hp-bump .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes hp-bump{50%{transform:scale(1.07)}}
.hp-count{display:flex;align-items:baseline;gap:.12rem;font-size:1.35rem;font-weight:900;line-height:1;color:var(--primary-d)}
.hp-count i{font-style:normal;font-size:.78rem;color:#F43F5E}
.hp-who{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.66rem;color:var(--ink-soft)}
.hp-x{
  position:absolute;top:-.1rem;right:-.1rem;width:1.15rem;height:1.15rem;border-radius:50%;
  display:grid;place-items:center;background:rgba(44,35,24,.34);color:#fff;font-size:.6rem;
  opacity:.45;transition:opacity .15s;
}
.hp-x:hover,.hp-x:focus-visible{opacity:1}
.hp-float{
  position:absolute;left:50%;top:.15rem;transform:translateX(-50%);pointer-events:none;
  font-size:.95rem;font-weight:900;color:#E11D48;animation:hp-float .9s ease-out forwards;
}
@keyframes hp-float{to{transform:translate(-50%,-1.7rem);opacity:0}}
.hp-sum{
  flex:0 0 auto;display:flex;align-items:baseline;justify-content:flex-end;gap:.25rem;
  padding:.1rem .2rem 0;font-size:.62rem;color:var(--ink-soft);
}
.hp-sum b{font-size:1rem;color:var(--primary-d)}
.hp-sum i{font-style:normal;color:#F43F5E}

/* 下课统计：独立一屏，确认后才进入下一节。 */
.hp-screen{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1.2rem;
  background:rgba(44,35,24,.42);backdrop-filter:blur(6px);
}
.hp-card{
  width:min(34rem,94vw);max-height:88vh;display:flex;flex-direction:column;gap:.7rem;
  padding:1.1rem;border-radius:1.2rem;background:var(--card);box-shadow:var(--shadow-lg);
}
.hp-head{display:flex;align-items:center;justify-content:space-between}
.hp-head b{font-size:1.1rem}
.hp-close{
  width:2rem;height:2rem;border-radius:.6rem;display:grid;place-items:center;
  background:#F7F3EA;color:var(--ink-soft);font-size:.9rem;
}
.hp-meta{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.7rem;color:var(--ink-soft)}
.hp-meta span{padding:.2rem .6rem;border-radius:999px;background:#FFF8EC;white-space:nowrap}
.hp-list{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:.25rem}
.hp-row{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.42rem .65rem;border-radius:.65rem;background:#FFF8EC;font-size:.78rem;
}
.hp-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-row b{font-size:.95rem;color:var(--primary-d);white-space:nowrap}
.hp-total{display:flex;align-items:baseline;justify-content:flex-end;gap:.3rem;font-size:.78rem;color:var(--ink-soft)}
.hp-total b{font-size:1.55rem;color:var(--primary-d)}
.hp-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem}
.hp-acts button{height:2.5rem;padding:0 .9rem;border-radius:.7rem;background:#F7F3EA;font-size:.75rem;font-weight:900}
.hp-acts button.primary{background:linear-gradient(145deg,var(--primary),var(--primary-d));color:#fff;box-shadow:0 .4rem .9rem rgba(0,0,0,.16)}

@media (max-width:900px){
  #coinSide{gap:.4rem}
  .hp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hp-stu{min-height:4rem}
}
@media (max-width:620px){
  .hp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hp-btn{height:2.6rem;padding:0 .45rem;font-size:.68rem}
  .hp-num{width:2.2rem;height:2.6rem}
}