/* ============================================
   班级萌宠 · 山海经灵宠主题设计系统
   浅色东方美学 × 轻游戏化
   ============================================ */
:root {
  --paper: #FAF7F0;       /* 宣纸白 */
  --moon: #F5F9FA;        /* 月白 */
  --celadon: #7FB8A4;     /* 青瓷绿 */
  --ink-teal: #5B8A8F;    /* 黛青 */
  --gold: #D4A94E;        /* 鎏金 */
  --cinnabar: #E07A5F;    /* 朱砂 */
  --ink: #2C3E40;         /* 墨色 */
  --ink-soft: #6B7F80;    /* 灰墨 */
  --radius: 18px;
  --shadow: 0 4px 16px rgba(91, 138, 143, .12);
  --shadow-sm: 0 2px 8px rgba(91, 138, 143, .10);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  line-height: 1.6;
  overscroll-behavior: none;
  /* 浅色兜底：背景图没加载出来时也是宣纸白，绝不会变成「黑屏」 */
  background: #FAF7F0;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  /* 主人指定：星云背景图不透明度 90% */
  opacity: .9;
  background: url('../assets/bg/main-bg.jpg') center/cover no-repeat;
  filter: saturate(1.05);
}
/* 宣纸柔光罩：透出星云的同时保证文字可读 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(250,247,240,.52) 0%, rgba(250,247,240,.40) 100%);
}
#app { max-width: 680px; margin: 0 auto; padding: 12px 14px 90px; }

/* ---------- PWA 安装引导条 ---------- */
.install-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: rgba(34, 44, 58, .94); color: #fff;
  padding: 12px 14px; font-size: 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  transform: translateY(110%); transition: transform .35s ease;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
.install-bar.on { transform: translateY(0); }
.install-bar button {
  border: none; border-radius: 10px; padding: 8px 16px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, #7FB8A4, #5B8A8F); color: #fff;
}
.install-bar button.close {
  background: rgba(255,255,255,.12); color: #d0d8e0; padding: 8px 10px; border-radius: 50%;
}
@media (max-width: 380px) {
  .install-bar { font-size: 12px; padding: 10px; }
  .install-bar button { padding: 7px 12px; }
}

/* ---------- 顶部 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px 14px;
}
/* 左侧标题区：允许收缩但文字保持横排（手机上账号徽章变长时不再被挤成竖排） */
.topbar > div:first-child { flex: 1; min-width: 0; }
.brand { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.brand-main {
  font-family: "STXingkai", "华文行楷", "方正清刻本悦宋", cursive;
  font-size: 26px; font-weight: 700; color: var(--ink);
  letter-spacing: 2px; line-height: 1; white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.brand-sub {
  font-family: "SimSun", "宋体", "Songti SC", serif;
  font-size: 14px; color: var(--ink-teal); font-weight: 600; padding-left: 4px; white-space: nowrap;
}
.topbar .sub {
  font-size: 12px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* v68：班级下方的三项灵气（总 / 周 / 日）—— 玉牌质感的三个小统计 */
.class-stats {
  display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap;
}
.class-stats .cs-item {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(178,134,56,.28);
  box-shadow: 0 1px 2px rgba(42,59,57,.06);
}
.class-stats .cs-item b {
  font-family: "STKaiti", "KaiTi", "楷体", serif;
  font-size: 17px; font-weight: 800; color: #B28638; line-height: 1.2;
}
.class-stats .cs-item i {
  font-style: normal; font-size: 11px; color: var(--ink-soft); letter-spacing: .5px;
}
@media (max-width: 560px) {
  .class-stats { gap: 6px; }
  .class-stats .cs-item { padding: 2px 8px; }
  .class-stats .cs-item b { font-size: 15px; }
  .class-stats .cs-item i { font-size: 10px; }
}
/* 手机窄屏：账号徽章 + 版本切换放不下时，整体换行而不是把标题挤竖 */
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar > div:first-child { flex: 1 1 100%; }
  .top-actions { width: 100%; justify-content: flex-start; }
}

/* ---------- 顶栏常驻：登录 / 账号入口 ---------- */
.top-actions { display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.acc-btn {
  font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(212,169,78,.55);
  background: linear-gradient(135deg, #fff6e2, #ffe9c2);
  color: #8a6318;
  box-shadow: 0 2px 6px rgba(212,169,78,.22);
  transition: transform .14s ease, box-shadow .14s ease;
}
.acc-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(212,169,78,.3); }
.acc-btn:active { transform: translateY(0) scale(.97); }
/* 已登录：青色低调款 */
.acc-btn.ok {
  border-color: rgba(58,158,140,.45);
  background: linear-gradient(135deg, #eafaf6, #d6f2ea);
  color: #2b7f63;
  box-shadow: 0 2px 6px rgba(58,158,140,.18);
}
@media (max-width: 420px) {
  .top-actions { gap: 6px; }
  .acc-btn { font-size: 11px; padding: 5px 9px; }
}

/* ---------- 添加到桌面提醒条 ---------- */
.install-hint {
  position: fixed; left: 12px; right: 12px; bottom: 74px; z-index: 8500;
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(135deg, #fffdf6, #fff4dd);
  border: 1px solid rgba(212,169,78,.45);
  box-shadow: 0 8px 24px rgba(138,99,24,.22);
  font-size: 12px; color: #6d5416; font-weight: 700;
  animation: hintUp .35s cubic-bezier(.34,1.4,.64,1);
}
.install-hint span { flex: 1; line-height: 1.5; }
.install-hint .go {
  cursor: pointer; white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #d4a94e, #b98a2e); color: #fff; font-size: 12px;
}
.install-hint .go:active { transform: scale(.96); }
.install-hint .x { cursor: pointer; color: #b09a63; padding: 2px 4px; font-weight: 400; }
@keyframes hintUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 安装指引（系统没给安装入口时的兜底路径） ---------- */
.ins-guide {
  position: fixed; inset: 0; z-index: 9200; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(40, 32, 20, .42);
  animation: hintUp .22s ease;
}
.ins-guide .ig-card {
  width: 100%; max-width: 360px; background: #fffdf6; border-radius: 18px;
  padding: 18px 18px 14px; box-shadow: 0 16px 44px rgba(90, 64, 20, .3);
  border: 1px solid rgba(212, 169, 78, .4);
}
.ins-guide .ig-title { font-size: 16px; font-weight: 800; color: #5a4413; }
.ins-guide .ig-sub { font-size: 12px; color: #8a764a; margin-top: 6px; line-height: 1.6; }
.ins-guide .ig-steps { margin: 12px 0 0; padding-left: 20px; }
.ins-guide .ig-steps li { font-size: 13px; color: #4a3a15; line-height: 1.75; margin-bottom: 7px; }
.ins-guide .ig-steps li b { color: #a9761c; }
.ins-guide .ig-retry {
  display: block; width: 100%; margin-top: 12px; padding: 10px; border: none;
  border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #d4a94e, #b98a2e);
}
.ins-guide .ig-retry:active { transform: scale(.98); }
.ins-guide .ig-close {
  margin-top: 10px; text-align: center; font-size: 12px; color: #a3937a; cursor: pointer; padding: 4px;
}
/* v43 安装中心：三种方式卡片 */
.ins-guide .ig-card { max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ins-guide .ig-way {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(212, 169, 78, .07); border: 1px solid rgba(212, 169, 78, .18);
}
.ins-guide .ig-way.ig-on { background: #fff6e0; border-color: rgba(185, 138, 46, .55); }
.ins-guide .ig-way-t { font-size: 13.5px; font-weight: 800; color: #6b5316; }
.ins-guide .ig-way-t .ig-rec {
  margin-left: 6px; font-size: 10.5px; font-weight: 800; color: #fff; vertical-align: 1px;
  padding: 2px 7px; border-radius: 8px; background: linear-gradient(135deg, #d4a94e, #b98a2e);
}
.ins-guide .ig-way-d { font-size: 12px; color: #8a764a; margin-top: 4px; line-height: 1.6; }
.ins-guide .ig-way .ig-steps { margin-top: 6px; padding-left: 16px; }
.ins-guide .ig-way .ig-steps li { font-size: 12px; line-height: 1.65; margin-bottom: 4px; }
.ins-guide .ig-way .ig-retry { margin-top: 8px; padding: 9px; }
.ins-guide .ig-wx {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.7;
  color: #8a5a1c; background: #fff3d6; border: 1px solid rgba(185, 138, 46, .45);
}
.ins-guide .ig-wx b { color: #a9761c; }

/* v62 安装教程：按浏览器分栏（360 / QQ / Safari / 安卓各一套步骤） */
.ins-guide .ig-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ins-guide .ig-tab {
  padding: 7px 10px; border-radius: 9px; cursor: pointer;
  background: #fff8ea; border: 1px solid rgba(185, 138, 46, .35);
  font-size: 12px; font-weight: 800; color: #7a5f1c; user-select: none;
}
.ins-guide .ig-tab.on { background: #b88638; border-color: #b88638; color: #fff; }
.ins-guide .ig-pane {
  display: none; margin-top: 10px; padding: 10px 12px;
  background: #fffdf6; border: 1px solid rgba(185, 138, 46, .25); border-radius: 10px;
}
.ins-guide .ig-pane.on { display: block; }
.ins-guide .ig-pane .ig-steps { margin-top: 2px; padding-left: 18px; }
.ins-guide .ig-pane b { color: #a9761c; }
.ins-guide .ig-where {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.8;
  background: #f2f7f5; border: 1px solid rgba(78, 122, 117, .28); color: #3d5b56;
}
.ins-guide .ig-where b { color: #2f5f57; }
.ins-guide .ig-copy {
  display: block; width: 100%; margin-top: 10px; padding: 11px; border: 0; border-radius: 11px;
  background: #4e7a75; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer;
}
.ins-guide .ig-copy:active { transform: scale(.98); }

/* ---------- 家长查看码列表 ---------- */
.pc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 4px; border-bottom: 1px dashed rgba(107,127,128,.25);
}
.pc-row:last-child { border-bottom: none; }
.pc-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pc-name b { font-size: 14px; color: var(--ink); }
.pc-code { font-size: 11px; color: #9a7327; font-family: ui-monospace, Consolas, monospace; }
.pc-btns { display: flex; gap: 6px; flex-shrink: 0; }
.pc-link {
  font-family: inherit; font-size: 11px; font-weight: 800; cursor: pointer;
  padding: 5px 9px; border-radius: 9px; border: 1px solid rgba(58,158,140,.4);
  background: #eafaf6; color: #2b7f63;
}
.pc-link:active { transform: scale(.96); }

/* ---------- 云同步 ---------- */
.sync-room { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.sync-room b {
  font-family: ui-monospace, Consolas, monospace; font-size: 15px; color: #9a7327;
  background: rgba(212,169,78,.14); border: 1px solid rgba(212,169,78,.35);
  border-radius: 8px; padding: 1px 9px; letter-spacing: .08em;
}
.sync-line { font-size: 12px; color: var(--ink-soft); line-height: 1.7; }
.sync-line b { color: var(--ink-teal); }

/* 商城角色提示条：明确「谁能兑换」 */
.shop-role-tip {
  margin: 6px 0 10px; padding: 10px 13px; border-radius: 13px;
  font-size: 12.5px; line-height: 1.6; font-weight: 600;
  background: rgba(255,255,255,.86); border: 1px solid rgba(127,184,164,.28);
  color: var(--ink-teal); box-shadow: var(--shadow-sm);
}
.shop-role-tip b { color: #9a7327; }
.shop-role-tip.teacher { border-color: rgba(212,169,78,.42); background: rgba(255,250,235,.9); }

/* ---------- 卡片通用 ---------- */
.card {
  background: rgba(255, 255, 255, .86); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px; margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
}
.section-h {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 4px 10px; font-size: 15px; font-weight: 700; color: var(--ink-teal);
  text-shadow: 0 1px 2px rgba(255,255,255,.8);
}
.section-h .more { font-size: 12px; color: var(--ink-soft); font-weight: 400; }

/* ---------- 学生九宫格 ---------- */
.grid-students {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
@media (max-width: 440px) {
  .grid-students { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
.stu {
  background: rgba(255, 255, 255, .88); border-radius: 16px; padding: 10px 6px 8px;
  text-align: center; border: 1px solid rgba(255,255,255,.82);
  box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .15s, box-shadow .15s;
  position: relative; overflow: hidden; user-select: none;
  backdrop-filter: blur(3px);
}
.stu:active { transform: scale(.95); }
.stu .beast {
  width: 100%; max-width: 104px; aspect-ratio: 1 / 1; height: auto;
  margin: 2px auto 0; position: relative; overflow: hidden;
}
.stu .beast img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stu .beast svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(91,138,143,.18)); }
.stu .pname { font-size: 12px; font-weight: 700; color: #8a6b3e; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stu .name { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stu .pts { display: none; }
.stu .lvtag {
  position: absolute; top: 5px; left: 5px; z-index: 2;
  font-size: 10px; font-weight: 800; line-height: 1.5;
  background: rgba(255,255,255,.92); color: #9a7327; border: 1px solid rgba(212,169,78,.45);
  padding: 1px 5px; border-radius: 8px;
  display: flex; align-items: center; gap: 3px;
  white-space: nowrap; overflow: hidden; max-width: calc(100% - 30px);
}
.stu .lvtag i { font-style: normal; color: var(--ink-teal); font-weight: 800; }
.stu .lvtag i::before { content: "✨"; font-size: 8.5px; margin-right: 1px; }
.stu.is-wilt .beast { filter: grayscale(.4) saturate(.62); }
.stu .cloud {
  position: absolute; top: 2px; right: 4px; font-size: 13px; opacity: .8;
  animation: floatCloud 3s ease-in-out infinite;
}
@keyframes floatCloud { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }

/* 灵宠呼吸动画 */
.breath { animation: breath 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes breath { 0%,100%{ transform: scale(1) translateY(0) } 50%{ transform: scale(1.045) translateY(-1.5px) } }
.wilt-anim { animation: wilt 4.5s ease-in-out infinite; }
@keyframes wilt { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(1.5px) } }

/* ---------- 评价面板（底部弹层） ---------- */
.sheet-mask {
  position: fixed; inset: 0; background: rgba(44,62,64,.28);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 60;
}
.sheet-mask.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: -100vh; z-index: 61;
  background: var(--moon); border-radius: 24px 24px 0 0;
  padding: 14px 16px 26px; max-width: 640px; margin: 0 auto;
  box-shadow: 0 -8px 30px rgba(44,62,64,.18);
  transition: bottom .25s cubic-bezier(.32,.72,.28,1);
}
.sheet.on { bottom: 0; }
.sheet-head {
  display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px;
  border-bottom: 1px dashed rgba(127,184,164,.35);
}
.sheet-head .beast { width: 46px; height: 46px; }
.sheet-head .info { flex: 1; }
.sheet-head .info b { font-size: 16px; }
.sheet-head .info span { display: block; font-size: 11.5px; color: var(--ink-soft); }
.sheet-close {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(127,184,164,.16); color: var(--ink-teal); font-size: 15px; cursor: pointer;
}
.eval-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 12px; }
.eval-btn {
  border: none; border-radius: 13px; padding: 10px 2px 8px; cursor: pointer;
  background: rgba(127,184,164,.12); color: var(--ink-teal);
  font-size: 11.5px; font-weight: 600; line-height: 1.35; min-height: 62px;
  transition: transform .1s; display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center;
}
.eval-btn .em { font-size: 19px; }
.eval-btn:active { transform: scale(.9); }
.eval-btn .pv { font-size: 12.5px; font-weight: 800; color: #3f8a6f; }
.eval-btn.neg { background: rgba(224,122,95,.10); color: #b05a42; }
.eval-btn.neg .pv { color: #c26a50; }
.eval-toggle {
  width: 100%; margin-top: 10px; border: none; background: none; color: var(--ink-soft);
  font-size: 12px; padding: 6px; cursor: pointer;
}

/* 加分飘字 */
.float-pts {
  position: fixed; z-index: 99; font-size: 26px; font-weight: 800; pointer-events: none;
  animation: floatUp 1.1s ease-out forwards; text-shadow: 0 2px 8px rgba(255,255,255,.9);
}
.float-pts.pos { color: #2f8f6e; }
.float-pts.neg { color: #c26a50; }
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  18% { opacity: 1; transform: translateY(-14px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-72px) scale(1); }
}

/* 灵气粒子飞入 */
.aura-dot {
  position: fixed; z-index: 98; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9b3 0%, var(--gold) 60%, transparent 75%);
  pointer-events: none; animation: flyAura .8s ease-in forwards;
}
@keyframes flyAura { to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }

/* ---------- 宠物详情弹层 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(44,62,64,.4); z-index: 70;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-mask.on { display: flex; }
.modal {
  background: var(--moon); border-radius: 22px; width: 100%; max-width: 400px;
  padding: 20px; position: relative; text-align: center;
  box-shadow: 0 18px 50px rgba(44,62,64,.3);
  animation: popIn .3s cubic-bezier(.34,1.4,.5,1);
}
@keyframes popIn { from { transform: scale(.8); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.modal .big-beast { width: 150px; height: 150px; margin: 4px auto 0; }
.modal .bname { font-size: 19px; font-weight: 800; margin-top: 2px; }
.modal .btitle {
  display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: #9a7327;
  background: linear-gradient(135deg, rgba(212,169,78,.18), rgba(212,169,78,.10));
  border: 1px solid rgba(212,169,78,.45); border-radius: 999px; padding: 3px 14px;
}
/* 灵气条 */
.aura-bar { margin: 14px 6px 4px; }
.aura-bar .row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-soft); margin-bottom: 5px; }
.aura-track {
  height: 12px; border-radius: 999px; background: rgba(127,184,164,.15); overflow: hidden; position: relative;
}
.aura-fill {
  height: 100%; border-radius: 999px; width: 0%;
  background: linear-gradient(90deg, var(--celadon), #a8d8c2 60%, var(--gold));
  background-size: 200% 100%; animation: auraFlow 2.4s linear infinite;
  transition: width .5s ease;
}
@keyframes auraFlow { from { background-position: 0 0 } to { background-position: 200% 0 } }
.feed-log { text-align: left; font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; max-height: 120px; overflow-y: auto; padding: 0 4px; }
.feed-log li { list-style: none; padding: 3px 0; border-bottom: 1px dashed rgba(127,184,164,.2); }
.feed-log li:last-child { border: none; }
.feed-log b { color: var(--ink-teal); }

/* 升级仪式 */
.levelup-mask {
  position: fixed; inset: 0; z-index: 90; background: rgba(250,247,240,.92);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
}
.levelup-mask.on { display: flex; animation: fadeIn .4s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.levelup-mask .new-beast {
  width: 200px; height: 200px;
  animation: evolveIn 1.1s cubic-bezier(.3,1.5,.4,1);
  filter: drop-shadow(0 0 24px rgba(212,169,78,.5));
}
@keyframes evolveIn {
  0% { transform: scale(.2) rotate(-18deg); opacity: 0; }
  55% { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.levelup-mask .lu-title {
  margin-top: 10px; font-size: 24px; font-weight: 800; color: var(--ink);
  letter-spacing: 6px; animation: riseUp .6s .5s both;
}
.levelup-mask .lu-plaque {
  margin-top: 8px; font-size: 14px; font-weight: 700; color: #9a7327;
  background: linear-gradient(135deg,#fdf3dd,#f7e7c3); border: 1.5px solid var(--gold);
  border-radius: 10px; padding: 6px 22px; animation: riseUp .6s .8s both;
}
.levelup-mask .skip { position: absolute; bottom: 26px; font-size: 12px; color: var(--ink-soft); }
@keyframes riseUp { from { transform: translateY(16px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.gold-particle {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9b3, var(--gold)); pointer-events: none;
  animation: fallDown 1.8s ease-in forwards;
}
@keyframes fallDown { 0% { transform: translateY(-30px) scale(1); opacity: 1 } 100% { transform: translateY(78vh) scale(.4); opacity: 0 } }

/* ---------- 榜单 ---------- */
.rank-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.rank-tabs button {
  flex: 1; border: none; border-radius: 12px; padding: 9px 4px; font-size: 13px; font-weight: 600;
  background: rgba(127,184,164,.10); color: var(--ink-soft); cursor: pointer; transition: all .2s;
}
.rank-tabs button.on { background: var(--celadon); color: #fff; box-shadow: var(--shadow-sm); }
.rank-item { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px dashed rgba(127,184,164,.22); }
.rank-item:last-child { border: none; }
.rank-no {
  width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; background: rgba(127,184,164,.14); color: var(--ink-teal); flex-shrink: 0;
}
.rank-item:nth-child(1) .rank-no { background: linear-gradient(135deg,#f2d488,var(--gold)); color:#fff; }
.rank-item:nth-child(2) .rank-no { background: linear-gradient(135deg,#dfe5e6,#b9c4c6); color:#fff; }
.rank-item:nth-child(3) .rank-no { background: linear-gradient(135deg,#efc3a6,#d99a6c); color:#fff; }
.rank-item .beast { width: 42px; height: 42px; flex-shrink: 0; }
.rank-item .rname { flex: 1; font-size: 14px; font-weight: 600; }
.rank-item .rname span { display: block; font-size: 11px; color: var(--ink-soft); font-weight: 400; }
.rank-item .rpts { font-size: 16px; font-weight: 800; color: var(--ink-teal); }
.rank-item .rpts em { font-style: normal; font-size: 10.5px; color: var(--gold); font-weight: 700; margin-left: 4px; }

/* ---------- 图鉴 ---------- */
.dex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dex-card {
  background: var(--moon); border-radius: 14px; padding: 10px 6px; text-align: center;
  border: 1px solid rgba(127,184,164,.15); box-shadow: var(--shadow-sm);
}
.dex-card .beast { width: 64px; height: 64px; margin: 0 auto; }
.dex-card.locked { opacity: .55; }
.dex-card.locked .beast { filter: brightness(0.25) grayscale(1); }
.dex-card .dname { font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.dex-card .dsub { font-size: 10.5px; color: var(--ink-soft); }

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(250,247,240,.97); backdrop-filter: blur(12px);
  display: flex; max-width: 640px; margin: 0 auto; gap: 6px;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(127,184,164,.22);
  box-shadow: 0 -8px 26px rgba(91,138,143,.13);
}

/* 底层按钮图层：每个 tab 都做成一枚独立按钮 —— 白底 + 描边 + 投影，
   一眼就看得出「这里能点」。以前是光秃秃的图标 + 字，老师常以为只是标签。 */
.tabbar button {
  flex: 1; min-width: 0; cursor: pointer; font-family: inherit;
  border: 1.5px solid rgba(127,184,164,.34); background: #fff;
  padding: 7px 2px 8px; border-radius: 14px;
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  box-shadow: 0 2px 6px rgba(91,138,143,.10);
  transition: transform .16s, box-shadow .16s, background .16s, color .16s;
}
.tabbar button .ticon { font-size: 19px; line-height: 1; transition: transform .2s; }
.tabbar button:active { transform: scale(.955); box-shadow: 0 1px 3px rgba(91,138,143,.12); }
.tabbar button.on {
  color: #fff; font-weight: 800;
  background: linear-gradient(135deg, #7FB8A4, #5B8A8F);
  border-color: transparent;
  box-shadow: 0 4px 13px rgba(91,138,143,.32);
}
.tabbar button.on .ticon { transform: scale(1.15) translateY(-1px); }

/* ===== 大屏操作条（隔空喊话 / 打开大屏幕）=====
   居中摆在页面内容末尾、底部导航上方。用暖金色系，和底部导航的青色
   主按钮区分开：青色=切页面，金色=对教室大屏下指令。 */
.screenbar {
  display: flex; justify-content: center; gap: 12px;
  padding: 4px 0 16px;
}
.screenbar .sbtn {
  flex: 1; max-width: 200px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1.5px solid rgba(212,169,78,.55);
  background: linear-gradient(160deg, #FFFDF7, #FFF6E2);
  border-radius: 16px; padding: 11px 6px 12px;
  box-shadow: 0 4px 14px rgba(212,169,78,.26);
  transition: transform .16s, box-shadow .16s;
}
.screenbar .sbtn:active {
  transform: scale(.955);
  box-shadow: 0 2px 6px rgba(212,169,78,.2);
}
.screenbar .sbtn .sb-i { font-size: 22px; line-height: 1; }
.screenbar .sbtn .sb-t { font-size: 13px; font-weight: 800; color: #9a7327; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-80px);
  background: var(--ink-teal); color: #fff; font-size: 13px; padding: 9px 20px;
  border-radius: 999px; z-index: 95; transition: transform .3s; box-shadow: var(--shadow);
}
.toast.on { transform: translateX(-50%) translateY(0); }
/* 可撤销提示：内部带「撤销」按钮，用于清空学生等不可逆操作 */
.toast button{
  margin-left:10px;border:none;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.22);color:#fff;font-size:12px;font-weight:800;
  border-radius:999px;padding:4px 12px;transition:.15s;
}
.toast button:hover{background:rgba(255,255,255,.38)}

/* ---------- 记录页 ---------- */
.rec-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed rgba(127,184,164,.2); font-size: 13px; }
.rec-item:last-child { border: none; }
.rec-item .em { font-size: 18px; }
.rec-item .rt { flex: 1; }
.rec-item .rt span { display: block; font-size: 11px; color: var(--ink-soft); }
.rec-item .rp { font-weight: 800; font-size: 14px; }
.undo-btn {
  border: none; background: rgba(224,122,95,.12); color: #b05a42; font-size: 12px;
  border-radius: 999px; padding: 4px 12px; cursor: pointer; font-weight: 600;
}
.sub-back.ghost {
  background: rgba(255,255,255,.92); color: var(--ink-teal); border: 1.5px solid rgba(127,184,164,.45);
  box-shadow: 0 2px 8px rgba(91,138,143,.10);
}
.rec-item.off-shelf { opacity: .55; }
.rec-item .rt b { display: block; font-size: 13.5px; color: var(--ink); }
.rec-item .off-tag { font-size: 10px; background: rgba(91,104,120,.14); color: #5a6878; border-radius: 6px; padding: 0 5px; margin-left: 4px; font-style: normal; }
.rec-item .rw-actions { display: flex; gap: 6px; align-items: center; }
.rec-item .rw-actions .del {
  border: 1px solid rgba(224,122,95,.45); background: rgba(224,122,95,.1); color: #b05a42;
  border-radius: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.stock-badge { font-size: 10px; background: rgba(212,169,78,.14); color: #9a7327; border-radius: 6px; padding: 1px 5px; margin-left: 4px; }
.stock-badge.inf { background: rgba(127,184,164,.14); color: var(--ink-teal); }
.g-btn.on { background: rgba(47,143,110,.14); color: #2f8f6e; border-color: rgba(47,143,110,.4); }
.empty-tip { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 30px 0; }

@media (max-width: 420px) { .eval-grid { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================
   v1.1 商城 / 工具 / 投屏 / 我的
   ===================================================== */

/* ---------- 商城页 ---------- */
.shop-day-banner {
  border-radius: 14px; padding: 10px 14px; font-size: 13px; font-weight: 600;
  background: rgba(127,184,164,.12); color: var(--ink-teal); margin-bottom: 4px;
  border: 1px dashed rgba(127,184,164,.4);
}
.shop-day-banner.is-day {
  background: linear-gradient(135deg, #fdf3dd, #f9ecc9); color: #9a7327;
  border: 1.5px solid var(--gold); animation: dayPulse 1.8s ease-in-out infinite;
}
@keyframes dayPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(212,169,78,.25) } 50%{ box-shadow: 0 0 0 7px rgba(212,169,78,0) } }

.shop-pick { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 10px; }
.student-sel {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1.5px solid rgba(127,184,164,.35);
  background: rgba(255,255,255,.88); color: var(--ink); font-size: 14px; font-weight: 700;
  outline: none; cursor: pointer;
}
.shop-wallet { display: flex; align-items: center; gap: 12px; }
.wallet-beast { width: 62px; height: 62px; flex-shrink: 0; }
.wallet-beast svg, .wallet-beast img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(91,138,143,.2)); }
.wallet-info { flex: 1; }
.wallet-info b { font-size: 15.5px; display: block; }
.wallet-info span { display: block; font-size: 11.5px; color: var(--ink-soft); }

/* ---------- 我的页首屏卡片：logo 左 · 班级名称+信息右 ---------- */
.mine-hero { display: flex; align-items: center; gap: 14px; }
.mine-hero .hero-logo {
  width: 76px; height: 76px; border-radius: 20px; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 3px 9px rgba(91,138,143,.20), 0 0 0 1px rgba(212,169,78,.25);
}
.mine-hero .wallet-info b { font-size: 18px; letter-spacing: .5px; margin-bottom: 3px; }
.mine-hero .wallet-info span { font-size: 12px; line-height: 1.65; }
.wallet-bal { text-align: center; }
.wallet-bal b { font-size: 26px; font-weight: 800; color: var(--ink-teal); display: block; line-height: 1.1; }
.wallet-bal span { font-size: 10.5px; color: var(--gold); font-weight: 700; }

.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.reward-card {
  background: var(--moon); border-radius: 15px; padding: 12px 10px 10px; text-align: center;
  border: 1px solid rgba(127,184,164,.18); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: transform .15s;
}
.reward-card:active { transform: scale(.96); }
.reward-card .r-em { font-size: 30px; line-height: 1.2; }
.reward-card .r-name { font-size: 13.5px; font-weight: 700; }
.reward-card .r-desc { font-size: 10.5px; color: var(--ink-soft); min-height: 28px; line-height: 1.35; }
.reward-card .r-cost { font-size: 12px; color: #9a7327; font-weight: 700; }
.reward-card .r-cost b { font-size: 16px; }
.reward-card .r-buy {
  border: none; width: 100%; border-radius: 10px; padding: 7px 0; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, var(--celadon), #6aa892); color: #fff; cursor: pointer; margin-top: 4px;
}
.reward-card .r-buy:disabled { background: rgba(127,184,164,.15); color: #9aa8a4; cursor: not-allowed; }
.reward-card.no { opacity: .62; }
.reward-card .r-why { font-size: 10px; color: #b05a42; }

.pend-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed rgba(127,184,164,.2); font-size: 13px; }
.pend-item:last-child { border: none; }
.pend-item .em { font-size: 18px; }
.pend-item .rt { flex: 1; }
.pend-item .rt span { display: block; font-size: 11px; color: var(--ink-soft); }
.pend-ok {
  border: none; background: rgba(47,143,110,.12); color: #2f8f6e; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
.pend-undo {
  border: none; background: rgba(224,122,95,.10); color: #b05a42; font-size: 12px;
  border-radius: 999px; padding: 5px 10px; cursor: pointer;
}

/* ---------- 工具页 ---------- */
.tool-big { margin-bottom: 6px; }
.picker-stage { text-align: center; padding: 22px 16px 18px; }
.picker-beasts { height: 120px; display: flex; align-items: center; justify-content: center; }
.picker-idle { font-size: 64px; animation: breathe 2.5s ease-in-out infinite; }
.picker-beast { width: 118px; height: 118px; }
.picker-beast svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 10px rgba(91,138,143,.22)); }
.picker-beast.rolling { animation: rollShake .12s linear infinite; }
@keyframes rollShake { 0%{ transform: translateX(-5px) rotate(-2deg) } 50%{ transform: translateX(4px) } 100%{ transform: translateX(5px) rotate(2deg) } }
.picker-name { font-size: 34px; font-weight: 800; letter-spacing: 3px; margin-top: 2px; color: var(--ink); }
.picker-name.rolling { color: var(--ink-soft); filter: blur(1px); }
.picker-sub { font-size: 12px; color: var(--ink-soft); margin: 4px 0 14px; }
.picker-go {
  border: none; border-radius: 999px; padding: 13px 46px; font-size: 17px; font-weight: 800;
  background: linear-gradient(135deg, var(--celadon), #6aa892); color: #fff; cursor: pointer;
  box-shadow: 0 6px 18px rgba(127,184,164,.45); transition: transform .12s;
}
.picker-go:active { transform: scale(.94); }
.picker-go:disabled { background: rgba(127,184,164,.3); box-shadow: none; }
.picker-quick { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(127,184,164,.3); }
.qk-btn {
  border: 1.5px solid rgba(212,169,78,.5); background: rgba(212,169,78,.10); color: #9a7327;
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.qk-btn:active { transform: scale(.92); }

/* 计时器 */
.timer-ring {
  width: 168px; height: 168px; border-radius: 50%; position: relative; margin: 4px auto 14px;
  background: conic-gradient(var(--gold) var(--p, 100%), rgba(127,184,164,.14) 0);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s linear;
}
.timer-ring::before {
  content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--moon);
  box-shadow: inset 0 2px 10px rgba(91,138,143,.08);
}
.timer-time { position: relative; z-index: 1; font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-teal); }
.timer-time.danger { color: #c26a50; animation: blinkDanger .8s steps(2) infinite; }
@keyframes blinkDanger { 50% { opacity: .45 } }
.timer-presets { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.t-preset {
  border: 1.5px solid rgba(127,184,164,.4); background: none; color: var(--ink-soft);
  border-radius: 999px; padding: 6px 15px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.t-preset.on { background: var(--celadon); color: #fff; border-color: var(--celadon); }
.timer-ctrl { display: flex; gap: 10px; justify-content: center; }
.t-btn {
  border: none; border-radius: 12px; padding: 10px 30px; font-size: 15px; font-weight: 700; cursor: pointer;
  background: rgba(127,184,164,.14); color: var(--ink-teal);
}
.t-btn.main { background: linear-gradient(135deg, var(--celadon), #6aa892); color: #fff; box-shadow: 0 4px 12px rgba(127,184,164,.4); }

/* 计时器全屏层 */
.timer-full {
  position: fixed; inset: 0; z-index: 120; background: var(--paper);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  background-image: radial-gradient(ellipse at 50% 0%, rgba(212,169,78,.08) 0%, transparent 55%);
}
.timer-full.on { display: flex; }
.tf-ring {
  width: 46vmin; height: 46vmin; border-radius: 50%; position: relative;
  background: conic-gradient(var(--gold) var(--p, 100%), rgba(127,184,164,.14) 0);
  display: flex; align-items: center; justify-content: center; margin-bottom: 4vmin;
  transition: background .2s linear;
}
.tf-ring::before { content: ''; position: absolute; inset: 2.2vmin; border-radius: 50%; background: var(--paper); }
.tf-time { position: relative; z-index: 1; font-size: 13vmin; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-teal); }
.tf-time.danger { color: #c26a50; animation: blinkDanger .8s steps(2) infinite; }
.tf-tip { font-size: 2.6vmin; color: var(--ink-soft); letter-spacing: 2px; }
.tf-ctrl { position: absolute; bottom: 5vmin; }
.tf-ctrl button {
  border: 1.5px solid rgba(127,184,164,.5); background: none; color: var(--ink-teal);
  border-radius: 999px; padding: 8px 26px; font-size: 14px; font-weight: 700; cursor: pointer;
}

/* 投屏模式 */
.proj-mask {
  position: fixed; inset: 0; z-index: 130; background: var(--paper); display: none;
  flex-direction: column;
  background-image: radial-gradient(ellipse at 15% 8%, rgba(127,184,164,.08) 0%, transparent 50%),
                    radial-gradient(ellipse at 88% 92%, rgba(212,169,78,.07) 0%, transparent 45%);
}
.proj-mask.on { display: flex; }
.proj-head {
  display: flex; justify-content: space-between; align-items: center; padding: 2.4vh 3.5vw;
  font-size: 2.6vmin; font-weight: 800; color: var(--ink-teal); letter-spacing: 2px;
}
.proj-head #projClock { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: 600; }
.proj-body { flex: 1; padding: 0 3.5vw 1vh; overflow: hidden; }
.proj-slide { animation: projIn .5s ease; height: 100%; }
@keyframes projIn { from { opacity: 0; transform: translateY(3vh) } to { opacity: 1; transform: none } }
.proj-title { font-size: 3.6vmin; font-weight: 800; color: var(--ink-teal); margin-bottom: 2.6vh; letter-spacing: 2px; }
.proj-empty { text-align: center; font-size: 3vmin; color: var(--ink-soft); padding-top: 10vh; }
.proj-row {
  display: flex; align-items: center; gap: 2.6vw; padding: 1.5vh 0;
  border-bottom: 1px dashed rgba(127,184,164,.22);
}
.proj-row:last-child { border: none; }
.proj-row .pno {
  width: 5.4vmin; height: 5.4vmin; border-radius: 1.6vmin; display: flex; align-items: center; justify-content: center;
  font-size: 2.8vmin; font-weight: 800; background: rgba(127,184,164,.14); color: var(--ink-teal); flex-shrink: 0;
}
.proj-row:nth-child(2) .pno { background: linear-gradient(135deg, #f2d488, var(--gold)); color: #fff; }
.proj-row:nth-child(3) .pno { background: linear-gradient(135deg, #dfe5e6, #b9c4c6); color: #fff; }
.proj-row:nth-child(4) .pno { background: linear-gradient(135deg, #efc3a6, #d99a6c); color: #fff; }
.proj-row .pbeast { width: 9.5vmin; height: 9.5vmin; flex-shrink: 0; }
.proj-row .pbeast svg { width: 100%; height: 100%; }
.proj-row .pname { flex: 1; font-size: 3.8vmin; font-weight: 700; }
.proj-row .pname span { display: block; font-size: 2.1vmin; color: var(--ink-soft); font-weight: 400; }
.proj-row .ppts { font-size: 4.6vmin; font-weight: 800; color: var(--ink-teal); }
.proj-row .ppts i, .proj-grow .ppts i { font-style: normal; font-size: 1.9vmin; color: var(--gold); margin-left: .6vmin; font-weight: 700; }
.proj-grow { display: flex; align-items: center; gap: 2vw; padding: 1.6vh 0; }
.proj-grow b {
  width: 5.4vmin; height: 5.4vmin; border-radius: 1.6vmin; background: rgba(127,184,164,.14);
  color: var(--ink-teal); display: flex; align-items: center; justify-content: center; font-size: 2.8vmin; flex-shrink: 0;
}
.proj-grow .pg-bar-wrap { flex: 1; }
.proj-grow .pg-name { font-size: 2.8vmin; font-weight: 700; display: block; margin-bottom: .8vh; }
.proj-grow .pg-track { height: 2.6vmin; border-radius: 999px; background: rgba(127,184,164,.14); overflow: hidden; }
.proj-grow .pg-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--celadon), var(--gold)); transition: width 1s ease; }
.proj-grow .ppts { font-size: 4vmin; font-weight: 800; color: var(--ink-teal); }
.proj-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6vh 1vw; }
.proj-cell { text-align: center; }
.proj-cell .cbeast { width: 9vmin; height: 9vmin; margin: 0 auto; }
.proj-cell .cbeast svg { width: 100%; height: 100%; }
.proj-cell .cname { font-size: 2.2vmin; font-weight: 700; margin-top: .4vh; }
.proj-cell .clv { font-size: 1.8vmin; color: #9a7327; font-weight: 700; }
.proj-foot {
  display: flex; justify-content: space-between; align-items: center; padding: 1.6vh 3.5vw 2.4vh;
}
.proj-foot #projDots i {
  display: inline-block; width: 1.4vmin; height: 1.4vmin; border-radius: 50%;
  background: rgba(127,184,164,.3); margin-right: 1vmin;
}
.proj-foot #projDots i.on { background: var(--gold); transform: scale(1.25); }
.proj-exit { font-size: 2.2vmin; color: var(--ink-soft); cursor: pointer; padding: .8vh 1.4vw; }
@media (max-width: 900px) and (orientation: portrait) {
  .proj-wall { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================
   v1.2 参考爆款优化：HUD / 决策面板 / streak / 小组PK / 彩蛋
   ===================================================== */

/* 常驻 HUD */
.hud {
  position: sticky; top: 0; z-index: 40; display: flex; gap: 6px;
  background: linear-gradient(135deg, rgba(127,184,164,.14), rgba(212,169,78,.10));
  border: 1px solid rgba(127,184,164,.25); border-radius: 14px;
  padding: 9px 4px; margin-bottom: 4px; backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
.hud-item { flex: 1; text-align: center; position: relative; }
.hud-item b {
  display: block; font-size: 17px; font-weight: 800; color: var(--ink-teal);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.hud-item span { font-size: 10.5px; color: var(--ink-soft); }
.hud.has-pend .hud-item:last-child b {
  color: #9a7327;
  animation: pendPulse 1.6s ease-in-out infinite;
}
.hud.has-pend .hud-item:last-child::after {
  content: ''; position: absolute; top: 2px; right: 18%;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
@keyframes pendPulse { 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.12) } }

/* 决策面板：今天该关注谁 */
.att-wrap { margin-bottom: 4px; }
.att-list { display: flex; gap: 9px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.att-list::-webkit-scrollbar { display: none; }
.att-card {
  flex-shrink: 0; width: 92px; text-align: center; border-radius: 15px; padding: 9px 4px 8px;
  background: linear-gradient(160deg, #FFF6E2, #FDF1D8); border: 1.5px dashed rgba(212,169,78,.55);
  box-shadow: var(--shadow-sm); position: relative;
}
.att-card.wilt { border-style: solid; border-color: rgba(224,122,95,.5); background: linear-gradient(160deg, #FDF0EC, #FAE7E1); }
.att-card .beast { width: 54px; height: 54px; margin: 0 auto; }
.att-card .beast svg { width: 100%; height: 100%; }
.att-card .a-name { font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.att-card .a-reason { font-size: 10.5px; color: #9a7327; line-height: 1.3; min-height: 24px; }
.att-card.wilt .a-reason { color: #b05a42; }
.att-card .a-care {
  width: 100%; border: none; border-radius: 999px; padding: 5px 0; font-size: 11.5px; font-weight: 700;
  background: linear-gradient(135deg, var(--celadon), #6aa892); color: #fff; cursor: pointer; margin-top: 2px;
}

/* 学生卡 streak 火焰 */
.stu .fire {
  font-style: normal; font-size: 10.5px; color: #d4763c; font-weight: 800;
  background: rgba(224,122,95,.12); border-radius: 6px; padding: 0 3px; margin-left: 2px;
}

/* 小组 PK */
.g-pk { display: flex; align-items: center; gap: 11px; padding: 11px 4px; border-bottom: 1px dashed rgba(127,184,164,.22); }
.g-pk:last-child { border: none; }
.g-pk .pk-no {
  width: 26px; height: 26px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; background: rgba(127,184,164,.14); color: var(--ink-teal);
}
.g-pk:first-child .pk-no { background: linear-gradient(135deg, #f2d488, var(--gold)); color: #fff; }
.g-pk .pk-body { flex: 1; }
.g-pk .pk-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.g-pk .pk-top b { font-size: 14px; }
.g-pk .pk-top span { font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.g-pk .pk-track { height: 13px; border-radius: 999px; background: rgba(127,184,164,.14); overflow: hidden; }
.g-pk .pk-fill {
  height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.3,1,.4,1);
  background: linear-gradient(90deg, var(--celadon), #a8d8c2 50%, var(--gold)); background-size: 200% 100%;
  animation: auraFlow 2.6s linear infinite;
}
.g-pk .pk-crown { font-size: 20px; animation: crownBob 2s ease-in-out infinite; }
@keyframes crownBob { 0%,100%{ transform: translateY(0) rotate(-6deg) } 50%{ transform: translateY(-3px) rotate(6deg) } }

/* 彩蛋：灵宠赐福 */
.levelup-mask .lu-plaque.bless {
  background: linear-gradient(135deg, #FFF6E2, #F9E7BE); letter-spacing: 1px;
}

/* 宠物详情 streak 行 */
.pet-meta span:last-child { color: #d4763c; }

/* ---------- 锁屏 / 成长管理台 双按钮 ---------- */
.mode-seg {
  display: flex; align-items: center; gap: 3px; padding: 3px;
  background: rgba(255,255,255,.80); border-radius: 999px;
  border: 1px solid rgba(127,184,164,.30); flex-shrink: 0;
}
.mseg {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 800; padding: 6px 11px; border-radius: 999px;
  color: var(--ink-soft); transition: all .18s; white-space: nowrap;
}
.mseg:active { transform: scale(.94); }
.mseg.on {
  color: #fff;
  background: linear-gradient(135deg, #7FB8A4, #5B8A8F);
  box-shadow: 0 2px 8px rgba(91,138,143,.32);
}
.mseg.on.teacher {
  background: linear-gradient(135deg, #D4A94E, #C58C2C);
  box-shadow: 0 2px 8px rgba(212,169,78,.42);
}
.ghost-pill {
  border: 1px solid rgba(127,184,164,.32); background: rgba(255,255,255,.72);
  color: #5B8A8F; font-size: 12px; padding: 6px 11px; border-radius: 999px;
  cursor: pointer; font-weight: 600; white-space: nowrap; font-family: inherit;
}

/* 未领养状态 */
.adopt-note {
  font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 4px;
  background: rgba(127,184,164,.1); border-radius: 10px; padding: 8px 12px; line-height: 1.5;
}
.adopt-note b { color: var(--ink-teal); }
.pet-rename.adopt-go {
  width: 100%; border: none; padding: 11px; font-size: 14.5px; margin-top: 8px;
  background: linear-gradient(135deg, var(--celadon), #6aa892); color: #fff; border-radius: 12px;
}
.stu-row .sr-info span b { color: #9a7327; }

/* 模式切换入口（我的页底部） */
.mode-switch-btn {
  width: 100%; margin-top: 4px; border: 1.5px dashed rgba(212,169,78,.6);
  background: rgba(212,169,78,.08); color: #9a7327; border-radius: 13px;
  padding: 12px; font-size: 13.5px; font-weight: 700; cursor: pointer;
}

/* ===== 模式说明浮窗（点「锁屏 / 成长管理台」后弹出，说清能干什么） ===== */
.modetip-mask {
  position: fixed; inset: 0; z-index: 300; padding: 24px;
  background: rgba(30,44,44,.42);
  display: flex; align-items: center; justify-content: center;
  animation: mtFade .18s ease;
}
@keyframes mtFade { from { opacity: 0; } to { opacity: 1; } }
.modetip-card {
  width: 100%; max-width: 340px; background: #fff; border-radius: 20px;
  padding: 26px 22px 18px; text-align: center;
  box-shadow: 0 18px 48px rgba(30,44,44,.28);
  animation: mtPop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes mtPop {
  from { transform: translateY(12px) scale(.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modetip-card .mt-icon { font-size: 40px; line-height: 1; }
.modetip-card .mt-title { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.modetip-card .mt-body {
  margin-top: 10px; padding: 12px 14px; text-align: left;
  font-size: 13px; line-height: 1.85; color: var(--ink-soft);
  background: rgba(127,184,164,.09); border-radius: 12px;
}
.modetip-card .mt-ok {
  width: 100%; margin-top: 14px; padding: 12px; border: none; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 800; color: #fff;
  border-radius: 13px; background: linear-gradient(135deg, #7FB8A4, #5B8A8F);
  box-shadow: 0 4px 14px rgba(91,138,143,.3);
}
.modetip-card .mt-ok:active { transform: scale(.97); }

/* 加减分项添加行 */
.eval-add-row { display: flex; gap: 6px; align-items: center; }
.eval-add-row input {
  border: 1.5px solid rgba(127,184,164,.4); border-radius: 10px; padding: 8px 10px;
  font-size: 13px; background: #fff; color: var(--ink); outline: none; flex: 1; min-width: 0;
}
.eval-add-row input:focus { border-color: var(--celadon); }

/* 成长配置网格 */
.level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.level-cell label {
  display: block; font-size: 10.5px; color: var(--ink-soft); font-weight: 700; margin-bottom: 3px; text-align: center;
}
.level-cell input {
  width: 100%; border: 1.5px solid rgba(212,169,78,.4); border-radius: 9px; padding: 7px 4px;
  font-size: 13px; font-weight: 700; text-align: center; background: #fffdf6; color: #9a7327; outline: none;
}
.level-cell input:focus { border-color: var(--gold); }
/* 成长配置页：满级纪念卡临界值与达标名单提示 */
.mem-tip {
  margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 12.2px; line-height: 1.75;
  background: linear-gradient(135deg, #fff8e6, #fdf1d8); border: 1px solid rgba(212,169,78,.35); color: #7a5a1e;
}
.mem-tip b { color: #b8860b; }
.mem-tip span { color: #9aa8a4; font-size: 11.5px; }
/* v75：教师导航改九宫格 —— 一排三个、图标在上名字在下，一眼扫完不用滚 */
.mine-menu {
  margin-bottom: 14px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
}
.mine-item {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 3px; background: var(--moon); border-radius: 14px;
  padding: 11px 6px 10px; cursor: pointer; border: 1px solid rgba(127,184,164,.15);
  box-shadow: var(--shadow-sm); transition: transform .12s;
  text-align: center; min-height: 76px; overflow: hidden;
}
.mine-item:active { transform: scale(.97); }
.mine-item .mi-icon { font-size: 22px; line-height: 1.15; }
.mine-item .mi-t { flex: 1; min-width: 0; width: 100%; }
.mine-item .mi-t b { font-size: 12.2px; display: block; line-height: 1.3; }
.mine-item .mi-t span {
  font-size: 10px; color: var(--ink-soft); margin-top: 3px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.mine-item .mi-arrow { display: none; }
/* 挂在菜单里的整行元素（学生入口按钮 / 客服卡）横跨三格，别挤进九宫格里 */
.mine-menu > .mode-switch-btn, .mine-menu > .kefu-card { grid-column: 1 / -1; }
.mine-data-btn {
  border: 1.5px solid rgba(127,184,164,.5); background: none; color: var(--ink-teal);
  border-radius: 10px; padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.mine-data-btn.danger { border-color: rgba(224,122,95,.5); color: #b05a42; }
/* 教师端「返回」：做成醒目大按钮，一眼就看见 */
.sub-back {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-bottom: 14px; cursor: pointer; font-family: inherit;
  font-size: 16px; font-weight: 800; letter-spacing: .06em;
  padding: 13px 16px; border-radius: 14px; border: none;
  background: linear-gradient(135deg, #7FB8A4, #5B8A8F); color: #fff;
  box-shadow: 0 4px 14px rgba(91,138,143,.30);
}
.sub-back:active { transform: scale(.97); }
.sub-back::before { content: "←"; font-size: 19px; font-weight: 800; line-height: 1; }
.stu-row { display: flex; align-items: center; gap: 9px; padding: 8px 2px; border-bottom: 1px dashed rgba(127,184,164,.2); }
.stu-row:last-child { border: none; }
.stu-row .sr-beast { width: 44px; height: 44px; flex-shrink: 0; }
.stu-row .sr-beast svg { width: 100%; height: 100%; }
.stu-row .sr-info { flex: 1; min-width: 0; }
.stu-row .sr-info b { font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stu-row .sr-info span { font-size: 11px; color: var(--ink-soft); }
.g-btn {
  border: 1px solid rgba(127,184,164,.4); background: rgba(127,184,164,.08); color: var(--ink-teal);
  border-radius: 8px; padding: 4px 8px; font-size: 11.5px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.g-btn.swap { font-size: 13px; }
.g-btn.del { border-color: rgba(224,122,95,.4); background: rgba(224,122,95,.08); color: #b05a42; }
.add-btn {
  width: 100%; border: 1.5px dashed rgba(127,184,164,.55); background: rgba(127,184,164,.07);
  color: var(--ink-teal); border-radius: 13px; padding: 11px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; margin-bottom: 12px;
}
/* 危险操作：清空全部学生（视觉上必须一眼看出「不可随便点」） */
.add-btn.danger{
  border-style:solid;border-color:rgba(224,122,95,.55);background:rgba(224,122,95,.10);color:#b05a42;
}
.add-btn.danger:hover{background:rgba(224,122,95,.18)}
.add-btn.danger:active{background:rgba(224,122,95,.26)}

/* 表单弹窗 */
.form-title { font-size: 16.5px; font-weight: 800; margin-bottom: 12px; }
.form-row { margin-bottom: 10px; text-align: left; }
.form-row label { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 700; margin-bottom: 4px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; border: 1.5px solid rgba(127,184,164,.4); border-radius: 10px;
  padding: 9px 12px; font-size: 14px; background: #fff; color: var(--ink); outline: none;
}
.form-row textarea { resize: vertical; line-height: 1.7; font-family: inherit; }
.form-check { display: flex !important; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 0 !important; }
.form-check input { width: 16px !important; height: 16px; flex: 0 0 16px; accent-color: var(--celadon); }
.form-check span { display: block; }
.form-row input:focus, .form-row select:focus { border-color: var(--celadon); }
.form-submit {
  width: 100%; margin-top: 6px; border: none; border-radius: 12px; padding: 11px;
  font-size: 15px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--celadon), #6aa892);
}
.bp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 52vh; overflow-y: auto; }
.bp-cell {
  text-align: center; border: 1.5px solid rgba(127,184,164,.2); border-radius: 12px;
  padding: 7px 2px; cursor: pointer; position: relative;
}
.bp-cell .beast { width: 44px; height: 44px; margin: 0 auto; }
.bp-cell .beast svg { width: 100%; height: 100%; }
.bp-cell span { font-size: 11px; font-weight: 700; display: block; }
.bp-cell i {
  position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 9px;
  background: rgba(224,122,95,.14); color: #b05a42; border-radius: 6px; padding: 0 4px;
}
.bp-cell.cur { border-color: var(--gold); background: rgba(212,169,78,.1); }

/* 宠物详情补充 */
.pet-meta { display: flex; justify-content: center; gap: 18px; margin: 8px 0 2px; font-size: 12px; color: var(--ink-soft); }
.pet-meta b { color: var(--ink-teal); }
.pet-rename {
  margin-top: 8px; border: 1.5px dashed rgba(212,169,78,.55); background: rgba(212,169,78,.08);
  color: #9a7327; border-radius: 999px; padding: 5px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* ---------- 每日签到宝箱 ---------- */
.ci-btn {
  display: block; width: 100%; margin-top: 8px; padding: 9px 14px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid rgba(127,184,164,.5); background: linear-gradient(135deg, #eef7f3, #e3f0ea);
  color: #3d6b60; font-size: 13.5px; font-weight: 800; letter-spacing: .3px;
  box-shadow: 0 3px 10px rgba(127,184,164,.18); transition: transform .12s, box-shadow .12s;
}
.ci-btn:active { transform: translateY(1px) scale(.985); }
.ci-btn.big {
  border-color: rgba(212,169,78,.7); color: #8a5e14;
  background: linear-gradient(135deg, #fdf5e2, #f8e9c8);
  box-shadow: 0 3px 14px rgba(212,169,78,.3);
  animation: ciPulse 1.6s ease-in-out infinite;
}
@keyframes ciPulse {
  0%,100% { box-shadow: 0 3px 14px rgba(212,169,78,.28); }
  50%     { box-shadow: 0 4px 20px rgba(212,169,78,.5); }
}
.ci-btn.done {
  border-style: dashed; border-color: rgba(127,184,164,.35); background: #f4f8f6;
  color: #9aa8a4; cursor: default; font-weight: 600; box-shadow: none;
}
.stu .ci-dot {
  position: absolute; right: 6px; bottom: 6px; font-size: 11px; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
}
.chest-box {
  font-size: 84px; line-height: 1; margin-bottom: 6px;
  animation: chestPop .7s cubic-bezier(.34,1.56,.64,1) both;
  filter: drop-shadow(0 6px 16px rgba(212,169,78,.4));
}
@keyframes chestPop {
  0%   { transform: scale(.3) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(1.22) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* =====================================================
   第5轮：AI评语 / 周报 / 家长端 / 备份 / 海报
   ===================================================== */
.tip-note {
  font-size: 12px; line-height: 1.7; color: var(--ink-soft);
  background: rgba(127,184,164,.09); border-left: 3px solid rgba(127,184,164,.5);
  border-radius: 0 10px 10px 0; padding: 9px 12px; margin-bottom: 10px;
}
/* 语气切换 */
.tone-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.tone-chip {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 14px; cursor: pointer; font-size: 13px; font-weight: 700;
  border: 1.5px solid rgba(91,138,143,.25); background: #fff; color: var(--ink-soft);
  transition: all .15s;
}
.tone-chip span { font-size: 10px; font-weight: 500; color: #9aa8a4; }
.tone-chip.on {
  border-color: var(--gold); background: linear-gradient(135deg, #fdf6e6, #f6e9cc); color: #8a5e14;
}
.tone-chip.on span { color: #b08c45; }
/* 周期切换 */
.cmt-scope { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; color: var(--ink-soft); }
.scope-chip {
  border: 1.5px solid rgba(91,138,143,.25); background: #fff; color: var(--ink-soft);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.scope-chip.on { border-color: var(--teal); background: rgba(127,184,164,.16); color: var(--ink-teal); }
/* 评语卡 */
.cmt-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.cmt-card {
  background: #fff; border-radius: 16px; padding: 14px;
  box-shadow: 0 3px 12px rgba(44,62,64,.07); border: 1px solid rgba(127,184,164,.18);
}
.cmt-card.teacher { border-color: rgba(224,122,95,.35); background: #fffdfb; }
.cmt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cmt-av { width: 46px; height: 46px; flex: 0 0 46px; }
.cmt-name { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.cmt-name b { font-size: 15px; color: var(--ink); }
.cmt-name span { font-size: 11px; color: #9aa8a4; }
.cmt-tag { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.cmt-tag.p { background: rgba(127,184,164,.18); color: #4c7d70; }
.cmt-tag.t { background: rgba(224,122,95,.16); color: #b3563a; }
.cmt-lead { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.6; margin-bottom: 6px; }
.cmt-line { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.7; color: #4a5c5e; margin-bottom: 4px; }
.cmt-line i { font-style: normal; flex: 0 0 18px; }
.cmt-line b, .cmt-line i.i { }
.cmt-line span i { font-style: normal; font-weight: 800; color: var(--ink-teal); }
.cmt-line.watch { color: #a8543b; }
.cmt-act {
  margin-top: 8px; padding: 9px 11px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(212,169,78,.1), rgba(212,169,78,.04));
  border: 1px dashed rgba(212,169,78,.45);
}
.cmt-act em { font-style: normal; font-size: 11px; font-weight: 800; color: #9a7327; display: block; margin-bottom: 3px; }
.cmt-act p { font-size: 12.5px; line-height: 1.7; color: #5d5340; }
.cmt-sign { text-align: right; font-size: 11px; color: #aab5b3; margin-top: 8px; }
.cmt-btns { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.mini {
  flex: 1; min-width: 78px; border: 1.5px solid rgba(91,138,143,.25); background: #fff;
  color: var(--ink-teal); border-radius: 10px; padding: 7px 4px; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.mini:active { transform: scale(.96); }
.mini.ghost, .add-btn.ghost { background: #f5f8f7; color: var(--ink-soft); }
/* 不可用只做视觉降级 —— 绝不用 disabled：禁用元素收不到 click，卡住就自愈不了 */
.mini.busy, .add-btn.busy { opacity: .55; cursor: progress; }

/* ---------- 在线 AI 评语 ---------- */
.ai-bar {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 9px 11px;
  background: linear-gradient(135deg, rgba(212,169,78,.1), rgba(212,169,78,.04));
  border: 1px solid rgba(212,169,78,.28); border-radius: 12px;
}
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: #c3ccc8; flex: none; box-shadow: none; }
.ai-dot.on { background: #4caf84; box-shadow: 0 0 0 3px rgba(76,175,132,.16); }
.ai-txt { flex: 1; font-size: 11.5px; color: #6b7f80; line-height: 1.5; }
.ai-btn {
  flex: none; border: none; border-radius: 9px; padding: 6px 11px; font-size: 11.5px; font-weight: 800;
  cursor: pointer; background: linear-gradient(135deg, #d4a94e, #c09535); color: #fff;
}
.ai-btn:active { transform: scale(.96); }
.cmt-card.ai-made { border-color: rgba(212,169,78,.45); box-shadow: 0 4px 16px rgba(212,169,78,.14); }
.cmt-ai {
  display: flex; gap: 8px; margin-top: 8px; padding: 11px 12px; border-radius: 12px;
  background: linear-gradient(160deg, #fffdf7, #fbf6ea); border: 1px dashed rgba(212,169,78,.4);
}
.cmt-ai i { font-style: normal; font-size: 13px; flex: none; line-height: 1.7; }
.cmt-ai div { font-size: 12.8px; line-height: 1.85; color: #4a5a58; }
/* 评语二次编辑 */
.cmt-card.edited { border-color: rgba(127,184,164,.55); box-shadow: 0 4px 16px rgba(127,184,164,.16); }
.cmt-tag.e { background: rgba(127,184,164,.2); color: #3f6f62; }
.cmt-editbox { margin-top: 6px; }
.cmt-ta {
  width: 100%; box-sizing: border-box; resize: vertical; padding: 11px 12px;
  border: 1px solid rgba(127,184,164,.45); border-radius: 12px; background: #fbfdfc;
  font-family: inherit; font-size: 13px; line-height: 1.85; color: #3c4a4a; outline: none;
}
.cmt-ta:focus { border-color: var(--ink-teal); background: #fff; box-shadow: 0 0 0 3px rgba(127,184,164,.14); }
.cmt-ta.full { border-color: #e07a5f; background: #fffaf7; }
.cmt-metabar { display: flex; justify-content: space-between; align-items: center; margin: 6px 2px 8px; }
.cmt-count { font-size: 11px; color: #9aa8a4; font-weight: 700; }
.cmt-count.warn { color: #c8623f; }
.cmt-hint { font-size: 11px; color: #b09a5e; }
.cmt-ebtns { display: flex; gap: 6px; flex-wrap: wrap; }
.mini.fail { background: #fff1ec; color: #c0562f; border: 1px dashed rgba(224,122,95,.55); }
/* 周报 */
.wk-card {
  background: linear-gradient(160deg, #ffffff, #fbf8f1); border-radius: 16px; padding: 15px;
  border: 1px solid rgba(212,169,78,.3); box-shadow: 0 3px 14px rgba(212,169,78,.1);
}
.wk-title { font-size: 15px; font-weight: 800; color: #8a5e14; text-align: center; margin-bottom: 10px; }
.wk-line { display: flex; gap: 9px; font-size: 13px; line-height: 1.75; color: #4a5c5e; margin-bottom: 6px; }
.wk-line i { font-style: normal; flex: 0 0 20px; font-size: 14px; }
.wk-line span i { font-style: normal; font-weight: 800; color: var(--ink-teal); }
.wk-sign { text-align: right; font-size: 11px; color: #aab5b3; margin: 8px 0; }
.wk-stat {
  display: flex; justify-content: space-around; padding: 9px 0; margin-bottom: 8px;
  border-top: 1px dashed rgba(91,138,143,.2); border-bottom: 1px dashed rgba(91,138,143,.2);
  font-size: 11.5px; color: var(--ink-soft);
}
.wk-stat b { color: var(--ink-teal); font-size: 14px; }
/* 家长码 */
.pc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.pc-cell {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: #fff; border: 1px solid rgba(127,184,164,.22); border-radius: 11px; padding: 8px 10px; cursor: pointer;
}
.pc-cell:active { background: rgba(127,184,164,.1); }
.pc-n { font-size: 13px; font-weight: 700; color: var(--ink); }
.pc-c { font-size: 13px; font-weight: 800; color: var(--gold); letter-spacing: 1px; }
/* 备份 */
.bk-info {
  display: flex; justify-content: space-around; background: #fff; border-radius: 12px; padding: 10px;
  font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; border: 1px solid rgba(127,184,164,.2);
}
.bk-info b { color: var(--ink-teal); font-size: 14px; }
.bk-ta {
  width: 100%; min-height: 96px; border: 1.5px solid rgba(91,138,143,.25); border-radius: 12px;
  padding: 10px; font-size: 11px; font-family: ui-monospace, Menlo, Consolas, monospace;
  resize: vertical; box-sizing: border-box; background: #fbfcfb;
}
/* 海报 / 家长视图遮罩 */
.poster-mask {
  position: fixed; inset: 0; z-index: 200; background: rgba(30,38,40,.72);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: fadeIn .2s ease both; overflow: auto;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.poster-box {
  background: var(--paper); border-radius: 18px; padding: 14px; width: 100%; max-width: 380px;
  box-shadow: 0 14px 40px rgba(0,0,0,.3); text-align: center;
}
.poster-box img { width: 100%; border-radius: 12px; display: block; }
.poster-tip { font-size: 11px; color: var(--ink-soft); margin: 9px 0; }
.poster-btns { display: flex; gap: 8px; }
.poster-btns .add-btn { flex: 1; margin: 0; }
.poster-box.narrow { padding: 18px; }
/* 满级纪念卡 */
.memorial-mask { backdrop-filter: blur(2px); }
.memorial-mask .poster-box {
  border: 1px solid rgba(184,134,56,.45);
  box-shadow: 0 14px 40px rgba(0,0,0,.3), 0 0 0 5px rgba(233,213,168,.18);
}
.memorial-btn {
  background: linear-gradient(135deg, #e9d5a8, #cfae63) !important;
  color: #6b4d13 !important;
}
/* 家长视图卡 */
.pv-none { font-size: 13px; color: var(--ink-soft); line-height: 1.8; margin: 10px 0 14px; }
.pv-card { text-align: left; }
.pv-head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.pv-av { width: 54px; height: 54px; flex: 0 0 54px; }
.pv-head div { display: flex; flex-direction: column; line-height: 1.4; }
.pv-head b { font-size: 17px; color: var(--ink); }
.pv-head span { font-size: 11.5px; color: #9aa8a4; }
.pv-box { background: #fff; border-radius: 14px; padding: 12px; border: 1px solid rgba(127,184,164,.2); }
.pv-lead { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.65; margin-bottom: 7px; }
.pv-act {
  margin-top: 10px; padding: 10px; border-radius: 12px; border: 1px dashed rgba(212,169,78,.5);
  background: linear-gradient(135deg, rgba(212,169,78,.1), rgba(212,169,78,.03));
}
.pv-act em { font-style: normal; font-size: 11px; font-weight: 800; color: #9a7327; display: block; margin-bottom: 3px; }
.pv-act p { font-size: 12.5px; line-height: 1.7; color: #5d5340; }
.pv-stat {
  display: flex; justify-content: space-around; margin: 11px 0 8px; font-size: 11.5px; color: var(--ink-soft);
}
.pv-stat b { color: var(--ink-teal); font-size: 15px; }
.pv-foot { text-align: center; font-size: 10.5px; color: #b3bcba; margin-bottom: 4px; }
.mode-switch-btn.parent {
  border: 1.5px solid rgba(212,169,78,.5); background: linear-gradient(135deg, #fdf6e6, #f7ead0); color: #8a5e14;
}
/* 并排按钮行 */
.btn-row { display: flex; gap: 8px; }
.btn-row .add-btn { flex: 1; }

/* ===== v2 真实立绘适配 =====
   灵宠由参数化 SVG 换成 512px WebP 立绘，统一让图片撑满 .beast 容器。
   SVG 兜底（.svg-fallback）同样适用，图片缺失时不会出现尺寸塌陷。 */
.beast img, .beast svg, .beast .svg-fallback {
  width: 100% !important; height: 100% !important; display: block !important; object-fit: contain !important;
}
.beast img, .beast .svg-fallback {
  filter: drop-shadow(0 3px 4px rgba(91,138,143,.18));
}
.beast-img { -webkit-user-drag: none; user-select: none; }
/* 打蔫：轻微去色，保留灵宠可爱度（永不死亡） */
.beast-img.is-wilt { filter: grayscale(.35) saturate(.7); }
/* 孵化蛋：轻微呼吸感 */
.beast > img[data-lv="0"] { animation: eggBreath 2.8s ease-in-out infinite; }
@keyframes eggBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.02); }
}

/* 防止 512px 立绘撑破 52/64px 卡片：给所有固定尺寸的 .beast 容器加裁剪 */
.beast { overflow: hidden !important; }

/* ============================================================
   v3 · PPT 悬浮窗入口 / 批量加分 / 小组排名分区
   ============================================================ */

/* ---------- PPT 悬浮窗入口 ---------- */
.float-entry { text-align: center; padding: 20px 16px; }
.float-entry .fe-orbs { display: flex; gap: 12px; justify-content: center; margin-bottom: 8px; }
.float-entry .fe-orb {
  width: 62px; height: 62px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 24px;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.35) 0%, transparent 45%),
    conic-gradient(from 210deg, #6D3BF5, #2F6BE0, #8E3FD4, #3D2A8C, #6D3BF5);
  box-shadow: 0 6px 18px rgba(80,40,180,.42), inset 0 0 14px rgba(255,255,255,.2);
  overflow: hidden; position: relative;
}
.float-entry .fe-orb img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.float-entry .fe-orb.ghost { font-size: 26px; color: #FFF6DC; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.float-entry b { display: block; font-size: 14.5px; margin: 6px 0 4px; }
.float-entry > span { display: block; font-size: 12px; color: var(--ink-soft); line-height: 1.7; }
.float-go {
  margin-top: 12px; width: 100%; padding: 13px; border: none; border-radius: 14px;
  font-size: 15px; font-weight: 800; letter-spacing: 1px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #7C4DFF, #3D6BE0);
  box-shadow: 0 6px 18px rgba(90,50,200,.35); transition: .15s;
}
.float-go:hover { filter: brightness(1.1); }
.float-go:active { transform: scale(.98); }
.fe-tip { font-size: 11px; color: var(--ink-soft); margin-top: 8px; min-height: 16px; line-height: 1.6; }

/* ---------- 批量加分入口 ---------- */
.bulk-go {
  width: 100%; padding: 13px; border: none; border-radius: 14px; cursor: pointer;
  font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #D4A94E, #C08552);
  box-shadow: 0 6px 18px rgba(212,169,78,.35); transition: .15s;
}
.bulk-go:hover { filter: brightness(1.08); }
.bulk-go:active { transform: scale(.98); }

/* ---------- 首页：小组排名分区 ---------- */
.grp-block {
  margin-bottom: 16px; border-radius: 18px; padding: 12px 12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(245,249,250,.7));
  border: 1px solid rgba(127,184,164,.22);
  box-shadow: var(--shadow-sm);
}
.grp-block.is-top {
  border-color: rgba(212,169,78,.45);
  background: linear-gradient(180deg, rgba(255,251,240,.95), rgba(250,244,228,.75));
  box-shadow: 0 4px 16px rgba(212,169,78,.18);
}
.grp-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.grp-no {
  width: 26px; height: 26px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #7FB8A4, #5B8A8F);
  box-shadow: 0 2px 6px rgba(91,138,143,.3);
}
.grp-block.is-top .grp-no { background: linear-gradient(135deg, #E8C87A, #C0852F); }
.grp-crown { font-size: 17px; }
.grp-name { font-size: 15px; font-weight: 800; color: var(--ink); }
.grp-pts { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; flex: 1; }
.grp-add {
  font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 10px;
  cursor: pointer; border: 1px solid rgba(212,169,78,.45);
  background: rgba(212,169,78,.14); color: #9a7327; transition: .15s;
}
.grp-add:hover { background: rgba(212,169,78,.28); }
.grp-bar {
  height: 6px; border-radius: 4px; background: rgba(127,184,164,.16);
  overflow: hidden; margin-bottom: 10px;
}
.grp-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #7FB8A4, #5B8A8F);
  transition: width .5s ease;
}
.grp-block.is-top .grp-fill { background: linear-gradient(90deg, #E8C87A, #C0852F); }
.grp-grid { margin-top: 2px; }

/* 视图切换小按钮 */
.view-switch {
  display: flex; gap: 6px; justify-content: flex-end; margin: 2px 0 10px;
}
.view-switch button {
  font-size: 11.5px; padding: 5px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(127,184,164,.3); background: rgba(255,255,255,.7);
  color: var(--ink-soft); font-weight: 700; transition: .15s;
}
.view-switch button.on {
  background: var(--celadon); border-color: var(--celadon); color: #fff;
}

/* ---------- v91：养宠规则胶囊（与视图切换同排） ---------- */
.view-switch .vs-rule{
  font-size:11.5px;padding:5px 12px;border-radius:10px;cursor:pointer;font-weight:700;
  border:1px dashed rgba(127,184,164,.6);background:rgba(255,255,255,.45);
  color:var(--ink-soft);transition:.15s;white-space:nowrap;
}
.view-switch .vs-rule:hover{background:rgba(255,255,255,.85)}
.view-switch .vs-rule.open{
  background:#FDF6E8;border:1px solid rgba(212,169,78,.65);color:#8a6d3b;
}
.rule-card{
  margin:0 0 10px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(160deg,#FFFCF4,#FFF7E8);
  border:1px solid rgba(212,169,78,.35);
  box-shadow:0 4px 14px rgba(180,150,90,.1);
  animation:ruleIn .2s ease;
}
@keyframes ruleIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.rule-sec+.rule-sec{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(180,150,90,.28)}
.rule-t{font-size:13px;font-weight:800;color:#5c4a2e;margin-bottom:4px;letter-spacing:.2px}
.rule-p{font-size:12.5px;line-height:1.85;color:#6b5c46}
.rule-p b{color:#a8763a;font-weight:800}

/* ---------- 批量加分弹层 ---------- */
.bulk-mask {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20,30,32,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.bulk-box {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--paper); border-radius: 20px 20px 0 0; padding: 18px 16px 26px;
  box-shadow: 0 -8px 40px rgba(0,0,0,.28);
  animation: slideUp .25s ease;
}
@keyframes slideUp { from { transform: translateY(40px); opacity: .5 } to { transform: translateY(0); opacity: 1 } }
.bulk-box h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.bulk-sub { font-size: 12px; color: var(--ink-soft); margin-bottom: 14px; }
.bulk-sec { font-size: 13px; font-weight: 700; color: var(--ink-teal); margin: 14px 0 8px; }
.bulk-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.bulk-chip {
  font-size: 12.5px; padding: 7px 13px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(127,184,164,.32); background: #fff;
  color: var(--ink-soft); font-weight: 600; transition: .15s; user-select: none;
}
.bulk-chip.on { background: var(--celadon); border-color: var(--celadon); color: #fff; }
.bulk-chip.grp-on { background: rgba(212,169,78,.2); border-color: rgba(212,169,78,.55); color: #9a7327; }
.bulk-evals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bulk-eval {
  display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-radius: 13px;
  border: 1.5px solid rgba(127,184,164,.25); background: #fff; cursor: pointer;
  font-size: 13px; font-weight: 600; transition: .15s;
}
.bulk-eval.on { border-color: var(--gold); background: rgba(212,169,78,.12); }
.bulk-eval .be { font-size: 17px; }
.bulk-eval .bp { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--gold); }
.bulk-eval.neg { border-color: rgba(224,122,95,.3); }
.bulk-eval.neg .bp { color: var(--cinnabar); }
.bulk-foot { display: flex; gap: 10px; margin-top: 18px; }
.bulk-foot .add-btn { flex: 1; }
.bulk-count { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 10px; }
.bulk-count b { color: var(--gold); font-size: 14px; }

/* =====================================================
   v42 大屏 / 希沃自适应
   铁律：全部关进 min-width 断点，手机端一行不改
   投屏模式 = 希沃主战场：列数随屏宽自动铺满，灵宠接近满格
   ===================================================== */

/* ---------- 投屏模式：宽屏铺满（希沃 / 投影） ---------- */
@media (min-width: 1000px) {
  .proj-wall {
    grid-template-columns: repeat(auto-fill, minmax(10vw, 1fr));
    gap: 2.4vh 1vw;
  }
  .proj-cell .cbeast { width: min(18vmin, 9.5vw); height: auto; aspect-ratio: 1 / 1; max-height: 100%; margin: 0 auto; }
  .proj-cell .cname { font-size: min(3vmin, 1.6vw); margin-top: .7vh; }
  .proj-cell .clv { font-size: min(2.4vmin, 1.3vw); }
  .proj-title { font-size: 4.4vmin; margin-bottom: 3.2vh; }
  .proj-head { font-size: 3vmin; }

  /* 灵宠墙：整屏分摊行高 —— 人多不溢出，人少不过分膨胀 */
  .proj-slide.is-wall { display: flex; flex-direction: column; }
  .proj-slide.is-wall .proj-title { flex-shrink: 0; }
  .proj-wall { flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr); align-content: stretch; }
  .proj-cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 0; overflow: hidden;
  }
  .proj-cell .cname, .proj-cell .clv { flex-shrink: 0; }
}

/* ---------- 主页 / 通用：平板以上适度放宽 ---------- */
@media (min-width: 1200px) {
  #app { max-width: 1500px; }
  .grid-students {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }
  .stu { padding: 14px 8px 12px; border-radius: 18px; }
  .stu .beast { max-width: 190px; }
  .stu .pname { font-size: 14px; margin-top: 4px; }
  .stu .name { font-size: 14.5px; }
  .stu .lvtag { font-size: 11.5px; padding: 2px 7px; border-radius: 9px; }
  .dex-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------- 希沃 / 4K：再放大一档 ---------- */
@media (min-width: 1800px) {
  #app { max-width: 1700px; }
  .grid-students {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
  }
  .stu { padding: 16px 10px 14px; border-radius: 20px; }
  .stu .beast { max-width: 230px; }
  .stu .pname { font-size: 15px; }
  .stu .name { font-size: 16px; }
  .stu .lvtag { font-size: 12.5px; }
}


/* ===== v48 · 教师「我的」首屏「发给家长」大入口 =====
   此前这个入口藏在二级菜单里，老师找不到，家长端就用不起来。 */
.mine-quick {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 0 0 12px; padding: 15px 16px; cursor: pointer; font-family: inherit;
  border: none; border-radius: 16px; text-align: left;
  background: linear-gradient(135deg, #7FB8A4, #5B8A8F); color: #fff;
  box-shadow: 0 5px 16px rgba(91,138,143,.32); transition: transform .12s;
}
.mine-quick:active { transform: scale(.98); }
.mine-quick .mq-i { font-size: 26px; }
.mine-quick .mq-t { flex: 1; min-width: 0; }
.mine-quick .mq-t b { display: block; font-size: 16px; font-weight: 800; letter-spacing: .04em; }
.mine-quick .mq-t span {
  display: block; font-size: 11.5px; opacity: .9; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mine-quick .mq-a { font-size: 22px; opacity: .8; }
/* v57 客服微信卡片 */
.kefu-card { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px;
  background: rgba(255,253,248,.9); border: 1px solid rgba(212,169,78,.25); border-radius: 16px; }
.kefu-card img { width: 84px; height: 84px; border-radius: 10px; flex-shrink: 0; }
.kefu-card .kefu-t b { display: block; font-size: 14px; color: #3a4a45; }
.kefu-card .kefu-t span { font-size: 11.5px; color: #6B7F80; line-height: 1.7; }

/* ===== v53 · 自动云同步状态条 =====
   老师只需要看到这一行：数据在不在同步、什么时候同步的。
   令牌、仓库、房间号这些一律不出现在老师界面上。 */
.autosync-bar {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 12px; padding: 11px 14px; cursor: pointer; font-family: inherit;
  border: 1px solid #E6E2D8; border-radius: 14px; background: #fff; text-align: left;
  transition: transform .12s;
}
.autosync-bar:active { transform: scale(.99); }
.autosync-bar .as-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.autosync-bar .as-t { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); line-height: 1.45; }
.autosync-bar .as-t span { display: block; font-size: 11px; color: #8A9A9B; margin-top: 2px; }
.autosync-bar .as-a { font-size: 15px; color: #B4B2A9; flex: none; }

/* ===== v48 · 全班一对一链接列表 ===== */
.al-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-bottom: 1px dashed rgba(127,184,164,.25);
}
.al-row:last-child { border-bottom: none; }
.al-row .al-n { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.al-row .al-c {
  border: 1.5px solid rgba(127,184,164,.55); background: none; color: var(--ink-teal);
  border-radius: 9px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.al-row .al-c:active { transform: scale(.96); }

/* ===== v71 作业布置 ===== */
.hw-card{background:rgba(255,253,248,.94);border:1px solid rgba(212,169,78,.28);border-radius:14px;padding:12px 13px;margin-bottom:10px}
.hw-head{display:flex;align-items:flex-start;gap:8px}
.hw-head b{flex:1;font-size:14.5px;line-height:1.6;word-break:break-word}
.hw-subj{display:inline-block;font-size:11px;font-weight:800;color:#7a5f1c;background:#fff3d6;border:1px solid rgba(185,138,46,.4);border-radius:8px;padding:2px 7px;margin-right:6px}
.hw-del{flex:0 0 auto;border:none;background:rgba(224,122,95,.12);color:#c0603f;font-size:12px;font-weight:800;padding:5px 10px;border-radius:9px;cursor:pointer;font-family:inherit}
.hw-meta{font-size:11.5px;color:#8a9a97;margin-top:6px}
.hw-desc{font-size:13px;line-height:1.85;margin-top:6px;white-space:pre-wrap;word-break:break-word}
.hw-imgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.hw-imgs img{width:88px;height:88px;object-fit:cover;border-radius:10px;border:1px solid rgba(212,169,78,.3);cursor:zoom-in}
.hw-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.hw-thumb{position:relative;display:inline-block}
.hw-thumb img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid rgba(212,169,78,.35);display:block}
.hw-thumb button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;line-height:18px;border-radius:50%;border:none;background:#c0603f;color:#fff;font-size:13px;font-weight:800;cursor:pointer}
.hw-none{font-size:12px;color:#9aa8a5}
/* ===== v71 隔空喊话 ===== */
.sh-tpl{display:flex;flex-wrap:wrap;gap:6px}
.sh-chip{border:1px solid rgba(58,158,140,.35);background:rgba(58,158,140,.08);color:#3a7f70;font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;cursor:pointer;font-family:inherit}
.sh-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed rgba(107,127,128,.2);font-size:13px}
.sh-row:last-child{border-bottom:none}
.sh-row span{flex:1;word-break:break-word}
.sh-row b{color:#8a9a97;font-size:11.5px;font-weight:700;flex:0 0 auto}

/* ===== v72 喊话送达回执 ===== */
.sh-ok{color:#2f8f6d;font-size:11.5px;font-weight:800;flex:0 0 auto}
.sh-wait{color:#b0812e;font-size:11.5px;font-weight:800;flex:0 0 auto}
.tip-note.warn{background:rgba(224,122,95,.12);border-color:rgba(224,122,95,.35);color:#a9563a}

/* ===== v73 学生端看教室喊话（免密只读） ===== */
.shout-big{font-size:min(11vw,120px);font-weight:800;line-height:1.3;text-align:center;word-break:break-word;
  padding:2vh 2vw;color:var(--ink);}
.shout-by{margin-top:2vh;text-align:center;font-size:3.4vmin;color:var(--ink-soft);letter-spacing:1px}
.shout-more{margin-top:2vh;text-align:center;font-size:2.6vmin;color:var(--ink-soft);opacity:.75}
.shout-idle{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.shout-idle-t{margin-top:2vh;font-size:3.6vmin;color:var(--ink-soft);letter-spacing:2px}
.shout-none{max-width:640px;margin:12vh auto;text-align:center;font-size:16px;line-height:2;color:var(--ink-soft)}
/* ===== v78 工具页九宫格 + 四个新功能（复用东方色板） ===== */
.tool-panel { margin-top: 4px; }
.seat-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-soft); }
.seat-num { width: 48px; padding: 4px 6px; border: 1.5px solid rgba(127,184,164,.4); border-radius: 8px; font-size: 13px; text-align: center; }
.seat-wrap { display: flex; gap: 14px; flex-wrap: wrap; }
.seat-grid { display: grid; gap: 6px; flex: 1; min-width: 240px; }
.seat-cell { min-height: 40px; border: 1.5px dashed rgba(127,184,164,.45); border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--moon); font-size: 12px; color: var(--ink); cursor: pointer; position: relative; padding: 2px; text-align: center; }
.seat-cell.filled { border-style: solid; border-color: rgba(127,184,164,.6); background: #fff; cursor: grab; }
.seat-cell.over { border-color: var(--gold); background: rgba(212,169,78,.12); }
.seat-cell .sc-b { font-size: 16px; }
.seat-cell.dragging { opacity: .4; }
.seat-roster { width: 124px; flex-shrink: 0; }
.seat-roster-h { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 6px; }
.seat-roster-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; }
.seat-chip { padding: 6px 8px; border-radius: 10px; background: var(--moon); border: 1px solid rgba(127,184,164,.2); font-size: 12.5px; cursor: grab; display: flex; align-items: center; gap: 6px; }
.seat-chip .sc-b { font-size: 15px; }
.seat-chip.dragging { opacity: .4; }
.noise-canvas { background: linear-gradient(180deg, #eef6f4, #dcefe9); border-radius: 14px; width: 100%; max-width: 340px; }
.noise-readout { font-size: 14px; font-weight: 700; color: var(--ink-teal); margin: 8px 0 4px; }
.noise-sens { display: flex; gap: 6px; justify-content: center; margin: 6px 0; }
.noise-sens .sens-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(127,184,164,.4); background: var(--moon); color: var(--ink-soft); font-weight: 700; cursor: pointer; }
.noise-sens .sens-btn.on { background: var(--ink-teal); color: #fff; border-color: var(--ink-teal); }
.noise-tip { font-size: 11.5px; color: var(--ink-soft); margin: 4px 0 10px; min-height: 16px; }
.break-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.break-game { background: var(--moon); border: 1px solid rgba(127,184,164,.18); border-radius: 14px; padding: 12px 10px; text-align: center; cursor: pointer; box-shadow: var(--shadow-sm); }
.break-game:active { transform: scale(.97); }
.break-game .bg-icon { font-size: 26px; }
.break-game b { display: block; font-size: 13px; margin-top: 4px; color: var(--ink); }
.break-game span { font-size: 10.5px; color: var(--ink-soft); }
.break-stage { margin-top: 10px; padding: 14px; }
.break-rule { font-size: 12px; color: var(--ink-soft); background: rgba(127,184,164,.1); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; line-height: 1.6; }
.break-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; justify-content: center; }
.break-big { font-size: 22px; font-weight: 800; color: var(--ink-teal); text-align: center; margin: 8px 0; }
.break-input { padding: 7px 10px; border: 1.5px solid rgba(127,184,164,.4); border-radius: 9px; font-size: 14px; width: 120px; text-align: center; }
.wheel-canvas { width: 240px; height: 240px; max-width: 100%; }
.wheel-prize { font-size: 15px; font-weight: 800; color: var(--gold); margin: 10px 0; min-height: 22px; }
.wheel-cfg { margin-top: 12px; text-align: left; font-size: 12px; color: var(--ink-soft); }
.wheel-prizes-h { font-weight: 700; color: var(--ink-teal); margin: 8px 0 4px; }
.wheel-prizes { display: flex; flex-wrap: wrap; gap: 6px; }
.wheel-prize-tag { background: var(--moon); border: 1px solid rgba(127,184,164,.25); border-radius: 20px; padding: 3px 10px; font-size: 12px; display: flex; align-items: center; gap: 4px; }
.wheel-prize-tag .wp-del { color: var(--cinnabar); cursor: pointer; }
.wheel-add { display: flex; gap: 6px; margin-top: 8px; }
.wheel-input { flex: 1; padding: 6px 8px; border: 1.5px solid rgba(127,184,164,.4); border-radius: 8px; font-size: 12.5px; }


/* ===== v80/v94：班级页快捷加分 + 演示学生标签 =====
   v94：整排细节按钮收成一枚「⚡ 快捷加分」，与🏆小组排名等同排；细节进了折叠面板。
   配色走暖金（青=切视图，金=下指令加分），与 v93 的 .screenbar 同一套语言。 */
.view-switch .vs-qa{
  font-size:11.5px;padding:5px 12px;border-radius:10px;cursor:pointer;font-weight:700;
  border:1px solid rgba(212,169,78,.55);background:linear-gradient(135deg,#FFFDF7,#FDF3E0);
  color:#8a6d3b;transition:.15s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px;
}
.view-switch .vs-qa:hover{filter:brightness(.97);transform:translateY(-1px)}
.view-switch .vs-qa:active{transform:scale(.955)}
.view-switch .vs-qa.open{
  background:linear-gradient(135deg,#F2C879,#DCA43F);border-color:#D4A94E;color:#fff;
}
.qa-caret{font-size:9px;line-height:1;transition:transform .18s}
.view-switch .vs-qa.open .qa-caret{transform:rotate(180deg)}
.qa-panel{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  margin:0 0 10px;padding:9px 11px;
  background:linear-gradient(135deg,#FFFDF7,#FDF6E8);
  border:1px solid rgba(212,169,78,.45);border-radius:14px;
  animation:qaDrop .18s ease-out;
}
@keyframes qaDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qa-btn {
  border: 1px solid rgba(212,169,78,.6); background: #fff; color: #2C3E40;
  border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; transition: .15s;
  white-space: nowrap;
}
.qa-btn:hover { background: rgba(212,169,78,.16); transform: translateY(-1px); }
.qa-btn:active { transform: scale(.955); }
.qa-btn.qa-more { border-style: dashed; color: #6B7F80; }
/* 窄屏兜底：四个键都挤得下，实在不行才缩一档，别把「一排」弄散 */
@media (max-width:380px){
  .view-switch button,.view-switch .vs-rule,.view-switch .vs-qa{font-size:11px;padding:5px 9px}
}
.demo-tag {
  display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 600;
  color: #B5823A; background: rgba(212,169,78,.16); border: 1px solid rgba(212,169,78,.4);
  border-radius: 6px; padding: 0 5px; vertical-align: middle;
}

/* ===== v87：主页「推荐赠礼」窄条（原 HUD 位，吸顶；详情点开才展开） ===== */
.home-ref{position:sticky;top:0;z-index:40;margin:4px 0 10px;
  background:linear-gradient(135deg,rgba(127,184,164,.14),rgba(212,169,78,.10));
  border:1px solid rgba(200,69,47,.30);border-radius:13px;
  backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);overflow:hidden}
.home-ref .hr-row{display:flex;align-items:center;gap:8px;width:100%;border:none;
  background:transparent;padding:9px 12px;cursor:pointer;text-align:left;font-family:inherit}
.home-ref .hr-ico{font-size:15px;flex:none;line-height:1}
.home-ref .hr-row-t{flex:1;min-width:0;font-size:12px;font-weight:800;color:#8a4a2b;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-ref .hr-chev{flex:none;color:#C8452F;font-size:15px;line-height:1;transition:transform .15s}
.home-ref.open .hr-chev{transform:rotate(90deg)}
.home-ref .hr-detail{padding:0 12px 11px}

/* ===== v87：未登录点受限功能的提示弹层（加客服免费领账号） ===== */
.acc-tip-mask{position:fixed;inset:0;background:rgba(20,26,24,.45);z-index:9998;
  display:flex;align-items:center;justify-content:center;padding:24px}
.acc-tip-card{background:#fff;border-radius:18px;max-width:320px;width:100%;
  padding:20px 18px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.acc-tip-ico{font-size:34px;line-height:1}
.acc-tip-t{font-size:15px;font-weight:800;margin-top:6px}
.acc-tip-d{font-size:12px;color:var(--ink-soft);line-height:1.7;margin-top:8px}
.acc-tip-d b{color:#C8452F}
.acc-tip-qr{width:150px;height:150px;object-fit:contain;margin:12px auto 4px;display:block;
  border-radius:10px;border:1px solid #eee;background:#fff}
.acc-tip-btns{display:flex;gap:8px;margin-top:12px}
.acc-tip-btns button{flex:1;border:none;border-radius:11px;padding:10px 6px;font-size:13px;
  font-weight:800;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#C8452F,#E0674F);box-shadow:0 2px 6px rgba(200,69,47,.22)}
.acc-tip-btns button:active{transform:translateY(1px)}
.acc-tip-btns button.ghost{background:#fff;color:#8a6d3b;border:1px solid rgba(212,169,78,.55);box-shadow:none}
.home-ref .hr-code{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;
  background:#fff;border:1px dashed rgba(200,69,47,.38);border-radius:11px;padding:8px 11px}
.home-ref .hr-code span{font-size:11.5px;color:var(--ink-soft)}
.home-ref .hr-code b{font-family:Consolas,Menlo,monospace;font-size:14px;letter-spacing:.6px;color:#C8452F}
.home-ref .hr-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.home-ref .hr-btns button{flex:1;min-width:98px;border:none;border-radius:11px;padding:9px 6px;
  font-size:12px;font-weight:800;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#C8452F,#E0674F);box-shadow:0 2px 6px rgba(200,69,47,.22)}
.home-ref .hr-btns button:active{transform:translateY(1px)}
.home-ref .hr-btns button.ghost{background:#fff;color:#8a6d3b;border:1px solid rgba(212,169,78,.55);box-shadow:none}
.home-ref .hr-foot{margin-top:9px;font-size:11px;color:var(--ink-soft);line-height:1.6}

/* ===== v86：实时同步状态条（家长/学生端自动更新，无需老师手动发布） ===== */
.auto-sync{display:flex;align-items:center;gap:8px;margin-top:9px;padding:8px 10px;border-radius:10px;
  background:linear-gradient(90deg,#EAF4F1,#F7FCFB);border:1px solid rgba(58,158,140,.26);font-size:11.5px;color:#3a6f63}
.auto-sync .dot{width:7px;height:7px;border-radius:50%;background:#3a9e8c;flex:none;box-shadow:0 0 0 3px rgba(58,158,140,.18)}
.auto-sync.warn{background:linear-gradient(90deg,#FFF6E3,#FFFDF7);border-color:rgba(212,169,78,.4);color:#8a6d3b}
.auto-sync.warn .dot{background:#d4a94e;box-shadow:0 0 0 3px rgba(212,169,78,.18)}

/* ===== v89：试用倒计时胶囊（贴在「教师版」按钮旁，紧凑不占横幅） ===== */
.trial-chip{font-size:9.5px;font-weight:800;line-height:1;padding:3px 6px;border-radius:999px;
  white-space:nowrap;cursor:pointer;color:#8a6d3b;
  background:linear-gradient(135deg,#FFF3D6,#FFFDF7);border:1px solid rgba(212,169,78,.55)}
.trial-chip b{font-size:11px;color:#C8452F;font-variant-numeric:tabular-nums}
.trial-chip.expired{color:#a33b28;background:linear-gradient(135deg,#FFE7DF,#FFF8F5);
  border-color:rgba(194,74,48,.5)}
.trial-chip.expired b{color:#a33b28}
.trial-chip:active{transform:translateY(1px)}


/* ===== v92: global button feedback ===== */
button{transition:transform .12s ease,filter .12s ease,background-color .18s ease,box-shadow .18s ease}
button:not([disabled]):active{transform:scale(.955);filter:brightness(.92)}
button[disabled]{opacity:.6;cursor:default}
button.btn-ok,button.btn-ok:active{transform:none!important;filter:none!important;opacity:1!important;
  background:linear-gradient(135deg,#3fae97,#2f8b79)!important;color:#fff!important;
  border-color:rgba(47,139,121,.6)!important;box-shadow:0 3px 10px rgba(58,158,140,.35)}
.form-submit:active,.add-btn:active{transform:scale(.97)}
/* v92: toast slightly longer & stronger */
.toast{font-weight:700}