/*
  Focus Onion v53 engineering consolidation
  Active mobile/desktop experience layer.
  Consolidates v48-v52 runtime CSS into one ordered file to reduce cascading
  ambiguity while preserving the latest stable launch, safe-area, layer layout,
  panel motion, and feedback-orbit warmup behavior.
*/

/* ===== Consolidated from src/styles/experience-v48.css ===== */
/*
  Focus Onion v48 bottom-safearea and credentials hotfix
  Scope: logo-only launch, redesigned guide, one-hand mobile ergonomics,
  directional state transitions, deeper layer-4 immersion, reward-feedback feel,
  viewport stability, diagnostics, recoverable status, and cache update handling.
  No low-performance/quality mode is introduced here.
*/

:root {
  --app-viewport-height: 100dvh;
  --app-viewport-width: 100vw;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --v42-surface: rgba(16, 21, 31, .74);
  --v42-surface-soft: rgba(255, 255, 255, .035);
  --v42-surface-strong: rgba(18, 23, 34, .92);
  --v42-border-main: rgba(238, 247, 255, .135);
  --v42-border-soft: rgba(238, 247, 255, .075);
  --v42-muted: rgba(246, 239, 231, .66);
  --v42-text: rgba(250, 246, 239, .94);
  --v42-ok: rgba(120, 235, 183, .92);
  --v42-warn: rgba(255, 194, 120, .94);
  --v42-danger: rgba(255, 118, 112, .80);
  --v42-shadow-card: 0 30px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.065);
  --v42-shadow-small: 0 12px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.045);
  --v42-transition-fast: 160ms cubic-bezier(.2,.8,.2,1);
}

html,
body {
  min-height: var(--app-viewport-height) !important;
  background-color: #111a26 !important;
  overscroll-behavior-y: none;
  font-variant-numeric: tabular-nums;
}

body.booting,
.boot-screen {
  min-height: var(--app-viewport-height) !important;
}

/* Logo-only launch screen: no orb, no animated line, no bottom stretch. */
.boot-screen {
  height: auto !important;
  max-height: none !important;
  inset: 0 0 -120px 0 !important;
  min-height: calc(var(--app-viewport-height) + 120px) !important;
  padding: 0 !important;
  background: #111a26 !important;
  background-image:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.055), transparent 28%),
    linear-gradient(180deg, #162030, #111a26 100%) !important;
  color: #f7f3ea;
}

.boot-screen::after,
.boot-screen__orb,
.boot-screen__sub {
  display: none !important;
}

.boot-screen__unit {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 42% !important;
  transform: translateY(-50%) !important;
  gap: 0 !important;
}

.boot-screen__brand {
  font-weight: 850 !important;
  letter-spacing: -.06em !important;
  text-shadow: 0 22px 70px rgba(0,0,0,.44) !important;
}

body.app-ready:not(.feedback-stage-open) .app {
  min-height: var(--app-viewport-height) !important;
}

.feedback-stage.open {
  min-height: var(--app-viewport-height) !important;
  height: var(--app-viewport-height) !important;
  max-height: var(--app-viewport-height) !important;
}

/* Typography system: titles/numbers are strong, explanatory text is quieter. */
.section-title,
.help-modal-title,
.modal-title,
#flowTitle {
  font-weight: 820 !important;
}

.onion-timer strong,
.stat-value,
.feedback-orb-stats strong,
.feedback-stage-timer strong,
.feedback-orb-progress-copy strong,
.calendar-summary strong,
.calendar-metric strong {
  font-variant-numeric: tabular-nums;
  font-weight: 850 !important;
}

.section-desc,
.help-card p,
.help-highlight span,
.calendar-note,
.fullscreen-hint {
  font-weight: 520 !important;
}

.badge,
.eyebrow,
.stat-label,
.feedback-orb-stats span {
  font-weight: 600 !important;
  letter-spacing: .055em !important;
}

/* Border and shadow hierarchy. */
.card,
.onion-card {
  border-color: var(--v42-border-main) !important;
  box-shadow: var(--v42-shadow-card) !important;
}

.sound-box,
.calendar-summary-item,
.calendar-selected-day,
.feedback-orb-stats div,
.onion-timer,
.day-cell {
  border-color: var(--v42-border-soft) !important;
  box-shadow: var(--v42-shadow-small) !important;
}

button,
.sound-picker-button,
.day-cell,
.feedback-pad {
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--v42-transition-fast), filter var(--v42-transition-fast), border-color var(--v42-transition-fast), box-shadow var(--v42-transition-fast), background var(--v42-transition-fast) !important;
}

button:active,
.sound-picker-button:active,
.day-cell:active {
  transform: translateY(1px) scale(.992);
  box-shadow: 0 6px 18px rgba(0,0,0,.20) !important;
}

button.danger:active,
.danger:active {
  filter: saturate(.88) brightness(.94);
}

/* One-hand mobile ergonomics. */
@media (max-width: 720px) {
  body.app-ready:not(.feedback-stage-open):not(.subpanel-open) .app {
    min-height: var(--app-viewport-height) !important;
  }

  body[data-study-depth="2"]:not(.feedback-stage-open) .onion-card,
  body[data-study-depth="3"]:not(.feedback-stage-open) .onion-card,
  body[data-study-depth="4"]:not(.feedback-stage-open) .onion-card {
    min-height: min(calc(var(--app-viewport-height) - 46px - var(--app-safe-top) - var(--app-safe-bottom)), 760px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: clamp(12px, 2.6vh, 20px) !important;
  }

  body[data-study-depth="2"]:not(.feedback-stage-open) #flowActions,
  body[data-study-depth="3"]:not(.feedback-stage-open) #flowActions,
  body[data-study-depth="4"]:not(.feedback-stage-open) #flowActions {
    margin-top: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding-top: clamp(14px, 3vh, 26px) !important;
  }

  #flowActions button {
    min-height: 62px !important;
    border-radius: 23px !important;
    font-size: 1.02rem !important;
    font-weight: 720 !important;
  }

  #flowActions button.danger,
  #flowActions button[data-flow-action="exit-env"],
  #flowActions button[data-flow-action="stop-study"],
  #flowActions button[data-flow-action="stop-focus"] {
    margin-top: 2px !important;
    background: rgba(255,118,112,.065) !important;
    border-color: rgba(255,118,112,.16) !important;
    color: rgba(255,214,209,.82) !important;
  }

  #flowSubtools {
    margin-top: 12px !important;
    opacity: .74;
  }

  #flowSubtools .subtool-btn {
    min-height: 46px !important;
    border-radius: 17px !important;
    font-weight: 650 !important;
  }
}

/* Directional state changes: light native-feeling motion only. */
.onion-card.is-layer-changing,
.onion-card.v42-flow-forward,
.onion-card.v42-flow-back {
  will-change: transform, opacity, filter;
}

.onion-card.v42-flow-forward {
  animation: v42Forward 180ms cubic-bezier(.2,.8,.2,1) both;
}

.onion-card.v42-flow-back {
  animation: v42Back 180ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes v42Forward {
  from { transform: translateY(10px) scale(.992); opacity: .82; filter: blur(.4px); }
  to { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}

@keyframes v42Back {
  from { transform: translateY(-8px) scale(.995); opacity: .84; filter: blur(.35px); }
  to { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}

.feedback-stage.open .feedback-orb-main,
.feedback-stage.open .feedback-orb-bottom {
  animation: v42FeedbackIn 170ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes v42FeedbackIn {
  from { transform: translateX(16px); opacity: .72; }
  to { transform: translateX(0); opacity: 1; }
}

/* Layer 4 should feel quieter and more focused than layer 2/3. */
body[data-study-depth="4"]:not(.feedback-stage-open) {
  background:
    radial-gradient(circle at 50% 8%, rgba(var(--cold-rgb), .08), transparent 23%),
    linear-gradient(180deg, rgba(4, 7, 12, .24), rgba(2, 4, 8, .52)),
    var(--page-background) !important;
}

body[data-study-depth="4"]:not(.feedback-stage-open) .onion-card {
  border-color: rgba(var(--cold-rgb), .16) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--hot-rgb), .055), transparent 28%),
    rgba(10, 14, 22, .78) !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body[data-study-depth="4"]:not(.feedback-stage-open) #flowDesc {
  max-width: 26ch !important;
  opacity: .58 !important;
}

body[data-study-depth="4"]:not(.feedback-stage-open) .onion-timer.deep {
  order: -1;
  min-height: clamp(178px, 26vh, 240px) !important;
  transform: translateZ(0);
  border-color: rgba(var(--hot-rgb), .20) !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(var(--hot-rgb), .115), transparent 34%),
    rgba(255,255,255,.038) !important;
}

body[data-study-depth="4"]:not(.feedback-stage-open) .onion-timer.deep span {
  font-size: clamp(3.3rem, 16vw, 5.4rem) !important;
  letter-spacing: -.075em !important;
}

body[data-study-depth="4"]:not(.feedback-stage-open) .onion-timer.primary,
body[data-study-depth="4"]:not(.feedback-stage-open) .onion-timer.secondary {
  opacity: .62;
  transform: scale(.982);
}

body[data-study-depth="4"]:not(.feedback-stage-open) #flowActions button:not(.primary):not(.success) {
  opacity: .82;
}

/* Feedback reward feel: less table-like, more completion-like. */
.feedback-orb-bottom {
  border-top-color: rgba(255,255,255,.055) !important;
}

.feedback-orb-stats {
  gap: 10px !important;
}

.feedback-orb-stats span {
  text-transform: none !important;
  letter-spacing: .04em !important;
  color: rgba(246,239,231,.58) !important;
}

.feedback-orb-stats div {
  background:
    radial-gradient(circle at 24% 0%, rgba(var(--hot-rgb), .075), transparent 42%),
    rgba(255,255,255,.032) !important;
  border-color: rgba(255,255,255,.075) !important;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.feedback-orb-stats div.reward-pulse {
  transform: translateY(-1px) scale(1.012);
  border-color: rgba(var(--hot-rgb), .30) !important;
  box-shadow: 0 12px 30px rgba(var(--hot-rgb), .13) !important;
}

.feedback-progress-fill {
  transition: width .24s cubic-bezier(.2, .8, .2, 1), filter .24s ease !important;
}

.feedback-stage.near-level .feedback-progress-fill {
  filter: saturate(1.2) brightness(1.12);
}

.feedback-stage.near-level .feedback-orb-progress-copy strong::after {
  content: " · 接近下一阶段";
  font-size: .72em;
  font-weight: 700;
  color: var(--v42-ok);
  white-space: nowrap;
}

.feedback-orbit-host.v42-orb-brighten {
  animation: v42OrbBrighten 360ms ease-out both;
}

@keyframes v42OrbBrighten {
  0% { filter: brightness(1) saturate(1); }
  38% { filter: brightness(1.16) saturate(1.10); }
  100% { filter: brightness(1) saturate(1); }
}

/* Recoverable UI. */
.v42-recoverable-backdrop {
  position: fixed;
  inset: 0;
  z-index: 96000;
  display: none;
  place-items: center;
  padding: max(16px, var(--app-safe-top)) max(16px, env(safe-area-inset-right, 0px)) calc(18px + var(--app-safe-bottom)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(3, 5, 9, .58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.v42-recoverable-backdrop.visible {
  display: grid;
}

.v42-recoverable-card {
  width: min(100%, 520px);
  max-height: calc(var(--app-viewport-height) - 36px - var(--app-safe-top) - var(--app-safe-bottom));
  overflow: auto;
  border-radius: 28px;
  border: 1px solid var(--v42-border-main);
  background:
    radial-gradient(circle at 24% 0%, rgba(var(--hot-rgb), .12), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(var(--cold-rgb), .12), transparent 34%),
    var(--v42-surface-strong);
  color: var(--v42-text);
  box-shadow: 0 30px 80px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.07);
  padding: 22px;
}

.v42-recoverable-eyebrow {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246,239,231,.54);
  font-weight: 800;
}

.v42-recoverable-title {
  margin: 8px 0 6px;
  font-size: clamp(1.55rem, 6.6vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.v42-recoverable-desc {
  margin: 0 0 16px;
  color: var(--v42-muted);
  line-height: 1.6;
}

.v42-recoverable-actions,
.v42-toast-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.v42-recoverable-actions button,
.v42-toast-actions button {
  flex: 1 1 132px;
  min-height: 46px;
  border-radius: 16px;
}

/* Redesigned manual. */
.help-v42-manual {
  display: grid;
  gap: 18px;
}

.help-v42-hero {
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--hot-rgb), .10), transparent 35%),
    radial-gradient(circle at 88% 12%, rgba(var(--cold-rgb), .12), transparent 36%),
    rgba(255,255,255,.04) !important;
}

.help-v42-hero h3 {
  font-size: clamp(1.45rem, 5.8vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  margin: 8px 0 8px;
}

.help-v42-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.help-v42-map div {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.038);
  border-radius: 16px;
  padding: 10px;
  min-width: 0;
}

.help-v42-map span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(var(--hot-rgb), .13);
  color: var(--v42-ok);
  font-weight: 900;
  margin-bottom: 9px;
}

.help-v42-map strong,
.help-v42-map em {
  display: block;
}

.help-v42-map strong {
  color: var(--v42-text);
}

.help-v42-map em {
  margin-top: 3px;
  font-style: normal;
  color: var(--v42-muted);
  font-size: .78rem;
}

.help-v42-steps {
  display: grid;
  gap: 10px;
}

.help-v42-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.085);
  background: rgba(255,255,255,.035);
  border-radius: 18px;
  padding: 12px;
}

.help-v42-step > span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(var(--hot-rgb), .14);
  color: var(--v42-ok);
  font-weight: 900;
}

.help-v42-step strong {
  color: var(--v42-text);
}

.help-v42-step p {
  margin: 4px 0 0;
}

.help-v42-grid {
  display: grid;
  gap: 10px;
}

.help-v42-grid .help-card {
  box-shadow: none !important;
}

/* Sound setting should feel like an emotional layer, not a raw config table. */
.sound-card .sound-grid {
  gap: 12px !important;
}

.sound-box {
  background:
    radial-gradient(circle at 16% 0%, rgba(var(--hot-rgb), .065), transparent 34%),
    rgba(255,255,255,.035) !important;
}

.sound-picker-button strong {
  color: var(--v42-ok) !important;
  letter-spacing: -.01em;
}

.sound-picker-button {
  min-height: 56px !important;
}

.sound-menu button[aria-selected="true"],
.sound-menu button.active {
  border-color: rgba(var(--hot-rgb), .25) !important;
  background: rgba(var(--hot-rgb), .10) !important;
}

/* Diagnostics and settings polish. */
.v42-diagnostics-card details {
  width: 100%;
}

.v42-diagnostics-card summary {
  cursor: pointer;
  font-weight: 850;
  font-size: 1.08rem;
  list-style: none;
}

.v42-diagnostics-card summary::-webkit-details-marker {
  display: none;
}

.v42-diagnostics-grid {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.v42-diagnostic-row {
  display: grid;
  grid-template-columns: minmax(100px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  border-radius: 18px;
  padding: 12px;
}

.v42-diagnostic-row span {
  color: rgba(246,239,231,.58);
  font-size: 12px;
}

.v42-diagnostic-row strong {
  word-break: break-word;
  font-size: .92rem;
  color: rgba(246,239,231,.9);
  font-variant-numeric: tabular-nums;
}

.v42-sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  padding: 7px 10px;
  background: rgba(255,255,255,.04);
  color: rgba(246,239,231,.72);
  font-size: 12px;
  font-weight: 800;
}

.v42-sync-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--v42-ok);
  box-shadow: 0 0 12px rgba(120,235,183,.4);
}

.v42-sync-chip.offline::before,
.v42-sync-chip.error::before {
  background: var(--v42-warn);
}

/* Toasts and first-use tips. */
.v42-toast-stack {
  position: fixed;
  left: max(14px, env(safe-area-inset-left, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + var(--app-safe-bottom));
  z-index: 97000;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.v42-toast {
  pointer-events: auto;
  width: min(100%, 520px);
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(14, 18, 27, .9);
  color: var(--v42-text);
  padding: 12px 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.v42-toast-title {
  font-weight: 850;
  margin-bottom: 4px;
}

.v42-toast-message {
  color: var(--v42-muted);
  line-height: 1.45;
  font-size: .92rem;
}

@media (min-width: 900px) {
  .v42-recoverable-card {
    width: min(720px, 100%);
    padding: 28px;
  }

  .help-v42-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v42-diagnostics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .help-modal {
    max-height: calc(var(--app-viewport-height) - 24px - var(--app-safe-top) - var(--app-safe-bottom)) !important;
  }

  .help-modal-scroll {
    max-height: calc(var(--app-viewport-height) - 170px - var(--app-safe-top) - var(--app-safe-bottom)) !important;
  }

  .help-v42-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v42-diagnostic-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/*
  Focus Onion v45 launch and layout recovery
  Baseline: v42 stable. This layer deliberately avoids the v43/v44 visual rewrite.
  Goals: one launch surface, no surprise UI during boot, reliable full-width mobile main pages.
*/
:root {
  --v45-launch-bg: #101722;
  --v45-launch-top: #172132;
  --v45-launch-bottom: #0b1018;
}

/* One consistent static launch surface. The PWA startup image uses the same colors and centered logo. */
html,
body,
body.booting {
  background-color: var(--v45-launch-bg) !important;
}

body.booting {
  overflow: hidden !important;
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
  max-height: var(--app-viewport-height) !important;
}

body.booting .app {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.boot-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
  max-height: var(--app-viewport-height) !important;
  display: grid !important;
  place-items: center !important;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)) !important;
  background-color: var(--v45-launch-bg) !important;
  background-image:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.055), transparent 30%),
    linear-gradient(180deg, var(--v45-launch-top), var(--v45-launch-bottom) 86%) !important;
  transition: none !important;
  animation: none !important;
  transform: translateZ(0) !important;
  z-index: 99999 !important;
}

.boot-screen *,
.boot-screen::before,
.boot-screen::after {
  transition: none !important;
  animation: none !important;
}

.boot-screen::before,
.boot-screen::after,
.boot-screen__orb,
.boot-screen__sub {
  display: none !important;
  content: none !important;
}

.boot-screen__unit {
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
  transform: none !important;
}

.boot-screen__brand {
  color: #f7f3ea !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
  font-size: clamp(2.45rem, 11vw, 4.25rem) !important;
  font-weight: 850 !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
  text-shadow: 0 22px 70px rgba(0,0,0,.44) !important;
  transform: none !important;
}

/* No toast, update prompt, recoverable dialog, hint, help, or theme modal may appear over the launch surface. */
body.booting .v42-toast-stack,
body.booting .v42-recoverable-backdrop,
body.booting #themeModal,
body.booting #helpModal,
body.booting #helpHintModal,
body.booting .modal-backdrop:not(#bootScreen) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Restore a stable, full-width mobile stage. */
@media (max-width: 720px) {
  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: var(--app-viewport-height) !important;
    min-height: var(--app-viewport-height) !important;
    max-height: var(--app-viewport-height) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: pan-x !important;
    padding: 0 !important;
  }

  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .app {
    width: 100% !important;
    max-width: 480px !important;
    height: var(--app-viewport-height) !important;
    max-height: var(--app-viewport-height) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: max(14px, env(safe-area-inset-top, 0px)) clamp(16px, 4.8vw, 22px) calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: clamp(10px, 1.5vh, 14px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) header {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 0 0 clamp(4px, .8vh, 8px) !important;
    display: grid !important;
    gap: clamp(5px, .85vh, 9px) !important;
  }

  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) header h1 {
    font-size: clamp(2.85rem, 13vw, 4.35rem) !important;
    line-height: .98 !important;
  }

  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .subtitle {
    font-size: clamp(.92rem, 4vw, 1.1rem) !important;
    line-height: 1.45 !important;
  }

  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .app-area.visible {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) #calendarCard,
  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) #settingsPanel {
    display: none !important;
  }

  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .onion-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .onion-card {
    min-height: clamp(330px, 44vh, 410px) !important;
    max-height: min(48vh, 430px) !important;
    padding: clamp(18px, 5vw, 24px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
    align-content: center !important;
  }

  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) #flowTitle {
    font-size: clamp(2.25rem, 10.8vw, 3.25rem) !important;
    line-height: .98 !important;
  }

  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) #flowDesc {
    max-width: 17em !important;
    font-size: clamp(.98rem, 4vw, 1.08rem) !important;
    line-height: 1.55 !important;
  }

  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) #flowActions {
    margin-top: clamp(18px, 4vh, 28px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) #flowActions [data-flow-action="enter-env"] {
    width: 100% !important;
    min-height: clamp(64px, 8.6vh, 78px) !important;
    font-size: clamp(1.05rem, 4.4vw, 1.18rem) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) header,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) header,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) header {
    display: none !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .app-area.visible,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .app-area.visible,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .app-area.visible {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .onion-card,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .onion-card,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .onion-card {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: clamp(14px, 3.8vw, 19px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(9px, 1.4vh, 13px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .onion-timers,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .onion-timers,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) .onion-timers {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: clamp(8px, 1.2vh, 12px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) #flowActions,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) #flowActions,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) #flowActions {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(9px, 2vw, 12px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) #flowActions button,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) #flowActions button,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.sound-selecting) #flowActions button {
    min-height: clamp(50px, 7vh, 60px) !important;
    font-size: clamp(.92rem, 3.7vw, 1.04rem) !important;
  }

  /* When a real panel/modal opens, restore normal scroll. */
  body.subpanel-open,
  body.modal-open,
  body.sound-selecting {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    padding: max(22px, env(safe-area-inset-top, 0px)) 14px max(22px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Balanced theme lift: brighter but still focused, not the v43/v44 high-contrast rewrite. */
body[data-theme="redCold"] {
  --page-background:
    radial-gradient(circle at 10% 0%, rgba(var(--hot-rgb), 0.24), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(var(--cold-rgb), 0.25), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(var(--hot-deep-rgb), 0.12), transparent 40%),
    linear-gradient(180deg, #161d2a 0%, #0e131d 100%) !important;
}

body[data-theme="inkGold"] {
  --page-background:
    radial-gradient(circle at 14% 0%, rgba(214,182,106,.18), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(224,205,147,.13), transparent 32%),
    linear-gradient(180deg, #1b1a15 0%, #11110f 100%) !important;
}

body[data-theme="blueAcid"] {
  --page-background:
    radial-gradient(circle at 12% 0%, rgba(87,227,137,.18), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(157,217,255,.18), transparent 32%),
    radial-gradient(circle at 52% 96%, rgba(199,125,255,.12), transparent 40%),
    linear-gradient(180deg, #111b34 0%, #0b1023 100%) !important;
}

body[data-theme="paperRed"] {
  --page-background:
    radial-gradient(circle at 12% 0%, rgba(255,77,61,.20), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(255,138,122,.14), transparent 34%),
    linear-gradient(180deg, #241c19 0%, #16110f 100%) !important;
}

body[data-theme="turtleShell"] {
  --page-background:
    radial-gradient(circle at 20% 12%, rgba(190,170,118,.16), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(109,132,104,.17), transparent 32%),
    linear-gradient(180deg, #1b211b 0%, #10140f 100%) !important;
}

body[data-theme="stainedGlass"] {
  --page-background:
    radial-gradient(circle at 14% 10%, rgba(205,80,97,.17), transparent 24%),
    radial-gradient(circle at 86% 14%, rgba(59,118,161,.18), transparent 26%),
    radial-gradient(circle at 62% 18%, rgba(221,173,72,.12), transparent 22%),
    linear-gradient(180deg, #252230 0%, #12151d 100%) !important;
}

body[data-theme="artNouveauBloom"] {
  --page-background:
    radial-gradient(circle at 16% 10%, rgba(205,176,112,.18), transparent 26%),
    radial-gradient(circle at 84% 18%, rgba(104,142,101,.18), transparent 24%),
    linear-gradient(180deg, #1d3a31 0%, #101d19 100%) !important;
}

body[data-theme="artDecoNoir"] {
  --page-background:
    radial-gradient(circle at 50% -10%, rgba(212,177,93,.19), transparent 28%),
    radial-gradient(circle at 50% 88%, rgba(243,222,176,.07), transparent 38%),
    linear-gradient(180deg, #201a21 0%, #111014 100%) !important;
}

body[data-theme="artStudio"] {
  --page-background:
    radial-gradient(circle at 10% 10%, rgba(244,204,130,.20), transparent 24%),
    radial-gradient(circle at 84% 12%, rgba(76,126,169,.22), transparent 26%),
    radial-gradient(circle at 75% 84%, rgba(235,104,67,.20), transparent 30%),
    linear-gradient(180deg, #211a28 0%, #111018 100%) !important;
}


/* Focus Onion v48 bottom-safearea and credentials hotfix layer */
:root {
  --v48-safe-bottom-color: #0b1018;
  --v48-safe-page-color: #101722;
}

html,
body {
  background-color: var(--v48-safe-page-color) !important;
}

/* Paint beyond the CSS viewport so iOS/PWA home-indicator area does not expose pure black. */
#safeAreaFill {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(180deg, rgba(17,26,38,0), #111a26 38%, #111a26 100%) !important;
  z-index: 99990 !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
}

body.booting #safeAreaFill {
  background: #111a26 !important;
  z-index: 100000 !important;
}

body.app-ready #safeAreaFill {
  background: linear-gradient(180deg, rgba(17,26,38,0), #111a26 40%, #111a26 100%) !important;
}

.boot-screen {
  inset: 0 0 -120px 0 !important;
  height: auto !important;
  min-height: calc(var(--app-viewport-height) + 120px) !important;
  max-height: none !important;
  padding: 0 !important;
  background: #111a26 !important;
  background-image: radial-gradient(circle at 50% 18%, rgba(255,255,255,.055), transparent 28%), linear-gradient(180deg, #162030, #111a26 100%) !important;
}

.secure-text-input {
  -webkit-text-security: disc;
}

#passwordInput::-webkit-credentials-auto-fill-button,
#passwordInput::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
}

/* v48: no automatic first-use/update toasts on first entry. */
.v42-toast-stack:empty,
.v42-recoverable-backdrop:not(.visible) {
  display: none !important;
}

/* v48: settings/calendar sheets must remain clickable while the study page itself stays locked. */
@media (max-width: 720px) {
  body.panel-sheet-open,
  body.subpanel-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: var(--app-viewport-height) !important;
    min-height: var(--app-viewport-height) !important;
    max-height: var(--app-viewport-height) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
    padding: 0 !important;
    background-color: var(--v48-safe-page-color) !important;
  }

  body.panel-sheet-open .app,
  body.subpanel-open .app {
    width: 100% !important;
    max-width: 480px !important;
    height: var(--app-viewport-height) !important;
    max-height: var(--app-viewport-height) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: max(14px, env(safe-area-inset-top, 0px)) clamp(16px, 4.8vw, 22px) calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.panel-sheet-open .app-area.visible,
  body.subpanel-open .app-area.visible {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: visible !important;
  }

  body.panel-sheet-open #calendarCard.open,
  body.subpanel-open #calendarCard.open,
  body.panel-sheet-open #settingsPanel.open,
  body.subpanel-open #settingsPanel.open {
    display: block !important;
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    top: max(14px, env(safe-area-inset-top, 0px)) !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: min(520px, calc(100vw - 24px)) !important;
    margin: 0 auto !important;
    max-height: none !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 18px !important;
    z-index: 13000 !important;
    border-color: var(--v42-border-main) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(var(--cold-rgb), .08), transparent 28%),
      rgba(14, 18, 28, .96) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
    border-radius: 26px !important;
  }

  body.panel-sheet-open #settingsPanel.open,
  body.subpanel-open #settingsPanel.open {
    display: grid !important;
    gap: 14px !important;
  }

  body.panel-sheet-open #calendarCard.open .panel-sheet-close,
  body.subpanel-open #calendarCard.open .panel-sheet-close,
  body.panel-sheet-open #settingsPanel.open .panel-sheet-close,
  body.subpanel-open #settingsPanel.open .panel-sheet-close {
    display: inline-flex !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    margin-left: auto !important;
    margin-bottom: 10px !important;
  }

  body.panel-sheet-open #calendarCard.open *,
  body.subpanel-open #calendarCard.open *,
  body.panel-sheet-open #settingsPanel.open *,
  body.subpanel-open #settingsPanel.open * {
    pointer-events: auto !important;
  }
}


/* v48 final bottom and launch override: keep the home-indicator strip the same color as the page. */
html, body { background-color: #111a26 !important; }
html::before, body::before { background-color: #111a26 !important; }
body::after { background: linear-gradient(180deg, rgba(17,26,38,0), rgba(17,26,38,.22) 78%, #111a26 100%) !important; }
body.booting, body.booting::before { background-color: #111a26 !important; }
.boot-screen { inset: 0 0 -120px 0 !important; min-height: calc(var(--app-viewport-height) + 120px) !important; height: auto !important; max-height: none !important; background: #111a26 !important; background-image: radial-gradient(circle at 50% 18%, rgba(255,255,255,.055), transparent 28%), linear-gradient(180deg,#162030,#111a26 100%) !important; }
.boot-screen__unit { position: absolute !important; left:0 !important; right:0 !important; top:42% !important; transform: translateY(-50%) !important; }
#safeAreaFill { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: calc(120px + env(safe-area-inset-bottom, 0px)) !important; z-index: 99990 !important; background: linear-gradient(180deg, rgba(17,26,38,0), #111a26 35%, #111a26 100%) !important; pointer-events:none !important; }
body.booting #safeAreaFill { z-index: 100000 !important; background: #111a26 !important; }
.secure-text-input { -webkit-text-security: disc; }


/* ===== Consolidated from src/styles/experience-v49.css ===== */
/*
  Focus Onion v49 structural fix
  Scope: launch/safe-area unification and mobile study-shell structure only.
  This file deliberately avoids the v43/v44 visual rewrite and does not touch
  login, Pixi, calendar data, or cloud-sync core logic.
*/

:root {
  --fo-launch-solid: #111a26;
  --fo-launch-top: #111a26;
  --fo-launch-bottom: #111a26;
  --fo-shell-pad-x: clamp(14px, 4.5vw, 22px);
  --fo-shell-pad-top: max(10px, env(safe-area-inset-top, 0px));
  --fo-shell-pad-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  --fo-study-gap: clamp(8px, 1.15vh, 13px);
}

html,
body {
  background-color: var(--fo-launch-solid) !important;
}

html::before,
body::before {
  background-color: var(--fo-launch-solid) !important;
}

/* Safe-area is never allowed to paint a separate color band. */
#safeAreaFill {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--fo-launch-solid) !important;
  background-image: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: translateZ(0) !important;
}

body.booting #safeAreaFill {
  display: none !important;
}

body.booting,
body.booting::before,
body.booting::after {
  background: var(--fo-launch-solid) !important;
  background-color: var(--fo-launch-solid) !important;
  background-image: none !important;
}

body.booting {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
  max-height: var(--app-viewport-height) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.boot-screen {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: calc(-180px - env(safe-area-inset-bottom, 0px)) !important;
  width: 100vw !important;
  height: auto !important;
  min-height: calc(var(--app-viewport-height) + 180px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: none !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--fo-launch-solid) !important;
  background-color: var(--fo-launch-solid) !important;
  background-image: none !important;
  contain: layout paint style !important;
  transform: translateZ(0) !important;
  z-index: 99999 !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 220ms ease !important;
}

.boot-screen::before,
.boot-screen::after,
.boot-screen__orb,
.boot-screen__sub {
  display: none !important;
  content: none !important;
}

.boot-screen__unit {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  transform: translateY(-2vh) !important;
}

.boot-screen__brand {
  color: #f7f3ea !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
  font-size: clamp(2.45rem, 11vw, 4.2rem) !important;
  font-weight: 850 !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
  text-shadow: 0 22px 70px rgba(0,0,0,.42) !important;
}

body:not(.booting) .boot-screen[aria-hidden="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.booting .app,
body.booting .v42-toast-stack,
body.booting .v42-recoverable-backdrop,
body.booting #themeModal,
body.booting #helpModal,
body.booting #helpHintModal,
body.booting .modal-backdrop:not(#bootScreen) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

body.boot-complete .app {
  animation: foV49AppIn 220ms ease both;
}

@keyframes foV49AppIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  /* Default app shell: fixed viewport for the study flow only. */
  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--app-viewport-height) !important;
    min-height: var(--app-viewport-height) !important;
    max-height: var(--app-viewport-height) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: pan-x !important;
    padding: 0 !important;
    background-color: var(--fo-launch-solid) !important;
  }

  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .app {
    width: min(100vw, 520px) !important;
    height: var(--app-viewport-height) !important;
    min-height: 0 !important;
    max-height: var(--app-viewport-height) !important;
    margin: 0 auto !important;
    padding: var(--fo-shell-pad-top) var(--fo-shell-pad-x) var(--fo-shell-pad-bottom) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    gap: var(--fo-study-gap) !important;
    overflow: hidden !important;
  }

  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) header {
    min-height: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: clamp(4px, .72vh, 8px) !important;
    align-content: center !important;
  }

  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) header h1 {
    font-size: clamp(2.45rem, 11.4vw, 4rem) !important;
    line-height: .98 !important;
  }

  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .app-area.visible {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #calendarCard,
  body.app-ready:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #settingsPanel {
    display: none !important;
  }

  /* Layer 1 keeps the brand header, but still fits in one viewport. */
  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: clamp(330px, 45vh, 430px) !important;
    max-height: min(48vh, 440px) !important;
    margin: auto 0 !important;
    padding: clamp(17px, 4.8vw, 24px) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    gap: clamp(10px, 1.4vh, 14px) !important;
    overflow: hidden !important;
  }

  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle {
    font-size: clamp(2rem, 9.7vw, 3.05rem) !important;
    line-height: .98 !important;
  }

  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc {
    max-width: 16.5em !important;
    font-size: clamp(.96rem, 3.85vw, 1.08rem) !important;
    line-height: 1.52 !important;
  }

  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: clamp(12px, 2.4vh, 24px) !important;
    gap: 0 !important;
  }

  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .flow-action-placeholder,
  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .flow-subtools,
  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .fullscreen-hint,
  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-duration {
    display: none !important;
  }

  body.app-ready[data-study-depth="1"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions [data-flow-action="enter-env"] {
    width: 100% !important;
    min-height: clamp(62px, 8.2vh, 76px) !important;
  }

  /* Layers 2/3/4 use a real three-part shell: head / middle / bottom controls. */
  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) header,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) header,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) header {
    display: none !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .app,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .app,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .app {
    grid-template-rows: minmax(0, 1fr) !important;
    padding-top: max(9px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(9px, env(safe-area-inset-bottom, 0px)) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: clamp(12px, 3.2vw, 18px) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    gap: clamp(8px, 1.1vh, 12px) !important;
    overflow: hidden !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card .head-row,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card .head-row,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card .head-row {
    min-height: 0 !important;
    margin: 0 !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle {
    font-size: clamp(1.72rem, 8.1vw, 2.75rem) !important;
    line-height: .98 !important;
    max-width: calc(100% - 92px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc {
    max-width: 21em !important;
    font-size: clamp(.84rem, 3.35vw, 1rem) !important;
    line-height: 1.45 !important;
    opacity: .76 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-duration.hidden,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-duration.hidden,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-duration.hidden {
    display: none !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers {
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: grid !important;
    align-content: center !important;
    gap: clamp(7px, 1vh, 10px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer {
    min-height: 0 !important;
    padding: clamp(11px, 3vw, 16px) !important;
    border-radius: 22px !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child {
    min-height: clamp(128px, 24vh, 215px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer span,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer span,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer span {
    font-size: clamp(1.35rem, 7vw, 2.35rem) !important;
    line-height: .96 !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child span,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child span,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child span {
    font-size: clamp(2.85rem, 14vw, 4.9rem) !important;
    line-height: .88 !important;
  }

  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:not(:first-child) {
    opacity: .68 !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions {
    min-height: clamp(52px, 7.2vh, 64px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(9px, 2.2vw, 12px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions button,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions button,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions button {
    min-height: clamp(50px, 7.2vh, 62px) !important;
    font-size: clamp(.9rem, 3.7vw, 1rem) !important;
    border-radius: 21px !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools {
    min-height: clamp(46px, 6.4vh, 56px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(9px, 2.2vw, 12px) !important;
    opacity: .86 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools .subtool-btn,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools .subtool-btn,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools .subtool-btn {
    min-height: clamp(44px, 6.2vh, 54px) !important;
    border-radius: 18px !important;
    font-size: clamp(.88rem, 3.6vw, .98rem) !important;
  }

  .fullscreen-hint {
    display: none !important;
  }

  /* Panel mode: lock the study shell behind, make the panel the only vertical scroller. */
  body.subpanel-open,
  body.panel-sheet-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--app-viewport-height) !important;
    min-height: var(--app-viewport-height) !important;
    max-height: var(--app-viewport-height) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
    padding: 0 !important;
  }

  body.subpanel-open .app,
  body.panel-sheet-open .app {
    width: min(100vw, 520px) !important;
    height: var(--app-viewport-height) !important;
    min-height: 0 !important;
    max-height: var(--app-viewport-height) !important;
    margin: 0 auto !important;
    padding: var(--fo-shell-pad-top) var(--fo-shell-pad-x) var(--fo-shell-pad-bottom) !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.subpanel-open .onion-card,
  body.panel-sheet-open .onion-card {
    filter: brightness(.72) blur(.2px) !important;
    pointer-events: none !important;
  }

  body.subpanel-open #calendarCard.open,
  body.subpanel-open #settingsPanel.open,
  body.panel-sheet-open #calendarCard.open,
  body.panel-sheet-open #settingsPanel.open {
    position: fixed !important;
    z-index: 98000 !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    border-radius: 26px !important;
    box-sizing: border-box !important;
  }

  body.subpanel-open #settingsPanel.open,
  body.panel-sheet-open #settingsPanel.open {
    display: grid !important;
    gap: 12px !important;
    align-content: start !important;
  }

  .panel-sheet-close {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }
}


/* ===== Consolidated from src/styles/experience-v50.css ===== */
/*
  Focus Onion v50 layer-layout fix
  Scope: only layer 2 / 3 / 4 mobile study composition.
  It intentionally preserves v49 launch/safe-area fixes and does not touch
  login, Pixi, calendar data, cloud sync, or the layer-1 home layout.
*/

@media (max-width: 720px) {
  :root {
    --fo-layer-card-pad: clamp(14px, 3.8vw, 18px);
    --fo-layer-gap: clamp(8px, 1.05vh, 12px);
    --fo-layer-bottom-button: clamp(48px, 6.2vh, 58px);
    --fo-layer-subtool: clamp(42px, 5.7vh, 50px);
  }

  /* Keep v49's fixed one-screen shell, but make layer pages compose predictably. */
  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .app,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .app,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .app {
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: clamp(12px, 3.8vw, 18px) !important;
    padding-right: clamp(12px, 3.8vw, 18px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: var(--fo-layer-card-pad) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
    gap: var(--fo-layer-gap) !important;
    align-content: stretch !important;
    overflow: hidden !important;
    border-radius: clamp(24px, 6vw, 30px) !important;
  }

  /* Top copy: compact, readable, and never allowed to steal the screen. */
  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card .head-row,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card .head-row,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card .head-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle {
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(1.85rem, 8.1vw, 2.72rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    word-break: keep-all !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.panel-sheet-open):not(.sound-selecting) #flowDesc {
    max-width: 20em !important;
    margin: clamp(6px, .8vh, 9px) 0 0 !important;
    font-size: clamp(.86rem, 3.3vw, .98rem) !important;
    line-height: 1.45 !important;
    opacity: .74 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowBadge,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowBadge,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowBadge {
    padding: 9px 14px !important;
    min-width: 76px !important;
    font-size: clamp(.78rem, 3.1vw, .92rem) !important;
    white-space: nowrap !important;
  }

  /* Middle instrument area: the timer block owns the center, not the whole page. */
  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers {
    min-height: 0 !important;
    align-self: stretch !important;
    display: grid !important;
    gap: clamp(8px, 1.05vh, 12px) !important;
    align-content: center !important;
    overflow: hidden !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer {
    min-height: 0 !important;
    padding: clamp(12px, 3.2vw, 16px) !important;
    border-radius: clamp(20px, 5vw, 24px) !important;
    display: grid !important;
    align-content: center !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer strong,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.panel-sheet-open):not(.sound-selecting) .onion-timer strong,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer strong {
    font-size: clamp(.82rem, 3.35vw, 1rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .02em !important;
    opacity: .82 !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer span,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer span,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer span {
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -.045em !important;
  }

  /* Layer 2: one calm instrument card centered between header and controls. */
  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child {
    min-height: clamp(150px, 29vh, 230px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child span {
    font-size: clamp(3.1rem, 15vw, 5.2rem) !important;
    line-height: .88 !important;
  }

  /* Layer 3: study timer is primary; environment becomes a compact auxiliary readout. */
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child {
    min-height: clamp(140px, 25vh, 205px) !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child span {
    font-size: clamp(3rem, 14.2vw, 5rem) !important;
    line-height: .88 !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer.secondary {
    min-height: clamp(54px, 8vh, 70px) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    align-content: center !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer.secondary span {
    font-size: clamp(1.15rem, 5.3vw, 1.72rem) !important;
    line-height: 1 !important;
  }

  /* Layer 4: deep timer dominates; study/env become two quiet instruments. */
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
  }

  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child {
    grid-column: 1 / -1 !important;
    min-height: clamp(145px, 25vh, 210px) !important;
  }

  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child span {
    font-size: clamp(3rem, 14.4vw, 5rem) !important;
    line-height: .88 !important;
  }

  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:not(:first-child) {
    min-height: clamp(64px, 9vh, 82px) !important;
    opacity: .72 !important;
  }

  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:not(:first-child) span {
    font-size: clamp(1.05rem, 5vw, 1.55rem) !important;
    line-height: 1 !important;
  }

  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-pause-note {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    font-size: .78rem !important;
    opacity: .72 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Duration row only belongs to layer 3 and must not crowd the bottom controls. */
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDurationRow:not(.hidden) {
    min-height: clamp(54px, 7.8vh, 68px) !important;
    margin: 0 !important;
    padding: clamp(8px, 2vw, 12px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(70px, 92px) minmax(74px, 96px) !important;
    gap: 8px !important;
    align-items: center !important;
    border-radius: 18px !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDurationRow label {
    min-width: 0 !important;
    font-size: clamp(.78rem, 3vw, .9rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDurationRow input,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDurationRow button {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    font-size: .92rem !important;
  }

  body.app-ready[data-study-depth="2"] #flowDurationRow,
  body.app-ready[data-study-depth="4"] #flowDurationRow {
    display: none !important;
  }

  /* Bottom operation area: fixed rhythm across layers. */
  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions {
    min-height: var(--fo-layer-bottom-button) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(9px, 2.4vw, 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions button,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions button,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.panel-sheet-open):not(.sound-selecting) #flowActions button {
    min-height: var(--fo-layer-bottom-button) !important;
    height: var(--fo-layer-bottom-button) !important;
    border-radius: 20px !important;
    font-size: clamp(.88rem, 3.5vw, 1rem) !important;
    padding: 0 12px !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools {
    min-height: var(--fo-layer-subtool) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(9px, 2.4vw, 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: .8 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools .subtool-btn,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools .subtool-btn,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.panel-sheet-open):not(.sound-selecting) #flowSubtools .subtool-btn {
    min-height: var(--fo-layer-subtool) !important;
    height: var(--fo-layer-subtool) !important;
    border-radius: 17px !important;
    font-size: clamp(.82rem, 3.35vw, .94rem) !important;
  }

  /* Very short devices: compact copy first, never hide controls. */
  @media (max-height: 760px) {
    body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
    body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
    body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc {
      -webkit-line-clamp: 1 !important;
    }

    body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card,
    body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card,
    body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card {
      gap: 7px !important;
      padding: 12px !important;
    }

    body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child,
    body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child,
    body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child {
      min-height: clamp(122px, 22vh, 175px) !important;
    }
  }
}


/* ===== Consolidated from src/styles/experience-v51.css ===== */
/*
  Focus Onion v51 panel-motion and orbit-warmup fix
  Scope: preserves v50 layer composition; adds panel enter motion and faster perceived feedback-orbit startup.
  It intentionally preserves v49 launch/safe-area fixes and does not touch
  login, Pixi, calendar data, cloud sync, or the layer-1 home layout.
*/

@media (max-width: 720px) {
  :root {
    --fo-layer-card-pad: clamp(14px, 3.8vw, 18px);
    --fo-layer-gap: clamp(8px, 1.05vh, 12px);
    --fo-layer-bottom-button: clamp(48px, 6.2vh, 58px);
    --fo-layer-subtool: clamp(42px, 5.7vh, 50px);
  }

  /* Keep v49's fixed one-screen shell, but make layer pages compose predictably. */
  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .app,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .app,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .app {
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: clamp(12px, 3.8vw, 18px) !important;
    padding-right: clamp(12px, 3.8vw, 18px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: var(--fo-layer-card-pad) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
    gap: var(--fo-layer-gap) !important;
    align-content: stretch !important;
    overflow: hidden !important;
    border-radius: clamp(24px, 6vw, 30px) !important;
  }

  /* Top copy: compact, readable, and never allowed to steal the screen. */
  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card .head-row,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card .head-row,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card .head-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle {
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(1.85rem, 8.1vw, 2.72rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    word-break: keep-all !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.panel-sheet-open):not(.sound-selecting) #flowDesc {
    max-width: 20em !important;
    margin: clamp(6px, .8vh, 9px) 0 0 !important;
    font-size: clamp(.86rem, 3.3vw, .98rem) !important;
    line-height: 1.45 !important;
    opacity: .74 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowBadge,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowBadge,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowBadge {
    padding: 9px 14px !important;
    min-width: 76px !important;
    font-size: clamp(.78rem, 3.1vw, .92rem) !important;
    white-space: nowrap !important;
  }

  /* Middle instrument area: the timer block owns the center, not the whole page. */
  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers {
    min-height: 0 !important;
    align-self: stretch !important;
    display: grid !important;
    gap: clamp(8px, 1.05vh, 12px) !important;
    align-content: center !important;
    overflow: hidden !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer {
    min-height: 0 !important;
    padding: clamp(12px, 3.2vw, 16px) !important;
    border-radius: clamp(20px, 5vw, 24px) !important;
    display: grid !important;
    align-content: center !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer strong,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.panel-sheet-open):not(.sound-selecting) .onion-timer strong,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer strong {
    font-size: clamp(.82rem, 3.35vw, 1rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .02em !important;
    opacity: .82 !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer span,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer span,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer span {
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -.045em !important;
  }

  /* Layer 2: one calm instrument card centered between header and controls. */
  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child {
    min-height: clamp(150px, 29vh, 230px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child span {
    font-size: clamp(3.1rem, 15vw, 5.2rem) !important;
    line-height: .88 !important;
  }

  /* Layer 3: study timer is primary; environment becomes a compact auxiliary readout. */
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child {
    min-height: clamp(140px, 25vh, 205px) !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child span {
    font-size: clamp(3rem, 14.2vw, 5rem) !important;
    line-height: .88 !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer.secondary {
    min-height: clamp(54px, 8vh, 70px) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    align-content: center !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer.secondary span {
    font-size: clamp(1.15rem, 5.3vw, 1.72rem) !important;
    line-height: 1 !important;
  }

  /* Layer 4: deep timer dominates; study/env become two quiet instruments. */
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
  }

  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child {
    grid-column: 1 / -1 !important;
    min-height: clamp(145px, 25vh, 210px) !important;
  }

  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child span {
    font-size: clamp(3rem, 14.4vw, 5rem) !important;
    line-height: .88 !important;
  }

  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:not(:first-child) {
    min-height: clamp(64px, 9vh, 82px) !important;
    opacity: .72 !important;
  }

  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:not(:first-child) span {
    font-size: clamp(1.05rem, 5vw, 1.55rem) !important;
    line-height: 1 !important;
  }

  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-pause-note {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    font-size: .78rem !important;
    opacity: .72 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Duration row only belongs to layer 3 and must not crowd the bottom controls. */
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDurationRow:not(.hidden) {
    min-height: clamp(54px, 7.8vh, 68px) !important;
    margin: 0 !important;
    padding: clamp(8px, 2vw, 12px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(70px, 92px) minmax(74px, 96px) !important;
    gap: 8px !important;
    align-items: center !important;
    border-radius: 18px !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDurationRow label {
    min-width: 0 !important;
    font-size: clamp(.78rem, 3vw, .9rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDurationRow input,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDurationRow button {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    font-size: .92rem !important;
  }

  body.app-ready[data-study-depth="2"] #flowDurationRow,
  body.app-ready[data-study-depth="4"] #flowDurationRow {
    display: none !important;
  }

  /* Bottom operation area: fixed rhythm across layers. */
  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions {
    min-height: var(--fo-layer-bottom-button) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(9px, 2.4vw, 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions button,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions button,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.panel-sheet-open):not(.sound-selecting) #flowActions button {
    min-height: var(--fo-layer-bottom-button) !important;
    height: var(--fo-layer-bottom-button) !important;
    border-radius: 20px !important;
    font-size: clamp(.88rem, 3.5vw, 1rem) !important;
    padding: 0 12px !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools {
    min-height: var(--fo-layer-subtool) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(9px, 2.4vw, 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: .8 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools .subtool-btn,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools .subtool-btn,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.panel-sheet-open):not(.sound-selecting) #flowSubtools .subtool-btn {
    min-height: var(--fo-layer-subtool) !important;
    height: var(--fo-layer-subtool) !important;
    border-radius: 17px !important;
    font-size: clamp(.82rem, 3.35vw, .94rem) !important;
  }

  /* Very short devices: compact copy first, never hide controls. */
  @media (max-height: 760px) {
    body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
    body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
    body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc {
      -webkit-line-clamp: 1 !important;
    }

    body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card,
    body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card,
    body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card {
      gap: 7px !important;
      padding: 12px !important;
    }

    body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child,
    body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child,
    body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child {
      min-height: clamp(122px, 22vh, 175px) !important;
    }
  }
}


/* v51: calendar/settings sheet motion. Keeps the fixed panel model from v49/v50. */
@media (max-width: 860px) {
  #calendarCard,
  #settingsPanel,
  body.app-ready.panel-sheet-open:not(.subpanel-open) #calendarCard,
  body.app-ready.panel-sheet-open:not(.subpanel-open) #settingsPanel {
    transform-origin: 50% 100% !important;
    transform: translate3d(0, calc(100% + 24px), 0) scale(.965) !important;
    opacity: 0 !important;
    filter: blur(6px) saturate(.92) !important;
    transition:
      transform 235ms cubic-bezier(.18,.92,.26,1),
      opacity 180ms ease,
      filter 180ms ease !important;
    will-change: transform, opacity, filter !important;
  }

  #calendarCard.open,
  #settingsPanel.open,
  body.app-ready.panel-sheet-open:not(.subpanel-open) #calendarCard.open,
  body.app-ready.panel-sheet-open:not(.subpanel-open) #settingsPanel.open {
    transform: translate3d(0, 0, 0) scale(1) !important;
    opacity: 1 !important;
    filter: blur(0) saturate(1) !important;
    animation: fo-v51-panel-rise 260ms cubic-bezier(.18,.92,.26,1) both !important;
  }

  body.app-ready.panel-sheet-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 8700;
    pointer-events: none;
    background: radial-gradient(circle at 50% 100%, rgba(0,0,0,.22), rgba(0,0,0,.08) 44%, rgba(0,0,0,0) 76%);
    opacity: 1;
    animation: fo-v51-sheet-dim 180ms ease both;
  }

  #calendarCard.open,
  #settingsPanel.open {
    z-index: 8900 !important;
  }
}

@keyframes fo-v51-panel-rise {
  0% { transform: translate3d(0, 28px, 0) scale(.965); opacity: 0; filter: blur(6px) saturate(.92); }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; filter: blur(0) saturate(1); }
}

@keyframes fo-v51-sheet-dim {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* v51: immediate low-cost placeholder so left-swipe feedback never feels blank while Pixi warms. */
.feedback-orbit-host {
  position: relative;
}

.feedback-orbit-host canvas[data-engine="focus-orbit-pixi"] {
  position: relative;
  z-index: 2;
}

.feedback-orbit-loading-placeholder {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: .86;
  transform: translateZ(0) scale(.985);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none !important;
}

.feedback-orbit-host[data-orbit-engine="pixi"] .feedback-orbit-loading-placeholder {
  opacity: 0;
  transform: translateZ(0) scale(1.015);
}

@media (prefers-reduced-motion: reduce) {
  #calendarCard,
  #settingsPanel,
  #calendarCard.open,
  #settingsPanel.open {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}


/* ===== Consolidated from src/styles/experience-v52.css ===== */
/* Focus Onion v52: actual calendar/settings sheet motion fix.
   This layer does not change layout; it only ensures panel opening and closing animations
   attach to the real fixed sheet nodes used by v49/v50. */

@media (max-width: 860px) {
  body.app-ready.subpanel-open.panel-sheet-open #calendarCard.open,
  body.app-ready.subpanel-open.panel-sheet-open #settingsPanel.open,
  body.app-ready.panel-sheet-closing #calendarCard.panel-closing,
  body.app-ready.panel-sheet-closing #settingsPanel.panel-closing {
    transform-origin: 50% 100% !important;
    backface-visibility: hidden !important;
    contain: layout paint style !important;
    will-change: transform, opacity, filter !important;
  }

  body.app-ready.subpanel-open.panel-sheet-open #calendarCard.open,
  body.app-ready.subpanel-open.panel-sheet-open #settingsPanel.open {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.app-ready.panel-sheet-closing::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 8700;
    pointer-events: none;
    background: radial-gradient(circle at 50% 100%, rgba(0,0,0,.18), rgba(0,0,0,.055) 48%, rgba(0,0,0,0) 78%);
    animation: fo-v52-sheet-dim-out 220ms ease both !important;
  }

  body.app-ready.subpanel-open.panel-sheet-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 8700;
    pointer-events: none;
    background: radial-gradient(circle at 50% 100%, rgba(0,0,0,.18), rgba(0,0,0,.055) 48%, rgba(0,0,0,0) 78%);
    animation: fo-v52-sheet-dim-in 200ms ease both !important;
  }

  body.app-ready.subpanel-open.panel-sheet-open #calendarCard.open,
  body.app-ready.subpanel-open.panel-sheet-open #settingsPanel.open,
  body.app-ready.panel-sheet-closing #calendarCard.panel-closing,
  body.app-ready.panel-sheet-closing #settingsPanel.panel-closing {
    z-index: 98000 !important;
  }
}

@keyframes fo-v52-sheet-dim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fo-v52-sheet-dim-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-ready.subpanel-open.panel-sheet-open #calendarCard.open,
  body.app-ready.subpanel-open.panel-sheet-open #settingsPanel.open,
  body.app-ready.panel-sheet-closing #calendarCard.panel-closing,
  body.app-ready.panel-sheet-closing #settingsPanel.panel-closing {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}


/* ===== Focus Onion v54 panel-close layout stabilization =====
   The preferred layer-2/3/4 composition was visible during panel closing,
   then later overwritten by the consolidated v50/v51 steady selectors.
   This final active layer makes that preferred composition the steady state,
   so closing calendar/settings no longer flashes one layout and settles into another.
*/
@media (max-width: 720px) {
  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(10px, 1.35vh, 14px) !important;
    padding: clamp(15px, 4vw, 20px) !important;
    overflow: hidden !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card .head-row,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card .head-row,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-card .head-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    flex: 0 0 auto !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowTitle {
    font-size: clamp(2.02rem, 9vw, 3.05rem) !important;
    line-height: .98 !important;
    max-width: calc(100% - 86px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    max-width: 18em !important;
    font-size: clamp(.94rem, 3.75vw, 1.08rem) !important;
    line-height: 1.42 !important;
    margin-top: clamp(6px, .8vh, 9px) !important;
    opacity: .78 !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timers {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: clamp(10px, 1.25vh, 14px) !important;
    align-content: stretch !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer {
    display: grid !important;
    align-content: center !important;
    gap: clamp(8px, 1.2vh, 12px) !important;
    padding: clamp(17px, 4.4vw, 24px) !important;
    border-radius: clamp(22px, 5.6vw, 28px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child {
    min-height: clamp(190px, 31vh, 285px) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child strong,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child strong,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child strong {
    font-size: clamp(1.78rem, 8vw, 2.65rem) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
    opacity: .96 !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child span,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child span,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child span {
    font-size: clamp(3.65rem, 16.4vw, 5.85rem) !important;
    line-height: .88 !important;
    letter-spacing: -.055em !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer.secondary,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:not(:first-child) {
    min-height: clamp(56px, 8.4vh, 78px) !important;
    padding: clamp(10px, 2.8vw, 14px) clamp(14px, 3.6vw, 18px) !important;
    opacity: .72 !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer.secondary strong,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:not(:first-child) strong {
    font-size: clamp(.82rem, 3.2vw, .95rem) !important;
    letter-spacing: .02em !important;
    opacity: .8 !important;
  }

  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer.secondary span,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:not(:first-child) span {
    font-size: clamp(1.26rem, 5.2vw, 1.75rem) !important;
    letter-spacing: -.035em !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(9px, 1.25vh, 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions button,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowActions button,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.panel-sheet-open):not(.sound-selecting) #flowActions button {
    width: 100% !important;
    min-height: clamp(54px, 7vh, 66px) !important;
    height: clamp(54px, 7vh, 66px) !important;
    border-radius: clamp(18px, 5vw, 24px) !important;
    font-size: clamp(.96rem, 3.9vw, 1.12rem) !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(9px, 2.3vw, 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: .8 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools .subtool-btn,
  body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowSubtools .subtool-btn,
  body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.modal-open):not(.panel-sheet-open):not(.sound-selecting) #flowSubtools .subtool-btn {
    min-height: clamp(44px, 5.8vh, 52px) !important;
    height: clamp(44px, 5.8vh, 52px) !important;
    border-radius: clamp(16px, 4.2vw, 20px) !important;
  }

  @media (max-height: 760px) {
    body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
    body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc,
    body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) #flowDesc {
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      overflow: hidden !important;
    }

    body.app-ready[data-study-depth="2"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child,
    body.app-ready[data-study-depth="3"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child,
    body.app-ready[data-study-depth="4"]:not(.feedback-stage-open):not(.subpanel-open):not(.panel-sheet-open):not(.modal-open):not(.sound-selecting) .onion-timer:first-child {
      min-height: clamp(150px, 25vh, 220px) !important;
    }
  }
}