/* ===== 幼儿园小秘书 · 移动端样式 ===== */
:root{
  --pink:#FF8FA3;
  --pink-d:#F46C86;
  --pink-l:#FFE7EC;
  --mint:#5FC9BE;
  --mint-l:#E2F6F4;
  --yellow:#FFC24B;
  --yellow-l:#FFF3DC;
  --purple:#A98BEE;
  --purple-l:#F1EBFF;
  --bg:#FFF7F3;
  --card:#FFFFFF;
  --text:#3A3238;
  --text-2:#8C8188;
  --line:#F1E7EA;
  --shadow:0 6px 20px rgba(255,143,163,.13);
  --radius:20px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);
  overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:16px;color:inherit;}
h1,h2,h3,p{margin:0;}
.hidden{display:none !important;}

#app{
  max-width:520px;margin:0 auto;min-height:100%;
  background:var(--bg);position:relative;
  padding-bottom:calc(74px + var(--safe-b));
}

/* 顶栏 */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-t) + 14px) 16px 12px;
  background:linear-gradient(135deg,#FF9FB1,#FFC6A0);
  color:#fff;border-radius:0 0 22px 22px;box-shadow:0 4px 14px rgba(255,143,163,.25);
}
.topbar-left{display:flex;align-items:center;gap:10px;}
.logo{
  width:38px;height:38px;border-radius:13px;background:#fff;color:var(--pink);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
}
.topbar-title h1{font-size:17px;font-weight:700;letter-spacing:.5px;}
.topbar-title p{font-size:11.5px;opacity:.9;margin-top:2px;}
.icon-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;}

main{padding:14px 14px 6px;}
.view{animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 卡片 */
.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:14px;}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:18px 4px 10px;}
.section-head h2{font-size:15px;font-weight:700;}
.text-btn{color:var(--pink-d);font-size:13.5px;font-weight:600;}

/* 起床 Hero */
.hero-card{
  background:linear-gradient(135deg,#FFE3C7,#FFD9E2 55%,#E6E1FF);
  border-radius:24px;padding:18px 18px;display:flex;align-items:center;gap:14px;
  box-shadow:var(--shadow);margin-bottom:14px;
}
.hero-sun{width:62px;height:62px;flex:0 0 62px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(255,170,120,.3);}
.hero-emoji{font-size:32px;}
.hero-info{flex:1;min-width:0;}
.hero-label{font-size:12.5px;color:#8A6E63;font-weight:600;}
.hero-time{font-size:34px;font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums;color:#4A3A36;line-height:1.15;}
.hero-sub{font-size:12px;color:#8A6E63;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.quick-row{display:flex;gap:8px;margin-bottom:4px;}
.quick-btn{
  flex:1;background:#fff;border-radius:14px;padding:10px 2px;font-size:11.5px;font-weight:600;color:#5C4F55;
  box-shadow:0 3px 10px rgba(255,143,163,.1);display:flex;flex-direction:column;align-items:center;gap:3px;
}
.quick-btn span{font-size:17px;}
.quick-btn:active{transform:scale(.95);}

/* 列表项 */
.list{display:flex;flex-direction:column;gap:10px;}
.item{
  background:#fff;border-radius:18px;padding:13px 14px;display:flex;align-items:center;gap:12px;
  box-shadow:0 3px 12px rgba(255,143,163,.09);
}
.item-main{flex:1;min-width:0;}
.item-title{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item-sub{font-size:11.5px;color:var(--text-2);margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.tag{font-size:10.5px;padding:2px 7px;border-radius:8px;background:var(--pink-l);color:var(--pink-d);font-weight:600;}
.tag.mint{background:var(--mint-l);color:#2F9C92;}
.tag.yellow{background:var(--yellow-l);color:#C88B14;}
.tag.purple{background:var(--purple-l);color:#7B5BD6;}
.item-off{opacity:.45;}
.item.done .item-title{text-decoration:line-through;color:var(--text-2);}

/* 开关 */
.switch{width:46px;height:27px;border-radius:20px;background:#E6DDE1;position:relative;flex:0 0 46px;transition:.22s;}
.switch.on{background:var(--pink);}
.switch i{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:.22s;box-shadow:0 1px 4px rgba(0,0,0,.18);}
.switch.on i{left:22px;}

.icon-mini{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--pink-l);flex:0 0 34px;}
.icon-mini.mint{background:var(--mint-l);}
.icon-mini.yellow{background:var(--yellow-l);}
.icon-mini.purple{background:var(--purple-l);}

.empty{text-align:center;padding:26px 10px;color:var(--text-2);font-size:13px;}
.empty .e{font-size:40px;display:block;margin-bottom:8px;}

/* 日历 */
.cal-card{background:#fff;border-radius:var(--radius);padding:14px 12px 12px;box-shadow:var(--shadow);margin-top:22px;}
.cal-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px;}
.cal-title{font-size:15.5px;font-weight:700;}
.cal-nav{width:32px;height:32px;border-radius:10px;background:var(--pink-l);color:var(--pink-d);font-size:18px;line-height:1;}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;color:var(--text-2);margin-bottom:6px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-cell{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;font-size:13.5px;font-weight:600;position:relative;}
.cal-cell.other{color:#D5CBCE;}
.cal-cell.today{outline:2px solid var(--pink);outline-offset:-2px;}
.cal-cell.sel{background:var(--pink);color:#fff;}
.cal-cell.sel .dots i{background:#fff !important;}
.cal-cell .dots{display:flex;gap:2px;position:absolute;bottom:5px;}
.cal-cell .dots i{width:4px;height:4px;border-radius:50%;background:var(--pink);display:block;}
.cal-cell .dots i.mint{background:var(--mint);}
.cal-cell .dots i.yellow{background:var(--yellow);}
.cal-cell .dots i.purple{background:var(--purple);}

/* 相册 */
.chip-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;padding:7px 13px;border-radius:14px;background:#fff;font-size:12.5px;font-weight:600;color:var(--text-2);box-shadow:0 2px 8px rgba(255,143,163,.1);}
.chip.active{background:var(--pink);color:#fff;}
.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.photo-cell{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:var(--pink-l);box-shadow:0 3px 10px rgba(255,143,163,.13);}
.photo-cell img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-cell .cap{position:absolute;left:0;right:0;bottom:0;padding:12px 7px 6px;font-size:10.5px;color:#fff;font-weight:600;
  background:linear-gradient(transparent,rgba(0,0,0,.55));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.day-head{grid-column:1/-1;font-size:12.5px;font-weight:700;color:var(--text-2);margin:8px 2px 0;}

/* 成长 */
.stat-row{display:flex;gap:10px;margin-bottom:14px;}
.stat{flex:1;background:#fff;border-radius:18px;padding:13px 12px;box-shadow:var(--shadow);text-align:center;}
.stat b{display:block;font-size:21px;font-weight:800;color:var(--pink-d);}
.stat span{font-size:11px;color:var(--text-2);}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.card-head h2{font-size:15px;font-weight:700;}
.seg{display:flex;background:var(--pink-l);border-radius:12px;padding:3px;}
.seg-btn{padding:5px 13px;border-radius:10px;font-size:12px;font-weight:700;color:var(--pink-d);}
.seg-btn.active{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);}
.chart-wrap{width:100%;overflow:hidden;}
canvas{width:100%;display:block;}
.hint{font-size:11px;color:var(--text-2);margin-top:8px;line-height:1.6;}

/* 底部导航 */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  max-width:520px;margin:0 auto;display:flex;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding-bottom:var(--safe-b);
}
.tab{flex:1;padding:8px 0 7px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--text-2);font-weight:600;}
.tab span{font-size:19px;filter:grayscale(1);opacity:.55;transition:.2s;}
.tab.active{color:var(--pink-d);}
.tab.active span{filter:none;opacity:1;transform:scale(1.12);}

.fab{
  position:fixed;right:18px;bottom:calc(84px + var(--safe-b));z-index:35;
  width:52px;height:52px;border-radius:50%;background:var(--pink);color:#fff;font-size:27px;line-height:1;
  box-shadow:0 8px 20px rgba(255,143,163,.45);
}

/* 响铃 */
.ring-overlay{
  position:fixed;inset:0;z-index:100;
  background:linear-gradient(160deg,#FFB86B,#FF8FA3 60%,#B28BEF);
  display:flex;align-items:center;justify-content:center;color:#fff;padding:24px;
}
.ring-inner{text-align:center;width:100%;}
.ring-sun{font-size:74px;animation:bounce 1.1s infinite ease-in-out;}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(6deg)}}
.ring-time{font-size:52px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:6px;text-shadow:0 4px 14px rgba(0,0,0,.15);}
.ring-title{font-size:26px;font-weight:800;margin-top:2px;}
.ring-sub{font-size:14px;opacity:.92;margin-top:6px;min-height:22px;}
.ring-stop{
  position:relative;display:block;width:100%;max-width:280px;margin:34px auto 0;height:56px;border-radius:28px;
  background:rgba(255,255,255,.28);overflow:hidden;font-size:16px;font-weight:700;
}
.ring-stop-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;opacity:.9;transition:width .05s linear;}
.ring-stop-text{position:relative;z-index:2;color:var(--pink-d);mix-blend-mode:normal;}
.ring-snooze{margin-top:16px;font-size:14px;opacity:.92;text-decoration:underline;}

/* 照片查看 */
.photo-viewer{position:fixed;inset:0;z-index:110;background:#000;display:flex;align-items:center;justify-content:center;}
.photo-viewer img{max-width:100%;max-height:78%;object-fit:contain;}
.viewer-info{position:absolute;left:0;right:0;bottom:0;padding:22px 18px 28px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));}
.viewer-info h3{font-size:16px;}
.viewer-info p{font-size:12px;opacity:.85;margin-top:3px;}
.viewer-close{position:absolute;top:calc(var(--safe-t) + 12px);right:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:17px;}
.viewer-del{position:absolute;top:calc(var(--safe-t) + 12px);left:14px;padding:8px 14px;border-radius:20px;background:rgba(255,90,90,.85);color:#fff;font-size:13px;font-weight:600;}

/* 弹窗 */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;}
.modal-mask{position:absolute;inset:0;background:rgba(58,50,56,.4);animation:fade .2s;}
.modal-body{
  position:relative;width:100%;max-width:520px;background:#fff;border-radius:24px 24px 0 0;
  padding:16px 16px calc(18px + var(--safe-b));animation:up .26s cubic-bezier(.2,.8,.3,1);
  max-height:88vh;display:flex;flex-direction:column;
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.modal-head h3{font-size:16.5px;font-weight:700;}
.modal-x{width:30px;height:30px;border-radius:50%;background:var(--line);color:var(--text-2);font-size:14px;}
.modal-content{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
.modal-foot{display:flex;gap:10px;margin-top:14px;}
.btn{flex:1;padding:13px;border-radius:16px;font-size:15px;font-weight:700;text-align:center;}
.btn.primary{background:var(--pink);color:#fff;box-shadow:0 6px 16px rgba(255,143,163,.35);}
.btn.ghost{background:var(--line);color:var(--text-2);}
.btn.danger{background:#FFECEC;color:#E4574F;}
.btn:active{transform:scale(.98);}

/* 表单 */
.field{margin-bottom:13px;}
.field label{display:block;font-size:12.5px;color:var(--text-2);font-weight:600;margin-bottom:6px;}
.input,select.input,textarea.input{
  width:100%;padding:12px 13px;border-radius:14px;background:#FBF6F7;border:1.5px solid transparent;
  font-size:15px;outline:none;transition:.15s;
}
.input:focus{border-color:var(--pink);background:#fff;}
select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%238C8188' d='M7 10l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right 12px center;}
.row{display:flex;gap:10px;}
.row>*{flex:1;}
.pick-row{display:flex;gap:8px;flex-wrap:wrap;}
.pick{padding:9px 13px;border-radius:13px;background:#FBF6F7;font-size:13px;font-weight:600;color:var(--text-2);}
.pick.active{background:var(--pink);color:#fff;}
.day-pick{display:flex;gap:5px;justify-content:space-between;}
.day-pick button{flex:1;aspect-ratio:1/1;max-width:40px;border-radius:50%;background:#FBF6F7;font-size:12.5px;font-weight:600;color:var(--text-2);}
.day-pick button.active{background:var(--pink);color:#fff;}

/* 提示 */
.toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);z-index:200;
  background:rgba(58,50,56,.92);color:#fff;padding:11px 18px;border-radius:14px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:.22s;max-width:80%;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* ===== v2 新增：早晨流程 / 动态相册 ===== */
.text-btn.warn{color:#E4574F;}
.card-sub{font-size:11.5px;color:var(--text-2);margin-top:2px;}

/* 时间轴 */
.timeline{display:flex;flex-direction:column;gap:2px;}
.tl-item{display:flex;gap:10px;padding:6px 0;position:relative;}
.tl-item:not(:last-child)::before{content:'';position:absolute;left:13px;top:30px;bottom:-6px;width:2px;background:var(--line);}
.tl-dot{width:27px;height:27px;flex:0 0 27px;border-radius:50%;background:var(--pink-l);display:flex;align-items:center;justify-content:center;font-size:14px;z-index:1;}
.tl-body{flex:1;min-width:0;padding-top:2px;}
.tl-time{font-size:13px;font-weight:800;color:var(--text);}
.tl-name{font-size:13px;font-weight:600;}
.tl-sub{font-size:11.5px;color:var(--text-2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tl-item.done{opacity:.5;}
.tl-item.done .tl-dot{background:var(--mint-l);color:#2F9C92;}
.tl-item.now .tl-dot{background:var(--pink);box-shadow:0 0 0 4px rgba(255,143,163,.18);}
.tl-item.off{opacity:.4;}

.tpl-btn{
  width:100%;margin-top:16px;padding:14px 16px;border-radius:18px;text-align:left;
  background:linear-gradient(135deg,#FFE3C7,#FFD9E2);box-shadow:var(--shadow);
}
.tpl-btn b{display:block;font-size:14.5px;color:#8A5B4A;}
.tpl-btn span{display:block;font-size:11.5px;color:#9B7A6C;margin-top:4px;line-height:1.5;}

/* 动态流 */
.feed{display:flex;flex-direction:column;gap:14px;}
.post{background:#fff;border-radius:20px;padding:14px;box-shadow:var(--shadow);}
.post.starred{box-shadow:0 0 0 2px var(--yellow),var(--shadow);}
.post-head{display:flex;align-items:center;gap:9px;}
.post-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#FFB0A0,#FF8FA3);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;}
.post-who{flex:1;min-width:0;}
.post-who b{display:block;font-size:14px;}
.post-who span{font-size:11px;color:var(--text-2);}
.post-star{font-size:22px;color:#DFD5D8;line-height:1;}
.post-star.on{color:var(--yellow);}
.post-text{font-size:14px;line-height:1.7;margin-top:9px;word-break:break-word;}
.post-media{display:grid;gap:4px;margin-top:10px;border-radius:14px;overflow:hidden;}
.post-media.grid-1{grid-template-columns:1fr;}
.post-media.grid-2{grid-template-columns:1fr 1fr;}
.post-media.grid-3{grid-template-columns:1fr 1fr 1fr;}
.pm{position:relative;background:var(--pink-l);aspect-ratio:1/1;overflow:hidden;}
.pm img,.pm video{width:100%;height:100%;object-fit:cover;display:block;}
.post-media.grid-1 .pm{aspect-ratio:4/3;}
.pm-loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;}
.pm-badge{position:absolute;left:5px;top:5px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;padding:2px 7px;border-radius:8px;font-weight:600;}
.pm-badge.print{background:rgba(95,201,190,.92);}
.pm-size{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.45);color:#fff;font-size:9.5px;padding:1px 6px;border-radius:7px;}
.pm.more{display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:var(--text-2);background:#F3EBEE;}
.post-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.tagchip{font-size:11.5px;color:var(--pink-d);background:var(--pink-l);padding:3px 9px;border-radius:10px;font-weight:600;}
.post-foot{display:flex;gap:8px;align-items:center;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);}
.mini-btn{font-size:12px;color:var(--text-2);background:#F7F1F3;padding:6px 12px;border-radius:11px;font-weight:600;}
.mini-btn.danger{color:#E4574F;background:#FFECEC;}
.print-hint{margin-left:auto;font-size:11px;color:#2F9C92;font-weight:600;}
.album-actions{display:flex;gap:8px;margin-bottom:4px;}

/* 查看器 */
.viewer-media{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0 10px;}
.viewer-media img,.viewer-media video{max-width:100%;max-height:76%;object-fit:contain;border-radius:8px;}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:24px;line-height:1;}
.viewer-nav.prev{left:8px;} .viewer-nav.next{right:8px;}

/* 存储条 */
.storage{margin-top:10px;}
.storage-bar{height:9px;border-radius:6px;background:#F1E7EA;overflow:hidden;margin:6px 0 5px;}
.storage-bar i{display:block;height:100%;background:linear-gradient(90deg,#FFC24B,#FF8FA3);}
.storage-txt{font-size:11.5px;color:var(--text-2);}
.storage-actions{display:flex;gap:8px;margin-top:10px;}
.storage-actions .mini-btn{flex:1;text-align:center;padding:10px;}

/* ===== 语音输入 ===== */
.input-wrap{position:relative;}
.input-wrap .input.has-mic{padding-right:46px;}
.mic-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;background:var(--pink-l);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  transition:.15s;
}
.mic-btn:active{transform:translateY(-50%) scale(.92);}
.mic-btn.on{background:var(--pink);color:#fff;animation:micPulse 1.1s infinite;}
.mic-btn.off{opacity:.4;background:#EEE7EA;}
@keyframes micPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,143,163,.45);}
  50%{box-shadow:0 0 0 8px rgba(255,143,163,0);}
}
.field .hint{font-size:11.5px;color:var(--text-2);margin-top:5px;line-height:1.5;}

/* ===== v8：当日提醒勾选框 ===== */
.ev-check{
  width:25px;height:25px;flex:0 0 25px;border-radius:8px;
  accent-color:var(--pink);background:#fff;border:2px solid var(--line);
  margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  position:relative;transition:.15s;
}
.ev-check:checked{background:var(--pink);border-color:var(--pink);}
.ev-check:checked::after{
  content:'';position:absolute;left:50%;top:45%;width:6px;height:11px;
  border:solid #fff;border-width:0 3px 3px 0;transform:translate(-50%,-50%) rotate(43deg);
}
.item.done .ev-check{opacity:.6;}