/*
  Focus Onion Visual Design System v32
  Scope: aesthetic consolidation only. The functional JS, Pixi engine,
  timers, auth, cloud sync and gesture behavior remain unchanged.

  Design principles used here:
  - 60 / 30 / 10 color balance: dark quiet ground, cool structural color,
    warm accent for action and progress.
  - Gestalt grouping: related controls live on the same soft surface;
    unrelated groups use spacing rather than heavy borders.
  - Typographic hierarchy: one display level, one section level, one body level.
  - Mobile comfort: larger hit targets, gentler contrast, reduced visual noise.
*/

:root {
  color-scheme: dark;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius: 26px;

  --text-strong: var(--ink);
  --text-body: rgba(246, 239, 231, .82);
  --text-soft: rgba(246, 239, 231, .64);
  --text-faint: rgba(246, 239, 231, .46);

  --surface-0: rgba(255, 255, 255, .035);
  --surface-1: rgba(255, 255, 255, .058);
  --surface-2: rgba(255, 255, 255, .083);
  --surface-active: rgba(var(--hot-rgb), .14);
  --stroke-soft: rgba(255, 255, 255, .105);
  --stroke-medium: rgba(255, 255, 255, .165);
  --stroke-accent: rgba(var(--hot-rgb), .34);

  --shadow-soft: 0 18px 54px rgba(0, 0, 0, .30);
  --shadow-card: 0 26px 78px rgba(0, 0, 0, .38);
  --shadow-lift: 0 30px 96px rgba(0, 0, 0, .48);

  --focus-ring: 0 0 0 3px rgba(var(--hot-rgb), .18), 0 0 0 1px rgba(var(--hot-rgb), .42);
  --control-height: 48px;
  --page-gutter: clamp(14px, 3.5vw, 26px);
}

/* Palette re-balance: each theme keeps its identity, but chroma and contrast are tuned for sustained reading. */
body[data-theme="redCold"] {
  --bg: #090b10;
  --ink: #f7efe7;
  --muted: rgba(247, 239, 231, .64);
  --hot-rgb: 255, 86, 76;
  --hot-deep-rgb: 181, 38, 52;
  --cold-rgb: 91, 113, 143;
  --red: #ff564c;
  --red-deep: #b52634;
  --cold: #5b718f;
  --cold-bright: #b3c7da;
  --page-background:
    radial-gradient(circle at 12% 4%, rgba(var(--hot-rgb), .22), transparent 30%),
    radial-gradient(circle at 86% 10%, rgba(var(--cold-rgb), .22), transparent 32%),
    linear-gradient(180deg, #11141c 0%, #080a0f 100%);
}

body[data-theme="inkGold"] {
  --bg: #0c0d0b;
  --ink: #f3ead2;
  --muted: rgba(243, 234, 210, .65);
  --hot-rgb: 217, 186, 112;
  --hot-deep-rgb: 162, 116, 72;
  --cold-rgb: 96, 104, 91;
  --red: #d9ba70;
  --red-deep: #a27448;
  --cold: #60685b;
  --cold-bright: #e5cf94;
  --page-background:
    radial-gradient(circle at 50% -8%, rgba(var(--hot-rgb), .16), transparent 28%),
    radial-gradient(circle at 88% 22%, rgba(var(--cold-rgb), .14), transparent 26%),
    linear-gradient(180deg, #15150f 0%, #080907 100%);
}

body[data-theme="blueAcid"] {
  --bg: #070b18;
  --ink: #eff7ff;
  --muted: rgba(239, 247, 255, .64);
  --hot-rgb: 98, 226, 157;
  --hot-deep-rgb: 172, 126, 237;
  --cold-rgb: 58, 78, 169;
  --red: #62e29d;
  --red-deep: #ac7eed;
  --cold: #3a4ea9;
  --cold-bright: #9fd4ff;
  --page-background:
    radial-gradient(circle at 18% 2%, rgba(var(--hot-rgb), .16), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(var(--hot-deep-rgb), .15), transparent 26%),
    linear-gradient(180deg, #0b1230 0%, #050711 100%);
}

body[data-theme="paperRed"] {
  --bg: #14100e;
  --ink: #fff1e6;
  --muted: rgba(255, 241, 230, .66);
  --hot-rgb: 246, 92, 72;
  --hot-deep-rgb: 190, 72, 58;
  --cold-rgb: 99, 108, 122;
  --red: #f65c48;
  --red-deep: #be483a;
  --cold: #636c7a;
  --cold-bright: #cfd4dc;
  --page-background:
    radial-gradient(circle at 12% 8%, rgba(var(--hot-rgb), .18), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(var(--cold-rgb), .13), transparent 28%),
    linear-gradient(180deg, #1b1512 0%, #0e0b0a 100%);
}

body[data-theme="turtleShell"] {
  --bg: #0b0f0d;
  --ink: #edf2dd;
  --muted: rgba(237, 242, 221, .64);
  --hot-rgb: 184, 154, 92;
  --hot-deep-rgb: 118, 96, 49;
  --cold-rgb: 72, 101, 84;
  --red: #b89a5c;
  --red-deep: #766031;
  --cold: #486554;
  --cold-bright: #bdd0b4;
}

body[data-theme="stainedGlass"] {
  --bg: #11131a;
  --ink: #f5efe6;
  --muted: rgba(245, 239, 230, .65);
  --hot-rgb: 202, 86, 103;
  --hot-deep-rgb: 214, 168, 73;
  --cold-rgb: 66, 118, 158;
  --red: #ca5667;
  --red-deep: #d6a849;
  --cold: #42769e;
  --cold-bright: #eddca8;
}

body[data-theme="artNouveauBloom"] {
  --bg: #10211c;
  --ink: #eef2df;
  --muted: rgba(238, 242, 223, .66);
  --hot-rgb: 207, 179, 113;
  --hot-deep-rgb: 118, 153, 106;
  --cold-rgb: 74, 114, 100;
  --red: #cfb371;
  --red-deep: #76996a;
  --cold: #4a7264;
  --cold-bright: #efe7ba;
}

body[data-theme="artDecoNoir"] {
  --bg: #0f0d10;
  --ink: #f3e9cf;
  --muted: rgba(243, 233, 207, .62);
  --hot-rgb: 215, 181, 96;
  --hot-deep-rgb: 128, 96, 42;
  --cold-rgb: 48, 45, 56;
  --red: #d7b560;
  --red-deep: #80602a;
  --cold: #302d38;
  --cold-bright: #f1dca7;
}

body[data-theme="artStudio"] {
  --bg: #151018;
  --ink: #fff0e8;
  --muted: rgba(255, 240, 232, .64);
  --hot-rgb: 230, 111, 75;
  --hot-deep-rgb: 180, 83, 143;
  --cold-rgb: 83, 129, 169;
  --red: #e66f4b;
  --red-deep: #b4538f;
  --cold: #5381a9;
  --cold-bright: #f0c67e;
}

html, body {
  background-color: var(--bg) !important;
  color: var(--ink);
  font-family: var(--font-ui) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  padding-left: max(var(--page-gutter), env(safe-area-inset-left)) !important;
  padding-right: max(var(--page-gutter), env(safe-area-inset-right)) !important;
}

.app {
  gap: var(--space-5) !important;
}

header {
  gap: var(--space-3) !important;
  padding-top: var(--space-2) !important;
  padding-bottom: var(--space-2) !important;
}

.mark {
  width: 56px !important;
  height: 2px !important;
  opacity: .82;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(var(--hot-rgb), .82), rgba(var(--cold-rgb), .72), transparent) !important;
}

.eyebrow,
.feedback-orb-eyebrow,
.confirm-modal-eyebrow,
.help-modal-header .eyebrow {
  font-family: var(--mono) !important;
  letter-spacing: .16em !important;
  color: rgba(var(--cold-rgb), .98) !important;
}

h1,
.section-title,
.modal-title,
.help-modal-title,
#flowTitle {
  font-family: var(--font-display) !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

h1 {
  font-weight: 720 !important;
  line-height: .98 !important;
}

.section-title,
.modal-title {
  font-weight: 680 !important;
}

.subtitle,
.section-desc,
.calendar-note,
.cloud-status,
.log,
.sound-box p,
.help-card p,
.help-section p,
.help-footer-note,
.feedback-orb-progress-copy,
.feedback-task-meta {
  color: var(--text-soft) !important;
  font-family: var(--font-ui) !important;
  line-height: 1.72 !important;
}

.card,
.modal,
.help-card,
.sound-box,
.stat,
.theme-option,
.help-step,
.help-highlight,
.help-pill,
.day-cell,
.onion-timer {
  border-color: var(--stroke-soft) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.038)),
    radial-gradient(circle at 12% 0%, rgba(var(--hot-rgb), .055), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(var(--cold-rgb), .075), transparent 36%) !important;
  box-shadow: var(--shadow-soft) !important;
}

.card,
.modal,
.help-card,
.sound-box {
  border-radius: var(--radius-lg) !important;
}

.card {
  padding: clamp(16px, 4vw, 24px) !important;
}

.onion-card {
  border-color: rgba(var(--hot-rgb), .18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.042)),
    radial-gradient(circle at 20% 0%, rgba(var(--hot-rgb), .10), transparent 36%),
    radial-gradient(circle at 90% 12%, rgba(var(--cold-rgb), .12), transparent 38%) !important;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.head-row,
.toolbar,
.bottom-actions {
  gap: var(--space-4) !important;
}

.badge,
.user-pill,
.help-index,
.help-nav-chip {
  border-color: rgba(var(--cold-rgb), .25) !important;
  background: rgba(var(--cold-rgb), .12) !important;
  color: rgba(246, 239, 231, .80) !important;
}

.badge.running,
.theme-option.active-theme {
  border-color: rgba(var(--hot-rgb), .44) !important;
  background: rgba(var(--hot-rgb), .14) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--hot-rgb), .10), 0 0 32px rgba(var(--hot-rgb), .10) !important;
}

input,
select,
button,
.sound-picker-button,
.view-switch-link {
  min-height: var(--control-height) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-ui) !important;
}

input,
select {
  background: rgba(255,255,255,.055) !important;
  border-color: var(--stroke-soft) !important;
  color: var(--ink) !important;
}

input:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

button,
.view-switch-link {
  border-color: var(--stroke-soft) !important;
  background: rgba(255,255,255,.052) !important;
  color: rgba(246, 239, 231, .88) !important;
}

button:hover,
.view-switch-link:hover {
  border-color: rgba(var(--cold-rgb), .34) !important;
  background: rgba(255,255,255,.078) !important;
}

button.primary,
.primary,
button.success,
.success {
  border-color: rgba(var(--hot-rgb), .38) !important;
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(var(--hot-rgb), .94), rgba(var(--hot-deep-rgb), .82)) !important;
  box-shadow: 0 16px 42px rgba(var(--hot-rgb), .20), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

button.warning,
.warning {
  border-color: rgba(var(--hot-rgb), .34) !important;
  background: rgba(var(--hot-rgb), .16) !important;
  color: rgba(255,255,255,.92) !important;
}

button.danger,
.danger {
  border-color: rgba(255, 96, 86, .38) !important;
  background: rgba(255, 96, 86, .12) !important;
  color: #ffd9d3 !important;
}

.auth-inputs,
.controls,
.controls-three,
.sound-grid,
.stats,
.theme-grid,
.help-highlight-grid,
.help-grid-three,
.help-hero-grid {
  gap: var(--space-3) !important;
}

.onion-timers {
  gap: var(--space-3) !important;
}

.onion-timer {
  padding: var(--space-4) !important;
  min-height: 72px;
}

.onion-timer strong,
.stat-value,
.month-label,
.calendar-metric,
.feedback-stage-timer strong {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
}

.onion-timer.primary,
.onion-card[data-depth="2"] .onion-timer:first-child,
.onion-card[data-depth="3"] .onion-timer:first-child,
.onion-card[data-depth="4"] .onion-timer:first-child {
  border-color: rgba(var(--hot-rgb), .34) !important;
  background:
    linear-gradient(180deg, rgba(var(--hot-rgb), .16), rgba(var(--hot-rgb), .06)),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.035)) !important;
}

#flowActions {
  gap: var(--space-3) !important;
}

#flowActions button.primary {
  box-shadow: 0 18px 48px rgba(var(--hot-rgb), .24), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.calendar-weekdays {
  color: var(--text-faint) !important;
  letter-spacing: .08em;
}

.day-cell {
  min-height: 68px;
  padding: 9px 7px !important;
}

.day-cell.today {
  border-color: rgba(var(--hot-rgb), .46) !important;
  background:
    linear-gradient(180deg, rgba(var(--hot-rgb), .13), rgba(var(--hot-rgb), .055)) !important;
}

.stat {
  padding: 14px 12px !important;
}

.stat-label {
  color: var(--text-faint) !important;
}

.sound-box h3,
.help-card h3,
.help-section h3 {
  font-family: var(--font-display) !important;
  letter-spacing: -.02em !important;
}

.help-fab {
  border-color: rgba(var(--hot-rgb), .28) !important;
  background: rgba(12, 14, 18, .72) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft) !important;
}

.modal-backdrop.visible {
  background:
    radial-gradient(circle at 50% 20%, rgba(var(--hot-rgb), .12), transparent 34%),
    rgba(4, 5, 8, .72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal,
.help-modal,
.help-hint-modal {
  background:
    linear-gradient(180deg, rgba(25, 27, 34, .96), rgba(10, 12, 16, .96)),
    radial-gradient(circle at 18% 0%, rgba(var(--hot-rgb), .10), transparent 32%) !important;
}

.theme-option {
  min-height: 96px !important;
  align-content: start !important;
}

.swatches {
  gap: 6px !important;
}

.swatch {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 8px 20px rgba(0,0,0,.18);
}

.boot-screen {
  background:
    radial-gradient(circle at 50% 24%, rgba(var(--hot-rgb), .15), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(var(--cold-rgb), .12), transparent 40%),
    var(--page-background) !important;
}

.boot-screen__brand {
  font-family: var(--font-display) !important;
  font-weight: 760 !important;
  letter-spacing: -.045em !important;
  text-shadow: 0 20px 70px rgba(var(--hot-rgb), .26);
}

.boot-screen__sub {
  color: var(--text-soft) !important;
  letter-spacing: .08em;
}

.feedback-stage.open {
  background:
    radial-gradient(circle at 50% 40%, rgba(var(--hot-rgb), .11), transparent 34%),
    radial-gradient(circle at 18% 8%, rgba(var(--cold-rgb), .16), transparent 32%),
    radial-gradient(circle at 84% 92%, rgba(var(--hot-deep-rgb), .08), transparent 30%),
    var(--page-background) !important;
}

.feedback-orb-scene {
  opacity: .74 !important;
}

.feedback-stage-timer {
  border-color: rgba(var(--cold-rgb), .20) !important;
  color: var(--text-body) !important;
}

.feedback-stage-timer span,
.feedback-score-row,
.feedback-orb-progress-copy,
.feedback-task-meta {
  color: var(--text-soft) !important;
}

.feedback-stage-timer strong {
  color: rgb(var(--hot-rgb)) !important;
  text-shadow: 0 0 24px rgba(var(--hot-rgb), .26) !important;
}

.feedback-progress-track {
  height: 7px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
}

.feedback-progress-fill {
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(var(--hot-rgb), .90), rgba(var(--cold-rgb), .90)) !important;
}

@media (max-width: 720px) {
  :root {
    --control-height: 50px;
    --radius: 24px;
    --radius-lg: 22px;
  }

  body:not(.feedback-stage-open) {
    padding-top: max(18px, env(safe-area-inset-top)) !important;
    padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
  }

  .app {
    gap: 14px !important;
  }

  header {
    padding-inline: 2px !important;
  }

  h1 {
    font-size: clamp(32px, 11.5vw, 48px) !important;
  }

  .subtitle {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .card {
    padding: 17px !important;
  }

  .head-row,
  .toolbar {
    align-items: flex-start !important;
  }

  .section-title {
    font-size: 18px !important;
    line-height: 1.22 !important;
  }

  .section-desc {
    font-size: 13px !important;
  }

  .onion-timer {
    min-height: 68px;
  }

  .day-cell {
    min-height: 58px;
  }

  .help-fab {
    right: max(12px, env(safe-area-inset-right)) !important;
    top: max(12px, env(safe-area-inset-top)) !important;
  }

  .feedback-orb-bottom {
    color: var(--text-soft) !important;
  }
}

@media (min-width: 900px) {
  .app {
    width: min(980px, 100%) !important;
  }

  .card {
    padding: clamp(20px, 2.6vw, 30px) !important;
  }

  .modal {
    padding: 26px !important;
  }
}

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


/*
  Focus Onion Visual Design System v33
  Goal: fix startup bottom split and elevate first-impression aesthetics
  without changing product behavior.
*/

:root {
  --hero-max: 680px;
  --shell-max: 940px;
  --page-top-space: clamp(18px, 4.8vw, 34px);
  --page-bottom-space: calc(28px + env(safe-area-inset-bottom));
}

html {
  background: var(--page-background) fixed !important;
}

html::before,
body::before {
  content: "";
  position: fixed;
  inset: -24vh 0 -24vh 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.03), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,.22), transparent 34%),
    var(--page-background);
  z-index: -2;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 18%, transparent 82%, rgba(0,0,0,.12)),
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.035), transparent 22%);
  z-index: -1;
}

body {
  min-height: 100lvh !important;
  min-height: 100dvh !important;
  background: transparent !important;
  overscroll-behavior-y: none;
}

body.booting {
  background: transparent !important;
}

.app {
  width: min(var(--shell-max), 100%) !important;
  margin-inline: auto !important;
  padding-top: var(--page-top-space) !important;
  padding-bottom: var(--page-bottom-space) !important;
}

header {
  width: min(var(--hero-max), 100%) !important;
  margin-inline: auto !important;
  padding-top: clamp(6px, 2vw, 14px) !important;
  padding-bottom: clamp(6px, 1.8vw, 12px) !important;
  text-align: center !important;
  align-items: center !important;
}

.mark {
  margin-inline: auto !important;
  width: 72px !important;
  height: 3px !important;
  box-shadow: 0 0 24px rgba(var(--hot-rgb), .28);
}

.eyebrow {
  opacity: .8;
}

h1 {
  max-width: 12ch;
  margin-inline: auto !important;
  font-size: clamp(2.15rem, 7vw, 4rem) !important;
}

.subtitle {
  max-width: 32ch;
  margin-inline: auto !important;
  color: rgba(246,239,231,.72) !important;
}

#authCard,
#onionFlowCard,
#calendarCard,
#settingsPanel > .card,
#settingsPanel .card,
.modal,
.help-card,
.help-modal,
.help-hint-modal {
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

#authCard,
#onionFlowCard,
#calendarCard,
#settingsPanel > .card {
  width: min(100%, 820px) !important;
  margin-inline: auto !important;
}

.app-area {
  gap: clamp(14px, 2.8vw, 24px) !important;
}

.card,
.sound-box,
.stat,
.onion-timer,
.theme-option,
.day-cell {
  border-width: 1px !important;
}

.card,
.modal,
.help-card,
.sound-box {
  box-shadow: 0 16px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.onion-card {
  box-shadow: 0 24px 72px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.section-title,
#flowTitle {
  font-size: clamp(1.08rem, 2.9vw, 1.35rem) !important;
}

.section-desc,
.cloud-status,
.log,
.calendar-note {
  max-width: 58ch;
}

.controls,
.controls-three,
.flow-subtools,
.sound-grid,
.stats {
  align-items: stretch;
}

.onion-timers {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

.onion-timer {
  min-height: 78px !important;
  border-radius: 20px !important;
}

.onion-timer strong,
.stat-value {
  font-size: clamp(1rem, 3.2vw, 1.28rem) !important;
}

button,
.view-switch-link,
input,
select,
.sound-picker-button {
  transition: background-color .22s ease, border-color .22s ease, transform .18s ease, box-shadow .22s ease !important;
}

button:active,
.view-switch-link:active {
  transform: translateY(1px) scale(.995);
}

.boot-screen {
  overflow: hidden;
  isolation: isolate;
  inset: 0 !important;
  min-height: 100lvh !important;
  min-height: 100dvh !important;
  padding:
    max(22px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left)) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.055), transparent 22%),
    radial-gradient(circle at 50% 14%, rgba(var(--hot-rgb), .14), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(var(--cold-rgb), .10), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 26%),
    var(--page-background) !important;
}

.boot-screen::before,
.boot-screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.boot-screen::before {
  top: -16vh;
  bottom: -24vh;
  background:
    radial-gradient(circle at 50% 28%, rgba(var(--hot-rgb), .12), transparent 24%),
    radial-gradient(circle at 50% 58%, rgba(var(--cold-rgb), .08), transparent 28%);
  opacity: .9;
}

.boot-screen::after {
  bottom: -80px;
  height: calc(160px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(9,11,16,0), rgba(9,11,16,.94) 58%, rgba(9,11,16,1));
}

.boot-screen__brand,
.boot-screen__sub {
  position: relative;
  z-index: 1;
}

.boot-screen__brand {
  font-size: clamp(2.2rem, 10vw, 4rem) !important;
  max-width: 10ch;
  text-align: center;
}

.boot-screen__sub {
  text-align: center;
  max-width: 24ch;
}

.feedback-stage.open {
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--hot-rgb), .09), transparent 26%),
    radial-gradient(circle at 50% 80%, rgba(var(--cold-rgb), .08), transparent 28%),
    var(--page-background) !important;
}

.feedback-orb-scene {
  opacity: .82 !important;
}

.feedback-orb-bottom,
.feedback-orb-overlay,
.feedback-orb-top {
  backdrop-filter: blur(12px) saturate(1.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
}

/* First-screen aesthetics on phones: reduce clutter and tighten hierarchy. */
@media (max-width: 720px) {
  body:not(.feedback-stage-open) {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
    padding-top: max(14px, env(safe-area-inset-top)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .app {
    gap: 12px !important;
    padding-top: 12px !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }

  header {
    gap: 9px !important;
    padding-top: 8px !important;
    padding-bottom: 6px !important;
  }

  .eyebrow {
    font-size: 11px !important;
  }

  h1 {
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
    line-height: 1.02 !important;
  }

  .subtitle {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .card,
  .sound-box,
  .stat {
    border-radius: 22px !important;
    padding: 16px !important;
  }

  .onion-card {
    padding: 17px !important;
  }

  .controls,
  .controls-three,
  .sound-grid,
  .stats,
  .flow-subtools {
    gap: 10px !important;
  }

  .onion-timers {
    gap: 10px !important;
  }

  .day-cell {
    min-height: 62px !important;
  }
}

/* Hide the global header while boot screen is visible to avoid any flash layering. */
body.booting header,
body.booting .app-area,
body.booting #authCard {
  visibility: hidden !important;
}


/*
  Focus Onion Visual Design System v34
  Focus: eliminate bottom split / dead black zone and refine the first-screen hero composition.
*/

/* Use one shared viewport background for boot and app. Keep it above the UA background layer. */
html,
body,
body.booting,
body.app-ready,
.boot-screen,
.app {
  background: transparent !important;
}

html::before,
body::before,
body::after {
  z-index: 0 !important;
}

body > * {
  position: relative;
  z-index: 1;
}

body {
  position: relative;
}

#bootScreen {
  z-index: 99999 !important;
}

html::before,
body::before {
  inset: 0 !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(var(--hot-rgb), .18), transparent 24%),
    radial-gradient(circle at 86% 6%, rgba(var(--cold-rgb), .16), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.03), transparent 30%),
    var(--page-background) !important;
}

body::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 16%, transparent 80%, rgba(0,0,0,.16)),
    radial-gradient(circle at 50% 100%, rgba(var(--cold-rgb), .08), transparent 22%) !important;
}

.app {
  min-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))) !important;
  justify-content: flex-start !important;
}

/* First screen: treat the main card like a hero card, not a tall utility box. */
body.app-ready:not(.subpanel-open):not(.modal-open):not(.sound-selecting):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) {
  height: auto !important;
  min-height: 100dvh !important;
  overflow-y: auto !important;
  overscroll-behavior-y: none;
}

body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .app {
  height: auto !important;
  max-height: none !important;
  min-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))) !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 2.4vh, 18px) !important;
  padding-bottom: calc(34px + env(safe-area-inset-bottom)) !important;
}

body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) header {
  margin-top: clamp(2px, 1.2vh, 12px) !important;
  margin-bottom: 2px !important;
}

body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .app-area.visible {
  flex: 1 1 auto !important;
  display: block !important;
  overflow: visible !important;
}

body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] {
  min-height: auto !important;
  max-height: none !important;
  width: min(100%, 820px) !important;
  margin-inline: auto !important;
  padding: clamp(16px, 4vw, 24px) !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto;
  align-content: start !important;
  justify-content: stretch !important;
  gap: 14px !important;
}

body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] .head-row {
  align-items: start !important;
  gap: 12px !important;
}

body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] #flowTitle {
  font-size: clamp(2rem, 10.2vw, 3.4rem) !important;
  line-height: .95 !important;
  max-width: 8ch;
}

body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] #flowDesc {
  max-width: 18ch;
  font-size: clamp(1rem, 3.8vw, 1.25rem) !important;
  line-height: 1.58 !important;
}

body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] #flowActions {
  margin-top: 2px !important;
}

body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] #flowActions [data-flow-action="enter-env"] {
  min-height: clamp(60px, 8.2svh, 74px) !important;
  border-radius: 22px !important;
  font-size: clamp(1.05rem, 4.4vw, 1.36rem) !important;
}

body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"]::after {
  content: "";
  display: block;
  height: clamp(70px, 13vh, 120px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--hot-rgb), .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(var(--cold-rgb), .08), transparent 38%);
  opacity: .72;
  pointer-events: none;
}

/* So the lower part feels intentional instead of turning into dead black. */
body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .app::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: clamp(64px, 14vh, 132px);
  width: 100%;
  background:
    radial-gradient(circle at 50% 10%, rgba(var(--hot-rgb), .07), transparent 20%),
    radial-gradient(circle at 50% 70%, rgba(var(--cold-rgb), .08), transparent 28%);
  pointer-events: none;
}

/* Boot screen: same background logic, no bottom seam. */
.boot-screen {
  inset: 0 !important;
  min-height: 100dvh !important;
  display: grid !important;
  grid-template-rows: 1fr auto auto 1fr;
  align-items: center !important;
  justify-items: center !important;
}

.boot-screen::before {
  inset: 0 !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(var(--hot-rgb), .13), transparent 26%),
    radial-gradient(circle at 50% 88%, rgba(var(--cold-rgb), .09), transparent 28%);
}

.boot-screen::after {
  bottom: 0 !important;
  height: calc(120px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, rgba(9,11,16,0), rgba(9,11,16,.90) 56%, rgba(9,11,16,1));
}

.boot-screen__brand {
  align-self: end;
}

.boot-screen__sub {
  align-self: start;
}

/* Help button and chrome should feel less abrupt on the opening screen. */
.help-fab {
  background: rgba(12,14,18,.54) !important;
  border-color: rgba(var(--cold-rgb), .22) !important;
}

@media (max-width: 720px) {
  .app {
    width: min(100%, 760px) !important;
  }

  header {
    width: min(100%, 560px) !important;
  }

  body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .app {
    gap: 10px !important;
  }

  body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] {
    gap: 12px !important;
    border-radius: 24px !important;
  }

  body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] #flowTitle {
    font-size: clamp(1.9rem, 9.4vw, 3.1rem) !important;
  }

  body.app-ready:not(.subpanel-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] #flowDesc {
    font-size: 1rem !important;
  }

  .boot-screen__brand {
    font-size: clamp(2rem, 9vw, 3.2rem) !important;
  }
}


/*
  Focus Onion Visual Design System v35
  Goals:
  1) refine the five key mobile screens (home, layer 2/3/4, feedback stage)
  2) reduce first-load white flash and boot-screen bottom seam
*/

:root {
  --hero-card-max: 780px;
  --flow-card-padding: clamp(16px, 4vw, 24px);
  --floating-badge-space: 102px;
}

/* ---------- Home / layer 1 ---------- */
body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) header {
  gap: 8px !important;
  margin-bottom: 4px !important;
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .mark {
  margin-bottom: 2px !important;
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) h1 {
  max-width: 10ch !important;
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] {
  width: min(100%, var(--hero-card-max)) !important;
  min-height: auto !important;
  max-height: none !important;
  gap: 12px !important;
  padding: var(--flow-card-padding) !important;
  border-radius: 26px !important;
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] .head-row {
  position: relative;
  display: block !important;
  padding-right: 0 !important;
  min-height: 56px;
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] .flow-top-actions {
  position: absolute;
  top: 0;
  right: 0;
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] #flowTitle {
  max-width: calc(100% - var(--floating-badge-space));
  font-size: clamp(2rem, 8.6vw, 3.05rem) !important;
  line-height: .94 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
  word-break: keep-all;
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] #flowDesc {
  max-width: 15ch !important;
  margin-top: 12px !important;
  font-size: clamp(1rem, 3.55vw, 1.18rem) !important;
  line-height: 1.56 !important;
  color: rgba(246,239,231,.78) !important;
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] #flowActions {
  margin-top: 2px !important;
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] #flowActions [data-flow-action="enter-env"] {
  min-height: 72px !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 42px rgba(var(--hot-rgb), .18), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"]::after {
  height: clamp(36px, 8vh, 72px) !important;
  border-radius: 18px !important;
  opacity: .58 !important;
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .app::after {
  height: clamp(36px, 10vh, 84px) !important;
  opacity: .68;
}

/* ---------- Layers 2 / 3 / 4 ---------- */
body[data-study-depth="2"]:not(.feedback-stage-open),
body[data-study-depth="3"]:not(.feedback-stage-open),
body[data-study-depth="4"]:not(.feedback-stage-open) {
  overflow-y: auto !important;
}

body[data-study-depth="2"]:not(.feedback-stage-open) .app,
body[data-study-depth="3"]:not(.feedback-stage-open) .app,
body[data-study-depth="4"]:not(.feedback-stage-open) .app {
  min-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
  height: auto !important;
  max-height: none !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
}

body[data-study-depth="2"]:not(.feedback-stage-open) .app-area.visible,
body[data-study-depth="3"]:not(.feedback-stage-open) .app-area.visible,
body[data-study-depth="4"]:not(.feedback-stage-open) .app-area.visible {
  display: block !important;
  overflow: visible !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 {
  width: min(100%, 780px) !important;
  min-height: min(76dvh, 760px) !important;
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
  margin-inline: auto !important;
  padding: var(--flow-card-padding) !important;
  border-radius: 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: hidden !important;
}

body[data-study-depth="2"]:not(.feedback-stage-open) .onion-card .head-row,
body[data-study-depth="3"]:not(.feedback-stage-open) .onion-card .head-row,
body[data-study-depth="4"]:not(.feedback-stage-open) .onion-card .head-row {
  position: relative;
  display: block !important;
  min-height: 56px;
}

body[data-study-depth="2"]:not(.feedback-stage-open) .onion-card .flow-top-actions,
body[data-study-depth="3"]:not(.feedback-stage-open) .onion-card .flow-top-actions,
body[data-study-depth="4"]:not(.feedback-stage-open) .onion-card .flow-top-actions {
  position: absolute;
  top: 0;
  right: 0;
}

body[data-study-depth="2"]:not(.feedback-stage-open) #flowTitle,
body[data-study-depth="3"]:not(.feedback-stage-open) #flowTitle,
body[data-study-depth="4"]:not(.feedback-stage-open) #flowTitle {
  max-width: calc(100% - var(--floating-badge-space));
  font-size: clamp(1.92rem, 8.4vw, 3rem) !important;
  line-height: .95 !important;
  letter-spacing: -.034em !important;
  word-break: keep-all;
  text-wrap: balance;
}

body[data-study-depth="2"]:not(.feedback-stage-open) #flowDesc,
body[data-study-depth="3"]:not(.feedback-stage-open) #flowDesc,
body[data-study-depth="4"]:not(.feedback-stage-open) #flowDesc {
  max-width: 16ch !important;
  margin-top: 10px !important;
  font-size: clamp(.98rem, 3.45vw, 1.12rem) !important;
  line-height: 1.52 !important;
  color: rgba(246,239,231,.74) !important;
  display: block !important;
  overflow: visible !important;
}

body[data-study-depth="2"]:not(.feedback-stage-open) .onion-timers,
body[data-study-depth="3"]:not(.feedback-stage-open) .onion-timers,
body[data-study-depth="4"]:not(.feedback-stage-open) .onion-timers {
  flex: 0 0 auto !important;
  gap: 10px !important;
  margin: 0 !important;
  overflow: visible !important;
}

body[data-study-depth="2"]:not(.feedback-stage-open) .onion-timer,
body[data-study-depth="3"]:not(.feedback-stage-open) .onion-timer,
body[data-study-depth="4"]:not(.feedback-stage-open) .onion-timer {
  border-radius: 24px !important;
}

body[data-study-depth="2"]:not(.feedback-stage-open) .onion-timer.primary,
body[data-study-depth="3"]:not(.feedback-stage-open) .onion-timer.primary,
body[data-study-depth="4"]:not(.feedback-stage-open) .onion-timer.deep {
  min-height: clamp(132px, 23dvh, 206px) !important;
}

body[data-study-depth="2"]:not(.feedback-stage-open) .onion-timer.primary strong,
body[data-study-depth="3"]:not(.feedback-stage-open) .onion-timer.primary strong,
body[data-study-depth="4"]:not(.feedback-stage-open) .onion-timer.deep strong {
  font-size: clamp(3rem, 12.5vw, 5rem) !important;
  line-height: .88 !important;
}

body[data-study-depth="3"]:not(.feedback-stage-open) .duration-row,
body[data-study-depth="4"]:not(.feedback-stage-open) .duration-row {
  margin-top: 2px !important;
  padding: 14px !important;
  border-radius: 22px !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;
  padding-top: 2px !important;
}

body[data-study-depth="2"]:not(.feedback-stage-open) .flow-subtools,
body[data-study-depth="3"]:not(.feedback-stage-open) .flow-subtools,
body[data-study-depth="4"]:not(.feedback-stage-open) .flow-subtools {
  margin-top: 0 !important;
}

body[data-study-depth="2"]:not(.feedback-stage-open) #flowActions button,
body[data-study-depth="3"]:not(.feedback-stage-open) #flowActions button,
body[data-study-depth="4"]:not(.feedback-stage-open) #flowActions button,
body[data-study-depth="2"]:not(.feedback-stage-open) .flow-subtools button,
body[data-study-depth="3"]:not(.feedback-stage-open) .flow-subtools button,
body[data-study-depth="4"]:not(.feedback-stage-open) .flow-subtools button {
  min-height: 64px !important;
  border-radius: 24px !important;
}

/* ---------- Feedback stage ---------- */
.feedback-stage.open {
  padding-top: max(10px, env(safe-area-inset-top)) !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}

.feedback-stage-main.feedback-orb-main {
  align-items: start !important;
}

.feedback-pad.feedback-orb-pad {
  width: min(92vw, 500px) !important;
  height: clamp(262px, 42dvh, 410px) !important;
  max-height: calc(100dvh - 236px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

.feedback-orb-artboard.feedback-orbit-pixi-artboard,
.feedback-orbit-pixi-artboard {
  max-height: calc(100dvh - 250px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

.feedback-orb-bottom {
  width: min(92vw, 500px) !important;
  display: grid;
  gap: 8px;
}

.feedback-orb-progress-copy {
  gap: 8px !important;
}

.feedback-stage-timer {
  margin: 4px 0 2px !important;
  padding: 10px 0 8px !important;
}

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

.feedback-orb-stats div {
  min-height: 48px !important;
  padding: 10px 14px !important;
  border-radius: 18px !important;
}

.feedback-task-meta {
  align-items: baseline !important;
}

/* ---------- First-load / boot smoothing ---------- */
html {
  background-color: #131926 !important;
}

body,
body.booting {
  background-color: #131926 !important;
}

body.booting::before,
.boot-screen,
.boot-screen::before {
  background-color: #131926 !important;
}

.help-fab {
  box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
}

@media (max-width: 720px) {
  body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] #flowTitle {
    font-size: clamp(1.9rem, 8.2vw, 2.8rem) !important;
  }

  body[data-study-depth="2"]:not(.feedback-stage-open) #flowTitle,
  body[data-study-depth="3"]:not(.feedback-stage-open) #flowTitle,
  body[data-study-depth="4"]:not(.feedback-stage-open) #flowTitle {
    font-size: clamp(1.84rem, 8vw, 2.8rem) !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(74dvh, 720px) !important;
  }

  .feedback-pad.feedback-orb-pad {
    height: clamp(248px, 39dvh, 360px) !important;
  }
}

/*
  Focus Onion Visual Design System v36
  Focus: smoother PWA launch, no boot bottom seam/stretch, and final pass on five mobile screens.
*/
:root {
  --launch-bg-top: #182131;
  --launch-bg-bottom: #0d1017;
  --launch-bg-solid: #131926;
}

html,
body,
body.booting,
.boot-screen {
  background-color: var(--launch-bg-solid) !important;
}

html::before,
body::before {
  background:
    radial-gradient(circle at 16% 0%, rgba(210,84,74,.20), transparent 24%),
    radial-gradient(circle at 86% 8%, rgba(72,102,190,.18), transparent 28%),
    linear-gradient(180deg, var(--launch-bg-top), var(--launch-bg-bottom) 84%) !important;
}

.boot-screen {
  box-sizing: border-box !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100svh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  contain: layout paint style !important;
  transform: translateZ(0);
  background:
    radial-gradient(circle at 50% 22%, rgba(210,84,74,.17), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(72,102,190,.12), transparent 32%),
    linear-gradient(180deg, var(--launch-bg-top), var(--launch-bg-bottom) 86%) !important;
}

.boot-screen::after {
  bottom: 0 !important;
  height: calc(96px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, rgba(13,16,23,0), rgba(13,16,23,.50) 68%, rgba(13,16,23,.76)) !important;
}

.boot-screen__brand {
  transform: translateZ(0);
}

/* Keep the opening page compact and deliberate. */
body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .app {
  padding-top: clamp(10px, 2.2vh, 18px) !important;
  padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important;
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) header {
  transform: translateY(-2px);
}

body.app-ready:not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .onion-card[data-depth="1"] {
  box-shadow:
    0 22px 64px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 0 1px rgba(var(--cold-rgb), .10) !important;
}

/* Layers 2-4: keep controls reachable without making the card feel like a clipped panel. */
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 {
  max-height: none !important;
  min-height: min(72dvh, 700px) !important;
  padding-bottom: clamp(16px, 4vw, 24px) !important;
}

body[data-study-depth="2"]:not(.feedback-stage-open) .onion-timer.primary,
body[data-study-depth="3"]:not(.feedback-stage-open) .onion-timer.primary,
body[data-study-depth="4"]:not(.feedback-stage-open) .onion-timer.deep {
  box-shadow:
    0 16px 44px rgba(var(--hot-rgb), .11),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

body[data-study-depth="3"]:not(.feedback-stage-open) .duration-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: center !important;
}

/* Feedback stage: reduce vertical crowding while keeping the orb prominent. */
.feedback-stage.open {
  height: 100dvh !important;
  min-height: 0 !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

.feedback-pad.feedback-orb-pad {
  height: clamp(252px, 40dvh, 380px) !important;
}

.feedback-orb-bottom {
  padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
}

@media (max-height: 760px) {
  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: auto !important;
  }
  body[data-study-depth="2"]:not(.feedback-stage-open) .onion-timer.primary,
  body[data-study-depth="3"]:not(.feedback-stage-open) .onion-timer.primary,
  body[data-study-depth="4"]:not(.feedback-stage-open) .onion-timer.deep {
    min-height: clamp(118px, 20dvh, 176px) !important;
  }
}

/* =========================================================
   Focus Onion Mobile Quiet Polish v37
   Scope: mobile.html only via body.mobile-polish.
   Purpose: calm first-screen hierarchy, unified mobile tokens,
   stronger primary action, and softer secondary surfaces.
   Functional JS, ids, Supabase, PWA and Pixi structures remain unchanged.
   ========================================================= */
body.mobile-polish {
  color-scheme: dark;

  --m-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --m-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --m-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --m-space-1: 4px;
  --m-space-2: 8px;
  --m-space-3: 12px;
  --m-space-4: 16px;
  --m-space-5: 20px;
  --m-space-6: 24px;
  --m-space-7: 32px;

  --m-radius-sm: 12px;
  --m-radius-md: 16px;
  --m-radius-lg: 22px;
  --m-radius-xl: 30px;
  --m-radius-pill: 999px;

  --m-bg-top: #18130f;
  --m-bg-mid: #11131a;
  --m-bg-bottom: #08090d;
  --m-bg-glow-warm: rgba(var(--hot-rgb), .135);
  --m-bg-glow-cool: rgba(var(--cold-rgb), .13);
  --m-bg-glow-soft: rgba(255, 224, 180, .055);

  --m-text-strong: rgba(255, 247, 235, .96);
  --m-text-body: rgba(255, 247, 235, .76);
  --m-text-muted: rgba(255, 247, 235, .58);
  --m-text-faint: rgba(255, 247, 235, .42);

  --m-surface: rgba(255, 250, 240, .068);
  --m-surface-raised: rgba(255, 250, 240, .095);
  --m-surface-soft: rgba(255, 250, 240, .044);
  --m-surface-input: rgba(255, 250, 240, .055);
  --m-line: rgba(255, 242, 221, .12);
  --m-line-strong: rgba(255, 242, 221, .20);

  --m-accent: rgb(var(--hot-rgb));
  --m-accent-muted: rgba(var(--hot-rgb), .24);
  --m-accent-soft: rgba(var(--hot-rgb), .13);
  --m-cool-soft: rgba(var(--cold-rgb), .16);
  --m-cool-line: rgba(var(--cold-rgb), .26);

  --m-shadow-card: 0 18px 54px rgba(0, 0, 0, .28);
  --m-shadow-card-soft: 0 12px 32px rgba(0, 0, 0, .20);
  --m-shadow-action: 0 16px 34px rgba(var(--hot-rgb), .18);
  --m-focus-ring: 0 0 0 3px rgba(var(--hot-rgb), .16), 0 0 0 1px rgba(var(--hot-rgb), .36);

  --m-control-height: 48px;
  --m-page-x: clamp(var(--m-space-3), 3.7vw, var(--m-space-5));
  --m-first-card-max: 438px;
  --m-first-card-min: 336px;
  --m-first-card-pad: clamp(var(--m-space-4), 4.6vw, var(--m-space-6));

  --page-background:
    radial-gradient(circle at 16% -4%, var(--m-bg-glow-warm), transparent 30%),
    radial-gradient(circle at 88% 8%, var(--m-bg-glow-cool), transparent 32%),
    radial-gradient(circle at 50% 105%, var(--m-bg-glow-soft), transparent 35%),
    linear-gradient(180deg, var(--m-bg-top) 0%, var(--m-bg-mid) 44%, var(--m-bg-bottom) 100%);
}

body.mobile-polish,
body.mobile-polish button,
body.mobile-polish input,
body.mobile-polish select {
  font-family: var(--m-font-ui) !important;
}

body.mobile-polish {
  background: var(--page-background) !important;
  color: var(--m-text-strong) !important;
  padding:
    max(var(--m-space-4), env(safe-area-inset-top))
    max(var(--m-page-x), env(safe-area-inset-right))
    max(var(--m-space-4), env(safe-area-inset-bottom))
    max(var(--m-page-x), env(safe-area-inset-left)) !important;
}

body.mobile-polish::before,
body.mobile-polish::after {
  opacity: 0 !important;
}

body.mobile-polish .app {
  width: min(100%, 430px) !important;
  gap: clamp(var(--m-space-3), 2.1svh, var(--m-space-5)) !important;
}

body.mobile-polish header {
  padding: var(--m-space-2) var(--m-space-1) var(--m-space-1) !important;
  gap: var(--m-space-2) !important;
}

body.mobile-polish .mark {
  width: 34px !important;
  height: 2px !important;
  border-radius: var(--m-radius-pill) !important;
  background: linear-gradient(90deg, transparent, var(--m-accent), rgba(255, 247, 235, .56), transparent) !important;
  opacity: .82 !important;
}

body.mobile-polish .eyebrow {
  color: var(--m-text-faint) !important;
  font-family: var(--m-font-ui) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
}

body.mobile-polish h1 {
  color: var(--m-text-strong) !important;
  font-family: var(--m-font-display) !important;
  font-size: clamp(2.35rem, 10vw, 3.1rem) !important;
  font-weight: 760 !important;
  letter-spacing: -.055em !important;
}

body.mobile-polish .subtitle,
body.mobile-polish .section-desc,
body.mobile-polish .cloud-status,
body.mobile-polish .log,
body.mobile-polish .calendar-note,
body.mobile-polish .fullscreen-hint {
  color: var(--m-text-muted) !important;
  font-family: var(--m-font-ui) !important;
}

body.mobile-polish .subtitle {
  font-size: .88rem !important;
  line-height: 1.45 !important;
}

body.mobile-polish .card {
  border: 1px solid var(--m-line) !important;
  border-radius: var(--m-radius-xl) !important;
  background:
    linear-gradient(180deg, var(--m-surface-raised), var(--m-surface-soft)) !important;
  box-shadow: var(--m-shadow-card-soft) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.mobile-polish .auth-card {
  padding: var(--m-space-5) !important;
}

body.mobile-polish .head-row {
  gap: var(--m-space-3) !important;
}

body.mobile-polish .section-title {
  color: var(--m-text-strong) !important;
  font-family: var(--m-font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 760 !important;
  letter-spacing: -.025em !important;
}

body.mobile-polish .section-desc {
  margin-top: var(--m-space-2) !important;
  font-size: .82rem !important;
  line-height: 1.55 !important;
}

body.mobile-polish .badge,
body.mobile-polish .user-pill {
  border: 1px solid var(--m-cool-line) !important;
  border-radius: var(--m-radius-pill) !important;
  background: var(--m-cool-soft) !important;
  color: var(--m-text-body) !important;
  box-shadow: none !important;
}

body.mobile-polish input,
body.mobile-polish select {
  min-height: var(--m-control-height) !important;
  border: 1px solid var(--m-line) !important;
  border-radius: var(--m-radius-md) !important;
  background: var(--m-surface-input) !important;
  color: var(--m-text-strong) !important;
  box-shadow: none !important;
}

body.mobile-polish input::placeholder {
  color: var(--m-text-faint) !important;
}

body.mobile-polish input:focus,
body.mobile-polish select:focus,
body.mobile-polish button:focus-visible,
body.mobile-polish a:focus-visible {
  outline: none !important;
  box-shadow: var(--m-focus-ring) !important;
}

body.mobile-polish button,
body.mobile-polish .view-switch-link {
  min-height: var(--m-control-height) !important;
  border: 1px solid var(--m-line) !important;
  border-radius: var(--m-radius-md) !important;
  background: var(--m-surface-soft) !important;
  color: var(--m-text-body) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

body.mobile-polish button:hover,
body.mobile-polish .view-switch-link:hover {
  border-color: var(--m-line-strong) !important;
  background: var(--m-surface) !important;
}

body.mobile-polish .primary,
body.mobile-polish .success {
  border-color: rgba(var(--hot-rgb), .34) !important;
  background: var(--m-accent-soft) !important;
  color: var(--m-text-strong) !important;
}

body.mobile-polish .secondary {
  border-color: var(--m-line) !important;
  background: var(--m-surface-soft) !important;
  color: var(--m-text-muted) !important;
}

body.mobile-polish .danger,
body.mobile-polish .warning {
  border-color: rgba(var(--hot-rgb), .26) !important;
  background: rgba(var(--hot-rgb), .085) !important;
  color: var(--m-text-body) !important;
}

body.mobile-polish.auth-screen .app {
  min-height: calc(100dvh - max(var(--m-space-4), env(safe-area-inset-top)) - max(var(--m-space-4), env(safe-area-inset-bottom))) !important;
  justify-content: center !important;
  gap: clamp(var(--m-space-4), 2.4svh, var(--m-space-6)) !important;
}

body.mobile-polish.auth-screen header {
  padding-inline: var(--m-space-1) !important;
}

body.mobile-polish.auth-screen h1 {
  font-size: clamp(2.55rem, 12.2vw, 3.65rem) !important;
}

body.mobile-polish.auth-screen .auth-card {
  border-radius: var(--m-radius-xl) !important;
}

body.mobile-polish.auth-screen .auth-inputs {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--m-space-3) !important;
  margin-top: var(--m-space-4) !important;
}

body.mobile-polish.auth-screen .controls-three {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--m-space-3) !important;
}

body.mobile-polish.auth-screen .controls-three #signOutBtn {
  grid-column: 1 / -1;
}

body.mobile-polish.app-ready:not(.panel-sheet-open):not(.modal-open):not(.sound-selecting):not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) {
  min-height: 100dvh !important;
  overflow: hidden !important;
}

body.mobile-polish.app-ready:not(.panel-sheet-open):not(.modal-open):not(.sound-selecting):not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .app {
  height: calc(100dvh - max(var(--m-space-4), env(safe-area-inset-top)) - max(var(--m-space-4), env(safe-area-inset-bottom))) !important;
  max-height: calc(100dvh - max(var(--m-space-4), env(safe-area-inset-top)) - max(var(--m-space-4), env(safe-area-inset-bottom))) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
  gap: clamp(var(--m-space-3), 1.7svh, var(--m-space-4)) !important;
}

body.mobile-polish.app-ready:not(.panel-sheet-open):not(.modal-open):not(.sound-selecting):not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) header {
  flex: 0 0 auto !important;
  transform: none !important;
  margin: 0 !important;
}

body.mobile-polish.app-ready:not(.panel-sheet-open):not(.modal-open):not(.sound-selecting):not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .app-area.visible {
  flex: 0 1 auto !important;
  display: grid !important;
  overflow: hidden !important;
}

body.mobile-polish .onion-card[data-depth="1"] {
  width: min(100%, var(--m-first-card-max)) !important;
  min-height: var(--m-first-card-min) !important;
  max-height: min(55svh, 454px) !important;
  padding: var(--m-first-card-pad) !important;
  border-radius: var(--m-radius-xl) !important;
  display: grid !important;
  grid-template-rows: auto 0 auto auto auto !important;
  align-content: center !important;
  gap: var(--m-space-3) !important;
  overflow: hidden !important;
  border-color: var(--m-line-strong) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 246, 230, .105), transparent 31%),
    radial-gradient(circle at 88% 16%, var(--m-cool-soft), transparent 35%),
    linear-gradient(180deg, var(--m-surface-raised), var(--m-surface-soft)) !important;
  box-shadow: var(--m-shadow-card) !important;
  filter: none !important;
}

body.mobile-polish .onion-card[data-depth="1"]::before {
  inset: var(--m-space-3) !important;
  border-radius: calc(var(--m-radius-xl) - var(--m-space-2)) !important;
  border-color: var(--m-line) !important;
  opacity: .72 !important;
}

body.mobile-polish .onion-card[data-depth="1"]::after {
  opacity: 0 !important;
}

body.mobile-polish .onion-card[data-depth="1"] .head-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: var(--m-space-3) !important;
  min-height: 0 !important;
  margin: 0 !important;
}

body.mobile-polish .onion-card[data-depth="1"] .flow-top-actions {
  position: static !important;
  justify-content: end !important;
}

body.mobile-polish .onion-card[data-depth="1"] #flowTitle {
  max-width: 8.5ch !important;
  margin: 0 !important;
  color: var(--m-text-strong) !important;
  font-family: var(--m-font-display) !important;
  font-size: clamp(2.18rem, 10.4vw, 3.18rem) !important;
  line-height: .98 !important;
  font-weight: 800 !important;
  letter-spacing: -.058em !important;
  text-shadow: none !important;
  text-wrap: balance;
}

body.mobile-polish .onion-card[data-depth="1"] #flowDesc {
  max-width: 23em !important;
  margin-top: var(--m-space-3) !important;
  color: var(--m-text-body) !important;
  font-size: clamp(.91rem, 3.7vw, 1rem) !important;
  line-height: 1.62 !important;
}

body.mobile-polish .onion-card[data-depth="1"] .badge {
  min-height: 34px !important;
  padding: var(--m-space-2) var(--m-space-3) !important;
  color: var(--m-text-muted) !important;
}

body.mobile-polish .onion-card[data-depth="1"] .onion-timers,
body.mobile-polish .onion-card[data-depth="1"] .onion-duration {
  display: none !important;
}

body.mobile-polish .onion-card[data-depth="1"] #flowActions {
  grid-template-columns: minmax(0, 1fr) !important;
  margin-top: var(--m-space-2) !important;
  gap: var(--m-space-3) !important;
}

body.mobile-polish .onion-card[data-depth="1"] #flowActions [data-flow-action="enter-env"] {
  min-height: clamp(68px, 9.2svh, 78px) !important;
  width: 100% !important;
  border: 1px solid rgba(var(--hot-rgb), .36) !important;
  border-radius: var(--m-radius-lg) !important;
  background:
    linear-gradient(180deg, rgba(255, 248, 238, .16), rgba(255, 248, 238, .03)),
    linear-gradient(135deg, rgba(var(--hot-rgb), .30), rgba(var(--hot-deep-rgb), .18)) !important;
  color: var(--m-text-strong) !important;
  box-shadow: var(--m-shadow-action) !important;
  font-size: clamp(1.04rem, 4.2vw, 1.18rem) !important;
  font-weight: 820 !important;
  letter-spacing: -.025em !important;
}

body.mobile-polish .onion-card[data-depth="1"] #flowActions [data-flow-action="enter-env"]::after {
  content: "  →";
  color: var(--m-text-body);
}

body.mobile-polish .flow-action-placeholder {
  display: none !important;
}

body.mobile-polish .onion-card[data-depth="1"] .fullscreen-hint {
  display: none !important;
}

body.mobile-polish .onion-card[data-depth="1"] .flow-subtools {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--m-space-3) !important;
  margin-top: 0 !important;
}

body.mobile-polish .onion-card[data-depth="1"] .flow-subtools .subtool-btn {
  min-height: 44px !important;
  border-radius: var(--m-radius-md) !important;
  background: rgba(255, 250, 240, .038) !important;
  color: var(--m-text-muted) !important;
}

body.mobile-polish .help-fab {
  right: max(var(--m-space-3), env(safe-area-inset-right)) !important;
  top: max(var(--m-space-3), env(safe-area-inset-top)) !important;
  bottom: auto !important;
  border-radius: var(--m-radius-pill) !important;
  background: rgba(255, 250, 240, .075) !important;
  border-color: var(--m-line) !important;
  color: var(--m-text-body) !important;
  box-shadow: var(--m-shadow-card-soft) !important;
}

body.mobile-polish .help-fab-note {
  color: var(--m-text-faint) !important;
}

@media (max-width: 380px) {
  body.mobile-polish {
    --m-page-x: var(--m-space-3);
    --m-first-card-min: 318px;
    --m-first-card-pad: var(--m-space-4);
  }

  body.mobile-polish .onion-card[data-depth="1"] #flowTitle {
    font-size: clamp(2rem, 10vw, 2.72rem) !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] #flowDesc {
    font-size: .88rem !important;
  }
}

@media (min-width: 390px) and (max-width: 430px) {
  body.mobile-polish {
    --m-first-card-min: 350px;
  }
}

@media (min-width: 431px) {
  body.mobile-polish .app {
    width: min(100%, 460px) !important;
  }
}

/* =========================================================
   Focus Onion Mobile Cube Swipe Transition v38
   Goal: make the feedback-stage transition feel like a 3D cube
   rotating from the front face to the side face.
   Scope: mobile.html only via body.mobile-polish.
   JS business logic and existing ids remain unchanged.
   ========================================================= */
@media (max-width: 860px) {
  body.mobile-polish {
    perspective: 1480px;
    perspective-origin: 50% 50%;
    overflow-x: hidden;
  }

  body.mobile-polish .app,
  body.mobile-polish .feedback-stage {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
  }

  body.mobile-polish .app {
    transform-origin: center left;
    transition:
      transform 620ms cubic-bezier(.2, .86, .18, 1),
      opacity 380ms ease,
      filter 520ms ease;
  }

  body.mobile-polish .feedback-stage {
    transform-origin: center right;
    transform:
      translate3d(14%, 0, -72px)
      rotateY(88deg)
      scale(.96);
    opacity: 0;
    transition:
      transform 620ms cubic-bezier(.2, .86, .18, 1),
      opacity 380ms ease;
    box-shadow:
      -26px 0 60px rgba(0, 0, 0, 0.22),
      0 0 0 1px rgba(255,255,255,0.05);
  }

  body.mobile-polish .feedback-stage::before,
  body.mobile-polish .feedback-stage::after,
  body.mobile-polish .app::after {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  body.mobile-polish .app::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(8,12,20,0.16));
    transition: opacity 620ms cubic-bezier(.2, .86, .18, 1);
  }

  body.mobile-polish.feedback-stage-open .app {
    transform:
      translate3d(-2.5%, 0, -62px)
      rotateY(-82deg)
      scale(.94);
    opacity: .72;
    filter: saturate(.92) brightness(.88);
    pointer-events: none;
  }

  body.mobile-polish.feedback-stage-open .app::after {
    opacity: 1;
  }

  body.mobile-polish .feedback-stage.open {
    opacity: 1;
    transform:
      translate3d(0, 0, 0)
      rotateY(0deg)
      scale(1);
    pointer-events: auto;
  }

  body.mobile-polish:not(.feedback-stage-open) .feedback-stage:not(.open) {
    pointer-events: none;
  }

  body.mobile-polish.feedback-stage-open .help-fab {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.96);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  body.mobile-polish .app,
  body.mobile-polish .feedback-stage,
  body.mobile-polish .app::after,
  body.mobile-polish .help-fab {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  body.mobile-polish .feedback-stage {
    transform: translate3d(100%, 0, 0) !important;
  }

  body.mobile-polish.feedback-stage-open .app {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body.mobile-polish .feedback-stage.open {
    transform: translate3d(0, 0, 0) !important;
  }
}

/* =========================================================
   Focus Onion Mobile First-Screen Ratio Fix v39
   Problem seen on device: the first card became too tall, the
   headline was oversized, the copy column was too narrow, and
   secondary tools visually merged with the primary CTA.
   Scope: mobile.html only via body.mobile-polish.
   ========================================================= */
@media (max-width: 860px) {
  body.mobile-polish {
    --m-page-x: clamp(14px, 4vw, 18px);
    --m-first-card-max: 410px;
    --m-first-card-min: 300px;
    --m-first-card-pad: clamp(18px, 4.8vw, 22px);
  }

  body.mobile-polish.app-ready:not(.panel-sheet-open):not(.modal-open):not(.sound-selecting):not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .app {
    justify-content: flex-start !important;
    padding-top: clamp(34px, 7svh, 68px) !important;
    gap: clamp(16px, 2.5svh, 22px) !important;
  }

  body.mobile-polish.app-ready:not(.panel-sheet-open):not(.modal-open):not(.sound-selecting):not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 7px !important;
  }

  body.mobile-polish.app-ready:not(.panel-sheet-open):not(.modal-open):not(.sound-selecting):not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) h1 {
    font-size: clamp(2.28rem, 9.2vw, 2.92rem) !important;
    letter-spacing: -.052em !important;
  }

  body.mobile-polish.app-ready:not(.panel-sheet-open):not(.modal-open):not(.sound-selecting):not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .subtitle {
    font-size: .84rem !important;
    opacity: .82 !important;
  }

  body.mobile-polish.app-ready:not(.panel-sheet-open):not(.modal-open):not(.sound-selecting):not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .app-area.visible {
    overflow: visible !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] {
    position: relative !important;
    min-height: var(--m-first-card-min) !important;
    max-height: none !important;
    width: min(100%, var(--m-first-card-max)) !important;
    padding: var(--m-first-card-pad) !important;
    align-content: start !important;
    grid-template-rows: auto auto auto !important;
    gap: 14px !important;
  }

  body.mobile-polish .onion-card[data-depth="1"]::before {
    inset: 14px !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] .head-row {
    display: block !important;
    padding-right: 88px !important;
    overflow: visible !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] .flow-top-actions {
    position: absolute !important;
    top: clamp(78px, 15.5vw, 92px) !important;
    right: var(--m-first-card-pad) !important;
    z-index: 4 !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] #flowTitle {
    max-width: none !important;
    white-space: nowrap !important;
    font-size: clamp(1.72rem, 7.35vw, 2.12rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -.045em !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] #flowDesc {
    max-width: 18.5em !important;
    margin-top: 12px !important;
    font-size: clamp(.88rem, 3.55vw, .96rem) !important;
    line-height: 1.7 !important;
    overflow-wrap: normal !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] .badge {
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: .76rem !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] .onion-timers,
  body.mobile-polish .onion-card[data-depth="1"] .onion-duration,
  body.mobile-polish .onion-card[data-depth="1"] .fullscreen-hint,
  body.mobile-polish .flow-action-placeholder {
    display: none !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] #flowActions {
    position: static !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: 10px !important;
    gap: 0 !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] #flowActions [data-flow-action="enter-env"] {
    min-height: 60px !important;
    border-radius: 20px !important;
    font-size: clamp(.98rem, 4.1vw, 1.08rem) !important;
    box-shadow: 0 13px 28px rgba(var(--hot-rgb), .16), inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] .flow-subtools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-top: 0 !important;
    position: static !important;
    z-index: 3 !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] .flow-subtools .subtool-btn {
    min-height: 42px !important;
    border-radius: 15px !important;
    background: rgba(255,250,240,.035) !important;
    border-color: rgba(255,242,221,.10) !important;
    color: rgba(255,247,235,.50) !important;
    font-size: .86rem !important;
    box-shadow: none !important;
  }

  body.mobile-polish .help-fab {
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    opacity: .72 !important;
  }

  body.mobile-polish .help-fab > span:not(.help-fab-icon) {
    display: none !important;
  }

  body.mobile-polish .help-fab-icon {
    font-size: 1rem !important;
  }
}

@media (max-width: 380px) {
  body.mobile-polish {
    --m-first-card-max: 100%;
    --m-first-card-min: 286px;
    --m-first-card-pad: 16px;
  }

  body.mobile-polish.app-ready:not(.panel-sheet-open):not(.modal-open):not(.sound-selecting):not(.feedback-stage-open):not([data-study-depth="2"]):not([data-study-depth="3"]):not([data-study-depth="4"]) .app {
    padding-top: clamp(26px, 5.5svh, 46px) !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] .head-row {
    padding-right: 76px !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] #flowTitle {
    font-size: clamp(1.56rem, 7.15vw, 1.92rem) !important;
  }

  body.mobile-polish .onion-card[data-depth="1"] #flowDesc {
    max-width: 17em !important;
    font-size: .84rem !important;
  }
}