/* ============================================
   重获 · 全站设计系统
   单一主色 + 中性背景，所有页面共用
   ============================================ */

:root{
  /* 主色：teal 一个色相，靠明度变化出层次 */
  --c-primary:#0f7b6c;
  --c-primary-mid:#14907e;
  --c-primary-soft:#e6f5f2;
  --c-primary-softer:#f2faf8;
  --c-primary-ink:#0a5a4f;

  /* 中性：唯一灰阶来源 */
  --c-bg:#f6f8f7;
  --c-surface:#ffffff;
  --c-line:#e4eae8;
  --c-line-soft:#eef2f0;
  --c-ink:#16211f;
  --c-ink-2:#3d4a47;
  --c-ink-3:#6b7673;
  --c-ink-4:#98a19f;

  /* 语义色：仅用于状态，不参与装饰 */
  --c-warn:#c2760a;
  --c-warn-soft:#fdf6e7;
  --c-alert:#b03a52;
  --c-alert-soft:#fceef1;
  --c-ok-ink:#0f7b6c;

  /* 排版：单一字族 + 4 级字号，够用不冗余 */
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --t-hero:52px;    /* 计时主数字 */
  --t-xl:26px;      /* 页面主标题 */
  --t-lg:19px;      /* 卡片标题 */
  --t-md:15px;      /* 正文 */
  --t-sm:13px;      /* 辅助 */
  --t-xs:11.5px;    /* 标签 */

  /* 间距 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:26px; --sp-7:34px;

  /* 圆角与阴影 */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:999px;
  --sh-1:0 1px 2px rgba(22,33,31,.04);
  --sh-2:0 4px 18px rgba(15,123,108,.10);
  --sh-3:0 8px 32px rgba(15,123,108,.16);

  /* 动效 */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:160ms; --dur:280ms; --dur-slow:480ms;
}

/* ── 基础 ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);background:var(--c-bg);color:var(--c-ink);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
h1,h2,h3,p{margin:0}
button,input{font-family:inherit;font-size:inherit}
button{cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

.wrap{max-width:540px;margin:0 auto;padding:0 var(--sp-4)}

/* ── 顶部栏（全站统一） ── */
.app-header{background:var(--c-primary);color:#fff;padding:var(--sp-4) 0}
.header-inner{display:flex;align-items:center;gap:var(--sp-3)}
.header-text h1{font-size:var(--t-lg);font-weight:600;line-height:1.3}
.header-text p{font-size:var(--t-sm);color:#b9e2d9;margin-top:2px}
.back{
  width:34px;height:34px;flex:0 0 34px;border-radius:var(--r-full);
  background:rgba(255,255,255,.14);display:grid;place-items:center;
  font-size:19px;line-height:1;transition:background var(--dur-fast) var(--ease);
}
.back:hover{background:rgba(255,255,255,.26)}

/* ── 卡片 / 面板 ── */
.panel{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:var(--sp-5);margin-bottom:var(--sp-3);
  box-shadow:var(--sh-1);
}
.panel-title{
  font-size:var(--t-md);font-weight:600;display:flex;
  align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);
}
.panel-title.center{justify-content:center;text-align:center;display:block}
.panel-desc{font-size:var(--t-sm);color:var(--c-ink-3);margin-bottom:var(--sp-4)}

/* ── 按钮 ── */
.btn-main,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 var(--sp-5);border-radius:var(--r-sm);
  font-size:var(--t-md);font-weight:600;
  transition:transform var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.btn-main{background:var(--c-primary);color:#fff}
.btn-main:hover{background:var(--c-primary-ink)}
.btn-main:active{transform:scale(.98)}
.btn-ghost{background:var(--c-surface);color:var(--c-primary);border:1.5px solid var(--c-primary)}
.btn-ghost:hover{background:var(--c-primary-soft)}
.btn-ghost:active{transform:scale(.98)}
.btn-main:disabled{background:#c3cfcc;cursor:not-allowed;transform:none}

/* ── 步骤器 ── */
.field-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.field-row.single{grid-template-columns:1fr auto;margin-top:var(--sp-4);
  padding-top:var(--sp-4);border-top:1px solid var(--c-line-soft)}
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field-label{font-size:var(--t-sm);color:var(--c-ink-3);font-weight:500}
.stepper{
  display:flex;align-items:center;background:var(--c-surface);
  border:1.5px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease);
}
.stepper:focus-within{border-color:var(--c-primary)}
.step-btn{
  width:32px;height:42px;flex:0 0 32px;color:var(--c-primary);
  font-size:17px;font-weight:500;transition:background var(--dur-fast) var(--ease);
}
.step-btn:hover{background:var(--c-primary-soft)}
.step-btn:active{background:var(--c-primary-soft)}
.stepper input{
  flex:1;min-width:0;width:100%;border:none;text-align:center;
  font-size:var(--t-md);font-weight:600;color:var(--c-ink);
  padding:0;background:transparent;
}
.stepper input:focus{outline:none}
.unit{padding-right:var(--sp-2);font-size:var(--t-xs);color:var(--c-ink-4);flex:0 0 auto}
.stepper.invalid{border-color:var(--c-alert)}

.preset-row{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--c-line-soft);
}
.preset-label{font-size:var(--t-xs);color:var(--c-ink-4)}
.preset{
  padding:6px 12px;border:1px solid var(--c-line);border-radius:var(--r-full);
  font-size:var(--t-xs);color:var(--c-ink-2);background:var(--c-surface);
  transition:all var(--dur-fast) var(--ease);
}
.preset:hover{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-softer)}
.preset.on{background:var(--c-primary);border-color:var(--c-primary);color:#fff}

.cycle-total{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-2)}
.cycle-total strong{font-size:var(--t-md);color:var(--c-primary);font-variant-numeric:tabular-nums}

/* ── 开关 ── */
.loop-row{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--c-line-soft)}
.switch{display:flex;align-items:center;gap:var(--sp-3);cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-track{
  width:44px;height:26px;flex:0 0 44px;border-radius:var(--r-full);
  background:#ccd5d3;position:relative;transition:background var(--dur) var(--ease);
}
.switch-track i{
  position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;
  top:3px;left:3px;box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform var(--dur) var(--ease-out);
}
.switch input:checked + .switch-track{background:var(--c-primary)}
.switch input:checked + .switch-track i{transform:translateX(18px)}
.switch input:focus-visible + .switch-track{outline:2px solid var(--c-primary);outline-offset:2px}
.switch-text{font-size:var(--t-sm);color:var(--c-ink-2)}
.switch-text small{display:block;font-size:var(--t-xs);color:var(--c-ink-4);margin-top:1px}

/* ── 底部导航（全站统一，5+1 结构） ── */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;background:var(--c-surface);
  border-top:1px solid var(--c-line);z-index:60;
  padding:5px 0 calc(5px + env(safe-area-inset-bottom));
}
.tabbar .wrap{display:flex;padding:0;max-width:none}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 1px;color:var(--c-ink-4);font-size:10px;
  transition:color var(--dur-fast) var(--ease);
}
.tab .ico{
  width:22px;height:22px;flex:0 0 22px;position:relative;
  display:grid;place-items:center;
}
/* 统一用 CSS 绘制的线性图标，避免 emoji 风格不一致 */
.tab .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--c-primary);font-weight:600}
.tab.accent{color:var(--c-warn)}
.tab.accent.on{color:var(--c-primary)}

/* ── 提示条 ── */
.note{
  background:var(--c-warn-soft);border:1px solid #f3e0b8;border-radius:var(--r-sm);
  padding:var(--sp-3);font-size:var(--t-xs);color:#7d5410;line-height:1.75;
}
.note b{color:#5f3f09}
.alert-box{
  background:var(--c-alert-soft);border:1px solid #f4d0d8;border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);font-size:var(--t-sm);color:#8c2b3f;
  line-height:1.7;margin-bottom:var(--sp-3);
}
.alert-box b{font-weight:600}
.ok-box{
  background:var(--c-primary-soft);border:1px solid #bfe5dd;border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);font-size:var(--t-sm);color:var(--c-primary-ink);
  line-height:1.7;margin-bottom:var(--sp-3);
}

/* ── 标签 ── */
.tag{
  display:inline-block;font-size:var(--t-xs);padding:2px 7px;border-radius:4px;
  background:var(--c-primary-soft);color:var(--c-primary-ink);font-weight:500;
}
.tag.alert{background:var(--c-alert-soft);color:var(--c-alert)}
.tag.warn{background:var(--c-warn-soft);color:var(--c-warn)}
.tag.mute{background:var(--c-line-soft);color:var(--c-ink-3)}

/* ── 统计块 ── */
.stats-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-bottom:var(--sp-3)}
.stat{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-2);text-align:center;
}
.stat .n{
  font-size:var(--t-xl);font-weight:700;color:var(--c-primary);line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.stat .n.warn{color:var(--c-warn)}
.stat .n.alert{color:var(--c-alert)}
.stat .l{font-size:var(--t-xs);color:var(--c-ink-3);margin-top:3px}

/* ── 列表行 ── */
.row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--c-line-soft);
}
.row:last-child{border-bottom:none}
.row .body{flex:1;min-width:0}
.row .t1{font-size:var(--t-md);font-weight:500}
.row .t2{font-size:var(--t-xs);color:var(--c-ink-3);margin-top:2px}
.row .val{font-size:var(--t-md);font-weight:600;color:var(--c-primary);
  font-variant-numeric:tabular-nums;flex:0 0 auto}

/* ── 空态 ── */
.empty{
  text-align:center;padding:var(--sp-6) var(--sp-4);color:var(--c-ink-4);font-size:var(--t-sm);
}

/* ── 页脚 ── */
.app-footer{
  text-align:center;font-size:var(--t-xs);color:var(--c-ink-4);
  padding:var(--sp-4);line-height:1.9;
}

/* ============================================
   呼吸练习专属
   ============================================ */
.page-breath{
  padding-bottom:var(--sp-6);
  background:radial-gradient(120% 60% at 50% 0%,var(--c-primary-softer) 0%,var(--c-bg) 55%);
}

.breath-stage{padding:var(--sp-6) 0 var(--sp-5);text-align:center}
.orb-wrap{
  position:relative;width:min(272px,72vw);aspect-ratio:1;
  margin:0 auto var(--sp-4);
}

/* 进度环 */
.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:2.5}
.ring-track{stroke:var(--c-line)}
.ring-glow{
  stroke:var(--c-primary);stroke-width:5;opacity:0;
  filter:blur(7px);
  transition:opacity var(--dur) var(--ease);
}
/* 进度描边：circumference=2πr，r=88 → 552.9 */
.ring-prog{
  stroke:var(--c-primary);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:552.9;stroke-dashoffset:552.9;
  transition:stroke-dashoffset 1s linear,stroke var(--dur) var(--ease);
}

/* 主体圆球 */
.orb{
  position:absolute;inset:14%;border-radius:50%;
  display:grid;place-items:center;
  transition:transform var(--dur-slow) var(--ease-out),
             background var(--dur-slow) var(--ease);
}
.orb-halo{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(20,144,126,.30) 0%,transparent 70%);
  opacity:0;transition:opacity var(--dur) var(--ease),transform var(--dur-slow) var(--ease-out);
}
.orb-body{
  position:absolute;inset:0;border-radius:50%;
  background:var(--c-primary-mid);
  transition:transform var(--dur-slow) var(--ease-out),
             background var(--dur-slow) var(--ease),
             box-shadow var(--dur-slow) var(--ease);
  box-shadow:var(--sh-2);
}
.orb-center{position:relative;text-align:center;color:#fff;padding:var(--sp-2)}
.phase-name{font-size:var(--t-lg);font-weight:600;letter-spacing:3px;margin-bottom:2px}
.count{
  font-size:var(--t-hero);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-2px;
}
.phase-hint{font-size:var(--t-xs);color:rgba(255,255,255,.82);margin-top:var(--sp-2)}

/* 环节动画：吸气——扩张 + 光晕扩散 */
.orb[data-phase=inhale] .orb-body{
  transform:scale(1.30);
  background:linear-gradient(160deg,var(--c-primary-mid),var(--c-primary));
  animation:breathe-in var(--inhale-dur,4s) var(--ease-out) forwards;
}
.orb[data-phase=inhale] .orb-halo{opacity:1;transform:scale(1.4)}
.orb[data-phase=inhale] .ring-glow{opacity:.5}
@keyframes breathe-in{
  0%{transform:scale(.72)}
  100%{transform:scale(1.30)}
}

/* 环节动画：屏气——静止 + 轻微脉动 */
.orb[data-phase=hold] .orb-body{
  transform:scale(1.30);
  background:linear-gradient(160deg,var(--c-primary),var(--c-primary-ink));
  animation:hold-pulse var(--hold-dur,7s) ease-in-out infinite;
}
.orb[data-phase=hold] .orb-halo{opacity:.5;transform:scale(1.4)}
.orb[data-phase=hold] .ring-glow{opacity:.28}
@keyframes hold-pulse{
  0%,100%{transform:scale(1.28);box-shadow:var(--sh-2)}
  50%{transform:scale(1.34);box-shadow:var(--sh-3)}
}

/* 环节动画：呼气——收缩 + 淡出 */
.orb[data-phase=exhale] .orb-body{
  background:linear-gradient(160deg,#5bb5a6,var(--c-primary-mid));
  animation:breathe-out var(--exhale-dur,8s) var(--ease-out) forwards;
}
.orb[data-phase=exhale] .orb-halo{opacity:0;transform:scale(1.05)}
.orb[data-phase=exhale] .ring-glow{opacity:.14}
@keyframes breathe-out{
  0%{transform:scale(1.30);opacity:1}
  100%{transform:scale(.72);opacity:.72}
}

/* 环节切换过渡 */
.orb{transition:transform var(--dur-slow) var(--ease-out)}
.phase-name,.count{animation:phase-in var(--dur) var(--ease-out)}
@keyframes phase-in{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

/* 暂停：冻结但保留当前形态 */
.orb.paused .orb-body,.orb.paused .orb-halo{animation-play-state:paused}
.orb.paused{opacity:.62}

/* 轮次指示 */
.rounds{display:flex;gap:5px;justify-content:center;margin-bottom:var(--sp-5);flex-wrap:wrap}
.rounds i{
  width:9px;height:9px;border-radius:50%;background:var(--c-line);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.rounds i.done{background:var(--c-primary)}
.rounds i.cur{background:var(--c-primary);transform:scale(1.42)}

/* 控制 */
.breath-ctrl{display:flex;gap:var(--sp-2);max-width:300px;margin:0 auto}
.breath-ctrl .btn-main{flex:2}
.breath-ctrl .btn-ghost{flex:1}
.breath-note{
  font-size:var(--t-xs);color:var(--c-ink-4);margin-top:var(--sp-4);
  max-width:300px;margin-left:auto;margin-right:auto;line-height:1.75;
}

/* 完成态 */
.done-panel{text-align:center}
.done-mark{
  width:52px;height:52px;margin:0 auto var(--sp-3);
  border-radius:50%;background:var(--c-primary-soft);color:var(--c-primary);
  display:grid;place-items:center;font-size:26px;
  animation:pop var(--dur-slow) var(--ease-out);
}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.done-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-5)}
.done-actions .btn-main,.done-actions .btn-ghost{flex:1}

/* ── 响应式 ── */
@media (min-width:768px){
  .wrap{max-width:600px}
  .orb-wrap{width:300px}
  .breath-stage{padding:var(--sp-7) 0 var(--sp-6)}
}
@media (max-width:360px){
  .count{font-size:42px}
  .phase-name{font-size:var(--t-md);letter-spacing:2px}
  .field-row{grid-template-columns:1fr 1fr 1fr;gap:var(--sp-2)}
  .step-btn{width:28px;flex:0 0 28px}
}

/* ── 尊重系统的减弱动效设置 ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  /* 减弱动效下用缩放幅度代替动画表达阶段，圆环进度仍保留 */
  .orb[data-phase=inhale] .orb-body{transform:scale(1.30);animation:none}
  .orb[data-phase=hold] .orb-body{transform:scale(1.30);animation:none}
  .orb[data-phase=exhale] .orb-body{transform:scale(.72);animation:none;opacity:.85}
  .orb[data-phase=inhale] .orb-halo,
  .orb[data-phase=hold] .orb-halo{opacity:.6;transform:none}
  .orb[data-phase=exhale] .orb-halo{opacity:0}
  .rounds i{transition:none}
}

/* ── 键盘可达性 ── */
:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:4px}
.btn-main:focus-visible,.btn-ghost:focus-visible{outline-offset:3px}