/* Achtsamkeit · Styles */
.mf-pat { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mf-breath-wrap { display: grid; place-items: center; height: 240px; margin: 10px 0; }
.mf-circle { width: 150px; height: 150px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 35% 35%, var(--mk-accent-2), var(--mk-accent)); color: #fff; box-shadow: 0 10px 40px var(--mk-accent-soft); transform: scale(1); transition: transform 1s ease; }
.mf-circle.on { box-shadow: 0 10px 60px rgba(139, 92, 246, .45); }
.mf-circle span { font-size: 17px; font-weight: 700; } .mf-circle small { font-size: 12px; opacity: .85; }
.mf-breath-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mf-timer { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; color: var(--mk-muted); }
.mf-sense { background: var(--mk-surface-2); border-radius: var(--mk-radius-sm); padding: 12px; margin-bottom: 10px; border-left: 4px solid var(--mk-line); } .mf-sense.done { border-left-color: #10b981; }
.mf-sense-h { display: flex; gap: 8px; align-items: center; } .mf-sense-h .ic { font-size: 20px; } .mf-sense-h small { margin-left: auto; color: var(--mk-faint); }
.mf-sense .hint { display: block; font-size: 12px; color: var(--mk-muted); margin: 4px 0 8px; }
.mf-sense-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } .mf-sense-in .mk-input { padding: 7px 10px; font-size: 13px; }
.mf-prog { height: 8px; border-radius: 99px; background: var(--mk-line); overflow: hidden; margin: 6px 0 10px; } .mf-prog i { display: block; height: 100%; background: var(--mk-accent); transition: width .3s; }
.mf-body { display: grid; gap: 6px; } .mf-part { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--mk-line); }
.mf-part-l { font-size: 14px; font-weight: 600; } .mf-part-s { display: flex; flex-wrap: wrap; gap: 4px; }
.mf-part-s button { font: inherit; font-size: 12px; border-radius: 99px; border: 1.5px solid var(--mk-line); background: var(--mk-surface); padding: 3px 9px; cursor: pointer; color: var(--mk-muted); } .mf-part-s button.on { background: var(--c); border-color: var(--c); color: #fff; }
.mf-map { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; margin: 12px 0; } .mf-map span { height: 14px; border-radius: 4px; display: block; }
.mf-delta { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; text-align: center; margin-bottom: 10px; }
.mf-delta div { background: var(--mk-surface-2); border-radius: var(--mk-radius-sm); padding: 10px; } .mf-delta b { display: block; font-size: 26px; color: var(--mk-accent); } .mf-delta b.ok { color: #10b981; } .mf-delta span { font-size: 12px; color: var(--mk-muted); } .mf-delta .arr { font-size: 26px; background: none; }
.mf-grat { display: grid; gap: 6px; }
.mf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; } .mf-stats div { background: var(--mk-surface-2); border-radius: var(--mk-radius-sm); padding: 10px; text-align: center; } .mf-stats b { display: block; font-size: 20px; color: var(--mk-accent); } .mf-stats span { font-size: 11px; color: var(--mk-muted); }
.mf-chart { width: 100%; height: auto; max-width: 100%; } .mf-chart polyline { fill: none; stroke-width: 2; } .mf-chart .before { stroke: #ef4444; fill: #ef4444; } .mf-chart .after { stroke: #10b981; fill: #10b981; } .mf-chart polyline.before, .mf-chart polyline.after { fill: none; } .mf-chart .drop { stroke: var(--mk-line); stroke-width: 2; } .mf-chart text { font-size: 10px; fill: var(--mk-faint); text-anchor: middle; }
.mf-legend { display: flex; gap: 14px; font-size: 12px; color: var(--mk-muted); margin: 6px 0 10px; } .mf-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; } .mf-legend .before { background: #ef4444; } .mf-legend .after { background: #10b981; }
.mf-link { text-decoration: none; color: inherit; text-align: left; }
@media (max-width: 600px) { .mf-part { grid-template-columns: 1fr; gap: 4px; } .mf-stats { grid-template-columns: repeat(2, 1fr); } }