/* ============================================================
   呼吸 · 日间节律 — Liquid Glass × 橄榄绿
   ============================================================ */
:root{
  --olive-1:#161c10;
  --olive-2:#222b16;
  --olive-3:#37451f;
  --olive-4:#566b30;
  --olive-5:#7e9a45;
  --olive-glow:#b6d36a;
  --sage:#d2e3a6;
  --cream:#f1f5e6;
  --text:#f1f5e6;
  --text-dim:rgba(241,245,230,.62);
  --text-faint:rgba(241,245,230,.34);
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.10);
  --glass-line:rgba(255,255,255,.14);
  --glass-hi:rgba(255,255,255,.4);
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

@property --bloom{ syntax:'<number>'; inherits:true; initial-value:0; }

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  background:var(--olive-1);color:var(--text);
  overflow:hidden;position:relative;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

/* ===== 背景：流动极光 ===== */
.bg-aurora{
  position:fixed;inset:-25%;z-index:0;
  background:
    radial-gradient(55% 45% at 22% 18%, rgba(126,154,69,.55), transparent 68%),
    radial-gradient(45% 40% at 82% 12%, rgba(86,107,48,.45), transparent 70%),
    radial-gradient(65% 55% at 72% 92%, rgba(55,69,31,.6), transparent 72%),
    radial-gradient(40% 40% at 12% 88%, rgba(182,211,106,.25), transparent 70%),
    linear-gradient(165deg, var(--olive-2), var(--olive-1) 62%);
  filter:saturate(1.08);animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
  100%{transform:translate3d(-4%,3%,0) scale(1.1) rotate(2deg);}
}
.bg-grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== 视图容器 ===== */
#app{position:relative;z-index:2;height:100%;}
.view{
  position:absolute;inset:0;
  padding:calc(var(--safe-t) + 30px) 22px calc(var(--safe-b) + 24px);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(20px) scale(.98);
  transition:opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
  overflow-y:auto;
}
.view.is-active{opacity:1;visibility:visible;transform:none;}
.view::-webkit-scrollbar{display:none;}
.view{scrollbar-width:none;}

/* ===== 首页 ===== */
.home-head{margin-top:18px;}
.greeting{font-size:15px;color:var(--text-dim);font-weight:500;letter-spacing:.04em;}
.home-title{
  font-size:42px;line-height:1.1;font-weight:700;margin-top:12px;letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--cream) 20%,var(--sage));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.home-sub{margin-top:16px;color:var(--text-dim);font-size:15px;}

.cards{display:flex;flex-direction:column;gap:14px;margin-top:38px;}
.card{
  position:relative;display:flex;align-items:center;gap:16px;
  padding:20px;border-radius:26px;border:1px solid var(--glass-line);
  background:var(--glass);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  text-align:left;color:var(--text);cursor:pointer;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.22), inset 0 1px 0 var(--glass-hi), inset 0 -1px 1px rgba(0,0,0,.15);
  transition:transform .45s var(--spring), border-color .4s, background .4s;
  animation:cardIn .7s var(--ease) backwards;
}
.card:nth-child(1){animation-delay:.05s;}
.card:nth-child(2){animation-delay:.13s;}
.card:nth-child(3){animation-delay:.21s;}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.96);}to{opacity:1;transform:none;}}
.card:active{transform:scale(.965);background:var(--glass-2);}
.card-glow{
  position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(80% 90% at 10% 0%, rgba(182,211,106,.28), transparent 60%);
}
.card:active .card-glow{opacity:1;}
.card-icon{
  flex:none;width:60px;height:60px;border-radius:20px;position:relative;
  display:grid;place-items:center;
  background:linear-gradient(150deg, rgba(182,211,106,.22), rgba(55,69,31,.18));
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.card-icon .ic{width:27px;height:27px;fill:none;stroke:var(--sage);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.card-body{flex:1;min-width:0;}
.card-body h2{font-size:18px;font-weight:600;letter-spacing:-.01em;}
.card-body p{font-size:13px;color:var(--text-dim);margin-top:5px;line-height:1.4;}
.card-tag{
  display:inline-block;margin-top:11px;font-size:11px;font-weight:600;
  padding:4px 11px;border-radius:999px;color:var(--olive-1);
  background:linear-gradient(135deg,var(--sage),var(--olive-glow));
}
.card-arrow{width:22px;height:22px;flex:none;fill:none;stroke:var(--text-faint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--spring);}
.card:active .card-arrow{transform:translateX(4px);}
.home-foot{margin-top:auto;text-align:center;color:var(--text-faint);font-size:12px;padding-top:28px;letter-spacing:.04em;}

/* ===== 通用控件 ===== */
.back{
  position:absolute;top:calc(var(--safe-t) + 22px);left:16px;z-index:5;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-line);
  background:var(--glass);backdrop-filter:blur(16px);display:grid;place-items:center;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--glass-hi);transition:transform .35s var(--spring);
}
.back:active{transform:scale(.88);}
.back svg{width:22px;height:22px;fill:none;stroke:var(--sage);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.view-title{font-size:28px;font-weight:700;margin-top:50px;letter-spacing:-.02em;}

.btn-solid,.btn-ghost{
  font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;border:none;
  border-radius:18px;padding:16px 30px;transition:transform .3s var(--spring),opacity .3s,box-shadow .3s;
}
.btn-solid{
  color:var(--olive-1);
  background:linear-gradient(135deg,var(--sage),var(--olive-glow));
  box-shadow:0 10px 30px rgba(182,211,106,.32), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-ghost{color:var(--text-dim);background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(12px);}
.btn-solid:active,.btn-ghost:active{transform:scale(.95);}

/* ============================================================
   花瓣呼吸 — Apple Watch 风格绽放
   ============================================================ */
.bloom{
  --bloom:.3;
  position:relative;width:240px;height:240px;
  display:grid;place-items:center;
  transform:scale(calc(.78 + var(--bloom)*.34)) rotate(calc(var(--bloom)*45deg));
  transition:transform var(--breath-dur,4s) var(--ease), --bloom var(--breath-dur,4s) var(--ease);
}
.bloom .petal{
  position:absolute;top:50%;left:50%;width:108px;height:108px;margin:-54px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(214,231,170,.62), rgba(126,154,69,.42) 62%, rgba(86,107,48,0) 78%);
  mix-blend-mode:screen;
  transform:rotate(var(--a)) translateY(calc(-30px - var(--bloom) * 26px));
  transition:transform var(--breath-dur,4s) var(--ease);
}
.bloom .petal:nth-child(1){--a:0deg;}
.bloom .petal:nth-child(2){--a:60deg;}
.bloom .petal:nth-child(3){--a:120deg;}
.bloom .petal:nth-child(4){--a:180deg;}
.bloom .petal:nth-child(5){--a:240deg;}
.bloom .petal:nth-child(6){--a:300deg;}

.bloom.inhale{--bloom:1;}
.bloom.exhale{--bloom:.06;}
.bloom.hold{}
.bloom.paused, .bloom.paused .petal{transition-duration:.3s !important;}

/* 中心文字（浮在花心，带柔光衬底保证可读） */
.orb-core{
  position:absolute;z-index:3;display:grid;place-items:center;text-align:center;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle, rgba(241,245,230,.16), rgba(241,245,230,0) 68%);
}
.orb-text{font-size:23px;font-weight:600;color:var(--cream);letter-spacing:.08em;text-shadow:0 1px 3px rgba(22,28,16,.45);}
.orb-count{position:absolute;bottom:2px;font-size:13px;color:rgba(241,245,230,.6);font-weight:700;}

/* 首页 mini 花朵 */
.bloom-mini{position:relative;width:34px;height:34px;display:block;}
.bloom-mini .petal{
  position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(214,231,170,.8), rgba(126,154,69,.3) 70%, transparent 80%);
  mix-blend-mode:screen;
  transform:rotate(var(--a)) translateY(-8px);
}
.bloom-mini .petal:nth-child(1){--a:0deg;}.bloom-mini .petal:nth-child(2){--a:60deg;}
.bloom-mini .petal:nth-child(3){--a:120deg;}.bloom-mini .petal:nth-child(4){--a:180deg;}
.bloom-mini .petal:nth-child(5){--a:240deg;}.bloom-mini .petal:nth-child(6){--a:300deg;}
.bloom-mini{animation:miniBreathe 5s var(--ease) infinite;}
@keyframes miniBreathe{0%,100%{transform:scale(.82) rotate(0deg);}50%{transform:scale(1.08) rotate(30deg);}}

/* 完成态 / 弹层花朵：静态绽放 + 缓慢呼吸 */
.done-orb{width:130px;height:130px;border-radius:50%;margin:0 auto 26px;
  background:radial-gradient(circle at 40% 34%, var(--sage), var(--olive-5) 62%, var(--olive-3));
  box-shadow:0 0 60px rgba(182,211,106,.5), inset 0 -10px 28px rgba(55,69,31,.4), inset 0 3px 10px rgba(255,255,255,.5);
  animation:doneBreath 6s var(--ease) infinite;}
@keyframes doneBreath{0%,100%{transform:scale(.82);}50%{transform:scale(1.04);}}
.nudge-bloom{width:120px;height:120px;margin:0 auto 22px;--bloom:.7;animation:nudgeBloom 5s var(--ease) infinite;}
@keyframes nudgeBloom{0%,100%{--bloom:.3;transform:rotate(0) scale(.8);}50%{--bloom:1;transform:rotate(40deg) scale(1.05);}}

/* ===== 呼吸：选择模式 ===== */
.breathe-setup{margin-top:6px;}
.mode-list{display:flex;flex-direction:column;gap:14px;margin-top:30px;}
.mode-item{
  position:relative;text-align:left;padding:22px;border-radius:24px;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(20px) saturate(1.4);color:var(--text);overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.2), inset 0 1px 0 var(--glass-hi);
  transition:transform .4s var(--spring),background .35s;
  animation:cardIn .6s var(--ease) backwards;
}
.mode-item:nth-child(1){animation-delay:.05s;}.mode-item:nth-child(2){animation-delay:.12s;}.mode-item:nth-child(3){animation-delay:.19s;}
.mode-item:active{transform:scale(.97);background:var(--glass-2);}
.mode-item h3{font-size:19px;font-weight:600;display:flex;align-items:center;gap:11px;letter-spacing:-.01em;}
.mode-item .dot{width:11px;height:11px;border-radius:50%;background:var(--olive-glow);box-shadow:0 0 12px var(--olive-glow);}
.mode-item p{font-size:13px;color:var(--text-dim);margin-top:7px;line-height:1.5;}
.mode-item .pattern{margin-top:14px;display:flex;gap:7px;}
.mode-item .pattern span{
  font-size:11px;font-weight:600;padding:5px 11px;border-radius:9px;
  background:rgba(182,211,106,.16);color:var(--sage);border:1px solid rgba(182,211,106,.2);
}

/* ===== 呼吸：进行态 ===== */
.breathe-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.stage-mode{font-size:14px;color:var(--text-dim);font-weight:600;letter-spacing:.1em;}
.orb-wrap{position:relative;width:280px;height:280px;display:grid;place-items:center;margin:34px 0;}
.stage-cycle{font-size:14px;color:var(--text-faint);font-weight:600;letter-spacing:.04em;}
.stage-ctrl{display:flex;gap:14px;margin-top:46px;}

.breathe-done,.aware-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;}
.breathe-done h2,.aware-done h2{font-size:27px;font-weight:700;letter-spacing:-.02em;}
.breathe-done p,.aware-done p{color:var(--text-dim);font-size:15px;max-width:280px;margin-bottom:16px;line-height:1.6;}
.breathe-done .btn-solid,.aware-done .btn-solid{width:210px;}

/* ===== 短时觉察 ===== */
.aware-intro{flex:1;display:flex;flex-direction:column;justify-content:center;}
.aware-lead{color:var(--text-dim);font-size:16px;line-height:1.7;margin:20px 0 34px;}
.aware-intro .btn-solid{align-self:flex-start;}
.aware-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.aware-progress{display:flex;gap:8px;margin-bottom:34px;}
.aware-progress span{width:28px;height:4px;border-radius:2px;background:var(--glass-line);transition:background .5s,box-shadow .5s;}
.aware-progress span.on{background:var(--olive-glow);box-shadow:0 0 10px rgba(182,211,106,.6);}
.aware-step-no{font-size:13px;color:var(--text-faint);font-weight:700;letter-spacing:.12em;}
.aware-text{font-size:26px;font-weight:600;line-height:1.45;margin:16px 0;max-width:300px;
  background:linear-gradient(120deg,var(--cream),var(--sage));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:fadeUp .6s var(--ease);}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.aware-hint{color:var(--text-dim);font-size:15px;max-width:280px;line-height:1.65;}
.aware-timer-ring{width:88px;height:88px;margin:34px 0;}
.aware-timer-ring svg{transform:rotate(-90deg);width:100%;height:100%;}
.ring-bg{fill:none;stroke:var(--glass-line);stroke-width:4;}
.ring-fg{fill:none;stroke:var(--olive-glow);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:339;stroke-dashoffset:339;filter:drop-shadow(0 0 6px rgba(182,211,106,.6));}

/* ===== 日间节律 ===== */
.rhythm-lead{color:var(--text-dim);font-size:16px;line-height:1.7;margin:18px 0 30px;}
.rhythm-card{background:var(--glass);border:1px solid var(--glass-line);border-radius:24px;backdrop-filter:blur(20px) saturate(1.4);overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.2),inset 0 1px 0 var(--glass-hi);}
.rhythm-row{display:flex;align-items:center;justify-content:space-between;padding:19px 20px;border-bottom:1px solid var(--glass-line);}
.rhythm-row:last-child{border-bottom:none;}
.rhythm-row>span{font-size:15px;font-weight:500;}
.seg{display:flex;gap:4px;background:rgba(0,0,0,.22);border-radius:13px;padding:4px;}
.seg button{font-family:inherit;font-size:13px;font-weight:600;color:var(--text-dim);border:none;background:transparent;padding:8px 13px;border-radius:10px;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s;}
.seg button.on{background:linear-gradient(135deg,var(--olive-4),var(--olive-5));color:var(--cream);box-shadow:0 2px 8px rgba(0,0,0,.25);}
.switch{width:54px;height:32px;border-radius:999px;border:none;background:rgba(0,0,0,.3);position:relative;cursor:pointer;transition:background .4s var(--ease);}
.switch[aria-checked="true"]{background:linear-gradient(135deg,var(--olive-5),var(--olive-glow));box-shadow:0 0 16px rgba(182,211,106,.4);}
.switch .knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--cream);transition:transform .4s var(--spring);box-shadow:0 2px 6px rgba(0,0,0,.35);}
.switch[aria-checked="true"] .knob{transform:translateX(22px);}
.rhythm-status{margin-top:28px;text-align:center;}
.rhythm-next{font-size:15px;color:var(--text-dim);font-weight:500;}
.rhythm-bar{height:6px;border-radius:3px;background:var(--glass-line);margin-top:14px;overflow:hidden;}
.rhythm-bar span{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--olive-5),var(--olive-glow));box-shadow:0 0 10px rgba(182,211,106,.5);transition:width 1s linear;}
.rhythm-note{margin-top:auto;color:var(--text-faint);font-size:12px;line-height:1.7;padding-top:26px;}

/* ===== 提醒弹层 ===== */
.nudge{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:rgba(12,16,8,.62);backdrop-filter:blur(10px);opacity:0;transition:opacity .4s var(--ease);}
.nudge.show{opacity:1;}
.nudge-card{background:linear-gradient(165deg,rgba(55,69,31,.85),rgba(34,43,22,.9));border:1px solid var(--glass-line);border-radius:30px;padding:38px 28px;text-align:center;max-width:340px;width:100%;backdrop-filter:blur(20px);box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 var(--glass-hi);transform:scale(.88) translateY(24px);transition:transform .5s var(--spring);}
.nudge.show .nudge-card{transform:none;}
.nudge-card h3{font-size:23px;font-weight:700;letter-spacing:-.01em;}
.nudge-card p{color:var(--text-dim);font-size:14px;margin:11px 0 24px;line-height:1.6;}
.nudge-card .btn-solid{width:100%;margin-bottom:10px;}
.nudge-card .btn-ghost{width:100%;}

/* ===== 呼吸动画容器共用 ===== */
.anim-box,.anim-sigh,.anim-ring{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin:28px 0;
}
.stage-core{
  position:relative;z-index:3;display:grid;place-items:center;text-align:center;
  width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle, rgba(241,245,230,.13), rgba(241,245,230,0) 68%);
  margin:18px 0 0;
}

/* ===== 箱式呼吸：方形轨道 ===== */
.anim-box{position:relative;}
.box-track{
  position:relative;width:180px;height:180px;
  border:2px solid rgba(182,211,106,.3);border-radius:18px;
  box-shadow:0 0 24px rgba(182,211,106,.08),inset 0 0 20px rgba(182,211,106,.04);
}
.box-dot{
  position:absolute;width:14px;height:14px;border-radius:50%;
  background:var(--olive-glow);
  box-shadow:0 0 14px rgba(182,211,106,.9),0 0 4px rgba(182,211,106,1);
  transform:translate(-50%,-50%);
  left:0%;top:100%;
  transition:none;
}
.box-label{
  position:absolute;font-size:11px;font-weight:700;color:var(--text-faint);
  letter-spacing:.08em;pointer-events:none;
}
.box-label.top   {top:-22px;left:50%;transform:translateX(-50%);}
.box-label.right {right:-34px;top:50%;transform:translateY(-50%);}
.box-label.bottom{bottom:-22px;left:50%;transform:translateX(-50%);}
.box-label.left  {left:-34px;top:50%;transform:translateY(-50%);}

/* ===== 生理叹息：波形路径 ===== */
.anim-sigh{gap:10px;}
.sigh-svg{width:260px;height:130px;overflow:visible;}
.sigh-track{
  fill:none;stroke:rgba(182,211,106,.25);stroke-width:2.5;stroke-linecap:round;
}
.sigh-dot{
  fill:var(--olive-glow);
  filter:drop-shadow(0 0 6px rgba(182,211,106,.9));
}
.sigh-labels{
  display:flex;justify-content:space-between;width:260px;
  font-size:11px;font-weight:700;color:var(--text-faint);letter-spacing:.07em;
}

/* ===== 4-7-8：圆弧 ===== */
.anim-ring{position:relative;}
.ring-svg{width:200px;height:200px;}
.ring-bg-c{
  fill:none;stroke:rgba(255,255,255,.07);stroke-width:6;
}
.ring-fill{
  fill:none;stroke:var(--olive-glow);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:0 628;
  transform-origin:120px 120px;transform:rotate(-90deg);
  filter:drop-shadow(0 0 8px rgba(182,211,106,.7));
}
.ring-dot478{
  fill:var(--olive-glow);
  filter:drop-shadow(0 0 8px rgba(182,211,106,1));
}
.ring478-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:16px;font-weight:700;color:var(--cream);letter-spacing:.06em;
  text-shadow:0 1px 4px rgba(22,28,16,.5);
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;}
  .bloom,.bloom .petal{transition-duration:.4s !important;}
}