/* Kompass: Ruhe & Fokus */
.calm-cta { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius); color: var(--text);
  background: radial-gradient(260px 120px at 10% 50%, rgba(56, 217, 230, 0.22), transparent 70%), linear-gradient(135deg, rgba(79, 124, 255, 0.18), rgba(165, 92, 255, 0.1));
  border: 1px solid rgba(56, 217, 230, 0.35); transition: transform 200ms var(--ease-out), border-color 200ms ease; }
.calm-cta b { display: block; font-size: 16px; }
.calm-cta span { font-size: 13px; color: var(--text-2); }
.calm-cta > svg { width: 20px; height: 20px; color: var(--cyan); flex: none; }
.calm-cta:active { transform: scale(0.985); }
.calm-cta-orb { width: 46px; height: 46px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 35%, #bff6ff, var(--cyan) 45%, #2a6cff); box-shadow: 0 0 30px rgba(56, 217, 230, 0.6); animation: calmBreath 8s ease-in-out infinite; }
@keyframes calmBreath { 0%, 100% { transform: scale(0.82); opacity: 0.85; } 50% { transform: scale(1.05); opacity: 1; } }

.calm-sos { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 22px; margin-bottom: 22px; color: var(--text);
  background: linear-gradient(135deg, rgba(255, 107, 122, 0.18), rgba(255, 107, 122, 0.04)); border: 1px solid rgba(255, 107, 122, 0.4); }
.calm-sos b { display: block; font-size: 17px; }
.calm-sos span { font-size: 13.5px; color: var(--text-2); }
.calm-sos > svg { width: 20px; height: 20px; flex: none; color: #ff8a98; margin-left: auto; }
.sos-pulse { width: 18px; height: 18px; border-radius: 50%; background: #ff6b7a; flex: none; box-shadow: 0 0 0 0 rgba(255, 107, 122, 0.6); animation: pulseRed 1.8s ease-out infinite; }
@keyframes pulseRed { to { box-shadow: 0 0 0 18px rgba(255, 107, 122, 0); } }

.calm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.calm-card { position: relative; overflow: hidden; padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); color: var(--text); min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform 200ms var(--ease-out), border-color 200ms ease; }
.calm-card::before { content: ''; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 38%, transparent), transparent); }
@media (hover: hover) and (pointer: fine) { .calm-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 50%, transparent); } }
.calm-card:active { transform: scale(0.98); }
.calm-orb { position: absolute; top: 18px; left: 18px; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.calm-orb svg { width: 22px; height: 22px; }

.calm-stage { max-width: 760px; margin: 0 auto; text-align: center; }
.calm-head { margin-bottom: 8px; }
.calm-why { color: var(--text-2); max-width: 560px; margin: 26px auto 0; font-size: 15px; line-height: 1.6; }
.calm-controls { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.calm-controls .btn.on, .calm-controls .btn.icon.on { color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.calm-remain { margin-top: 10px; min-height: 20px; font-variant-numeric: tabular-nums; }

.breath-wrap { position: relative; width: min(340px, 78vw); aspect-ratio: 1; margin: 18px auto 0; display: grid; place-items: center; }
.breath-wrap.small { width: min(220px, 60vw); }
.breath-orb { position: absolute; inset: 12%; border-radius: 50%; transform: scale(0.55); will-change: transform;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 30%, white), var(--c) 45%, color-mix(in srgb, var(--c) 40%, #1a1f5c) 100%);
  box-shadow: 0 0 60px color-mix(in srgb, var(--c) 55%, transparent), 0 0 140px color-mix(in srgb, var(--c) 25%, transparent); }
.orb-rings { position: absolute; inset: 0; }
.orb-rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); animation: ring 6s linear infinite; }
.orb-rings i:nth-child(2) { animation-delay: -2s; } .orb-rings i:nth-child(3) { animation-delay: -4s; }
@keyframes ring { from { transform: scale(0.5); opacity: 0.8; } to { transform: scale(1.05); opacity: 0; } }
.breath-center { position: relative; z-index: 2; pointer-events: none; }
.breath-phase { font-size: clamp(22px, 5vw, 30px); font-weight: 800; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); }
.breath-count { font-size: 44px; font-weight: 800; color: rgba(255, 255, 255, 0.9); font-variant-numeric: tabular-nums; line-height: 1.1; }
.box-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.box-track { fill: color-mix(in srgb, var(--c) 8%, transparent); stroke: color-mix(in srgb, var(--c) 45%, transparent); stroke-width: 3; }
.box-dot { fill: #fff; filter: drop-shadow(0 0 12px var(--c)); }
.box-svg + .orb-rings { display: none; }

.sos-step { padding: 10px 0; }
.sos-progress { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.sos-progress i { width: 26px; height: 4px; border-radius: 9px; background: var(--surface-2); }
.sos-progress i.on { background: var(--c); }
.tap-dots { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tap-dot { width: 62px; height: 62px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 50%, transparent); background: var(--surface); color: var(--text); font-weight: 800; font-size: 20px; cursor: pointer; transition: transform 200ms var(--ease-out), background-color 200ms ease; }
.tap-dot.on { background: var(--c); color: #fff; transform: scale(0.94); border-color: transparent; }

.schulte { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: min(440px, 100%); margin: 0 auto; }
.schulte button { aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: clamp(18px, 5vw, 26px); font-weight: 800; cursor: pointer; transition: background-color 160ms ease, transform 140ms var(--ease-out), opacity 200ms ease; }
.schulte button:active { transform: scale(0.94); }
.schulte button.hit { background: color-mix(in srgb, var(--c) 30%, transparent); opacity: 0.45; }
.schulte button.miss { background: rgba(255, 107, 122, 0.35); }

.focus-field { position: relative; width: min(320px, 76vw); aspect-ratio: 1; margin: 26px auto 0; display: grid; place-items: center; }
.focus-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.focus-ring circle { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 100; filter: drop-shadow(0 0 8px var(--c)); }
.focus-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 24px var(--c), 0 0 60px color-mix(in srgb, var(--c) 50%, transparent); }
.focus-dot.pulse { animation: dotPulse 600ms var(--ease-out); }
@keyframes dotPulse { 50% { transform: scale(1.8); } }

.routine { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; text-align: left; margin-top: 18px; }
.r-timer { position: relative; width: 220px; aspect-ratio: 1; }
.r-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.r-track { fill: color-mix(in srgb, var(--c) 7%, transparent); stroke: var(--surface-2); stroke-width: 8; }
.r-prog { fill: none; stroke: var(--c); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 0 100; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 60%, transparent)); transition: stroke-dasharray 100ms linear; }
.r-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.r-center b { font-size: 52px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.r-center span { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.r-list { list-style: none; padding: 0; margin: 26px auto 0; display: grid; gap: 6px; text-align: left; max-width: 520px; counter-reset: r; }
.r-list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 14px; counter-increment: r; }
.r-list li::before { content: counter(r); width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface-2); color: var(--muted); flex: none; }
.r-list li b { flex: 1; font-weight: 600; }
.r-list li span { color: var(--muted); font-size: 12px; }
.r-list li.on { border-color: var(--c); }
.r-list li.on::before { background: var(--c); color: #0a0f1f; }
.r-list li.done { opacity: 0.55; }

@media (max-width: 860px) {
  .calm-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .calm-card { min-height: 150px; padding: 16px; }
  .calm-orb { top: 14px; left: 14px; width: 38px; height: 38px; }
  .routine { grid-template-columns: 1fr; text-align: center; gap: 16px; }
  .r-timer { width: 180px; margin: 0 auto; }
  .tap-dot { width: 54px; height: 54px; }
}
@media (max-width: 380px) { .calm-grid { grid-template-columns: 1fr; } }