:root{
  --indigo:#2A2A72; --indigo2:#4C5BE0; --violet:#6C7BF0; --lilac:#5BD3C4;
  --bg:#0A0E1A; --surface:#121829; --text:#fff; --sub:#9AA6C2;
  --glass:rgba(255,255,255,.07); --glass-stroke:var(--glass-stroke);
  --stage-deep:#5B6BE0; --stage-light:#6C7BF0; --stage-rem:#8A9BFF; --stage-awake:#94A3B8;
  --aurora:#5BD3C4; --peri:#8A9BFF;
  /* 语义色：仅用于错误 / 离线 / 警示，避免刺眼纯红破坏极光夜色基调 */
  --warn:#F0B478; --warn-deep:#E8896B;
  /* 中性控件填充（随主题翻转：深色=透白，浅色=透深） */
  --fill:var(--fill); --fill-2:var(--fill-2); --fill-strong:var(--fill-strong);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"Raleway","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--text); background:var(--bg); overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#app{
  position:relative; width:100%; max-width:430px; height:100dvh; margin:0 auto;
  background:
    radial-gradient(120% 70% at 12% -10%, rgba(76,91,224,.20), transparent 55%),
    radial-gradient(110% 60% at 92% 6%, rgba(91,211,196,.16), transparent 55%),
    radial-gradient(120% 80% at 50% 120%, rgba(108,123,240,.12), transparent 60%),
    var(--bg);
  display:flex; flex-direction:column; overflow:hidden;
  transition:background .8s ease;
}
/* 时段自适应主题（由 JS 按当前小时设置 body[data-theme]） */
body[data-theme="night"] #app{
  background:
    radial-gradient(120% 70% at 12% -10%, rgba(46,43,120,.32), transparent 55%),
    radial-gradient(110% 60% at 92% 6%, rgba(91,211,196,.22), transparent 55%),
    radial-gradient(120% 80% at 50% 120%, rgba(76,91,224,.18), transparent 60%), #070A16;
}
body[data-theme="dawn"] #app{
  background:
    radial-gradient(120% 70% at 15% -10%, rgba(251,146,60,.24), transparent 55%),
    radial-gradient(110% 60% at 95% 8%, rgba(244,114,182,.22), transparent 55%),
    radial-gradient(120% 80% at 50% 120%, rgba(91,211,196,.12), transparent 60%), #1A1430;
}
body[data-theme="day"] #app{
  background:
    radial-gradient(120% 70% at 15% -10%, rgba(56,189,248,.22), transparent 55%),
    radial-gradient(110% 60% at 95% 8%, rgba(91,211,196,.20), transparent 55%),
    radial-gradient(120% 80% at 50% 120%, rgba(129,140,248,.10), transparent 60%), #131A33;
}
body[data-theme="dusk"] #app{
  background:
    radial-gradient(120% 70% at 15% -10%, rgba(236,72,153,.22), transparent 55%),
    radial-gradient(110% 60% at 95% 8%, rgba(108,123,240,.24), transparent 55%),
    radial-gradient(120% 80% at 50% 120%, rgba(76,91,224,.12), transparent 60%), #121833;
}

/* 状态栏 */
.statusbar{height:auto;min-height:62px;display:flex;align-items:center;justify-content:space-between;
  padding:env(safe-area-inset-top,0px) 24px 0;font-size:14px;font-weight:600;flex:0 0 auto;}
.sb-right{display:flex;align-items:center;gap:6px;}

/* 屏幕容器 */
#screens{flex:1 1 auto;position:relative;overflow:hidden;}
.screen{position:absolute;inset:0;display:none;flex-direction:column;
  padding:6px 20px 16px;overflow-y:auto;}
.screen.active{display:flex;animation:fade .35s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 玻璃卡片 */
.glass{background:var(--glass);border:1px solid var(--glass-stroke);
  border-radius:20px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);}

/* 首页 */
.home-hero{padding:10px 4px 18px;}
.greet{font-family:"Lora",serif;font-size:26px;font-weight:700;letter-spacing:.5px;}
.sub{color:var(--sub);margin-top:6px;font-size:14px;}
.plan-card{margin:6px 2px 22px;padding:18px 18px 16px;}
.plan-head{display:flex;justify-content:space-between;align-items:flex-start;}
.plan-label{color:var(--sub);font-size:12.5px;letter-spacing:.4px;}
.plan-time{font-family:"Lora",serif;font-size:22px;font-weight:600;margin-top:4px;}
.plan-dur{margin-top:12px;font-size:13px;color:#BFEFE8;
  background:linear-gradient(90deg,rgba(108,123,240,.25),rgba(76,91,224,.18));
  display:inline-block;padding:5px 12px;border-radius:999px;}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--glass-stroke);
  background:var(--fill);color:var(--text);display:grid;place-items:center;cursor:pointer;
  transition:transform .15s,background .2s;}
.icon-btn:active{background:rgba(255,255,255,.16);transform:scale(.92);}
.section-title{font-family:"Lora",serif;font-size:17px;font-weight:600;margin:2px 2px 14px;}
.rec-list{display:flex;flex-direction:column;gap:14px;}
.rec-card{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-stroke);transition:background .2s,border-color .2s;}
.rec-card:active{background:var(--fill-strong);}
.rec-ico{width:48px;height:48px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;}
.rec-meta{flex:1 1 auto;min-width:0;}
.rec-title{font-size:15.5px;font-weight:600;}
.rec-desc{color:var(--sub);font-size:12.5px;margin-top:3px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rec-tag{display:none;align-self:flex-start;font-size:10.5px;color:#BFEFE8;
  background:rgba(76,91,224,.28);padding:2px 9px;border-radius:999px;margin-top:6px;letter-spacing:.3px;}
.rec-card[data-top="1"] .rec-tag{display:inline-block;}
.rec-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.rec-dur{font-size:12px;color:#BFEFE8;background:rgba(76,91,224,.22);padding:4px 10px;border-radius:999px;}
.rec-play{width:38px;height:38px;border-radius:50%;border:1px solid var(--glass-stroke);
  background:var(--fill);display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .2s;}
.rec-play:active{transform:scale(.9);background:rgba(255,255,255,.16);}
.rec-card{position:relative;overflow:hidden;}
.rec-bar{position:absolute;left:0;bottom:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--indigo2),var(--lilac));border-radius:0 3px 3px 0;
  opacity:0;transition:width 1s linear;}
.rec-card.playing .rec-bar{opacity:1;}
.rec-elapsed{font-size:11px;color:#BFEFE8;display:none;letter-spacing:.3px;}
.rec-card.playing .rec-elapsed{display:block;}
.rec-card.playing{border-color:rgba(91,211,196,.6);box-shadow:0 0 0 1px rgba(91,211,196,.35);}
.rec-card.playing .rec-play{background:linear-gradient(135deg,var(--indigo2),var(--violet));border:none;}

/* 呼吸页 */
.breath-tech{text-align:center;color:var(--sub);font-size:13px;margin-top:2px;letter-spacing:.5px;}
.breath-stage{text-align:center;font-family:"Lora",serif;font-size:22px;font-weight:600;margin-top:6px;min-height:30px;}
.breath-orb-wrap{flex:1 1 auto;display:grid;place-items:center;min-height:240px;position:relative;}
.breath-orb{width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #8FF0E4, #3A8FE0 55%, #241B6B 100%);
  box-shadow:0 0 60px rgba(91,211,196,.5), inset 0 0 40px rgba(255,255,255,.25);
  transition:transform 4s ease-in-out, box-shadow 4s ease-in-out;transform:scale(.62);}
.breath-orb.inhale{transform:scale(1);box-shadow:0 0 90px rgba(91,211,196,.7), inset 0 0 50px rgba(255,255,255,.35);}
.breath-orb.hold{transform:scale(1);}
.breath-orb.exhale{transform:scale(.62);}
.breath-count{position:absolute;font-family:"Lora",serif;font-size:34px;font-weight:700;
  color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4);pointer-events:none;opacity:0;transition:opacity .3s;}
.breath-count.show{opacity:1;}
.stage-pills{display:flex;justify-content:center;gap:10px;margin:8px 0;flex-wrap:wrap;}
.pill{padding:7px 16px;border-radius:999px;font-size:13px;color:var(--sub);
  background:var(--fill);border:1px solid var(--glass-stroke);transition:.25s;}
.pill.active{color:#fff;background:linear-gradient(90deg,var(--indigo2),var(--violet));
  border-color:transparent;font-weight:600;transform:translateY(-2px);}
.progress{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:14px;}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--indigo2),var(--lilac));border-radius:999px;transition:width .3s;}
.progress-time{text-align:center;color:var(--sub);font-size:12.5px;margin-top:8px;}
.breath-cycles{text-align:center;color:var(--sub);font-size:12.5px;margin-top:6px;letter-spacing:.6px;transition:color .3s;}
.breath-cycles.done{color:var(--lilac);font-weight:600;animation:cycleDone 1.6s ease-in-out infinite;}
@keyframes cycleDone{0%,100%{opacity:.65}50%{opacity:1;text-shadow:0 0 12px rgba(91,211,196,.6)}}
.breath-goal{display:flex;justify-content:center;gap:8px;margin-top:10px;flex-wrap:wrap;}
.goal-chip{border:1px solid var(--glass-stroke);background:var(--fill);color:var(--sub);
  font-size:12px;padding:5px 12px;border-radius:999px;font-family:inherit;cursor:pointer;transition:.2s;}
.goal-chip:active{transform:scale(.95);}
.goal-chip.active{color:#fff;background:linear-gradient(90deg,var(--indigo2),var(--violet));border-color:transparent;font-weight:600;}
.breath-goal-custom{display:flex;justify-content:center;gap:8px;margin-top:8px;}
.breath-goal-custom input{width:128px;min-width:0;padding:7px 12px;border-radius:11px;font-size:13px;
  background:var(--fill);border:1px solid var(--glass-stroke);color:#fff;outline:none;
  font-family:inherit;text-align:center;transition:border-color .2s;}
.breath-goal-custom input:focus{border-color:var(--lilac);}
.breath-goal-custom button{border:none;border-radius:11px;padding:7px 14px;font-size:13px;font-weight:600;
  font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--indigo2),var(--violet));cursor:pointer;transition:transform .15s;}
.breath-goal-custom button:active{transform:scale(.96);}
.controls{display:flex;align-items:center;justify-content:center;gap:34px;margin-top:16px;}
.ctrl{width:48px;height:48px;border-radius:50%;border:1px solid var(--glass-stroke);
  background:var(--fill);display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .2s;}
.ctrl:active{transform:scale(.9);background:rgba(255,255,255,.16);}
.ctrl.play{width:66px;height:66px;background:linear-gradient(135deg,var(--indigo2),var(--violet));border:none;
  box-shadow:0 8px 24px rgba(76,91,224,.5);color:#fff;}

/* 混音页 */
.mix-header{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 4px 18px;}
.mix-title{font-family:"Lora",serif;font-size:24px;font-weight:700;}
.mix-sub{color:var(--sub);font-size:13px;margin-top:4px;}
.mix-head-actions{display:flex;gap:10px;}
.shuffle-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--glass-stroke);
  background:var(--fill);display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .2s;}
.shuffle-btn:active{transform:scale(.9);background:rgba(255,255,255,.16);}
.shuffle-btn.on{background:linear-gradient(135deg,var(--indigo2),var(--violet));border:none;box-shadow:0 6px 18px rgba(76,91,224,.45);color:#fff;}
.shuffle-btn .timer-label{position:absolute;bottom:-4px;right:-4px;background:var(--lilac);color:#1e1b4b;
  font-size:9px;font-weight:700;line-height:1;padding:2px 4px;border-radius:6px;letter-spacing:.2px;}
.shuffle-btn{position:relative;}

/* 睡眠定时弹层 */
.timer-pop{position:absolute;top:50px;right:0;z-index:30;min-width:158px;padding:12px;
  background:rgba(25,33,52,.98);border:1px solid var(--glass-stroke);border-radius:16px;
  box-shadow:0 12px 36px rgba(0,0,0,.5);backdrop-filter:blur(14px);
  opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;transition:opacity .18s,transform .18s;}
.timer-pop.show{opacity:1;transform:none;pointer-events:auto;}
.timer-pop-title{font-size:12px;color:var(--sub);margin-bottom:10px;text-align:center;}
.timer-opts{display:flex;flex-direction:column;gap:6px;}
.timer-opts button{border:1px solid var(--glass-stroke);background:var(--fill);color:var(--text);
  padding:10px;border-radius:11px;font-size:14px;font-family:inherit;cursor:pointer;transition:background .15s,transform .15s;}
.timer-opts button:active{transform:scale(.97);background:var(--fill-strong);}
.timer-opts button.cancel{border-color:rgba(248,113,113,.4);color:#FCA5A5;font-size:13px;}
.timer-custom{display:flex;gap:6px;margin-top:10px;align-items:center;}
.timer-custom input{flex:1 1 auto;width:100%;min-width:0;padding:9px;border-radius:10px;font-size:13px;
  background:var(--fill);border:1px solid var(--glass-stroke);color:#fff;outline:none;font-family:inherit;}
.timer-custom input:focus{border-color:var(--lilac);}
.timer-custom button{border:none;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600;
  font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--indigo2),var(--violet));cursor:pointer;}

/* 首页续播横幅 */
.resume-banner{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:18px;margin:4px 2px 14px;
  background:linear-gradient(120deg,rgba(108,123,240,.22),rgba(76,91,224,.18));
  border:1px solid rgba(91,211,196,.35);box-shadow:0 8px 24px rgba(76,91,224,.22);}
.resume-banner[hidden]{display:none;}
.resume-ico{width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--indigo2),var(--violet));}
.resume-ico svg{width:22px;height:22px;}
.resume-meta{flex:1 1 auto;min-width:0;}
.resume-label{font-size:11.5px;color:#BFEFE8;letter-spacing:.4px;}
.resume-title{font-size:15px;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.resume-btn{flex:0 0 auto;border:none;border-radius:13px;padding:10px 16px;font-size:14px;font-weight:700;
  font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--indigo2),var(--violet));
  box-shadow:0 6px 16px rgba(76,91,224,.45);cursor:pointer;transition:transform .15s;}
.resume-btn:active{transform:scale(.96);}
.resume-x{width:26px;height:26px;border-radius:50%;border:1px solid var(--glass-stroke);
  background:var(--fill);color:var(--sub);font-size:18px;line-height:1;flex:0 0 auto;
  display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .2s,color .2s;}
.resume-x:active{transform:scale(.9);background:rgba(255,255,255,.16);color:#fff;}
#mix-playpause.playing{background:linear-gradient(135deg,var(--indigo2),var(--violet));border:none;color:#fff;}

/* 主音量滑块 */
.mix-master{display:flex;align-items:center;gap:12px;padding:2px 6px 16px;}
.vol-ico{flex:0 0 auto;opacity:.8;}
.mix-master input[type=range]{flex:1 1 auto;accent-color:var(--lilac);height:22px;}
.mix-master-val{flex:0 0 auto;font-size:12.5px;color:#BFEFE8;min-width:40px;text-align:right;
  font-variant-numeric:tabular-nums;}

.track-list{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;}
.track{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-stroke);transition:border-color .2s,opacity .2s;}
.track.on{border-color:rgba(91,211,196,.6);box-shadow:0 0 0 1px rgba(91,211,196,.35),0 8px 24px rgba(76,91,224,.25);}
.track.off{opacity:.5;}
.track-ico{width:46px;height:46px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;position:relative;}
.track-body{flex:1 1 auto;min-width:0;}
.track-name{font-size:15px;font-weight:600;}
.track-state{font-size:12px;color:var(--sub);margin-top:3px;}
.track input[type=range]{width:100%;margin-top:8px;accent-color:var(--lilac);height:22px;}
.save-btn{margin:16px 2px 4px;padding:15px;border:none;border-radius:16px;font-size:15.5px;font-weight:600;
  color:#fff;background:linear-gradient(90deg,var(--indigo2),var(--violet));cursor:pointer;
  box-shadow:0 10px 28px rgba(76,91,224,.4);transition:transform .15s;}
.save-btn:active{transform:scale(.985);}

/* 报告页 */
.report-top{display:flex;justify-content:space-between;padding:6px 2px 8px;}
.back-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-stroke);
  background:var(--fill);display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .2s;}
.back-btn:active{transform:scale(.9);background:rgba(255,255,255,.16);}
.report-date-wrap{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 6px;}
.report-date{text-align:center;color:var(--sub);font-size:13px;min-width:150px;}
.date-step{width:34px;height:34px;border-radius:50%;border:1px solid var(--glass-stroke);
  background:var(--fill);display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .2s,opacity .2s;}
.date-step:active{transform:scale(.9);background:rgba(255,255,255,.16);}
.date-step:disabled{opacity:.3;}
.date-step:disabled:active{transform:none;background:var(--fill);}
.score-wrap{position:relative;width:150px;height:150px;margin:8px auto 4px;display:grid;place-items:center;}
.score-num{position:absolute;text-align:center;}
.score-num span{font-family:"Lora",serif;font-size:40px;font-weight:700;display:block;line-height:1;}
.score-num small{color:var(--sub);font-size:11.5px;}
.stagechart{display:flex;align-items:flex-end;gap:3px;height:96px;margin:18px 2px 8px;
  padding:10px 8px 0;border-radius:16px;background:var(--fill-2);border:1px solid var(--glass-stroke);}
.stagechart .bar{flex:1 1 0;border-radius:3px 3px 0 0;min-height:6px;transition:height .4s;}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;}
.metric{padding:14px 8px;text-align:center;border-radius:16px;background:var(--glass);border:1px solid var(--glass-stroke);}
.metric .v{font-family:"Lora",serif;font-size:19px;font-weight:700;}
.metric .l{color:var(--sub);font-size:11.5px;margin-top:4px;}

/* 底部悬浮胶囊导航 */
.tabbar{flex:0 0 auto;display:flex;justify-content:space-around;align-items:center;
  margin:8px 14px calc(12px + var(--safe-b));padding:9px 6px;background:rgba(18,24,41,.72);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-stroke);border-radius:26px;
  box-shadow:0 12px 34px rgba(6,10,24,.5), inset 0 1px 0 var(--fill);}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;
  color:var(--sub);font-size:11px;cursor:pointer;padding:5px 16px;border-radius:16px;transition:.2s;}
.tab svg{opacity:.7;transition:.2s;}
.tab.active{color:var(--text);background:linear-gradient(90deg,rgba(76,91,224,.30),rgba(91,211,196,.18));}
.tab.active svg{opacity:1;color:var(--lilac);}
.tab:active{transform:scale(.92);}

/* Toast */
#toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%) translateY(20px);
  background:rgba(25,33,52,.95);border:1px solid var(--glass-stroke);color:#fff;
  padding:10px 18px;border-radius:999px;font-size:13.5px;opacity:0;pointer-events:none;
  transition:.3s;z-index:60;max-width:80%;text-align:center;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.loading{color:var(--sub);font-size:13px;padding:20px;text-align:center;}

/* ── PWA 安装提示 ── */
.install-chip{
  display:none; position:fixed; bottom:calc(104px + var(--safe-b)); right:16px; z-index:99;
  padding:9px 18px; border-radius:20px;
  background:linear-gradient(135deg,var(--indigo2),var(--violet));
  color:#fff; font-size:13px; font-weight:600; letter-spacing:.3px;
  cursor:pointer; border:none; box-shadow:0 4px 16px rgba(42,42,114,.45);
  animation:fadeIn .25s ease;}
.install-chip.show{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── 预设芯片（混音页） ── */
.preset-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.preset-chips::-webkit-scrollbar{display:none;}
.preset-chip{flex-shrink:0; padding:7px 15px; border-radius:999px; font-size:12.5px;
  color:var(--sub); background:var(--fill);
  border:1px solid var(--glass-stroke); white-space:nowrap; cursor:pointer; transition:.22s;}
.preset-chip.active{color:#fff; background:rgba(108,123,240,.24); border-color:var(--indigo2);}
.preset-chip.fav{border-color:var(--lilac);}
/* 预设为空时的虚线引导芯片 */
.preset-chip.hint{
  border-style:dashed; border-color:rgba(91,211,196,.34); color:var(--sub);
  background:transparent; cursor:default; display:inline-flex; align-items:center; gap:6px;
}
.preset-chip.hint svg{width:13px; height:13px; color:var(--aurora); flex-shrink:0;}

/* ── 安全区域适配 ── */
@supports(padding:max(0px)){
  .tabbar{padding-bottom:max(10px,env(safe-area-inset-bottom));}
  .install-chip{bottom:calc(76px + env(safe-area-inset-bottom,0px));}
}

/* ── 报告趋势 ── */
.trend-wrap{margin:2px 2px 6px;}
.trend-label{color:var(--sub);font-size:12px;margin:0 4px 8px;}
.trend{display:flex;align-items:flex-end;gap:6px;height:62px;padding:8px 8px 6px;border-radius:14px;
  background:var(--fill-2);border:1px solid var(--glass-stroke);}
.trend-col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;}
.trend-val{font-size:10px;color:var(--sub);}
.trend-bar{width:58%;max-width:14px;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--indigo2),var(--violet));transition:height .5s ease;}
.trend-bar.cur{background:linear-gradient(180deg,var(--lilac),var(--indigo));box-shadow:0 0 10px rgba(91,211,196,.6);}
.trend-lbl{font-size:9.5px;color:var(--sub);}

/* ── 阶段图例 ── */
.legend{display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:center;margin-top:16px;}
.legend-it{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sub);}
.legend-dot{width:10px;height:10px;border-radius:3px;display:inline-block;}

/* ── 预设收藏星 ── */
.preset-name{margin-right:2px;}
.preset-star{margin-left:6px;font-size:13px;cursor:pointer;color:var(--sub);user-select:none;line-height:1;}
.preset-star.on{color:#FFD66B;}

/* ── 底部弹层 sheet ── */
.sheet-overlay{position:fixed;inset:0;background:rgba(2,6,23,.55);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:80;
  display:flex;align-items:flex-end;justify-content:center;}
.sheet-overlay.show{opacity:1;pointer-events:auto;}
.sheet{width:100%;max-width:430px;background:linear-gradient(180deg,#1B2436,#141B2C);
  border-radius:24px 24px 0 0;border:1px solid var(--glass-stroke);border-bottom:none;
  padding:10px 22px calc(24px + var(--safe-b));transform:translateY(100%);transition:transform .32s cubic-bezier(.22,1,.36,1);
  box-shadow:0 -10px 40px rgba(0,0,0,.5);}
.sheet-overlay.show .sheet{transform:translateY(0);}
.sheet-grip{width:40px;height:4px;border-radius:999px;background:rgba(255,255,255,.2);margin:0 auto 14px;}
.sheet-title{font-family:"Lora",serif;font-size:19px;font-weight:600;margin-bottom:16px;text-align:center;}
.sheet-field{margin-bottom:14px;}
.sheet-field label{display:block;font-size:12.5px;color:var(--sub);margin:0 4px 7px;}
.sheet-field input{width:100%;padding:13px 14px;border-radius:14px;font-size:15px;
  background:var(--fill);border:1px solid var(--glass-stroke);color:#fff;outline:none;
  font-family:inherit;transition:border-color .2s;}
.sheet-field input:focus{border-color:var(--lilac);}
.sheet-actions{display:flex;gap:12px;margin-top:8px;}
.sheet-btn{flex:1;border:none;border-radius:14px;padding:14px;font-size:15px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:transform .15s;}
.sheet-btn:active{transform:scale(.97);}
.sheet-btn.ghost{background:var(--glass-stroke);color:#fff;border:1px solid var(--glass-stroke);}
.sheet-btn.primary{background:linear-gradient(90deg,var(--indigo2),var(--violet));color:#fff;
  box-shadow:0 8px 22px rgba(76,91,224,.4);}

/* ── 骨架屏 ── */
.skel-card{height:78px;border-radius:20px;background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,var(--glass-stroke) 50%,rgba(255,255,255,.05) 70%);
  background-size:200% 100%;animation:skel 1.3s infinite;margin-bottom:14px;}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* ── 轨道均衡器动效（播放中） ── */
.track-eq{position:absolute;right:-2px;bottom:-2px;display:none;gap:2px;align-items:flex-end;height:14px;}
.track.on.playing .track-eq{display:flex;}
.track-eq span{width:3px;background:var(--lilac);border-radius:2px;animation:eq .9s ease-in-out infinite;}
.track-eq span:nth-child(1){height:6px;animation-delay:0s;}
.track-eq span:nth-child(2){height:12px;animation-delay:.2s;}
.track-eq span:nth-child(3){height:8px;animation-delay:.4s;}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* ── 我的 / 睡眠洞察 ── */
.ins-hero{display:flex;align-items:center;gap:14px;padding:10px 4px 18px;}
.ins-avatar{width:56px;height:56px;border-radius:18px;flex:0 0 auto;display:grid;place-items:center;
  font-family:"Lora",serif;font-size:24px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--indigo2),var(--violet));box-shadow:0 8px 22px rgba(76,91,224,.4);}
.ins-name{font-family:"Lora",serif;font-size:22px;font-weight:700;}
.ins-level{display:inline-block;margin-top:6px;font-size:12px;color:#BFEFE8;
  background:rgba(76,91,224,.24);padding:3px 12px;border-radius:999px;letter-spacing:.4px;}
.ins-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 2px 22px;}
.ins-stat{padding:16px 8px;text-align:center;border-radius:18px;background:var(--glass);
  border:1px solid var(--glass-stroke);}
.ins-stat .v{font-family:"Lora",serif;font-size:24px;font-weight:700;
  background:linear-gradient(135deg,var(--lilac),var(--indigo2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.ins-stat .l{color:var(--sub);font-size:11.5px;margin-top:5px;}

.ins-compose{margin:0 2px 22px;}
.compose-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--fill);}
.compose-seg{height:100%;transition:width .6s ease;}
.compose-seg.breath{background:linear-gradient(90deg,#34D399,#10B981);}
.compose-seg.mix{background:linear-gradient(90deg,var(--indigo2),var(--indigo));}
.compose-seg.meditation{background:linear-gradient(90deg,var(--lilac),var(--violet));}
.compose-legend{display:flex;gap:16px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
.compose-legend .cl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sub);}
.compose-legend .dot{width:9px;height:9px;border-radius:50%;}
.compose-legend .dot.breath{background:#10B981;}
.compose-legend .dot.mix{background:var(--indigo2);}
.compose-legend .dot.meditation{background:var(--violet);}

.ins-week{display:flex;align-items:flex-end;gap:6px;height:96px;padding:10px 8px 6px;border-radius:16px;
  background:var(--fill-2);border:1px solid var(--glass-stroke);margin:0 2px 22px;}
.ins-week .wc{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;}
.ins-week .wv{font-size:10px;color:var(--sub);}
.ins-week .wbar{width:60%;max-width:16px;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--lilac),var(--indigo));transition:height .5s ease;}
.ins-week .wl{font-size:9.5px;color:var(--sub);}

.ins-sleep{display:flex;align-items:center;gap:14px;padding:16px;margin:0 2px 22px;}
.ins-sleep-kpi{flex:0 0 auto;text-align:center;}
.ins-sleep-kpi .big{font-family:"Lora",serif;font-size:30px;font-weight:700;
  background:linear-gradient(135deg,var(--lilac),var(--indigo2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.ins-sleep-kpi .lab{color:var(--sub);font-size:11px;margin-top:3px;}
.ins-sleep-chart{flex:1 1 auto;display:flex;align-items:flex-end;gap:4px;height:62px;
  padding:6px 4px 0;border-radius:12px;background:var(--fill-2);}
.ins-sleep-chart .sc{flex:1 1 0;border-radius:4px 4px 0 0;min-height:4px;
  background:linear-gradient(180deg,var(--indigo2),var(--violet));transition:height .5s ease;}
.ins-sleep-chart .sc.cur{background:linear-gradient(180deg,var(--lilac),var(--indigo));box-shadow:0 0 10px rgba(91,211,196,.6);}

.ins-tip{padding:16px 18px;border-radius:18px;margin:0 2px 12px;font-size:13.5px;line-height:1.6;
  background:linear-gradient(120deg,rgba(108,123,240,.16),rgba(76,91,224,.12));
  border:1px solid rgba(91,211,196,.3);}
.ins-tip b{color:#BFEFE8;}

/* ── 首页助眠仪式卡片 ── */
.routine-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;margin:0 2px 16px;padding:16px 18px;border-radius:20px;
  border:1px solid rgba(91,211,196,.28);cursor:pointer;}
.routine-card-bg{position:absolute;inset:0;opacity:.5;
  background:radial-gradient(120% 120% at 100% 0%,rgba(76,91,224,.32),transparent 60%);}
.routine-card-main{position:relative;flex:1 1 auto;}
.routine-card-label{font-family:"Lora",serif;font-size:16px;font-weight:700;}
.routine-card-sub{font-size:12px;color:var(--sub);margin-top:3px;}
.routine-card-pct{position:relative;flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:13px;color:#fff;background:conic-gradient(var(--lilac) calc(var(--p,0)*1%),var(--glass-stroke) 0);}
.routine-card-pct::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface);}

/* ── 助眠仪式屏 ── */
.routine-hero{padding:6px 4px 18px;}
.routine-title{font-family:"Lora",serif;font-size:26px;font-weight:700;}
.routine-sub{color:var(--sub);font-size:13px;margin-top:6px;}
.routine-ring-wrap{position:relative;width:140px;height:140px;margin:8px auto 22px;}
.routine-ring{transform:rotate(0);}
.routine-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;}
.routine-ring-pct{font-family:"Lora",serif;font-size:30px;font-weight:700;
  background:linear-gradient(135deg,var(--lilac),var(--indigo2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.routine-ring-sub{font-size:12px;color:var(--sub);margin-top:2px;}
.routine-list{display:flex;flex-direction:column;gap:10px;margin:0 2px 20px;}
.rt-item{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:16px;background:var(--glass);
  border:1px solid var(--glass-stroke);cursor:pointer;transition:transform .15s ease,background .2s ease;}
.rt-item:active{transform:scale(.985);}
.rt-check{width:24px;height:24px;flex:0 0 auto;border-radius:8px;border:2px solid var(--sub);display:grid;place-items:center;
  font-size:14px;color:#fff;transition:.2s;}
.rt-item.done .rt-check{background:linear-gradient(135deg,var(--lilac),var(--indigo));border-color:transparent;}
.rt-item.done .rt-label{color:var(--sub);text-decoration:line-through;}
.rt-label{font-size:15px;}
.routine-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 2px;}
.routine-btn{border:none;border-radius:14px;padding:14px;font-size:14px;font-weight:600;cursor:pointer;color:#fff;}
.routine-btn.ghost{background:var(--glass);border:1px solid var(--glass-stroke);}
.routine-btn.primary{grid-column:1 / -1;background:linear-gradient(135deg,var(--violet),var(--indigo));
  box-shadow:0 10px 26px rgba(108,123,240,.4);}
.routine-manage{margin:18px 2px 0;padding:16px;border-radius:18px;background:var(--fill-2);
  border:1px solid var(--glass-stroke);}
.routine-manage-title{font-size:13px;color:var(--sub);margin-bottom:12px;}
.routine-manage-list{display:flex;flex-direction:column;gap:8px;}
.rm-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--glass);}
.rm-left{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;}
.rm-toggle{width:22px;height:22px;flex:0 0 auto;border-radius:7px;border:2px solid var(--sub);background:transparent;color:#fff;
  font-size:13px;cursor:pointer;}
.rm-toggle.on{background:linear-gradient(135deg,var(--lilac),var(--indigo));border-color:transparent;}
.rm-label{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rm-right{display:flex;align-items:center;gap:4px;flex:0 0 auto;}
.rm-move,.rm-del{width:30px;height:30px;border-radius:9px;border:1px solid var(--glass-stroke);background:var(--glass);
  color:#fff;font-size:15px;cursor:pointer;}
.rm-del{color:#FCA5A5;}
.routine-add{width:100%;margin-top:12px;padding:12px;border-radius:12px;border:1px dashed var(--glass-stroke);
  background:transparent;color:var(--lilac);font-size:14px;font-weight:600;cursor:pointer;}

/* ── 我的页·本周仪式 ── */
.ins-routine{display:flex;align-items:center;gap:12px;margin:0 2px 14px;padding:14px 16px;border-radius:18px;
  border:1px solid rgba(91,211,196,.28);cursor:pointer;}
.ins-routine-l{flex:1 1 auto;}
.ins-routine-t{font-size:14px;font-weight:600;}
.ins-routine-s{font-size:12px;color:var(--sub);margin-top:3px;}
.ins-routine-btn{flex:0 0 auto;padding:9px 16px;border-radius:999px;border:none;color:#fff;font-size:13px;font-weight:600;
  background:linear-gradient(135deg,var(--violet),var(--indigo));}

/* ── 首页·今夜故事卡片 ── */
.story-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;margin:0 2px 16px;padding:16px 18px;border-radius:20px;
  border:1px solid rgba(108,123,240,.28);cursor:pointer;}
.story-card-bg{position:absolute;inset:0;opacity:.55;
  background:radial-gradient(circle at 88% 12%,rgba(108,123,240,.5),transparent 60%);}
.story-card-main{position:relative;flex:1 1 auto;}
.story-card-label{font-size:13px;color:var(--sub);letter-spacing:.5px;}
.story-card-sub{font-size:15px;font-weight:600;margin-top:2px;}
.story-card-ico{position:relative;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--indigo));box-shadow:0 6px 18px rgba(108,123,240,.35);}
.story-card-ico svg{display:block;}

/* ── 故事列表 ── */
.story-list{display:flex;flex-direction:column;gap:12px;padding:0 2px;}
.story-item{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:20px;
  background:var(--glass);border:1px solid var(--glass-stroke);cursor:pointer;transition:transform .15s,border-color .15s;}
.story-item:active{transform:scale(.985);}
.story-item:focus-within,.story-item:hover{border-color:rgba(91,211,196,.45);}
.story-item-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;
  box-shadow:0 6px 16px rgba(0,0,0,.25);}
.story-item-ico svg{display:block;}
.story-item-main{flex:1 1 auto;min-width:0;}
.story-item-title{font-size:15.5px;font-weight:600;}
.story-item-sub{font-size:12.5px;color:var(--sub);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.story-item-meta{display:flex;align-items:center;gap:8px;margin-top:6px;}
.story-cat{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(91,211,196,.18);color:var(--lilac);}
.story-dur{font-size:11px;color:var(--sub);}
.story-listens{font-size:11px;color:var(--sub);}
.story-item-play{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--indigo));box-shadow:0 4px 14px rgba(108,123,240,.4);}

/* ── 故事播放器浮层 ── */
.story-player{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  background:#070A18;color:#fff;overflow:hidden;animation:sp-in .35s ease both;}
.story-player[hidden]{display:none;}  /* 修复：hidden 属性必须真正隐藏浮层（.story-player{display:flex} 胜过 UA [hidden]） */
@keyframes sp-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.story-bg{position:absolute;inset:0;background:linear-gradient(160deg,#1B1147,#0E1230 55%,#070A18);transition:background .6s;}
.story-bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 30% 20%,rgba(76,91,224,.35),transparent 45%),
            radial-gradient(circle at 80% 75%,rgba(56,189,248,.22),transparent 45%);}
.story-close{position:absolute;top:calc(env(safe-area-inset-top,0) + 14px);right:16px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:none;background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1;cursor:pointer;}
.story-head{position:relative;z-index:2;padding:calc(env(safe-area-inset-top,0) + 64px) 26px 0;text-align:center;}
.story-p-title{font-family:"Lora",serif;font-size:24px;font-weight:700;}
.story-p-narr{font-size:13px;color:rgba(255,255,255,.6);margin-top:6px;letter-spacing:1px;}
.story-text{position:relative;z-index:2;flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:26px 30px;scroll-behavior:smooth;}
.story-text .sp{font-family:"Lora",serif;font-size:18px;line-height:2;color:rgba(255,255,255,.42);
  margin:0 0 22px;transition:color .5s,transform .5s;transform:translateY(6px);}
.story-text .sp.active{color:rgba(255,255,255,.95);transform:none;text-shadow:0 0 18px rgba(91,211,196,.35);}
.story-foot{position:relative;z-index:2;padding:10px 20px calc(env(safe-area-inset-bottom,0) + 22px);}
.story-controls{display:flex;align-items:center;justify-content:center;gap:22px;}
.story-btn{width:48px;height:48px;border-radius:50%;border:none;background:var(--glass-stroke);display:grid;place-items:center;cursor:pointer;position:relative;}
.story-btn.play{width:64px;height:64px;background:linear-gradient(135deg,var(--violet),var(--indigo));box-shadow:0 8px 24px rgba(108,123,240,.5);}
.story-btn:active{transform:scale(.94);}
.story-timer-label{position:absolute;bottom:-2px;right:-2px;font-size:9px;background:var(--violet);color:#fff;border-radius:8px;padding:1px 4px;min-width:14px;text-align:center;}
.story-timer-pop{margin:14px auto 0;max-width:340px;background:rgba(20,24,48,.96);border:1px solid var(--glass-stroke);border-radius:16px;padding:14px;display:none;}
.story-timer-pop.show{display:block;}
.story-timer-title{font-size:13px;color:var(--sub);text-align:center;margin-bottom:10px;}
.story-timer-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.story-timer-opts button{padding:11px 0;border-radius:12px;border:1px solid rgba(91,211,196,.3);background:rgba(91,211,196,.12);color:#fff;font-size:14px;cursor:pointer;}
.story-timer-opts button.cancel{border-color:rgba(255,255,255,.18);background:var(--fill);}

/* ── 首页·我的成长卡片 ── */
.growth-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;margin:0 2px 16px;padding:16px 18px;border-radius:20px;
  border:1px solid rgba(91,211,196,.28);cursor:pointer;}
.growth-card-bg{position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 90% 18%,rgba(91,211,196,.45),transparent 60%);}
.growth-card-main{position:relative;flex:1 1 auto;}
.growth-card-label{font-size:13px;color:var(--sub);letter-spacing:.5px;}
.growth-card-sub{font-size:15px;font-weight:600;margin-top:2px;}
.growth-card-pct{position:relative;flex:0 0 auto;min-width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--violet),var(--indigo));box-shadow:0 6px 18px rgba(76,91,224,.35);
  font-size:16px;font-weight:700;color:#fff;text-align:center;}

/* ══════════ 空状态 Empty States ══════════ */
.empty-state{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; padding:34px 24px 30px; width:100%;
}
.empty-state.compact{padding:24px 20px 22px; gap:8px;}
/* 图标容器：极光青柔光圆 */
.empty-ico{
  width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  margin-bottom:4px; color:var(--aurora);
  background:radial-gradient(circle at 36% 32%, rgba(91,211,196,.22), rgba(76,91,224,.10) 62%, transparent 72%);
  border:1px solid rgba(91,211,196,.20);
  animation:emptyFloat 5.5s ease-in-out infinite;
}
.empty-state.compact .empty-ico{width:58px; height:58px;}
.empty-ico svg{width:30px; height:30px; opacity:.9;}
.empty-state.compact .empty-ico svg{width:25px; height:25px;}
@keyframes emptyFloat{
  0%,100%{transform:translateY(0); opacity:.92;}
  50%{transform:translateY(-5px); opacity:1;}
}
.empty-title{font-size:15.5px; font-weight:600; color:#fff; letter-spacing:.2px;}
.empty-desc{font-size:13px; line-height:1.7; color:var(--sub); max-width:250px;}
/* 行动按钮 */
.empty-cta{
  margin-top:8px; padding:11px 22px; border-radius:22px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; color:#07130F;
  border:none; background:linear-gradient(135deg,var(--aurora),var(--indigo2));
  box-shadow:0 6px 18px rgba(91,211,196,.24);
  transition:transform .18s, box-shadow .22s;
}
.empty-cta:active{transform:scale(.97);}
.empty-cta.ghost{
  background:var(--fill); border:1px solid var(--glass-stroke);
  color:var(--sub); box-shadow:none;
}
/* 旧的裸文字空态 → 统一为柔和提示 */
.rt-empty{
  padding:20px 16px; text-align:center; font-size:13px;
  color:var(--sub); line-height:1.7;
}

/* ══════════ 错误状态 Error States ══════════
   复用 .empty-state 结构，仅以 .error 修饰符切换语义色（琥珀警示，不用刺眼红） */
.empty-state.error .empty-ico{
  color:var(--warn);
  background:radial-gradient(circle at 36% 32%, rgba(240,180,120,.20), rgba(240,140,110,.09) 62%, transparent 72%);
  border-color:rgba(240,180,120,.24);
  animation:errPulse 3.4s ease-in-out infinite;
}
@keyframes errPulse{
  0%,100%{transform:scale(1); opacity:.92;}
  50%{transform:scale(1.045); opacity:1;}
}
.empty-state.error .empty-cta{
  background:linear-gradient(135deg,var(--warn),#E8896B);
  box-shadow:0 6px 18px rgba(240,180,120,.22); color:#1A1204;
}
.empty-state.error .empty-cta.ghost{
  background:var(--fill); border:1px solid var(--glass-stroke);
  color:var(--sub); box-shadow:none;
}
/* 技术细节（折叠展示，便于排查） */
.err-detail{
  margin-top:2px; font-size:11px; color:rgba(154,166,194,.62);
  letter-spacing:.2px; font-variant-numeric:tabular-nums;
}

/* ══════════ 离线提示条 Offline Bar ══════════ */
.offline-bar{
  position:fixed; left:50%; transform:translate(-50%,-130%);
  top:calc(8px + env(safe-area-inset-top,0px)); z-index:130;
  width:calc(100% - 32px); max-width:398px;
  display:flex; align-items:center; gap:9px;
  padding:11px 15px; border-radius:18px;
  background:rgba(24,20,12,.90); border:1px solid rgba(240,180,120,.30);
  box-shadow:0 10px 30px rgba(0,0,0,.42);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  font-size:12.5px; color:#F3E7D4; letter-spacing:.2px;
  transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .3s;
  opacity:0; pointer-events:none;
}
.offline-bar.show{transform:translate(-50%,0); opacity:1; pointer-events:auto;}
.offline-bar.ok{
  background:rgba(12,26,24,.90); border-color:rgba(91,211,196,.32); color:#DCF5F0;
}
.offline-bar svg{width:16px; height:16px; flex:0 0 16px; color:var(--warn);}
.offline-bar.ok svg{color:var(--aurora);}
.offline-bar b{font-weight:600;}
.offline-bar i{font-style:normal; color:rgba(243,231,212,.66); font-size:11.5px;}

/* ══════════ 加载骨架屏 Skeleton ══════════ */
.sk{
  position:relative; overflow:hidden; border-radius:12px;
  background:rgba(255,255,255,.055);
}
.sk::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 16%, rgba(255,255,255,.075) 46%, transparent 76%);
  transform:translateX(-100%); animation:skShimmer 1.45s ease-in-out infinite;
}
@keyframes skShimmer{ to{transform:translateX(100%);} }
.sk-line{height:11px; border-radius:6px;}
.sk-line.sm{height:9px;}
.sk-line.w40{width:40%;} .sk-line.w55{width:55%;} .sk-line.w70{width:70%;} .sk-line.w90{width:90%;}
.sk-circle{border-radius:50%;}
/* 列表项骨架：缩略图 + 两行文字 */
.sk-row{
  display:flex; align-items:center; gap:13px;
  padding:14px 15px; margin-bottom:11px;
  border-radius:20px; background:var(--glass); border:1px solid var(--glass-stroke);
}
.sk-row .sk-thumb{width:52px; height:52px; flex:0 0 52px; border-radius:16px;}
.sk-row .sk-txt{flex:1; display:flex; flex-direction:column; gap:8px;}
/* 图表骨架：一排高低不一的柱 */
.sk-chart{
  display:flex; align-items:flex-end; gap:9px; height:112px;
  padding:16px 15px; border-radius:20px;
  background:var(--glass); border:1px solid var(--glass-stroke);
}
.sk-chart .sk-bar{flex:1; border-radius:7px 7px 3px 3px;}

/* ── 成就与成长屏 ── */
.growth-hero{margin:8px 2px 18px;padding:22px 20px;border-radius:22px;text-align:center;
  background:linear-gradient(160deg,rgba(76,91,224,.35),rgba(42,42,114,.18));border:1px solid rgba(91,211,196,.3);}
.growth-level{font-size:22px;font-weight:700;letter-spacing:.5px;}
.growth-level-sub{font-size:13px;color:var(--sub);margin-top:6px;}
.growth-level-bar{margin-top:14px;height:9px;border-radius:999px;background:var(--glass-stroke);overflow:hidden;}
.growth-level-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--lilac),var(--indigo));transition:width .6s ease;}

.badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 2px;}
.badge-item{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:18px 12px 16px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-stroke);}
.badge-item.locked{opacity:.5;}
.badge-item.unlocked{border-color:rgba(91,211,196,.45);box-shadow:0 6px 20px rgba(76,91,224,.18);}
.badge-emoji{font-size:34px;line-height:1;filter:grayscale(.4);}
.badge-item.locked .badge-emoji{filter:grayscale(1);opacity:.7;}
.badge-title{font-size:14px;font-weight:600;}
.badge-desc{font-size:11.5px;color:var(--sub);line-height:1.4;}
.badge-prog{width:100%;height:5px;border-radius:999px;background:var(--glass-stroke);overflow:hidden;margin-top:4px;}
.badge-prog > i{display:block;height:100%;background:linear-gradient(90deg,var(--lilac),var(--indigo));border-radius:999px;}
.badge-tag{position:absolute;top:9px;right:9px;font-size:10px;padding:2px 7px;border-radius:999px;
  background:rgba(91,211,196,.18);color:var(--lilac);}
.badge-item.locked .badge-tag{background:var(--glass-stroke);color:var(--sub);}

.goal-list{display:flex;flex-direction:column;gap:10px;padding:0 2px 20px;}
.goal-item{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:16px;background:var(--glass);
  border:1px solid var(--glass-stroke);}
.goal-emoji{font-size:22px;flex:0 0 auto;}
.goal-main{flex:1 1 auto;min-width:0;}
.goal-title{font-size:14px;font-weight:600;}
.goal-sub{font-size:12px;color:var(--sub);margin-top:2px;}
.goal-pct{font-size:13px;font-weight:700;color:var(--lilac);flex:0 0 auto;}

/* ── 心情签到卡片（首页） ── */
.diary-card{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;}
.diary-card-bg{position:absolute;inset:0;border-radius:22px;background:linear-gradient(120deg,rgba(91,211,196,.16),rgba(108,123,240,.12));pointer-events:none;}
.diary-card-main{flex:1 1 auto;min-width:0;}
.diary-card-label{font-size:15px;font-weight:700;letter-spacing:.3px;}
.diary-card-sub{font-size:12.5px;color:var(--sub);margin-top:3px;}
.diary-card-emoji{font-size:30px;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));transition:transform .3s;}
.diary-card.done .diary-card-emoji{transform:scale(1.08);}

/* ── 心情趋势块（洞察） ── */
.ins-mood{display:flex;align-items:center;gap:14px;padding:16px;flex-wrap:wrap;}
.ins-mood-kpi{flex:0 0 auto;text-align:center;}
.ins-mood-kpi .big{font-size:30px;font-weight:800;background:linear-gradient(135deg,var(--violet),var(--indigo));-webkit-background-clip:text;background-clip:text;color:transparent;}
.ins-mood-kpi .lab{font-size:11px;color:var(--sub);margin-top:2px;}
.ins-mood-chart{flex:1 1 140px;min-width:140px;display:flex;align-items:flex-end;gap:6px;height:46px;}
.ins-mood-chart .mcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;}
.ins-mood-chart .mdot{width:100%;border-radius:6px;min-height:6px;transition:height .4s;}
.ins-mood-chart .mlab{font-size:9px;color:var(--sub);}
.ins-mood-sub{flex-basis:100%;font-size:12px;color:var(--sub);margin-top:2px;}

/* ── 本月心情日历（成长） ── */
.mood-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;padding:4px 2px 6px;}
.mood-cell{aspect-ratio:1;border-radius:10px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:11px;color:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.05);}
.mood-cell.m1{background:rgba(239,68,68,.42);color:#fff;}
.mood-cell.m2{background:rgba(249,115,22,.42);color:#fff;}
.mood-cell.m3{background:rgba(234,179,8,.40);color:#1a1a1a;}
.mood-cell.m4{background:rgba(56,189,248,.42);color:#fff;}
.mood-cell.m5{background:rgba(52,211,153,.46);color:#052e1a;}
.mood-cell.today{outline:2px solid rgba(255,255,255,.5);outline-offset:-1px;}
.mood-cal-legend{display:flex;justify-content:center;gap:10px;font-size:11px;color:var(--sub);padding-bottom:18px;}
.mood-cal-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-1px;}

/* ── 心情签到弹层 ── */
.diary-sheet{position:fixed;inset:0;z-index:60;display:none;align-items:flex-end;justify-content:center;
  background:rgba(8,10,25,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.diary-sheet.show{display:flex;animation:fadeIn .25s ease;}
.diary-sheet-card{width:100%;max-width:460px;background:#161a30;border-radius:24px 24px 0 0;padding:14px 20px calc(20px + env(safe-area-inset-bottom));
  border:1px solid rgba(255,255,255,.1);border-bottom:none;box-shadow:0 -10px 40px rgba(0,0,0,.4);animation:slideUp .3s ease;}
.diary-sheet-title{font-size:17px;font-weight:700;text-align:center;margin-bottom:2px;}
.diary-sheet-sub{font-size:12.5px;color:var(--sub);text-align:center;margin-bottom:14px;}
.diary-emoji-row{display:flex;justify-content:space-between;gap:6px;padding:4px 2px 16px;}
.diary-emoji{font-size:26px;width:46px;height:56px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:var(--fill-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:.2s;color:#fff;}
.diary-emoji span{font-size:9px;color:var(--sub);}
.diary-emoji.sel{background:linear-gradient(135deg,var(--violet),var(--indigo));transform:translateY(-3px);border-color:transparent;}
.diary-emoji.sel span{color:rgba(255,255,255,.85);}
.diary-note{width:100%;min-height:72px;resize:none;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:#fff;padding:12px;font-size:13.5px;font-family:inherit;outline:none;}
.diary-note:focus{border-color:rgba(91,211,196,.6);}
.diary-sheet-actions{display:flex;gap:10px;margin-top:14px;}
.diary-sheet-actions .sheet-btn{flex:1;padding:13px;border-radius:14px;border:none;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;}
.diary-sheet-actions .ghost{background:var(--glass-stroke);color:#fff;}
.diary-sheet-actions .primary{background:linear-gradient(135deg,var(--violet),var(--indigo));color:#fff;}

/* ══════════ 首启引导 Onboarding ══════════ */
.onb{
  position:fixed; inset:0; z-index:120; margin:0 auto; max-width:430px;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 70% at 12% -10%, rgba(76,91,224,.30), transparent 55%),
    radial-gradient(110% 60% at 92% 8%, rgba(91,211,196,.22), transparent 55%),
    radial-gradient(130% 80% at 50% 118%, rgba(108,123,240,.18), transparent 60%),
    #070A18;
  padding:calc(52px + env(safe-area-inset-top,0px)) 24px calc(26px + var(--safe-b));
  opacity:0; transition:opacity .38s ease; color:#fff;
}
.onb.show{opacity:1;}
.onb.leaving{opacity:0; pointer-events:none;}
.onb-skip{
  position:absolute; top:calc(50px + env(safe-area-inset-top,0px)); right:22px;
  background:none; border:none; color:var(--sub); font-family:inherit;
  font-size:13.5px; padding:6px 4px; cursor:pointer; transition:color .2s;
}
.onb-skip:hover{color:#fff;}
.onb-body{flex:1; position:relative; display:flex; align-items:center;}
.onb-step{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; gap:12px;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .34s ease, transform .34s cubic-bezier(.22,1,.36,1);
}
.onb-step.active{opacity:1; transform:none; pointer-events:auto;}
.onb-title{font-family:"Lora",serif; font-size:26px; font-weight:600; line-height:1.34; letter-spacing:.3px;}
.onb-desc{font-size:14.5px; line-height:1.75; color:var(--sub); margin-bottom:6px;}

/* 呼吸球 Hero */
.onb-orb{
  width:150px; height:150px; margin:0 auto 26px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(168,233,224,.95), var(--aurora) 42%, rgba(76,91,224,.55) 78%, transparent 82%);
  box-shadow:0 0 60px rgba(91,211,196,.34), inset 0 0 40px rgba(255,255,255,.16);
  display:grid; place-items:center; animation:onbBreathe 6.5s ease-in-out infinite;
}
.onb-orb span{
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
}
@keyframes onbBreathe{
  0%,100%{transform:scale(.9); opacity:.85;}
  50%{transform:scale(1.06); opacity:1;}
}

/* 目标卡 */
.onb-goals{display:flex; flex-direction:column; gap:12px; margin-top:8px;}
.onb-goal{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:15px 16px; border-radius:22px; cursor:pointer; font-family:inherit; color:#fff;
  background:var(--glass); border:1px solid var(--glass-stroke);
  transition:border-color .22s, background .22s, transform .18s;
}
.onb-goal:active{transform:scale(.985);}
.onb-goal-ico{
  width:44px; height:44px; flex:0 0 44px; border-radius:15px; display:grid; place-items:center;
  background:rgba(91,211,196,.14); color:var(--aurora); transition:background .22s;
}
.onb-goal-txt{flex:1; display:flex; flex-direction:column; gap:4px;}
.onb-goal-txt b{font-size:15.5px; font-weight:600;}
.onb-goal-txt i{font-style:normal; font-size:12.5px; color:var(--sub); line-height:1.5;}
.onb-goal-tick{
  width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid rgba(255,255,255,.22); color:#07130F; background:transparent;
  transition:background .22s, border-color .22s;
}
.onb-goal-tick svg{opacity:0; transition:opacity .2s;}
.onb-goal.sel{
  border-color:rgba(91,211,196,.62);
  background:linear-gradient(135deg, rgba(91,211,196,.16), rgba(108,123,240,.10));
}
.onb-goal.sel .onb-goal-ico{background:rgba(91,211,196,.24);}
.onb-goal.sel .onb-goal-tick{background:var(--aurora); border-color:var(--aurora);}
.onb-goal.sel .onb-goal-tick svg{opacity:1;}

/* 就寝时间胶囊 */
.onb-times{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px;}
.onb-time{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:18px 10px; border-radius:22px; cursor:pointer; font-family:inherit; color:#fff;
  background:var(--glass); border:1px solid var(--glass-stroke);
  transition:border-color .22s, background .22s, transform .18s;
}
.onb-time:active{transform:scale(.985);}
.onb-time b{font-family:"Lora",serif; font-size:22px; font-weight:600; letter-spacing:.5px;}
.onb-time i{font-style:normal; font-size:11.5px; color:var(--sub);}
.onb-time.sel{
  border-color:rgba(91,211,196,.62);
  background:linear-gradient(135deg, rgba(91,211,196,.18), rgba(108,123,240,.10));
}
.onb-time.sel b{color:var(--aurora);}

/* 底部：进度点 + 按钮 */
.onb-foot{display:flex; flex-direction:column; gap:18px;}
.onb-dots{display:flex; justify-content:center; gap:7px;}
.onb-dots i{
  width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.20);
  transition:width .28s ease, background .28s ease;
}
.onb-dots i.on{width:20px; background:var(--aurora);}
.onb-btns{display:flex; gap:11px;}
.onb-btn{
  flex:1; padding:16px 18px; border-radius:26px; font-family:inherit;
  font-size:15.5px; font-weight:600; cursor:pointer; border:1px solid transparent;
  transition:opacity .2s, transform .18s, background .22s;
}
.onb-btn:active{transform:scale(.985);}
.onb-btn.primary{
  background:linear-gradient(135deg, var(--aurora), var(--indigo2));
  color:#07130F; box-shadow:0 8px 24px rgba(91,211,196,.26);
}
.onb-btn.ghost{
  flex:0 0 106px; background:var(--fill);
  border-color:var(--glass-stroke); color:var(--sub);
}
.onb-btn[disabled]{opacity:.42; cursor:not-allowed; box-shadow:none;}

/* 「我的」页：重看引导入口 */
.onb-replay{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin:22px 0 6px; padding:14px 18px; border-radius:22px;
  background:var(--glass); border:1px solid var(--glass-stroke); color:var(--sub);
  font-family:inherit; font-size:14px; cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.onb-replay:active{transform:scale(.99);}
.onb-replay:hover{color:var(--aurora); border-color:rgba(91,211,196,.4);}

/* ══════════ 外观主题切换 · 设置卡片 ══════════ */
.theme-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin:0 2px 20px;}
.theme-card-label{font-size:14px;font-weight:600;}
.theme-opts{display:flex;gap:6px;}
.theme-opt{border:1px solid var(--glass-stroke);background:var(--fill);color:var(--text);
  font-family:inherit;font-size:12.5px;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.2s;}
.theme-opt:active{transform:scale(.96);}
.theme-opt.active{background:linear-gradient(135deg,var(--aurora),var(--indigo2));color:#07130F;border-color:transparent;font-weight:600;}

/* ══════════ 浅色主题 Light Mode（极光晨曦） ══════════
   柔白底 + 深墨文字 + 极光青点缀；不混入纯黑 / 高饱和紫，与极光夜色同一套设计语言 */
html[data-mode="light"]{
  --bg:#E9EEF6; --surface:#FFFFFF; --text:#16203A; --sub:#5A6790;
  --glass:rgba(255,255,255,.74); --glass-stroke:rgba(20,32,60,.14);
  --fill:rgba(20,32,60,.06); --fill-2:rgba(20,32,60,.04); --fill-strong:rgba(20,32,60,.13);
  color-scheme:light;
}
html[data-mode="light"] body{background:var(--bg);}
html[data-mode="light"] #app{
  background:
    radial-gradient(120% 70% at 12% -10%, rgba(76,91,224,.10), transparent 55%),
    radial-gradient(110% 60% at 92% 6%, rgba(91,211,196,.12), transparent 55%),
    radial-gradient(120% 80% at 50% 120%, rgba(108,123,240,.07), transparent 60%), #EEF2F9;
}
html[data-mode="light"] body[data-theme="night"] #app{
  background:
    radial-gradient(120% 70% at 12% -10%, rgba(46,43,120,.14), transparent 55%),
    radial-gradient(110% 60% at 92% 6%, rgba(91,211,196,.16), transparent 55%),
    radial-gradient(120% 80% at 50% 120%, rgba(76,91,224,.10), transparent 60%), #E7ECF5;
}
html[data-mode="light"] body[data-theme="dawn"] #app{
  background:
    radial-gradient(120% 70% at 15% -10%, rgba(251,146,60,.16), transparent 55%),
    radial-gradient(110% 60% at 95% 8%, rgba(244,114,182,.14), transparent 55%),
    radial-gradient(120% 80% at 50% 120%, rgba(91,211,196,.10), transparent 60%), #F2ECF3;
}
html[data-mode="light"] body[data-theme="day"] #app{
  background:
    radial-gradient(120% 70% at 15% -10%, rgba(56,189,248,.16), transparent 55%),
    radial-gradient(110% 60% at 95% 8%, rgba(91,211,196,.16), transparent 55%),
    radial-gradient(120% 80% at 50% 120%, rgba(129,140,248,.08), transparent 60%), #E9F0F7;
}
html[data-mode="light"] body[data-theme="dusk"] #app{
  background:
    radial-gradient(120% 70% at 15% -10%, rgba(236,72,153,.14), transparent 55%),
    radial-gradient(110% 60% at 95% 8%, rgba(108,123,240,.16), transparent 55%),
    radial-gradient(120% 80% at 50% 120%, rgba(76,91,224,.09), transparent 60%), #ECEAF6;
}
html[data-mode="light"] .glass{
  box-shadow:0 10px 28px rgba(20,32,60,.10), inset 0 1px 0 rgba(255,255,255,.70);
}
html[data-mode="light"] .icon-btn:active,
html[data-mode="light"] .ctrl:active,
html[data-mode="light"] .back-btn:active,
html[data-mode="light"] .date-step:active,
html[data-mode="light"] .resume-x:active,
html[data-mode="light"] .shuffle-btn:active{background:var(--fill-strong);}
html[data-mode="light"] .tabbar{
  background:rgba(255,255,255,.82);
  box-shadow:0 12px 30px rgba(20,32,60,.12), inset 0 1px 0 rgba(255,255,255,.80);
}
html[data-mode="light"] .tab.active{background:linear-gradient(90deg,var(--indigo2),var(--aurora));color:#fff;}
html[data-mode="light"] .tab.active svg{color:#fff;}
html[data-mode="light"] #toast{background:rgba(255,255,255,.96);color:var(--text);border-color:rgba(20,32,60,.14);
  box-shadow:0 10px 28px rgba(20,32,60,.14);}
html[data-mode="light"] .timer-pop{background:rgba(255,255,255,.97);color:var(--text);border-color:rgba(20,32,60,.14);
  box-shadow:0 12px 36px rgba(20,32,60,.18);}
html[data-mode="light"] .timer-pop-title{color:var(--sub);}
html[data-mode="light"] .sheet{background:linear-gradient(180deg,#FFFFFF,#F2F5FA);border-color:rgba(20,32,60,.14);}
html[data-mode="light"] .sheet-field input{color:var(--text);}
html[data-mode="light"] .sheet-btn.ghost{background:rgba(20,32,60,.06);color:var(--text);}
html[data-mode="light"] .diary-sheet{background:rgba(20,28,50,.42);}
html[data-mode="light"] .diary-sheet-card{background:#FFFFFF;border-color:rgba(20,32,60,.14);}
html[data-mode="light"] .diary-note,html[data-mode="light"] .diary-emoji{color:var(--text);}
html[data-mode="light"] .diary-emoji{border-color:rgba(20,32,60,.12);background:rgba(20,32,60,.04);}
html[data-mode="light"] .diary-sheet-actions .ghost{background:rgba(20,32,60,.06);color:var(--text);}
html[data-mode="light"] .breath-goal-custom input,html[data-mode="light"] .timer-custom input{color:var(--text);}
html[data-mode="light"] .progress{background:rgba(20,32,60,.10);}
html[data-mode="light"] .badge-prog{background:rgba(20,32,60,.12);}
html[data-mode="light"] .compose-bar{background:rgba(20,32,60,.08);}
html[data-mode="light"] .empty-title{color:var(--text);}
html[data-mode="light"] .plan-dur,html[data-mode="light"] .rec-tag,html[data-mode="light"] .rec-dur,
html[data-mode="light"] .mix-master-val,html[data-mode="light"] .resume-label,
html[data-mode="light"] .ins-tip b,html[data-mode="light"] .ins-level{color:#1F7A6E;}
html[data-mode="light"] .ins-tip{background:linear-gradient(120deg,rgba(108,123,240,.12),rgba(76,91,224,.08));border-color:rgba(91,211,196,.35);}
html[data-mode="light"] .offline-bar{background:rgba(255,245,232,.96);color:#3a2a12;border-color:rgba(240,180,120,.45);box-shadow:0 10px 30px rgba(20,32,60,.16);}
html[data-mode="light"] .offline-bar.ok{background:rgba(232,249,245,.96);color:#0c2b27;border-color:rgba(91,211,196,.45);}
html[data-mode="light"] .skel-card{background:linear-gradient(100deg,rgba(20,32,60,.05) 30%,rgba(20,32,60,.11) 50%,rgba(20,32,60,.05) 70%);}
html[data-mode="light"] .sk{background:rgba(20,32,60,.06);}
html[data-mode="light"] .sk::after{background:linear-gradient(100deg,transparent 16%,rgba(20,32,60,.08) 46%,transparent 76%);}
html[data-mode="light"] .mood-cell{background:rgba(20,32,60,.05);color:rgba(20,32,60,.40);border-color:rgba(20,32,60,.06);}
html[data-mode="light"] .mood-cell.today{outline:2px solid rgba(20,32,60,.5);}
html[data-mode="light"] .install-chip{box-shadow:0 4px 16px rgba(42,42,114,.25);}

/* 账户登录 / 注册层 */
.auth-overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(2,6,23,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .36s ease;}
.auth-overlay.show{opacity:1;pointer-events:auto;}
.auth-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--glass-stroke);
  border-radius:26px;padding:30px 24px 26px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(16px) scale(.98);transition:transform .36s cubic-bezier(.2,.8,.2,1);}
.auth-overlay.show .auth-card{transform:none;}
.auth-orb{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;
  background:radial-gradient(circle at 35% 30%, var(--lilac), var(--indigo2) 60%, var(--indigo));
  box-shadow:0 0 28px rgba(91,211,196,.45);animation:authpulse 3.2s ease-in-out infinite;}
@keyframes authpulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.06);opacity:1}}
.auth-title{font-family:"Lora",serif;font-size:23px;font-weight:700;margin-bottom:8px;}
.auth-sub{color:var(--sub);font-size:13.5px;line-height:1.6;margin-bottom:20px;}
.auth-tabs{display:flex;gap:6px;background:rgba(255,255,255,.06);border-radius:14px;padding:4px;margin-bottom:16px;}
.auth-tab{flex:1;border:0;background:transparent;color:var(--sub);font-size:14px;font-weight:600;
  padding:9px 0;border-radius:11px;cursor:pointer;transition:.2s;}
.auth-tab.active{background:linear-gradient(135deg,var(--indigo2),var(--lilac));color:#fff;
  box-shadow:0 6px 16px rgba(76,91,224,.4);}
.auth-field{margin-bottom:11px;}
.auth-field input{width:100%;height:46px;border-radius:14px;border:1px solid var(--glass-stroke);
  background:rgba(255,255,255,.05);color:var(--text);font-size:15px;padding:0 15px;outline:none;
  transition:border-color .2s, box-shadow .2s;font-family:inherit;}
.auth-field input::placeholder{color:rgba(154,166,194,.7);}
.auth-field input:focus{border-color:var(--lilac);box-shadow:0 0 0 3px rgba(91,211,196,.18);}
.auth-error{color:var(--warn-deep);font-size:12.5px;margin:-2px 0 10px;min-height:0;}
.auth-btn{width:100%;height:48px;border:0;border-radius:14px;font-size:15.5px;font-weight:700;
  cursor:pointer;transition:.18s;font-family:inherit;margin-top:6px;}
.auth-btn.primary{background:linear-gradient(135deg,var(--indigo2),var(--lilac));color:#fff;
  box-shadow:0 10px 26px rgba(76,91,224,.42);}
.auth-btn.primary:active{transform:scale(.98);}
.auth-btn.primary:disabled{opacity:.6;cursor:default;}
.auth-btn.ghost{background:transparent;color:var(--sub);font-weight:600;font-size:14px;margin-top:10px;}
.auth-btn.ghost:active{color:var(--text);}

/* 「我的」页账户卡片 */
.account-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;}
.account-card-label{font-size:13px;color:var(--sub);}
.account-card-btn{border:0;background:linear-gradient(135deg,var(--indigo2),var(--lilac));color:#fff;
  font-size:13.5px;font-weight:700;padding:9px 16px;border-radius:12px;cursor:pointer;white-space:nowrap;
  box-shadow:0 6px 16px rgba(76,91,224,.35);font-family:inherit;}
.account-card-btn:active{transform:scale(.97);}
.account-card-actions{display:flex;align-items:center;gap:8px;}
.account-card-btn.ghost{background:transparent;color:var(--sub);border:1px solid var(--glass-stroke);box-shadow:none;}
.account-card-btn.ghost:active{transform:scale(.97);}
html[data-mode="light"] .account-card{background:rgba(255,255,255,.7);border-color:rgba(20,32,60,.1);}
html[data-mode="light"] .auth-card{background:#fff;border-color:rgba(20,32,60,.12);}
html[data-mode="light"] .auth-title{color:#1a2240;}
html[data-mode="light"] .auth-sub{color:#5b6480;}
html[data-mode="light"] .auth-field input{background:rgba(20,32,60,.05);color:#1a2240;border-color:rgba(20,32,60,.12);}
html[data-mode="light"] .auth-tab{color:#5b6480;}

/* 引导冥想播放器：呼吸光球 + 进度条 */
.guided-orb{
  flex:1 1 auto; align-self:center; width:min(62vw,260px); aspect-ratio:1/1; border-radius:50%;
  margin:auto; position:relative;
  background:radial-gradient(circle at 50% 42%, rgba(167,139,250,.95), rgba(99,102,241,.55) 48%, rgba(99,102,241,0) 72%);
  box-shadow:0 0 80px rgba(124,123,240,.45), inset 0 0 50px rgba(255,255,255,.18);
  animation:guidedPulse 7s ease-in-out infinite;
}
@keyframes guidedPulse{
  0%,100%{transform:scale(.92);opacity:.85;}
  50%{transform:scale(1.06);opacity:1;}
}
.guided-progress{position:relative;z-index:2;height:4px;border-radius:4px;background:rgba(255,255,255,.16);margin:14px auto 6px;max-width:340px;overflow:hidden;}
.guided-bar{height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--indigo));border-radius:4px;transition:width .25s linear;}
.guided-time{position:relative;z-index:2;text-align:center;font-size:12px;color:rgba(255,255,255,.6);letter-spacing:1px;}