/* 家长端手机APP · 宝宝巴士风格(清新·可爱·管理) */
.phone{max-width:440px;margin:0 auto;min-height:100vh;background:var(--bg);
  display:flex;flex-direction:column;position:relative;box-shadow:0 0 40px rgba(46,120,180,.12);}
.screen{flex:1;overflow-y:auto;padding:var(--sp-4) var(--sp-4) 96px;}

/* 顶部 */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px var(--sp-4) 14px;
  background:linear-gradient(135deg,var(--sky),var(--teal));color:#fff;box-shadow:var(--shadow-sm);position:relative;z-index:5;}
.tb-left h1{margin:0;font-size:var(--fs-xl);font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.06);}
.tb-left .sub{font-size:var(--fs-sm);opacity:.92;margin-top:2px;}
.tb-mascot{width:52px;height:52px;animation:floaty 3.2s ease-in-out infinite;}

/* 底部 Tab */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;
  display:flex;background:#fff;border-top:2px solid var(--line);box-shadow:0 -4px 16px rgba(46,120,180,.08);z-index:8;}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 0 10px;font-size:11px;color:var(--text-soft);font-weight:700;background:none;}
.tab .ico{font-size:21px;}
.tab.active{color:var(--teal-deep);}
.tab.active .ico{transform:translateY(-1px);}

/* 卡片通用 */
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:2px solid var(--line);padding:var(--sp-4);margin-bottom:var(--sp-3);}

/* 看板 */
.greet{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--sky-soft),var(--teal-soft));
  border-radius:var(--r-lg);padding:14px 16px;margin-bottom:var(--sp-3);}
.greet .d{width:60px;height:60px;flex:none;animation:floaty 3s ease-in-out infinite;}
.greet .n{font-weight:800;font-size:var(--fs-md);color:var(--teal-deep);}
.greet .s{font-size:var(--fs-xs);color:var(--text-soft);margin-top:2px;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-3);}
.stat{padding:var(--sp-4);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm);border:2px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.stat .k{font-size:var(--fs-xs);color:var(--text-soft);font-weight:700;}
.stat .v{font-size:var(--fs-xl);font-weight:800;color:var(--teal-deep);line-height:1.1;margin-top:4px;}
.stat .v small{font-size:var(--fs-sm);color:var(--text-soft);font-weight:700;}
.stat.gold .v{color:var(--gold);}
.stat.coral .v{color:var(--coral-deep);}
.stat.grass .v{color:var(--grass-deep);}

.ai-card{background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:#fff;border-radius:var(--r-lg);
  padding:var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--shadow);position:relative;overflow:hidden;}
.ai-card::after{content:"✨";position:absolute;right:12px;top:8px;font-size:28px;opacity:.3;}
.ai-card h3{margin:0 0 8px;font-size:var(--fs-md);}
.ai-card p{margin:0;font-size:var(--fs-sm);line-height:1.6;opacity:.95;}
.ai-card .tag{display:inline-block;background:rgba(255,255,255,.22);padding:3px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);margin-top:10px;font-weight:700;}

.quick{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);}
.quick button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px;border-radius:var(--r-md);
  background:#fff;border:2px solid var(--line);box-shadow:var(--shadow-sm);font-weight:800;color:var(--teal-deep);font-size:var(--fs-sm);}
.quick button .bi{font-size:26px;}

/* 作业 */
.hw{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:2px solid var(--line);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3);}
.hw .top{display:flex;justify-content:space-between;align-items:center;}
.hw .subj{font-weight:800;font-size:var(--fs-md);color:var(--text);}
.hw .content{color:var(--text-soft);font-size:var(--fs-sm);margin:5px 0 10px;}
.hw .foot{display:flex;justify-content:space-between;align-items:center;}
.hw .stars{color:var(--gold);font-size:var(--fs-md);letter-spacing:2px;}
.hw .stars.empty{color:var(--line);}

.tag{font-size:var(--fs-xs);font-weight:800;padding:4px 12px;border-radius:var(--r-pill);}
.tag-navy{background:var(--sky-soft);color:var(--sky-deep);}
.tag-warn{background:#FFE9E2;color:var(--coral-deep);}
.tag-ok{background:var(--grass-soft);color:var(--grass-deep);}
.tag-gold{background:#FFF3D6;color:var(--gold);}

.btn-ghost{background:#fff;border:2px solid var(--line);color:var(--text-soft);padding:9px 16px;border-radius:var(--r-pill);font-weight:800;font-size:var(--fs-sm);}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--sun-deep));color:#5A3D00;padding:9px 18px;border-radius:var(--r-pill);font-weight:800;font-size:var(--fs-sm);box-shadow:var(--shadow-sm);}
.btn-teal{background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:#fff;padding:12px 18px;border-radius:var(--r-pill);font-weight:800;font-size:var(--fs-sm);box-shadow:var(--shadow-sm);width:100%;margin-top:6px;}
.btn-teal:active{transform:scale(.97);}

/* 守护 */
.guard-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:2px solid var(--line);padding:var(--sp-4);margin-bottom:var(--sp-3);}
.guard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3);}
.guard-head .name{font-weight:800;font-size:var(--fs-md);color:var(--text);}
.guard-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line);}
.guard-row .lbl{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-sm);color:var(--text);}
.guard-row .val{font-size:var(--fs-sm);color:var(--text-soft);font-weight:700;}
.tag-on{background:var(--grass-soft);color:var(--grass-deep);}
.tag-off{background:#F0F0F0;color:var(--text-soft);}
.guard-note{font-size:var(--fs-xs);color:var(--text-soft);text-align:center;margin-top:6px;line-height:1.5;}

/* 开关 */
.sw{width:50px;height:30px;border-radius:var(--r-pill);background:var(--line);position:relative;transition:background .2s;flex:none;}
.sw.on{background:var(--grass);}
.sw::after{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;top:3px;left:3px;
  transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.sw.on::after{left:23px;}

/* 成长 */
.growth-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:2px solid var(--line);padding:var(--sp-4);margin-bottom:var(--sp-3);}
.growth-card h3{margin:0 0 14px;font-size:var(--fs-md);color:var(--teal-deep);}
.bars{display:flex;align-items:flex-end;gap:10px;height:130px;padding:0 4px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.bar-col .bar{width:100%;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--sky),var(--sky-deep));
  animation:pop .5s both;min-height:6px;}
.bar-col.alt .bar{background:linear-gradient(180deg,var(--grass),var(--grass-deep));}
.bar-col .lab{font-size:var(--fs-xs);color:var(--text-soft);margin-top:6px;font-weight:700;}

.donut-wrap{display:flex;align-items:center;gap:16px;}
.donut{width:96px;height:96px;flex:none;}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:8px;}
.donut-legend .li{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:700;color:var(--text);}
.donut-legend .dot{width:14px;height:14px;border-radius:5px;flex:none;}

/* 我 */
.me-row{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border:2px solid var(--line);
  border-radius:var(--r-md);margin-bottom:10px;}
.me-row .ic{width:44px;height:44px;border-radius:14px;background:var(--sky-soft);display:flex;align-items:center;justify-content:center;font-size:22px;flex:none;}
.me-row .meta{flex:1;}
.me-row .meta .t{font-weight:800;font-size:var(--fs-sm);color:var(--text);}
.me-row .meta .s{font-size:var(--fs-xs);color:var(--text-soft);margin-top:2px;}
.me-row .arrow{color:var(--text-soft);font-size:18px;}
.profile-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--sun),var(--sun-deep));
  color:#5A3D00;border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--shadow);}
.profile-card .av{width:64px;height:64px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;flex:none;}
.profile-card .t{font-weight:800;font-size:var(--fs-lg);}
.profile-card .s{font-size:var(--fs-sm);margin-top:2px;}

/* 表单 sheet */
.field{margin-bottom:var(--sp-3);}
.field label{display:block;font-size:var(--fs-xs);color:var(--text-soft);margin-bottom:6px;font-weight:700;}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:2px solid var(--line);
  border-radius:var(--r-md);font-size:var(--fs-sm);font-family:inherit;background:#fff;color:var(--text);}
.sheet{background:#fff;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--sp-5) var(--sp-4) var(--sp-4);
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:440px;
  box-shadow:0 -10px 30px rgba(46,120,180,.18);display:none;z-index:20;}
.sheet.show{display:block;animation:bounceIn .3s both;}
.sheet h3{margin:0 0 14px;font-size:var(--fs-lg);color:var(--teal-deep);}
.sheet .actions{display:flex;gap:10px;margin-top:14px;}
.sheet .actions button{flex:1;}
.mask{position:fixed;inset:0;background:rgba(10,31,60,.4);display:none;z-index:15;}
.mask.show{display:block;}

.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:var(--teal-deep);color:#fff;
  padding:10px 20px;border-radius:var(--r-pill);font-size:var(--fs-sm);z-index:30;box-shadow:var(--shadow);opacity:0;transition:opacity .2s;font-weight:700;}
.toast.show{opacity:1;}

/* 通话 hero（守护里嵌） */
.call-hero{background:linear-gradient(135deg,var(--sky),var(--teal));color:#fff;border-radius:var(--r-lg);padding:22px;text-align:center;
  box-shadow:var(--shadow);margin-bottom:var(--sp-3);}
.call-hero .big{font-size:40px;margin-bottom:8px;}
.call-hero button{margin-top:12px;}

/* PWA 在线更新横幅 */
.sw-update{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(180%);
  display:flex;align-items:center;gap:10px;background:#1fb6b6;color:#fff;padding:10px 14px;border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);z-index:90;transition:transform .32s cubic-bezier(.2,.8,.2,1);font-weight:800;font-size:var(--fs-sm);}
.sw-update.show{transform:translateX(-50%) translateY(0);}
.sw-update button{background:#fff;color:#1fb6b6;border:none;border-radius:12px;padding:6px 14px;font-weight:800;cursor:pointer;font-size:var(--fs-sm);}