/*
  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; }