/* ============================================================
   styles.css — 喵语 · 猫咪状态观察（设计契约唯一视觉实现）
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root{
  --primary:#E87B4F; --primary-hover:#D96A3E;
  --bg:#F7F1E8; --surface:#FFFFFF; --surface-2:#FBF6EF;
  --border:#EFE6D9; --text:#241D16; --text-sub:#8B8075; --text-faint:#C4B9AB;
  --calm:#5FA983; --play:#7C6BE8; --hungry:#E0A03E; --tense:#DE6B6B;
  --shadow-sm:0 1px 6px rgba(60,40,20,.05);
  --shadow-md:0 2px 12px rgba(60,40,20,.06),0 12px 32px rgba(60,40,20,.08);
  --shadow-lg:0 -12px 40px rgba(50,30,10,.18);
  --spring:cubic-bezier(.32,.72,.24,1);
  --font:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI",sans-serif;
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;touch-action:manipulation}
html,body{height:100%}
body{
  font-family:var(--font);color:var(--text);
  display:grid;place-items:center;min-height:100vh;padding:24px;
  background:
    radial-gradient(1200px 800px at 12% 8%, rgba(243,226,207,.9) 0%, transparent 55%),
    radial-gradient(1000px 760px at 88% 88%, rgba(239,217,200,.85) 0%, transparent 52%),
    radial-gradient(820px 620px at 72% 12%, rgba(246,233,216,.8) 0%, transparent 45%),
    #EDE2D3;
}

/* ---------- 设备壳（桌面展示用，≤480px 全屏去壳） ---------- */
.phone{width:393px;height:852px;border-radius:56px;padding:11px;
  background:linear-gradient(165deg,#2E2822,#141110);
  box-shadow:0 40px 80px rgba(60,35,15,.35),0 4px 16px rgba(60,35,15,.25)}
.screen{position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;background:var(--bg)}
.island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:116px;height:33px;border-radius:999px;background:#101010;z-index:15}
.statusbar{position:absolute;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;
  padding:6px 28px 0;z-index:14;pointer-events:none;font-size:14.5px;font-weight:600}
.sb-icons{display:flex;align-items:center;gap:6px}
.home-ind{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:999px;background:rgba(20,15,10,.85);z-index:16}

/* ---------- 页面容器与切换 ---------- */
.pages{position:absolute;inset:0}
.page{position:absolute;inset:0;overflow-y:auto;padding:64px 20px 116px;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .24s ease,transform .24s ease;scrollbar-width:none}
.page::-webkit-scrollbar{display:none}
.page.active{opacity:1;transform:none;pointer-events:auto}

/* ---------- 大标题导航 ---------- */
.nav-lg{padding:14px 4px 6px}
.nav-lg h1{font-size:32px;font-weight:800;letter-spacing:.2px}
.nav-sub{margin-top:6px;font-size:13px;color:var(--text-sub)}

/* ---------- 录音页：录音区 ---------- */
.stage{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:38px}
.rec-wrap{position:relative;width:276px;height:276px;display:grid;place-items:center}
.orbit{position:absolute;inset:0;pointer-events:none}
.orbit i{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(232,123,79,.26);transform:translate(-50%,-50%)}
.orbit .o1{width:188px;height:188px}
.orbit .o2{width:232px;height:232px;border-color:rgba(232,123,79,.17)}
.orbit .o3{width:276px;height:276px;border-color:rgba(232,123,79,.09)}
.stage.is-recording .orbit i{animation:ripple 2.1s ease-out infinite}
.stage.is-recording .orbit .o2{animation-delay:.35s}
.stage.is-recording .orbit .o3{animation-delay:.7s}
@keyframes ripple{
  0%{transform:translate(-50%,-50%) scale(.86);opacity:0}
  30%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.12);opacity:0}
}
.rec-btn{position:relative;width:148px;height:148px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#F0905F,#E87B4F 55%,#DD6A3C);
  box-shadow:0 18px 36px rgba(232,123,79,.38),inset 0 2px 6px rgba(255,255,255,.35),inset 0 -6px 14px rgba(150,60,20,.25);
  transition:transform .18s var(--spring)}
.rec-btn:active{transform:scale(.94)}
.stage.is-recording .rec-btn{
  background:linear-gradient(150deg,#E96A5A,#DE5550 60%,#D24A44);
  box-shadow:0 18px 36px rgba(222,85,80,.35),inset 0 2px 6px rgba(255,255,255,.3),inset 0 -6px 14px rgba(120,30,25,.25)}
.rec-ic{display:grid;place-items:center}
.ic-stop,.stage.is-recording .ic-mic{display:none}
.stage.is-recording .ic-stop{display:grid}
.rec-spin{position:absolute;width:56px;height:56px;display:none;animation:spin 1s linear infinite}
.stage.is-analyzing .rec-spin{display:block}
.stage.is-analyzing .ic-mic,.stage.is-analyzing .ic-stop{display:none}
.stage.is-analyzing .rec-btn{pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.timer{margin-top:26px;font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.stage-status{margin-top:8px;font-size:13px;color:var(--text-sub);min-height:20px}
.st{display:none;align-items:center;gap:6px}
.stage:not(.is-recording):not(.is-analyzing) .st-idle{display:flex}
.stage.is-recording .st-rec{display:flex}
.stage.is-analyzing .st-ana{display:flex}
.dots{display:inline-flex;gap:4px;margin-left:2px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--primary);animation:bounce 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
.wave{display:none;align-items:center;gap:5px;height:34px;margin-top:16px}
.stage.is-recording .wave{display:flex}
.wave i{width:4px;border-radius:4px;background:linear-gradient(180deg,#F0905F,#E87B4F);animation:wave 1.1s ease-in-out infinite}
.wave i:nth-child(1){height:14px;animation-delay:0s}
.wave i:nth-child(2){height:24px;animation-delay:.12s}
.wave i:nth-child(3){height:32px;animation-delay:.24s}
.wave i:nth-child(4){height:20px;animation-delay:.36s}
.wave i:nth-child(5){height:30px;animation-delay:.18s}
.wave i:nth-child(6){height:22px;animation-delay:.3s}
.wave i:nth-child(7){height:12px;animation-delay:.42s}
@keyframes wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
/* 真实录音模式：波形高度由内联样式随音量驱动，关闭装饰性 CSS 动画 */
.stage.is-live .wave i{animation:none;height:4px;transition:height .1s linear}

/* ---------- 录音页：技巧卡 ---------- */
.tips{margin-top:42px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:16px;display:flex;gap:12px}
.tips-ic{flex:none;width:36px;height:36px;border-radius:12px;background:rgba(232,123,79,.12);color:var(--primary);display:grid;place-items:center}
.tips h4{font-size:14.5px;font-weight:700}
.tips p{margin-top:4px;font-size:12.5px;line-height:1.6;color:var(--text-sub)}

/* ---------- 通用按钮 ---------- */
.btn-primary,.btn-ghost{height:50px;border-radius:16px;font-size:15.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .16s var(--spring),background .2s}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(232,123,79,.3)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:active,.btn-ghost:active{transform:scale(.97)}
.btn-ghost{border:1.5px solid var(--border);color:var(--text-sub);background:var(--surface)}
.btn-primary:disabled,.btn-ghost:disabled{opacity:.6;pointer-events:none}

/* ---------- 结果 Sheet ---------- */
.sheet-mask{position:absolute;inset:0;background:rgba(30,20,12,.34);opacity:0;pointer-events:none;transition:opacity .3s;z-index:20}
.sheet-mask.open{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;background:var(--surface);
  border-radius:28px 28px 0 0;padding:10px 20px 26px;max-height:86%;overflow-y:auto;
  transform:translateY(103%);transition:transform .42s var(--spring);box-shadow:var(--shadow-lg)}
.sheet.open{transform:translateY(0)}
.grabber{width:38px;height:5px;border-radius:999px;background:#E4D9CA;margin:2px auto 16px}
.sheet-head{display:flex;align-items:center;gap:12px}
.mood-face{--c:var(--calm);--bw:2.5px;position:relative;flex:none;display:inline-block;width:52px;height:52px;border-radius:50%;overflow:hidden;
  border:var(--bw) solid var(--c);box-shadow:0 4px 10px rgba(60,40,20,.15)}
.mood-face img{width:100%;height:100%;object-fit:cover;display:block}
.face-ov{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
/* 表情切换入场：缩放弹入，让情绪变化更明显 */
.mood-face.pop{animation:facePop .45s var(--spring)}
@keyframes facePop{0%{transform:scale(.82);opacity:.35}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.sh-mid{flex:1;min-width:0}
.mood-name{font-size:21px;font-weight:800}
.mood-desc{margin-top:3px;font-size:12.5px;color:var(--text-sub)}
.conf-badge{--c:var(--primary);--cb:rgba(232,123,79,.12);flex:none;padding:7px 12px;border-radius:999px;
  font-size:15.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--c);background:var(--cb)}
.conf-block{margin-top:20px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:16px}
.conf-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600}
.conf-val{font-size:15.5px;font-weight:800;font-variant-numeric:tabular-nums}
.conf-track{height:8px;border-radius:999px;background:#EDE3D3;margin-top:8px;overflow:hidden}
.conf-fill{height:100%;width:0;border-radius:999px;transition:width .8s var(--spring)}
.sub-cap{margin-top:14px;font-size:12px;color:var(--text-faint)}
.sub-poss{margin-top:8px;display:flex;flex-direction:column;gap:10px}
.sub-row{display:grid;grid-template-columns:84px 1fr 42px;align-items:center;gap:10px;font-size:12.5px;color:var(--text-sub)}
.sub-row>span:first-child{white-space:nowrap}
.sub-track{height:6px;border-radius:999px;background:#EDE3D3;overflow:hidden;display:block}
.sub-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--text-faint);transition:width .8s var(--spring)}
.sub-val{text-align:right;font-variant-numeric:tabular-nums}
.reply-card{margin-top:16px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:16px}
.reply-tag{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--primary)}
.reply-card p{margin-top:8px;font-size:14.5px;line-height:1.65}
.sheet-actions{display:flex;gap:12px;margin-top:20px}
.sheet-actions .btn-primary,.sheet-actions .btn-ghost{flex:1}

/* ---------- 历史页 ---------- */
.hist-date{padding:18px 4px 10px;font-size:13px;font-weight:700;color:var(--text-sub)}
.hist-item{--c:var(--calm);--cb:rgba(95,169,131,.12);display:flex;align-items:center;gap:12px;
  background:var(--surface);border-radius:18px;box-shadow:var(--shadow-sm);padding:14px;margin-bottom:10px;
  transition:transform .25s var(--spring),opacity .25s}
.hist-item.removing{transform:translateX(24px);opacity:0}
.hist-mid{flex:1;min-width:0}
.hist-top{display:flex;align-items:center;gap:8px}
.hist-mood{font-size:14.5px;font-weight:700}
.hist-conf{font-size:11px;font-weight:700;padding:3px 7px;border-radius:6px;color:var(--c);background:var(--cb);font-variant-numeric:tabular-nums}
.hist-reply{margin-top:4px;font-size:12.5px;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.hist-time{font-size:12px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.hist-del{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;color:var(--text-faint);background:var(--surface-2);opacity:0;transition:opacity .2s}
.hist-item:hover .hist-del,.hist-item.show-del .hist-del{opacity:1}
.hist-del:active{transform:scale(.9)}
/* 历史条目：时间下方的播放按钮 + 播放时头像旋转（均局部作用域，不影响其他页面） */
.hist-play{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;color:var(--c);background:var(--cb);transition:transform .18s var(--spring),color .2s,background .2s}
.hist-play:active{transform:scale(.9)}
.hist-play.playing{color:#fff;background:var(--c)}
.hist-item .mood-face.hist-spin{animation:spin 3s linear infinite;transform-origin:center}

/* ---------- 历史页：删除按钮 + 批量删除模式（均局部作用域，不影响其他页面） ---------- */
/* 头部右上角「编辑 / 取消」 */
.hist-head{position:relative}
.hist-edit{position:absolute;right:0;top:22px;font-size:14px;font-weight:700;color:var(--primary);padding:6px 2px}
.hist-edit:active{opacity:.55}
/* 单条删除按钮：触屏无 hover，改为常显 */
.hist-item .hist-del{opacity:1}
/* 批量模式：左侧勾选框 */
.hist-check{flex:none;width:22px;height:22px;border-radius:50%;border:1.8px solid var(--text-faint);display:none;place-items:center;color:#fff;transition:background .18s,border-color .18s}
#histWrap.managing .hist-check{display:grid}
#histWrap.managing .hist-play,#histWrap.managing .hist-del{opacity:0;pointer-events:none}
.hist-check svg{opacity:0;transition:opacity .15s}
.hist-item.sel{box-shadow:0 0 0 1.5px var(--primary),var(--shadow-sm)}
.hist-item.sel .hist-check{background:var(--primary);border-color:var(--primary)}
.hist-item.sel .hist-check svg{opacity:1}
/* 批量模式下页面底部留出操作条空间 */
.page[data-page="history"].hist-manage{padding-bottom:190px}
/* 底部批量操作条（悬浮于 Tab 栏之上，仅批量模式显示） */
.batch-bar{position:absolute;left:0;right:0;bottom:83px;z-index:12;display:none;align-items:center;gap:10px;
  padding:12px 20px;background:rgba(255,255,255,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(60,40,20,.08);box-shadow:0 -8px 24px rgba(60,40,20,.06)}
.batch-bar.show{display:flex}
.bb-btn{font-size:15px;font-weight:700;padding:8px 2px;transition:opacity .16s}
.bb-btn:active{opacity:.55}
.bb-all{color:var(--text-sub)}
.bb-all.on{color:var(--primary)}
.bb-count{flex:1;text-align:center;font-size:13px;color:var(--text-sub)}
.bb-del{color:#D2453C;font-weight:800}
.bb-del:disabled{opacity:.35;pointer-events:none}

.empty{padding:70px 30px;text-align:center}
.empty-ic{width:76px;height:76px;margin:0 auto;border-radius:24px;background:var(--surface);box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--text-faint)}
.empty h3{margin-top:18px;font-size:17px;font-weight:800}
.empty-sub{margin-top:6px;font-size:13px;color:var(--text-sub)}
.empty .btn-ghost{margin:22px auto 0;height:46px;padding:0 24px;display:inline-flex}

/* ---------- 我的猫页 ---------- */
.card{background:var(--surface);border-radius:20px;box-shadow:var(--shadow-md)}
.cat-profile{display:flex;align-items:center;gap:14px;padding:18px;border-radius:24px}
.cat-profile img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid #F3E7D8}
.cp-mid{flex:1;min-width:0}
.cp-name{font-size:21px;font-weight:800}
.cp-tags{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.cp-tag{font-size:11px;padding:4px 8px;border-radius:6px;background:var(--surface-2);color:var(--text-sub);border:1px solid var(--border)}
.cp-chev{color:var(--text-faint);display:grid;place-items:center}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-sm);padding:14px 8px;text-align:center}
.stat b{display:block;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.stat b.st-mood{font-size:16px}
.stat span{display:block;margin-top:4px;font-size:11.5px;color:var(--text-sub)}
.week-card{margin-top:14px;border-radius:24px;padding:18px}
.week-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.week-head h3{font-size:15.5px;font-weight:800}
.week-legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.wl{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-sub)}
.wl i{width:9px;height:9px;border-radius:3px;flex:none}
.week-chart{margin-top:16px;height:150px;display:flex;align-items:stretch}
.wcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.wval{font-size:10.5px;color:var(--text-sub);font-variant-numeric:tabular-nums}
.wbar{width:20px;border-radius:7px 7px 4px 4px;min-height:6px}
.wday{font-size:11px;color:var(--text-faint)}
.set-card{margin-top:14px;border-radius:24px;padding:6px 16px}
.set-item{display:flex;align-items:center;gap:12px;padding:14px 0}
.set-item+.set-item{border-top:1px solid var(--border)}
.set-ic{flex:none;width:36px;height:36px;border-radius:12px;background:var(--surface-2);color:var(--primary);display:grid;place-items:center}
.set-mid{flex:1;min-width:0;font-size:14.5px;font-weight:600}
.set-sub{margin-top:3px;font-size:12px;color:var(--text-sub);font-weight:400}
.set-chev{color:var(--text-faint);display:grid;place-items:center}
/* 可点击的设置项（识别偏好 / 识别模型，点开内页） */
.set-link{cursor:pointer}
.set-link .set-chev{transition:transform .2s var(--spring)}
.set-link:active .set-chev{transform:translateX(3px)}
.toggle{flex:none;position:relative;width:44px;height:26px;border-radius:999px;background:#E4D9CA;transition:background .25s}
.toggle span{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .25s var(--spring)}
.toggle.on{background:var(--primary)}
.toggle.on span{transform:translateX(18px)}

/* ---------- 编辑猫资料表单 ---------- */
.cat-profile{cursor:pointer}
.f-block{margin-top:16px;min-width:0}
.f-label{font-size:12.5px;font-weight:700;color:var(--text-sub);margin-bottom:8px}
.f-input{width:100%;height:46px;border-radius:14px;border:1.5px solid var(--border);background:var(--surface-2);
  padding:0 14px;font-size:14.5px;font-family:inherit;color:var(--text);outline:none;transition:border-color .2s,background .2s}
.f-input:focus{border-color:var(--primary);background:#fff}
.f-row{display:flex;gap:12px}
.f-row .f-block{flex:1}
.seg{display:flex;height:46px;background:var(--surface-2);border:1.5px solid var(--border);border-radius:14px;padding:3px}
.seg button{flex:1;border-radius:11px;font-size:14px;font-weight:600;color:var(--text-sub);transition:.2s}
.seg button.on{background:var(--primary);color:#fff;box-shadow:0 4px 10px rgba(232,123,79,.3)}
.ep-avas{display:flex;gap:10px}
.ep-ava{width:60px;height:60px;border-radius:50%;overflow:hidden;border:3px solid transparent;padding:0;flex:none;transition:.2s}
.ep-ava img{width:100%;height:100%;object-fit:cover;display:block}
.ep-ava.sel{border-color:var(--primary);box-shadow:0 6px 14px rgba(232,123,79,.28)}

/* ---------- 识别偏好 / 识别模型 Sheet（我的猫页设置内页） ---------- */
.sheet-list{margin-top:16px}
.sl-item{display:flex;align-items:center;gap:12px;padding:14px 0}
.sl-item+.sl-item{border-top:1px solid var(--border)}
.sl-mid{flex:1;min-width:0;font-size:14.5px;font-weight:600}
.sl-mid .set-sub{margin-top:3px;font-size:12px;color:var(--text-sub);font-weight:400}
.md-list{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.md-item{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:14px;
  background:var(--surface-2);border:1.5px solid var(--border);border-radius:18px;
  transition:border-color .2s,background .2s,transform .16s var(--spring)}
.md-item:active{transform:scale(.99)}
.md-item.sel{border-color:var(--primary);background:#FFF8F3}
.md-mid{flex:1;min-width:0}
.md-top{display:flex;align-items:center;gap:8px}
.md-name{font-size:14.5px;font-weight:800}
.md-tag{flex:none;font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:6px;color:var(--primary);background:rgba(232,123,79,.12)}
.md-desc{margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--text-sub)}
.md-meta{margin-top:4px;font-size:11.5px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.md-check{flex:none;width:22px;height:22px;border-radius:999px;background:rgba(232,123,79,.12);color:var(--primary);
  display:grid;place-items:center;opacity:0;transition:opacity .2s}
.md-item.sel .md-check{opacity:1}
.md-note{margin-top:14px;font-size:12px;color:var(--text-faint);text-align:center}

/* ---------- Tabbar（iOS h83 毛玻璃） ---------- */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:83px;z-index:10;display:flex;align-items:flex-start;
  padding:8px 26px 0;background:rgba(255,255,255,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(60,40,20,.08)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:4px;
  color:var(--text-faint);font-size:11px;font-weight:600;transition:color .2s}
.tab.active{color:var(--primary)}

/* ---------- Toast ---------- */
.toast{position:absolute;top:64px;left:50%;transform:translate(-50%,-16px);z-index:30;
  display:flex;align-items:center;gap:8px;background:rgba(36,29,22,.92);color:#fff;
  font-size:13px;font-weight:600;padding:10px 16px;border-radius:999px;
  box-shadow:0 10px 24px rgba(30,20,10,.25);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s var(--spring)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast-ic{color:#8FE3B5;display:grid;place-items:center}

/* ---------- 首屏阶梯入场 ---------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s var(--spring)}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- ≤480px 全屏去壳 ---------- */
@media (max-width:480px){
  body{padding:0;background:var(--bg)}
  .phone{width:100%;height:100vh;height:100dvh;padding:0;border-radius:0;background:none;box-shadow:none}
  .screen{border-radius:0}
}