@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  color-scheme: light;
  --paper:#F1F7FA;
  --surface:#FFFFFF;
  --surface-2:#E4F0F5;
  --ink:#16232B;
  --muted:#56707D;
  --line:#D2E3EA;
  --accent:#2E6F91;
  --accent-strong:#1F4F6B;
  --accent-soft:#DBEBF2;
  --accent-2:#5B7FB8;
  --accent-2-soft:#E4E9F5;
  --danger:#B15A4E;
  --danger-soft:#F5E3DF;
  --shadow: 0 1px 2px rgba(16,32,41,.05), 0 10px 24px -14px rgba(16,32,41,.22);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0A141B;
    --surface:#111E26;
    --surface-2:#16262F;
    --ink:#E6F1F5;
    --muted:#8EA9B6;
    --line:#213340;
    --accent:#6FB6D9;
    --accent-strong:#9ED4EC;
    --accent-soft:#153241;
    --accent-2:#9AB2DE;
    --accent-2-soft:#202B42;
    --danger:#E2988C;
    --danger-soft:#3A241F;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0A141B;
  --surface:#111E26;
  --surface-2:#16262F;
  --ink:#E6F1F5;
  --muted:#8EA9B6;
  --line:#213340;
  --accent:#6FB6D9;
  --accent-strong:#9ED4EC;
  --accent-soft:#153241;
  --accent-2:#9AB2DE;
  --accent-2-soft:#202B42;
  --danger:#E2988C;
  --danger-soft:#3A241F;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
svg{ width:1em; height:1em; flex:none; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y: none;
}
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; font-weight:600; margin:0; text-wrap:balance; }
p{ margin:0 0 .75em; }
a{ color:var(--accent); }

/* ---------- Touch-first interface baseline (Apple HIG / Material 3) ----------
   Все интерактивные элементы — кнопки: убираем UA-стили, задаём единый минимум
   44×44px под палец, отключаем системный highlight/callout и даём мгновенный
   тактильный отклик через :active, вместо hover-эффектов, рассчитанных на мышь. */
button{
  font-family:inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
}
button, [role="button"]{
  -webkit-tap-highlight-color: transparent;
}
a{ -webkit-tap-highlight-color: transparent; }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
::selection{ background:var(--accent-soft); }

@media (prefers-reduced-motion: no-preference){
  .btn, .chip, .mood-btn, .goal-card, .card-btn, .protocol-card, nav.tabbar button, .icon-btn, .link-btn, .sos-btn{
    transition: transform .12s ease, opacity .12s ease, background-color .15s ease, border-color .15s ease;
  }
}
.btn:active, .chip:active, .mood-btn:active, .goal-card:active, .card-btn:active,
.protocol-card:active, nav.tabbar button:active, .icon-btn:active, .sos-btn:active{
  transform: scale(0.96);
  opacity:.88;
}

/* ---------- App shell ---------- */
#app-shell{
  max-width:520px;
  margin:0 auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  position:relative;
}

.topbar[hidden]{ display:none; }
.tabbar[hidden]{ display:none; }
.topbar{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:calc(.9rem + var(--safe-top)) 1.1rem .9rem;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar h1{ font-size:1.2rem; }
.topbar .back{
  border:none; background:none; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; gap:.4rem; font-size:.9rem;
  padding:.6rem 0; margin:-.6rem 0; min-height:44px;
}
.sos-btn{
  border:1px solid var(--danger);
  color:var(--danger);
  background:var(--danger-soft);
  border-radius:999px;
  padding:.5rem .9rem;
  min-height:38px;
  font-size:.78rem;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}

main#app-view{
  flex:1;
  padding:1.1rem 1.1rem calc(6.5rem + var(--safe-bottom));
}
main#app-view.no-chrome{ padding:0; }

/* ---------- Bottom nav ---------- */
nav.tabbar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:100%;
  max-width:520px;
  display:flex;
  background:var(--surface);
  border-top:1px solid var(--line);
  padding:.5rem .5rem calc(.5rem + var(--safe-bottom));
  z-index:10;
}
nav.tabbar button{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  border:none;
  background:none;
  text-decoration:none;
  color:var(--muted);
  font-size:.68rem;
  padding:.4rem 0;
  min-height:48px;
  border-radius:10px;
  cursor:pointer;
}
nav.tabbar button svg{ width:22px; height:22px; }
nav.tabbar button.active{ color:var(--accent); }
nav.tabbar button.active svg{ stroke:var(--accent); }

/* ---------- Generic building blocks ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.1rem;
  box-shadow:var(--shadow);
}
.card + .card{ margin-top:.9rem; }
.section-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  margin:1.6rem 0 .6rem;
}
.section-label:first-child{ margin-top:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:12px;
  border:1px solid transparent;
  padding:.75rem 1.1rem;
  font-size:.95rem;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  width:100%;
}
.btn-primary{ background:var(--accent); color:var(--surface); }
.btn-primary:active{ background:var(--accent-strong); }
.btn-ghost{ background:var(--surface-2); color:var(--ink); }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-danger{ background:var(--danger-soft); color:var(--danger); }
.btn-row{ display:flex; gap:.6rem; }
.btn-row .btn{ width:auto; flex:1; }

.chip{
  display:inline-flex; align-items:center; gap:.3rem;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  border-radius:999px;
  padding:.5rem .9rem;
  min-height:40px;
  font-size:.82rem;
  font-family:inherit;
  cursor:pointer;
}
.chip.selected{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); }
.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; }

.tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--accent-2);
  background:var(--accent-2-soft);
  padding:.15rem .5rem;
  border-radius:999px;
  display:inline-block;
}

.muted{ color:var(--muted); }
.stack{ display:flex; flex-direction:column; gap:.9rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }

/* ---------- Stat tiles ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.stat-tile{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:.9rem 1rem;
}
.stat-tile .num{ font-family:'Fraunces', serif; font-size:1.65rem; font-weight:600; line-height:1; }
.stat-tile .lbl{ font-size:.76rem; color:var(--muted); margin-top:.3rem; }

/* ---------- Protocol list ---------- */
.protocol-card{
  display:flex; align-items:center; gap:.9rem; width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:.9rem 1rem; text-decoration:none; color:var(--ink); cursor:pointer;
  font-family:inherit; text-align:left; min-height:44px;
}
.protocol-card .rhythm{
  font-family:'IBM Plex Mono', monospace; font-size:.72rem; color:var(--accent);
  background:var(--accent-soft); border-radius:8px; padding:.25rem .5rem; white-space:nowrap;
}
.protocol-card .meta{ flex:1; min-width:0; }
.protocol-card h3{ font-size:.98rem; font-family:'Public Sans',sans-serif; font-weight:700; }
.protocol-card p{ font-size:.82rem; color:var(--muted); margin:.15rem 0 0; }

.protocol-card-featured{
  border-color:var(--accent); background:var(--accent-soft);
}
.protocol-card-featured .rhythm{
  background:var(--accent); color:var(--surface); display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0;
}
.protocol-card-featured .rhythm svg{ width:18px; height:18px; }
.protocol-card-featured .meta{ display:flex; flex-direction:column; }

/* Пользовательский пресет: сама карточка — кнопка-переход, плюс отдельная
   кнопка редактирования, поэтому вложенный интерактивный элемент разбит на два. */
.protocol-card-custom{ padding:0; align-items:stretch; }
.protocol-card-custom .protocol-card-main{
  flex:1; display:flex; align-items:center; gap:.9rem; min-width:0;
  border:none; background:none; padding:.9rem 1rem; text-align:left; cursor:pointer;
  font-family:inherit; color:inherit;
}
.protocol-card-custom .protocol-edit{
  flex:none; border-left:1px solid var(--line); border-radius:0 14px 14px 0;
  padding:0 1.1rem;
}

.card-btn{
  display:block; width:100%; border:1px solid var(--line); background:var(--surface);
  color:inherit; text-align:left; padding:.9rem; border-radius:16px; box-shadow:var(--shadow);
  font-family:inherit; cursor:pointer; min-height:44px;
}

.link-btn{
  border:none; background:none; padding:0; margin:0; font-family:inherit;
  font-size:inherit; color:var(--accent); cursor:pointer; text-decoration:underline;
  text-underline-offset:2px; min-height:44px; display:inline-flex; align-items:center;
}
.link-btn.muted{ color:var(--muted); text-decoration:none; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:none; background:none; color:var(--muted);
  border-radius:12px; cursor:pointer; flex:none;
}
.icon-btn:hover{ color:var(--ink); }

/* ---------- Breathing player ---------- */
.player-stage{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem; padding:1.5rem 0 2rem;
}

.breath-orb-wrap{
  position:relative; width:240px; height:240px;
  display:flex; align-items:center; justify-content:center;
}
.breath-orb-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--line); }
.breath-orb{
  position:relative;
  width:120px; height:120px; border-radius:50%;
  overflow:hidden; /* вся анімація нижче лишається виключно всередині кола */
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 80%, white), var(--accent));
  transition: transform linear, opacity linear;
  will-change: transform;
}
/* Внутрішнє «живе» світіння — рухається лише в межах орба (border-radius:50%
   + overflow:hidden відсікають усе, що виходить за коло), без жодного руху
   за його межами чи на фоні екрана. */
.breath-orb-glow{
  position:absolute; inset:-35%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.6) 0%, transparent 45%),
    radial-gradient(circle at 72% 70%, color-mix(in srgb, var(--accent-2) 65%, transparent) 0%, transparent 55%);
  animation: orb-glow-drift 9s ease-in-out infinite;
  mix-blend-mode: overlay;
}
@keyframes orb-glow-drift{
  0%,100%{ transform: rotate(0deg) scale(1); }
  50%{ transform: rotate(150deg) scale(1.2); }
}

.player-phase{ text-align:center; }
.player-phase .label{ font-family:'Fraunces', serif; font-size:1.5rem; }
.player-phase .count{ font-family:'IBM Plex Mono', monospace; font-size:2.1rem; color:var(--accent); }
.player-meta{ display:flex; gap:1.4rem; color:var(--muted); font-size:.82rem; }

/* ---------- Mood scale ---------- */
.mood-row{ display:flex; justify-content:space-between; gap:.5rem; }
.mood-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.35rem;
  border:1px solid var(--line); background:var(--surface); border-radius:14px;
  padding:.7rem .3rem; cursor:pointer; font-size:1.4rem;
}
.mood-btn span.lbl{ font-size:.68rem; color:var(--muted); }
.mood-btn.selected{ border-color:var(--accent); background:var(--accent-soft); }

textarea, input[type="text"], input[type="number"], select{
  width:100%; border:1px solid var(--line); border-radius:12px; background:var(--surface);
  color:var(--ink); padding:.7rem .8rem; font-size:.92rem; font-family:inherit;
  min-height:44px;
}
textarea{ min-height:80px; resize:vertical; }
input[type="range"]{ width:100%; min-height:44px; }

/* ---------- Custom protocol builder ---------- */
.phase-row{
  display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem;
}
.phase-row .phase-key{ flex:1.4; min-width:0; }
.phase-row .phase-seconds{ flex:.7; min-width:0; text-align:center; }
.phase-row .phase-unit{ font-size:.8rem; flex:none; }
.phase-row .phase-remove{ flex:none; }
.phase-row .phase-remove:disabled{ opacity:.3; cursor:not-allowed; }
.phase-row .phase-remove svg{ width:16px; height:16px; }

/* ---------- Journal history ---------- */
.entry-item{ display:flex; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.entry-item:last-child{ border-bottom:none; }
.entry-item .mood-emoji{ font-size:1.3rem; }
.entry-item .date{ font-family:'IBM Plex Mono', monospace; font-size:.72rem; color:var(--muted); }

/* ---------- Chart ---------- */
.chart-wrap{ overflow-x:auto; }
.chart-wrap svg text{ fill:var(--muted); font-family:'IBM Plex Mono', monospace; font-size:9px; }

/* ---------- Onboarding ---------- */
.onboard-wrap{ min-height:calc(100dvh - 2.2rem); display:flex; flex-direction:column; justify-content:center; gap:1.6rem; padding:1.1rem; }
.onboard-step{ display:none; }
.onboard-step.active{ display:block; }
.goal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.goal-card{
  border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:1rem .8rem;
  text-align:left; cursor:pointer; font-family:inherit;
}
.goal-card.selected{ border-color:var(--accent); background:var(--accent-soft); }
.goal-card .emoji{ font-size:1.4rem; }
.goal-card h3{ font-size:.92rem; margin-top:.4rem; }
.dots{ display:flex; gap:.4rem; justify-content:center; }
.dots span{ width:6px; height:6px; border-radius:50%; background:var(--line); }
.dots span.on{ background:var(--accent); }

/* ---------- Crisis screen ---------- */
.crisis-callout{
  border-left:3px solid var(--danger); background:var(--danger-soft);
  border-radius:0 12px 12px 0; padding:1rem 1.1rem; font-size:.9rem;
}
.crisis-group h2{ font-size:1.02rem; margin-bottom:.5rem; }
.crisis-item{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:.8rem 1rem;
}
.crisis-item .name{ font-weight:600; font-size:.92rem; }
.crisis-item .hours{ font-size:.78rem; color:var(--muted); margin-top:.2rem; }
.crisis-item button.call{
  background:var(--accent); color:var(--surface); border:none; border-radius:999px;
  padding:.55rem .9rem; min-height:38px;
  font-size:.85rem; font-weight:700; text-decoration:none; white-space:nowrap;
  font-family:'IBM Plex Mono', monospace; cursor:pointer;
}

/* ---------- Learn ---------- */
.learn-card h3{ font-size:1rem; margin-bottom:.35rem; }
.learn-card p{ font-size:.88rem; color:var(--muted); }

/* ---------- Settings ---------- */
.row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.row:last-child{ border-bottom:none; }
.row .row-lbl{ font-size:.92rem; }
.row .row-sub{ font-size:.76rem; color:var(--muted); margin-top:.1rem; }
.switch{ position:relative; width:44px; height:26px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{
  position:absolute; inset:0; background:var(--line); border-radius:999px; cursor:pointer; transition:.15s;
}
.switch .track::before{
  content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:var(--surface);
  border-radius:50%; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.switch input:checked + .track{ background:var(--accent); }
.switch input:checked + .track::before{ transform:translateX(18px); }
.switch input:focus-visible + .track{ outline:2px solid var(--accent); outline-offset:2px; }

.disclaimer{ font-size:.76rem; color:var(--muted); padding-top:1.5rem; text-align:center; }

/* ==================================================================
   Biofeedback & Interactive Regulation
   Спільний вигляд для хабу і п'яти вправ: спокійний, преміальний,
   некомпетитивний — без табло, зворотних відліків під тиском, миготіння
   чи агресивних кольорів (розділ 10 специфікації).
   ================================================================== */

/* ---------- Хаб: картки вправ ---------- */
.protocol-card-icon{
  flex:none; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
}
.protocol-card-icon svg{ width:22px; height:22px; }

/* Фізіологічні вправи без апаратного датчика — та ж картка, але приглушена
   й без кольорової іконки, щоб не виглядати так само «готово», як п'ять
   інтерактивних вправ вище. */
.protocol-card-beta{ opacity:.82; border-style:dashed; }

.tag-muted{ color:var(--muted); background:var(--surface-2); }

.sensor-flow-list{ margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.sensor-flow-list li{ font-size:.88rem; }

/* ---------- Спільні елементи для тап-вправ (Calm Pulse, Heart Tap) ---------- */
.bf-feedback-row{ display:flex; gap:1.6rem; }
.bf-stat{ text-align:center; }
.bf-stat-lbl{ font-size:.72rem; color:var(--muted); }
.bf-stat-val{ font-size:1.05rem; margin-top:.15rem; }

/* М'який «пульс» відгуку на тап — без миготіння чи агресивних кольорів. */
.bf-tap-pop{ animation: bf-tap-pop .25s ease-out; }
@keyframes bf-tap-pop{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}

.breath-orb-tap{ border:none; background:none; padding:0; cursor:pointer; }
.breath-orb-tap:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:50%; }

/* ---------- Heart Tap ---------- */
.heart-tap-btn{
  width:120px; height:120px; border-radius:50%; border:none; margin:0 auto;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 78%, white), var(--accent));
  color:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.heart-tap-btn svg{ width:46px; height:46px; }
.heart-tap-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

/* ---------- Slow the Storm ---------- */
.storm-stage{
  display:flex; flex-direction:column; align-items:center; gap:1.1rem; padding:.4rem 0 1.5rem;
}
.storm-stage-label{
  font-family:'IBM Plex Mono', monospace; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted);
}
.storm-surface{
  width:100%; height:280px; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface-2); padding:0; cursor:pointer; display:block;
  position:relative;
}
.storm-surface:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
#storm-canvas{ display:block; width:100%; height:100%; }
.storm-discrete{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; gap:.9rem;
}
.storm-discrete-dot{
  width:22px; height:22px; border-radius:50%; background:var(--line);
  transition: background-color .3s ease, transform .3s ease;
}
.storm-discrete-dot.active{ background:var(--accent); transform:scale(1.15); }
.storm-hint{ text-align:center; font-size:.84rem; min-height:1.3em; }

/* ---------- Hold & Release ---------- */
.hold-release-obj{
  position:relative; width:180px; height:180px; border-radius:50%;
  border:none; background:none; padding:0; cursor:pointer; margin:0 auto;
}
.hold-release-obj:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:50%; }
.hold-release-inner{
  position:absolute; inset:20%; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent-2) 75%, white), var(--accent-2));
  transition: inset .5s ease, background-color .5s ease;
}
.hold-release-obj.is-holding .hold-release-inner{ inset:2%; }
.hold-release-obj.is-releasing .hold-release-inner{ inset:32%; transition-duration:5.5s; }

/* ---------- Let It Go ---------- */
.letitgo-bubble{
  position:relative; width:180px; height:180px; border-radius:50%;
  border:none; background:none; padding:0; cursor:pointer; margin:0 auto;
}
.letitgo-bubble:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:50%; }
.letitgo-bubble-inner{
  position:absolute; inset:6%; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--accent-2) 55%, white), var(--accent-2-soft));
  border:1px solid var(--line);
  transition: transform .12s linear, opacity .12s linear;
}
.letitgo-bubble-word{ font-family:'Fraunces', serif; font-size:1.05rem; color:var(--accent-strong); }
.letitgo-bubble.is-dissolved .letitgo-bubble-inner{ transition: transform .6s ease, opacity .6s ease; transform:scale(.1); opacity:0; }

@media (prefers-reduced-motion: reduce){
  .breath-orb{ transition:none !important; }
  .breath-orb-glow{ animation:none !important; }
  .bf-tap-pop{ animation:none !important; }
  .hold-release-inner{ transition:none !important; }
  .letitgo-bubble-inner{ transition:none !important; }
  .storm-discrete-dot{ transition:none !important; }
  .btn:active, .chip:active, .mood-btn:active, .goal-card:active, .card-btn:active,
  .protocol-card:active, nav.tabbar button:active, .icon-btn:active, .sos-btn:active,
  .storm-surface:active, .hold-release-obj:active, .letitgo-bubble:active, .heart-tap-btn:active{
    transform:none;
  }
}
/* Дублируем то же самое для явного тумблера «Зменшити рух» у налаштуваннях —
   він може бути увімкнений навіть якщо системна prefers-reduced-motion ні. */
html.reduce-motion .breath-orb{ transition:none !important; }
html.reduce-motion .breath-orb-glow{ animation:none !important; }
html.reduce-motion .bf-tap-pop{ animation:none !important; }
html.reduce-motion .hold-release-inner{ transition:none !important; }
html.reduce-motion .letitgo-bubble-inner{ transition:none !important; }
html.reduce-motion .storm-discrete-dot{ transition:none !important; }
html.reduce-motion .btn:active, html.reduce-motion .chip:active, html.reduce-motion .mood-btn:active,
html.reduce-motion .goal-card:active, html.reduce-motion .card-btn:active,
html.reduce-motion .protocol-card:active, html.reduce-motion nav.tabbar button:active,
html.reduce-motion .icon-btn:active, html.reduce-motion .sos-btn:active,
html.reduce-motion .storm-surface:active, html.reduce-motion .hold-release-obj:active,
html.reduce-motion .letitgo-bubble:active, html.reduce-motion .heart-tap-btn:active{
  transform:none;
}