/* M02 呼吸小站 · 模块私有样式（类名前缀 .m02-） */

.m02-stage {
  --module-color: var(--c-lilac);
  --module-color-soft: var(--c-cream-100);
  --module-color-soft: color-mix(in srgb, var(--c-lilac) 18%, var(--c-cream-50));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--page-pad);
  min-height: 72vh;
  background: var(--module-color-soft);
}

.m02-tip {
  margin: 0;
  color: var(--c-ink-500);
  font-size: var(--fs-14);
  text-align: center;
}

.m02-ring-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
  margin: var(--sp-2) 0;
}

.m02-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.m02-arc-track {
  fill: none;
  stroke: var(--c-line);
  stroke-width: 8;
}

.m02-arc-fill {
  fill: none;
  stroke: var(--module-color);
  stroke-width: 8;
  stroke-linecap: round;
}

.m02-ring {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  width: 68%;
  height: 68%;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle at 50% 40%, var(--surface-1), var(--module-color-soft));
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  will-change: transform, opacity;
}

.m02-phase {
  color: var(--c-ink-500);
  font-size: var(--fs-14);
}

.m02-count {
  font-family: var(--font-num);
  font-size: var(--fs-34);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-900);
  line-height: 1;
}

.m02-guide {
  margin: 0;
  max-width: 22em;
  color: var(--c-ink-500);
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  text-align: center;
}

.m02-rounds {
  display: flex;
  gap: var(--sp-2);
}

.m02-round {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--c-line);
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}

.m02-round.is-on {
  background: var(--module-color);
  transform: scale(1.15);
}

.m02-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  margin-top: auto;
}

.m02-btn-main,
.m02-btn-quiet {
  touch-action: manipulation;
}