/* ===== 君兰绘学岛 · 移动端优先样式 ===== */
:root{
  --bg:#fff5f8; --card:#ffffff; --ink:#5a2740; --ink2:#8a5a72; --ink3:#b48aa0;
  --brand:#ff5b8a; --brand2:#ff85ad; --brand-soft:#ffe3ee;
  --ok:#22a06b; --ok-soft:#e3f7ee;
  --bad:#e04b4b; --bad-soft:#fdeaea;
  --warn:#f0a020;
  --gold:#f5b301;
  --rose:#ff5b8a; --rose2:#ff85ad; --rose-soft:#ffe3ee;
  --r:16px; --r-lg:22px;
  --sh:0 2px 10px rgba(255,91,138,.10);
  --sh-lg:0 8px 28px rgba(255,91,138,.18);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --nav-h:62px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* ============ P1：固定游戏视窗 + 底部导航栏 ============ */
#game-shell{
  height:100dvh; height:100vh;            /* dvh 处理移动端地址栏；vh 兜底旧浏览器 */
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg); position:relative;
}
.topbar{ flex:0 0 auto; }                /* 视窗内顶部固定，不再依赖 sticky */
#view{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; min-height:0; }

/* 底部导航栏 */
.nav-bar{
  flex:0 0 auto; height:calc(var(--nav-h) + var(--safe-b));
  display:flex; background:#fff; border-top:1px solid #ffe0ea;
  box-shadow:0 -3px 14px rgba(255,91,138,.10); z-index:60;
  padding-bottom:var(--safe-b); position:relative;
}
.nav-bar.hide{ display:none; }
.nav-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--ink3); font-size:11px; font-weight:600; background:none;
  transition:color .15s, transform .12s; -webkit-tap-highlight-color:transparent;
}
.nav-btn .nav-ico{ font-size:21px; line-height:1; transition:transform .15s; }
.nav-btn:active{ transform:scale(.92); }
.nav-btn.active{ color:var(--brand); }
.nav-btn.active .nav-ico{ transform:translateY(-1px) scale(1.06); }

/* 首页「各模块快捷入口」网格 */
.quick-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:4px 0 6px; }
.quick-tile{
  background:linear-gradient(135deg,#fff,#fff2f7); border:2px solid #ffe0ea; border-radius:var(--r-lg);
  padding:15px 14px; display:flex; align-items:center; gap:12px; text-align:left;
  box-shadow:var(--sh); transition:transform .15s, box-shadow .15s;
}
.quick-tile:active{ transform:scale(.97); box-shadow:var(--sh-lg); }
.quick-tile .q-ico{ width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto;background:var(--brand-soft) }
.quick-tile .q-info b{ display:block; font-size:15px; }
.quick-tile .q-info small{ color:var(--ink2); font-size:11.5px; }

/* 首页总进度环 */
.hero-top{ display:flex; align-items:center; gap:16px; }
.hero-text{ flex:1; min-width:0; }
.ring-wrap{ position:relative; width:84px;height:84px;flex:0 0 auto }
.ring-wrap svg{ width:84px;height:84px; transform:rotate(-90deg) }
.ring-wrap .ring-bg{ fill:none; stroke:#ffe0ea; stroke-width:9 }
.ring-wrap .ring-fg{ fill:none; stroke:var(--brand); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset .6s ease }
.ring-wrap .ring-txt{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-wrap .ring-txt b{ font-size:20px; color:var(--brand); line-height:1 }
.ring-wrap .ring-txt span{ font-size:10px; color:var(--ink2) }
html,body{margin:0;padding:0;height:100%;overflow-x:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.55;
  -webkit-text-size-adjust:100%; overscroll-behavior-y:none;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
.hidden{display:none !important}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  padding:calc(var(--safe-t) + 10px) 16px 10px;
  background:linear-gradient(135deg,#ff5b8a,#ff85ad); color:#fff;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 2px 14px rgba(255,91,138,.30);
}
.topbar .back{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex:0 0 auto}
.topbar .back:active{background:rgba(255,255,255,.32)}
.topbar h1{font-size:17px;margin:0;font-weight:700;flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.topbar .coins{background:rgba(255,255,255,.2);padding:5px 12px;border-radius:20px;
  font-size:14px;font-weight:700;white-space:nowrap}
/* ★ 本轮新增：顶栏常驻「返回家长控制台」入口（孩子身份 + 有有效家长备份时才渲染） */
.tb-parent{flex:0 0 auto;background:rgba(255,255,255,.22);color:#fff;font-size:13px;
  font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px}
.tb-parent:active{background:rgba(255,255,255,.36)}
/* 顶栏最小条（无 h1）时靠这条把金币挂件推到最右 */
#topbar .tb-parent + .coins{margin-left:auto}

/* ---------- 容器 ---------- */
.wrap{max-width:900px;margin:0 auto;padding:16px 14px calc(20px + var(--nav-h) + var(--safe-b));min-width:0;overflow-x:clip}

/* ---------- 首页 ---------- */
.hero{
  background:linear-gradient(135deg,#ff7aa8,#ff9ec0); color:#fff;border-radius:var(--r-lg);
  padding:22px 20px;margin-bottom:16px;box-shadow:var(--sh-lg);position:relative;
  overflow:hidden;max-width:100%;
}
.hero::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;
  background:rgba(255,255,255,.10);border-radius:50%}
.hero h2{margin:0 0 6px;font-size:22px;font-weight:800}
.hero p{margin:0;font-size:14px;opacity:.92}
.hero .hero-sub{margin-top:4px;font-size:12px;opacity:.82}
.hero .stats{display:flex;gap:10px;margin-top:16px;position:relative;z-index:1}
.hero .stat{flex:1;min-width:0;background:rgba(255,255,255,.18);border-radius:14px;padding:9px 6px;text-align:center}
.hero .stat b{display:block;font-size:19px;line-height:1.2}
.hero .stat span{font-size:11px;opacity:.9;white-space:nowrap}
/* 护眼 · 学习时长提醒（方案：连续学习 30 分钟建议休息） */
.rest-tip{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 12px);transform:translateX(-50%);
  background:#fff7e6;color:#8a6d3b;border:1px solid #ffe2a8;border-radius:14px;
  padding:11px 16px;font-size:13px;line-height:1.5;box-shadow:0 6px 20px rgba(0,0,0,.16);
  z-index:9999;max-width:88%;text-align:center;animation:restIn .35s ease}
@keyframes restIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

.subj{display:grid;grid-template-columns:1fr;gap:14px;margin-top:6px}
@media(min-width:640px){ .subj{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:900px){ .subj{grid-template-columns:repeat(3,minmax(0,1fr))} }
.subj-card{
  background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh);
  display:flex;gap:14px;align-items:center;transition:transform .15s,box-shadow .15s;
  border:2px solid transparent;text-align:left;width:100%;
}
.subj-card:active{transform:scale(.97);box-shadow:var(--sh-lg)}
.subj-card .ico{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;font-size:28px;flex:0 0 auto}
.subj-card .info{flex:1;min-width:0}
.subj-card .info b{display:block;font-size:17px;margin-bottom:3px}
.subj-card .info small{color:var(--ink2);font-size:12px;display:block;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.subj-card .prog{margin-top:8px;height:6px;background:var(--brand-soft);border-radius:4px;
  overflow:hidden;width:100%;max-width:100%}
.subj-card .prog i{display:block;height:100%;background:var(--brand);border-radius:4px;transition:width .4s}
.s-han .ico{background:#fff1e6} .s-han .prog i{background:#f59a3c}
.s-math .ico{background:#e6f7f1} .s-math .prog i{background:#22a06b}
.s-eng .ico{background:#ffe3ee} .s-eng .prog i{background:#ff5b8a}
.s-science .ico{background:#e4f7f3} .s-science .prog i{background:#1fa98a}
.s-hanzi .ico{background:#fff1e6} .s-hanzi .prog i{background:#f59a3c}

/* 摸底入口卡 */
.diagcard{
  background:linear-gradient(135deg,#b14a9a,#ff85ad);color:#fff;border-radius:var(--r-lg);
  padding:18px;box-shadow:0 8px 26px rgba(177,74,154,.32);display:flex;gap:14px;align-items:center;
  width:100%;text-align:left;transition:transform .15s;
}
.diagcard:active{transform:scale(.97)}
.diagcard .dico{width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:28px;flex:0 0 auto}
.diagcard .dinfo{flex:1;min-width:0}
.diagcard .dinfo b{display:block;font-size:17px;margin-bottom:4px}
.diagcard .dinfo small{font-size:12px;opacity:.94;display:block;line-height:1.5}
.diagcard .darrow{font-size:26px;opacity:.7;flex:0 0 auto}

/* 册次选择行：一年级上下册并排 */
.levels.bookrow{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){ .levels.bookrow{grid-template-columns:repeat(4,minmax(0,1fr))} }
.lv.book{min-height:118px}
.lv.book .t{font-size:15px}

/* ---------- 单元/关卡列表 ---------- */
.sec-title{font-size:14px;color:var(--ink2);font-weight:700;margin:20px 4px 10px;
  display:flex;align-items:center;gap:8px}
.sec-title:first-child{margin-top:8px}
.sec-title .tag{font-size:11px;background:var(--brand-soft);color:var(--brand);
  padding:2px 8px;border-radius:8px;font-weight:600}

.unit{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:12px;overflow:hidden}
.unit-hd{padding:14px 16px;display:flex;align-items:center;gap:12px}
.unit-hd .uico{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;font-size:21px;flex:0 0 auto}
.unit-hd .t{flex:1;min-width:0}
.unit-hd .t b{display:block;font-size:15.5px}
.unit-hd .t small{color:var(--ink3);font-size:12px}
.unit-hd .num{font-size:12px;font-weight:800;color:#fff;background:var(--brand);
  width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pts{padding:0 16px 12px;display:flex;flex-wrap:wrap;gap:6px}
.pts span{font-size:11.5px;background:#f2f5fa;color:var(--ink2);padding:4px 9px;border-radius:9px}

.levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 14px 14px}
@media(min-width:640px){ .levels{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:900px){ .levels{grid-template-columns:repeat(4,minmax(0,1fr))} }
.lv{background:#f7f9fd;border:2px solid #edf1f8;border-radius:14px;padding:12px 10px;
  display:flex;flex-direction:column;gap:6px;text-align:left;position:relative;transition:all .15s;
  min-width:0;overflow:hidden}
.lv:active{transform:scale(.96)}
.lv .n{font-size:11px;color:var(--ink3);font-weight:700}
.lv .t{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv .s{font-size:11px;color:var(--ink3);display:flex;align-items:center;gap:4px;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv .s .tri{color:var(--ink3);flex:0 0 auto}
.lv.done{background:var(--ok-soft);border-color:#b7e6cf}
.lv.done .s{color:var(--ok)}
.lv .badge{position:absolute;top:8px;right:8px;font-size:14px}
.lv .stars{font-size:12px;letter-spacing:1px}

/* ---------- 答题界面 ---------- */
.qhead{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r);
  padding:12px 16px;box-shadow:var(--sh);margin-bottom:14px}
.qhead .bar{flex:1;height:9px;background:#edf1f8;border-radius:6px;overflow:hidden}
.qhead .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));
  border-radius:6px;transition:width .35s}
.qhead .cnt{font-size:13px;font-weight:700;color:var(--ink2);white-space:nowrap}
.qhead .sc{font-size:13px;font-weight:800;color:var(--brand);white-space:nowrap}

.qcard{background:var(--card);border-radius:var(--r-lg);padding:22px 18px;box-shadow:var(--sh);
  margin-bottom:14px;text-align:center;min-width:0;max-width:100%;overflow-x:clip}
.qcard .tip{font-size:12.5px;color:var(--brand);background:var(--brand-soft);
  display:inline-block;padding:4px 12px;border-radius:10px;margin-bottom:14px;font-weight:600}
.qtext{font-size:22px;font-weight:700;line-height:1.5;margin-bottom:6px;word-break:break-word}
.qsub{font-size:14px;color:var(--ink2);margin-top:6px}
.qbig{font-size:60px;font-weight:800;line-height:1.2;letter-spacing:4px}
.qchar{font-size:88px;font-weight:700;line-height:1.15}
.qpy{font-size:20px;color:var(--brand);font-weight:700;letter-spacing:1px}
.qmedia{font-size:15px;color:var(--ink2);margin-top:10px;line-height:1.7}
.qunit{font-size:11px;color:var(--ink3);margin-top:10px;padding-top:8px;border-top:1px dashed #e6ebf4}

/* ---- 判断题 ---- */
.judge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.jbtn{
  min-height:88px;border-radius:18px;font-size:20px;font-weight:800;border:2px solid #e6ebf4;
  background:var(--card);display:flex;align-items:center;justify-content:center;
  transition:all .14s;min-width:0;
}
.jbtn:active{transform:scale(.96)}
.jbtn.yes{color:var(--ok);border-color:#b7e6cf;background:var(--ok-soft)}
.jbtn.no{color:var(--bad);border-color:#f6c9c9;background:var(--bad-soft)}
.jbtn.right{border-width:3px;box-shadow:0 0 0 3px rgba(34,160,107,.14)}
.jbtn.wrong{animation:shake .3s}
.jbtn.dim{opacity:.45}

/* ---- 多选题 ---- */
.opts.multi{grid-template-columns:minmax(0,1fr)}
.opts.multi .opt{justify-content:flex-start;text-align:left;padding-left:42px;position:relative}
.opts.multi .opt::before{content:"○";position:absolute;left:14px;font-size:19px;color:var(--ink3)}
.opts.multi .opt.sel::before{content:"●";color:var(--brand)}
.opts.multi .opt.sel{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}

/* ---- 听力题 ---- */
.listenbox{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px 12px;background:linear-gradient(135deg,#ffe3ee,#fff2f7);
  border-radius:18px;margin-bottom:16px}
.tts.big{width:88px;height:88px;font-size:42px;box-shadow:0 6px 20px rgba(47,107,216,.3)}
.listenbox .mute{padding:0;font-size:12.5px}

/* ---- 阅读理解 ---- */
.readbox{background:#fbfcfe;border:1px solid #e6ebf4;border-radius:16px;padding:16px;
  margin-bottom:16px;min-width:0}
.readbox .rtitle{font-size:15px;font-weight:800;color:var(--brand);margin-bottom:8px}
.readbox .rtext{font-size:15.5px;line-height:1.85;color:var(--ink);letter-spacing:.2px}
.readbox .rcn{font-size:14px;line-height:1.8;color:var(--ink2);margin-top:10px;
  padding:10px 12px;background:#fff;border-radius:11px;border:1px dashed #dbe3f0}
.btn.tiny{padding:7px 14px;font-size:12.5px;width:auto;display:inline-block;margin-top:10px;
  border-radius:11px}
.fact{font-size:13.5px;line-height:1.75;color:var(--ink2);background:#fff8ec;
  border:1px solid #ffe2b0;border-radius:12px;padding:11px 13px;margin-top:12px;text-align:left}

/* ---- 摸底画像 ---- */
.report{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:14px}
.rep-row{padding:12px 0;border-bottom:1px dashed #e6ebf4}
.rep-row:last-child{border-bottom:none}
.rep-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;gap:8px}
.rep-hd b{font-size:15px}
.rep-hd span{font-size:12px;color:var(--ink3);white-space:nowrap}
.rep-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.rep-cell{border-radius:11px;padding:8px 2px;text-align:center;background:#f2f5fa;min-width:0}
.rep-cell b{display:block;font-size:14px;font-weight:800}
.rep-cell span{font-size:11px;color:var(--ink3)}
.rep-cell.pass{background:#e3f7ee} .rep-cell.pass b,.rep-cell.pass span{color:var(--ok)}
.rep-cell.perfect{background:var(--brand-soft)} .rep-cell.perfect b{color:var(--brand)}
.rep-cell.fail{background:var(--bad-soft)} .rep-cell.fail b,.rep-cell.fail span{color:var(--bad)}
.rep-cell.none b{color:var(--ink3)}
.rep-w{font-size:12px;color:var(--ink2);margin-top:8px;line-height:1.6}

/* ---- 摸底结算 ---- */
.diagbox{margin-top:18px;text-align:left}
.diaggrade{border-radius:15px;padding:14px;font-size:16px;font-weight:800;text-align:center;margin-bottom:12px}
.diaggrade.g3{background:var(--ok-soft);color:var(--ok)}
.diaggrade.g2{background:var(--brand-soft);color:var(--brand)}
.diaggrade.g1{background:#fff8ec;color:#b07800}
.diagprog{text-align:center;font-size:13.5px;color:var(--ink2);margin-top:14px}
.diagprog b{font-size:17px;color:var(--brand)}

.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opts.one{grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){ .opts{grid-template-columns:repeat(2,minmax(0,1fr))} .opts.one{grid-template-columns:minmax(0,1fr)} }
.opt{
  background:var(--card);border:2px solid #e6ebf4;border-radius:14px;padding:15px 12px;
  font-size:16px;font-weight:600;min-height:56px;display:flex;align-items:center;
  justify-content:center;text-align:center;transition:all .14s;word-break:break-word;line-height:1.35;
  min-width:0;overflow-wrap:anywhere;
}
.opt:active{transform:scale(.96)}
.opt.right{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);animation:pop .3s}
.opt.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);animation:shake .3s}
.opt.dim{opacity:.45}
.opt.big{font-size:20px}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* ---------- 输入 ---------- */
.inp{width:100%;border:2px solid #e6ebf4;border-radius:14px;padding:14px 16px;font-size:20px;
  font-family:inherit;text-align:center;outline:none;transition:border .15s;background:#fbfcfe;
  -webkit-appearance:none}
.inp:focus{border-color:var(--brand);background:#fff}
.inp.right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.inp.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}

/* 数对格子 */
.grid-num{display:grid;gap:0;border:2px solid #dbe3f0;border-radius:12px;overflow:hidden;
  margin:0 auto;width:fit-content}
.grid-num .cell{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-size:13px;border-right:1px solid #edf1f8;border-bottom:1px solid #edf1f8}
.grid-num .cell.hd{background:#eef3fb;font-weight:800;color:var(--brand);font-size:12px}
.grid-num .cell.pick{background:var(--brand);color:#fff;font-weight:800}
.grid-num .cell.blk{background:#eef1f6}

/* 拼音选字格 */
.hz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;
  max-height:330px;overflow-y:auto;padding:2px}
.hz-cell{aspect-ratio:1;background:#f7f9fd;border:2px solid #e6ebf4;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:600;transition:all .14s}
.hz-cell:active{transform:scale(.92)}
.hz-cell.right{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.hz-cell.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.hz-cell.dim{opacity:.35}
.hz-cell.used{opacity:.2;pointer-events:none}
.hz-sm{font-size:19px;aspect-ratio:auto;height:44px}

/* 配对连线 */
.match-wrap{position:relative}
.match-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.match-col{display:flex;flex-direction:column;gap:9px}
.mitem{border:2px solid #e6ebf4;border-radius:13px;padding:12px 8px;font-size:15px;
  font-weight:600;text-align:center;background:#fbfcfe;transition:all .14s;min-height:50px;
  display:flex;align-items:center;justify-content:center;word-break:break-word}
.mitem:active{transform:scale(.96)}
.mitem.sel{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.mitem.right{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.mitem.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);animation:shake .3s}
.mitem.gone{opacity:.2;pointer-events:none}
.mitem.en{letter-spacing:.3px}
.mitem small{display:block;font-size:10.5px;color:var(--ink3);font-weight:400;margin-top:2px}

/* 排序题 */
.sort-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:58px;
  padding:10px;background:#f7f9fd;border-radius:14px;border:2px dashed #dbe3f0;margin-bottom:10px}
.sort-pick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.stk{background:#fff;border:2px solid #e6ebf4;border-radius:12px;padding:11px 16px;
  font-size:18px;font-weight:700;transition:all .14s}
.stk:active{transform:scale(.93)}
.stk.right{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.stk.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);animation:shake .3s}

/* ---------- 反馈条 ---------- */
.fb{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + var(--safe-b) + 6px);z-index:80;padding:12px 16px calc(12px + var(--safe-b));
  text-align:center;font-weight:700;font-size:16px;display:flex;align-items:center;
  justify-content:center;gap:8px;animation:up .25s;box-shadow:0 -4px 20px rgba(0,0,0,.1)}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.fb.ok{background:var(--ok-soft);color:var(--ok)}
.fb.no{background:var(--bad-soft);color:var(--bad)}
.fb .ans{background:#fff;padding:2px 10px;border-radius:8px;font-weight:800}

/* ---------- 结算 ---------- */
.result{background:var(--card);border-radius:var(--r-lg);padding:30px 22px;text-align:center;
  box-shadow:var(--sh-lg)}
.result .emo{font-size:64px;margin-bottom:8px}
.result h3{margin:0 0 6px;font-size:23px;font-weight:800}
.result .score{font-size:44px;font-weight:800;color:var(--brand);line-height:1.2}
.result .score small{font-size:16px;color:var(--ink3);font-weight:600}
/* ★方案3·U6：已满分关卡重做的「本次无奖励」显式提示（.score 下方） */
.result .score-note{margin:10px 0 2px;padding:9px 12px;border-radius:12px;
  background:var(--brand-soft);color:var(--ink2);font-size:13.5px;font-weight:700;line-height:1.5}
@media (max-width:420px){ .result .score-note{font-size:12.5px;padding:8px 10px} }
.result .starline{font-size:34px;letter-spacing:6px;margin:10px 0;color:var(--gold)}
.result .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0}
.result .grid2 div{background:#f7f9fd;border-radius:13px;padding:12px}
.result .grid2 b{display:block;font-size:20px;color:var(--brand)}
.result .grid2 span{font-size:11.5px;color:var(--ink2)}
.result .wrong-list{text-align:left;background:#fff8ec;border:1px solid #ffe2b0;
  border-radius:13px;padding:12px 14px;margin-bottom:18px;font-size:13.5px;max-height:180px;overflow:auto}
.result .wrong-list b{display:block;margin-bottom:6px;color:#b07800}
.result .wrong-list div{padding:3px 0;color:var(--ink2)}

/* ---------- 按钮 ---------- */
.btn{display:block;width:100%;padding:15px;border-radius:15px;background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;font-size:17px;font-weight:800;box-shadow:0 4px 14px rgba(47,107,216,.3);transition:transform .14s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:#fff;color:var(--brand);border:2px solid var(--brand);box-shadow:none}
.btn.gray{background:#eef1f7;color:var(--ink2);box-shadow:none}
.btn.amber{background:linear-gradient(135deg,#f5b301,#e09a00);box-shadow:0 4px 14px rgba(245,179,1,.32)}
.btn.sm{padding:11px;font-size:15px;width:auto;display:inline-block}
.btnrow{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.btnrow .btn{margin:0}
/* ★ 本轮修：.btn 是 width:100%，两个按钮并排时各自要 100% 宽 → 溢出容器右边界。
   行内均分：flex-basis:0 + grow 1 + min-width:0（文字过长时收缩换行而非撑破）。 */
.btnrow > .btn{flex:1 1 0;min-width:0;width:auto}
.btnrow .btn.ghost{flex:0 0 40%;background:#f2f5fa;color:var(--ink2);border-color:#e6ebf4}

/* ---------- 其他 ---------- */
.mute{text-align:center;color:var(--ink3);font-size:12px;padding:20px 10px;line-height:1.7}
.src{background:#fff;border:1px solid #e6ebf4;border-radius:13px;padding:12px 14px;
  font-size:12.5px;color:var(--ink2);line-height:1.8;margin-top:12px}
.src b{color:var(--ink);display:block;margin-bottom:4px;font-size:13px}
.tts{width:44px;height:44px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;font-size:21px;vertical-align:middle}
.tts:active{background:var(--brand);color:#fff}
.hint-box{background:#fffbf0;border:1px solid #ffe6b8;border-radius:12px;padding:10px 13px;
  font-size:13px;color:#9a6a00;margin-top:12px;text-align:left}
.hint-box b{color:#7a5200}
.fact{background:linear-gradient(135deg,#fff8ec,#fff3d9);border-radius:14px;padding:14px;
  margin-top:12px;font-size:13.5px;color:#8a6100;line-height:1.7}
.spacer{height:8px}

/* ---------- 登录页（姐姐 / 妹妹 / 家长） ---------- */
.login .idcards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:6px}
.idcard{background:var(--card);border:2px solid #edf1f8;border-radius:var(--r-lg);padding:18px 10px;
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;transition:all .15s;box-shadow:var(--sh)}
.idcard:active{transform:scale(.97)}
.idcard .ico{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:30px}
.idcard.jie .ico{background:linear-gradient(135deg,#ffd9e8,#ffeef5)}
.idcard.mei .ico{background:linear-gradient(135deg,#d9ecff,#eef6ff)}
.idcard.parent .ico{background:linear-gradient(135deg,#d6f5e8,#eefbf4)}
.idcard b{font-size:15px}
.idcard small{font-size:11px;color:var(--ink3);line-height:1.35}
/* 家长看板：进入学习按钮整宽排在卡片底部
   ★ 本轮修（P0 布局塌陷）：.subj-card 是 display:flex（row）。
     旧写法 `.enter-child{flex:0 0 100%}` 把按钮的 flex-basis 设成**容器 100% 宽**，
     与 .ico(54px)+.info 争同一条线 → .info 被压到 ≈0 宽（「姐姐/妹妹」竖排单字），
     按钮本身按 100% 宽右溢出行外。修法走 flex 约束本身，不加 position:absolute：
       ① 允许换行，按钮独占第二行；② .info 用 flex:1 1 0 + min-width:0 正常占满剩余宽。 */
.subj-card{flex-wrap:wrap}
.subj-card .info{flex:1 1 0;min-width:0}
.subj-card .enter-child{flex:0 0 100%;width:100%;margin-top:10px}
/* 发币数量输入行：输入框 + 快捷档位 + 确认，窄屏自动换行 */
.coin-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.coin-form input[type=number]{
  flex:1 1 120px;min-width:0;width:auto;padding:11px 12px;font-size:16px;font-weight:700;
  border:2px solid var(--line,#e6ebf4);border-radius:13px;background:#fff;color:var(--ink);
  font-family:inherit;text-align:center}
.coin-form input[type=number]:focus{outline:none;border-color:var(--brand)}
.coin-form .btn{flex:0 0 auto;width:auto;padding:11px 18px;font-size:15px;white-space:nowrap}
.coin-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.coin-quick button{
  flex:0 0 auto;padding:6px 12px;font-size:13px;font-weight:700;border-radius:999px;
  background:var(--brand-soft);color:var(--brand)}
.coin-msg{margin-top:8px;font-size:12.5px;line-height:1.5;min-height:1px}
.coin-msg.ok{color:#1a9e6c}
.coin-msg.err{color:#c0392b}

/* ---------- 宠物页（🐾 养成） ---------- */
.pet .pet-hero{background:linear-gradient(135deg,#fff4e0,#fffaf0);border-radius:var(--r-lg);
  padding:26px 18px;text-align:center;box-shadow:var(--sh);margin-bottom:16px}
.pet .pet-emo{font-size:88px;line-height:1.1}
.pet .pet-name{font-size:20px;font-weight:800;margin-top:6px}
.pet .pet-stage{font-size:13px;color:var(--ink2);margin-top:2px}
.pet .pet-bars{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin-bottom:6px}
.pbar{margin-bottom:12px}
.pbar:last-child{margin-bottom:0}
.pbar-hd{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2);margin-bottom:5px;font-weight:600}
.pbar-hd b{color:var(--ink)}
.pbar-track{height:12px;background:#edf1f8;border-radius:8px;overflow:hidden}
.pbar-track i{display:block;height:100%;border-radius:8px;transition:width .4s}
.s-pet .ico{font-size:30px}
.s-pet .info b{font-size:16px}
.s-pet .info small{color:var(--ink2)}

/* ---------- 题目重听按钮（一、二年级语音） ---------- */
.replay{display:inline-block;margin:0 auto;padding:9px 18px;border-radius:14px;background:var(--brand-soft);
  color:var(--brand);font-size:14px;font-weight:700}
.replay:active{background:var(--brand);color:#fff}

/* ================= 即时反馈 / 养成增强 动效 ================= */
/* 答对/答错：卡片闪光 + 抖动 */
.qcard.flash-ok{animation:flashOk .5s ease}
.qcard.flash-no{animation:flashNo .5s ease}
@keyframes flashOk{0%{box-shadow:0 0 0 0 rgba(34,160,107,.55)}40%{box-shadow:0 0 0 10px rgba(34,160,107,0)}100%{box-shadow:var(--sh)}}
@keyframes flashNo{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* 结算页入场 */
.result{animation:resultIn .42s cubic-bezier(.2,.8,.25,1)}
@keyframes resultIn{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:none}}

/* 结算星星逐颗弹出 */
.starline .star{display:inline-block;animation:starPop .5s both}
.starline .star.off{opacity:.35}
@keyframes starPop{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1) rotate(0);opacity:1}}

/* 金币飞溅 */
.coin-fly{position:fixed;left:0;top:0;z-index:90;font-size:26px;pointer-events:none;will-change:transform;
  animation:coinFly 1s ease-out forwards}
@keyframes coinFly{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:1}
  100%{transform:translate(var(--dx,0),var(--dy,0)) scale(1.1);opacity:0}}

/* 全对 / 进化彩带 */
.confetti{position:fixed;top:-12px;left:0;width:8px;height:13px;border-radius:2px;z-index:89;
  pointer-events:none;will-change:transform;animation:fall 1.4s linear forwards}
@keyframes fall{0%{transform:translateY(-10px) rotate(0);opacity:1}
  100%{transform:translateY(105vh) rotate(var(--rot,360deg));opacity:.9}}

/* 通用 toast 提示 */
.toast{position:fixed;left:50%;top:18%;transform:translate(-50%,-10px);z-index:120;background:#fff;color:var(--ink);
  padding:12px 18px;border-radius:14px;font-size:14px;font-weight:700;box-shadow:0 8px 28px rgba(31,45,77,.18);
  max-width:86%;text-align:center;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.out{opacity:0;transform:translate(-50%,-10px)}
.toast.badge{border:2px solid var(--gold);color:#9a6a00;background:linear-gradient(135deg,#fff8e6,#fff3d9)}
.toast.mini{top:auto;bottom:16%;font-size:13px;padding:9px 14px}

/* 连击弹层 */
.combo-pop{position:fixed;left:50%;top:30%;transform:translate(-50%,-12px) scale(.8);z-index:130;
  background:linear-gradient(135deg,#ff7a3d,#ffb13d);color:#fff;font-weight:800;font-size:22px;
  padding:10px 22px;border-radius:999px;box-shadow:0 8px 26px rgba(255,122,61,.4);
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.combo-pop .fire{font-size:24px}
.combo-pop.show{opacity:1;transform:translate(-50%,0) scale(1)}
.combo-pop.out{opacity:0;transform:translate(-50%,-12px) scale(.8)}
.combo-pop b{font-size:26px}

/* 每日任务 */
.tasks{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:8px 14px;margin-bottom:6px}
.task{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px dashed #eef1f6}
.task:last-child{border-bottom:none}
.task .tick{font-size:18px;flex:0 0 auto}
.task .tlabel{font-size:14px;color:var(--ink2)}
.task.done .tlabel{color:var(--ok);font-weight:700}
.task.done .tlabel::after{content:" ✓";color:var(--ok)}

/* 成就徽章墙 */
.badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.badge{background:var(--card);border:2px solid #edf1f8;border-radius:14px;padding:12px 8px;text-align:center;
  box-shadow:var(--sh);opacity:.55;filter:grayscale(.6)}
.badge.got{opacity:1;filter:none;border-color:var(--gold);background:linear-gradient(135deg,#fff8e6,#fffdf6)}
.badge .bico{font-size:30px;line-height:1.1}
.badge .bname{font-size:13px;font-weight:800;margin-top:4px}
.badge .bdesc{font-size:10.5px;color:var(--ink3);margin-top:2px;line-height:1.3}
@media(min-width:640px){ .badges{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* 进化庆祝横幅 */
.evolve-celebrate{background:linear-gradient(135deg,#fff0f5,#ffe6f2);border:2px solid #ffc2dd;border-radius:var(--r-lg);
  padding:22px 18px;text-align:center;box-shadow:var(--sh-lg);margin-bottom:16px;animation:resultIn .45s ease}
.evolve-celebrate .ec-emo{font-size:72px;line-height:1.1;animation:starPop .6s both}
.evolve-celebrate .ec-title{font-size:22px;font-weight:800;color:#d6336c;margin-top:4px}
.evolve-celebrate .ec-sub{font-size:14px;color:var(--ink2);margin:6px 0 14px}

/* 导出摸底数据弹层 */
.overlay{position:fixed;inset:0;background:rgba(20,28,48,.55);display:flex;align-items:center;justify-content:center;z-index:999;padding:18px;animation:resultIn .25s ease}
.overlay .modal{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);max-width:520px;width:100%;padding:18px}
.overlay .modal .sec-title{margin-bottom:8px}
.overlay textarea.exp{width:100%;height:280px;margin:10px 0;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;color:var(--ink);border:1px solid var(--line);border-radius:12px;resize:vertical;box-sizing:border-box}

/* ================= 全页悬浮：首页入口 + 宠物小窗（Task #39） ================= */
/* 首页悬浮按钮：常驻右下角，首页隐藏 */
.global-home-fab{
  position:fixed; right:14px; bottom:calc(18px + var(--safe-b)); z-index:70;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff; font-size:12px; font-weight:800;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(255,91,138,.42); border:none;
  transition:transform .15s, opacity .2s; line-height:1.05; padding:0;
}
.global-home-fab .ico{font-size:22px;line-height:1}
.global-home-fab:active{transform:scale(.9)}
.global-home-fab.hide{opacity:0; pointer-events:none; transform:translateY(14px)}

/* 宠物小窗：常驻左下角，全页可见（登录页除外） */
.pet-mini{
  position:fixed; left:14px; bottom:calc(var(--nav-h) + var(--safe-b) + 12px); z-index:70;
  display:flex; align-items:flex-end; gap:8px;
  transition:opacity .2s, transform .2s;
}
.pet-mini.hide{opacity:0; pointer-events:none; transform:translateY(14px)}
.pet-mini .bubble{
  background:#fff; border:2px solid var(--brand-soft); border-radius:14px;
  padding:6px 10px; font-size:12px; color:var(--ink2); font-weight:700;
  box-shadow:var(--sh); max-width:150px; line-height:1.4; align-self:center;
  transform-origin:bottom left; animation:popIn .25s ease;
}
.pet-mini .pet-emo{
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,#fff,#ffe3ee);
  border:2px solid var(--brand-soft);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh); overflow:visible; flex:0 0 auto;
}
.pet-mini .pet-emo svg{width:48px; height:48px; animation:petBreathe 2.6s ease-in-out infinite}
.pet-mini.react-yes .pet-emo{animation:petBounce .55s ease}
.pet-mini.react-no  .pet-emo{animation:petShake .55s ease}
.pet-mini.react-yes .pet-emo svg,
.pet-mini.react-no  .pet-emo svg{animation:none}
.pet-mini.tap{transform:scale(.94)}

/* 答题时从宠物小窗飘出的爱心 / 水滴反馈 */
.float-emo{position:fixed; z-index:72; font-size:20px; pointer-events:none;
  animation:floatEmo 1s ease-out forwards; will-change:transform,opacity}

/* 关键帧：呼吸 / 蹦跶 / 摇晃 / 漂浮 / 弹入 */
@keyframes petBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes petBounce{0%{transform:translateY(0)}28%{transform:translateY(-13px) scale(1.08)}55%{transform:translateY(0)}78%{transform:translateY(-5px)}100%{transform:translateY(0)}}
@keyframes petShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px) rotate(-6deg)}40%{transform:translateX(7px) rotate(6deg)}60%{transform:translateX(-5px) rotate(-4deg)}80%{transform:translateX(5px) rotate(4deg)}}
@keyframes floatEmo{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:1}100%{transform:translate(var(--fx,0),var(--fy,-48px)) scale(1.15);opacity:0}}
@keyframes popIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes upIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 卡片入场（粉色主题增强） */
.subj-card, .diagcard{animation:upIn .32s cubic-bezier(.2,.8,.25,1)}
@media (prefers-reduced-motion: reduce){
  .pet-mini .pet-emo svg, .subj-card, .diagcard{animation:none}
}

/* ================= v3：宠物智能体聊天 + 拍照作业 ================= */
.pet-chat{ background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:12px; min-height:84px; max-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:6px }
.pc-msg{ max-width:82%; padding:9px 12px; border-radius:14px; font-size:14px; line-height:1.5; word-break:break-word }
.pc-msg.me{ align-self:flex-end; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; border-bottom-right-radius:4px }
.pc-msg.pet{ align-self:flex-start; background:var(--brand-soft); color:var(--ink); border-bottom-left-radius:4px }
.pet-chat-in{ display:flex; gap:8px; align-items:flex-end; margin-bottom:6px }


/* ================= V2.02 Phase1：古诗词智能学习闭环 ================= */
/* 闭环页容器（同一页面纵向推进，不跳页） */
.gw-page{ padding-bottom:20px; }
.gw-page .gw-card{ animation:upIn .28s cubic-bezier(.2,.8,.25,1); }

/* 宠物常驻条（闭环页顶部，页内常驻显形） */
.gw-petbar{
  display:flex; align-items:center; gap:10px; padding:9px 12px; margin-bottom:10px;
  background:linear-gradient(135deg,#fff,#fff2f7); border:2px solid #ffe0ea;
  border-radius:var(--r-lg); box-shadow:var(--sh); cursor:pointer; transition:transform .14s;
}
.gw-petbar:active{ transform:scale(.985); }
.gw-pet-emo{ width:40px; height:40px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; animation:petBreathe 3.4s ease-in-out infinite }
.gw-pet-emo svg{ display:block }
.gw-pet-say{ flex:1; font-size:13.5px; color:var(--ink2); line-height:1.4 }

/* 顶部进度点 ●○○ + 难度说明 */
.gw-progress{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.gw-dots{ display:flex; gap:7px; }
.gw-dot{ width:11px; height:11px; border-radius:50%; background:#ffd9e6; transition:all .2s; }
.gw-dot.done{ background:var(--brand); }
.gw-dot.now{ background:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); transform:scale(1.15); }
.gw-progress-txt{ font-size:12px; color:var(--ink3); }

/* 题目卡 */
.gw-card{ background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:20px 16px 16px; }
.gw-card-hd{ font-size:13.5px; color:var(--ink2); text-align:center; margin-bottom:12px; }
.gw-ctx{ display:flex; flex-direction:column; gap:3px; margin-bottom:12px; padding:10px 12px;
  background:#fcf7fa; border-radius:12px; }
.gw-ctx span{ font-size:14px; color:var(--ink3); }
.gw-ctx span.done{ color:var(--ink2); opacity:.55; }
.gw-masked{ font-size:24px; letter-spacing:3px; line-height:2; text-align:center;
  color:var(--ink); font-weight:600; margin:8px 0 14px; word-break:break-all; }
.gw-blank{ display:inline-block; width:1.15em; border-bottom:2.5px solid var(--brand);
  margin:0 2px; vertical-align:baseline; }
.gw-hint{ text-align:center; font-size:13px; color:var(--warn); margin-bottom:12px; }
.gw-input{ text-align:center; font-size:19px; letter-spacing:2px; }
.gw-submit{ width:100%; margin-top:12px; }
.gw-tip{ text-align:center; font-size:11.5px; color:var(--ink3); margin-top:9px; }

/* "让我看看…"思考态（≤0.8s） */
.gw-thinking{ text-align:center; color:var(--ink3); font-size:14px; padding:16px; animation:popIn .2s; }
.gw-thinking::after{ content:'…'; animation:petBreathe 1s infinite; }

/* 归因卡（错字与正解并排高亮 + 标签弹入 + 人话解释） */
.gw-attrib{ background:var(--card); border:2px solid var(--bad-soft); border-radius:var(--r-lg);
  box-shadow:var(--sh); padding:16px; margin-top:14px; animation:upIn .3s cubic-bezier(.2,.8,.25,1); }
.gw-attrib-hd{ font-size:14px; font-weight:700; color:var(--bad); margin-bottom:12px; }
.gw-compare{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.gw-row{ display:flex; align-items:center; gap:10px; }
.gw-lab{ flex:0 0 48px; font-size:12px; color:var(--ink3); text-align:right; }
.gw-lab.ok{ color:var(--ok); }
.gw-chars{ display:flex; flex-wrap:wrap; gap:2px; }
.gw-char{ width:1.5em; height:1.9em; line-height:1.9em; text-align:center; font-size:16px;
  border-radius:6px; }
.gw-char.diff{ background:var(--bad-soft); color:var(--bad); font-weight:700;
  box-shadow:inset 0 -2px 0 var(--bad); }
.gw-char.same{ color:var(--ink2); }
.gw-tag-pop{ margin-bottom:10px; }
.gw-tag{ display:inline-block; padding:5px 13px; border-radius:20px; font-size:13px; font-weight:700;
  color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand2));
  animation:popIn .35s cubic-bezier(.2,1.4,.4,1); }
.gw-tag.sm{ font-size:11.5px; padding:3px 10px; margin:2px 4px 2px 0; }
.gw-reason{ font-size:14px; color:var(--ink); line-height:1.65; background:#fff8fb;
  border-radius:12px; padding:11px 13px; }
.gw-sexpl{ font-size:12.5px; color:var(--ink2); line-height:1.6; margin-top:9px;
  padding-top:9px; border-top:1px dashed #ffe0ea; }
.gw-next{ width:100%; margin-top:14px; }

/* 结算卡 */
.gw-result{ background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:24px 18px; text-align:center; animation:upIn .35s; }
.gw-res-emo{ font-size:52px; line-height:1; }
.gw-res-score{ font-size:30px; font-weight:800; color:var(--brand); margin-top:8px; }
.gw-res-rate{ font-size:15px; color:var(--ink2); margin-top:4px; }
.gw-line{ font-size:22px; color:var(--gold); letter-spacing:3px; margin:10px 0; }
.gw-res-tags{ font-size:13.5px; color:var(--ink); line-height:1.9; background:#fff8fb;
  border-radius:12px; padding:12px; margin:12px 0; text-align:left; }
.gw-res-queue{ font-size:12.5px; color:var(--ink3); margin-bottom:8px; }
.gw-res-btns{ display:flex; flex-direction:column; gap:9px; margin-top:14px; }

/* 首页古诗词入口卡 */
.gw-entry{ width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  background:linear-gradient(135deg,#fff,#f3f0ff); border:2px solid #e6ddff; border-radius:var(--r-lg);
  padding:14px; box-shadow:var(--sh); margin-bottom:8px; transition:transform .15s; }
.gw-entry:active{ transform:scale(.975); }
.gw-entry-ico{ width:46px; height:46px; flex:0 0 auto; display:flex; align-items:center;
  justify-content:center; font-size:24px; background:#ede6ff; border-radius:14px; }
.gw-entry-info{ flex:1; min-width:0; }
.gw-entry-info b{ display:block; font-size:15px; }
.gw-entry-info small{ font-size:11.5px; color:var(--ink2); }
.gw-entry-arrow{ font-size:22px; color:var(--brand); }

/* 首页宠物主动关怀气泡（可点击直跳该题） */
.gw-care{ display:flex; align-items:flex-start; gap:10px; margin:10px 0 4px; cursor:pointer;
  animation:upIn .35s; }
.gw-care-emo{ width:44px; height:44px; flex:0 0 auto; animation:petBreathe 3.2s ease-in-out infinite; }
.gw-care-emo svg{ display:block; }
.gw-care-bub{ position:relative; flex:1; background:linear-gradient(135deg,#fff,#fff2f7);
  border:2px solid #ffe0ea; border-radius:16px; border-top-left-radius:4px;
  padding:11px 14px; font-size:13.5px; color:var(--ink); line-height:1.5; box-shadow:var(--sh);
  min-height:44px; display:flex; align-items:center; }
.gw-care:active .gw-care-bub{ transform:scale(.98); }

/* 账号体系弹层（Phase1） */
.account-sep{ display:flex; align-items:center; gap:10px; margin:16px 0 12px; color:var(--ink3);
  font-size:12px; }
.account-sep::before,.account-sep::after{ content:''; flex:1; height:1px; background:#ffe0ea; }
.acc-tabs{ display:flex; gap:8px; margin:12px 0 4px; }
.acc-tab{ flex:1; padding:9px; border-radius:12px; background:#f7f0f4; color:var(--ink2);
  font-size:14px; font-weight:600; border:2px solid transparent; transition:all .15s; }
.acc-tab.on{ background:var(--brand-soft); color:var(--brand); border-color:var(--brand2); }

@media (prefers-reduced-motion: reduce){
  .gw-pet-emo,.gw-care-emo,.gw-thinking::after{ animation:none; }
}