:root {
      --bg: #090b10;
      --ink: #f6efe7;
      --hot-rgb: 255, 59, 48;
      --hot-deep-rgb: 179, 19, 36;
      --cold-rgb: 81, 101, 127;
      --muted: rgba(246, 239, 231, 0.58);
      --line: rgba(246, 239, 231, 0.14);
      --line-strong: rgba(246, 239, 231, 0.25);
      --panel: rgba(255, 255, 255, 0.055);
      --red: #ff3b30;
      --red-deep: #b31324;
      --cold: #51657f;
      --cold-bright: #9bb8d3;
      --green: #92d9b1;
      --shadow: 0 26px 78px rgba(0, 0, 0, 0.44);
      --radius: 28px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      --page-background:
        radial-gradient(circle at 9% 0%, rgba(var(--hot-rgb), 0.28), transparent 29%),
        radial-gradient(circle at 88% 8%, rgba(var(--cold-rgb), 0.24), transparent 31%),
        radial-gradient(circle at 48% 100%, rgba(var(--hot-deep-rgb), 0.12), transparent 36%),
        linear-gradient(180deg, #10131a 0%, #07090d 100%);
      --page-overlay-opacity: 0;
      --page-overlay: none;
      --page-overlay-secondary: none;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100%;
      width: 100%;
      overflow-x: hidden;
      scrollbar-width: none;
      scroll-behavior: auto;
      background: var(--page-background);
      color: var(--ink);
      font-family: ui-serif, Georgia, "Times New Roman", "Songti SC", "STSong", "Noto Serif SC", serif;
    }

    body::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

    body {
      position: relative;
      isolation: isolate;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      overflow-y: auto;
      padding: max(22px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom));
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      opacity: var(--page-overlay-opacity);
      transition: opacity .35s ease, transform .6s ease;
    }

    body::before {
      background: var(--page-overlay);
      background-size: cover;
      mix-blend-mode: soft-light;
    }

    body::after {
      background: var(--page-overlay-secondary);
      background-size: cover;
      mix-blend-mode: screen;
    }

    button, input, select { font: inherit; }

    .app {
      position: relative;
      z-index: 1;
      width: min(820px, 100%);
      margin-inline: auto;
      display: grid;
      gap: 16px;
    }

    header {
      padding: 8px 4px 10px;
      display: grid;
      gap: 10px;
    }

    .mark {
      width: 42px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--red), var(--cold-bright), transparent);
    }

    .eyebrow {
      color: var(--cold-bright);
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      font-family: var(--mono);
    }

    h1 {
      margin: 0;
      font-size: clamp(30px, 6vw, 52px);
      line-height: 1.05;
      font-weight: 500;
      letter-spacing: -0.055em;
    }

    .subtitle {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
      max-width: 680px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    .card {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.032)),
        linear-gradient(135deg, rgba(var(--hot-rgb), 0.075), transparent 34%),
        linear-gradient(225deg, rgba(var(--cold-rgb), 0.11), transparent 42%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      padding: 18px;
      overflow: visible;
    }

    .auth-card { padding: 24px 18px; }
    .auth-card.logged-in-hidden { display: none; }

    .app-area { display: none; gap: 16px; }
    .app-area.visible { display: grid; }

    .head-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
    }

    .section-title {
      margin: 0;
      font-size: 18px;
      line-height: 1.3;
      font-weight: 500;
      letter-spacing: -0.025em;
    }

    .section-desc {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.65;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    .badge {
      white-space: nowrap;
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 12px;
      border: 1px solid rgba(155,184,211,0.26);
      background: rgba(81,101,127,0.16);
      color: #d7e7f3;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    .badge.running {
      border-color: rgba(255,59,48,0.32);
      background: rgba(255,59,48,0.14);
      color: #ffd7d4;
    }

    input, select {
      min-height: 48px;
      width: 100%;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.04);
      color: var(--ink);
      padding: 12px 13px;
      outline: none;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    select option { color: #111; }
    input::placeholder { color: rgba(247,240,228,0.44); }
    input[type="number"] { width: 88px; text-align: center; font-family: var(--mono); }

    input:focus, select:focus {
      border-color: rgba(255,59,48,0.48);
      box-shadow: 0 0 0 3px rgba(255,59,48,0.12);
    }

    button {
      min-height: 48px;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 13px 15px;
      cursor: pointer;
      color: var(--ink);
      background: rgba(255,255,255,0.045);
      transition: transform .08s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
      -webkit-tap-highlight-color: transparent;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    button:hover { border-color: var(--line-strong); background: rgba(255,255,255,0.065); }
    button:active { transform: scale(.985); }
    button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

    .primary { background: rgba(81,101,127,0.2); border-color: rgba(155,184,211,0.28); color: #e7f2fb; }
    .success { background: rgba(255,59,48,0.18); border-color: rgba(255,59,48,0.34); color: #ffe0dd; }
    .warning { background: rgba(179,19,36,0.2); border-color: rgba(255,59,48,0.3); color: #ffd3cf; }
    .danger { background: rgba(255,122,135,0.13); border-color: rgba(255,122,135,0.3); color: #ffd9dd; }
    .secondary { background: rgba(255,255,255,0.035); border-color: var(--line); }

    .auth-inputs, .controls, .controls-three, .sound-grid, .stats { display: grid; gap: 10px; }
    .auth-inputs, .sound-grid { grid-template-columns: 1fr 1fr; margin-top: 14px; }
    .controls { grid-template-columns: 1fr 1fr; }
    .controls-three { grid-template-columns: repeat(3, 1fr); }

    .duration-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 8px;
      align-items: center;
      margin-top: 14px;
    }

    .duration-row label {
      color: var(--muted);
      font-size: 13px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    .cloud-status, .log, .calendar-note {
      margin: 11px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
      min-height: 20px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    .onion-card {
      position: relative;
      overflow: hidden;
      border-width: 1.5px;
      border-color: rgba(255,255,255,0.28);
      padding: clamp(22px, 5vw, 34px);
      min-height: clamp(420px, 62vh, 560px);
      display: grid;
      grid-template-rows: auto minmax(170px, auto) 64px auto auto;
      align-content: center;
      align-items: stretch;
      background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,0.18), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(var(--hot-deep-rgb), 0.18), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045));
      box-shadow: 0 26px 70px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.18);
    }

    .onion-card[data-depth="1"] {
      background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,0.18), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(var(--cold-rgb), 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045));
      filter: saturate(0.95);
    }

    .onion-card[data-depth="2"] {
      background:
        radial-gradient(circle at 18% 12%, rgba(var(--cold-rgb), 0.24), transparent 34%),
        radial-gradient(circle at 88% 16%, rgba(var(--hot-rgb), 0.12), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.038));
      border-color: rgba(155,184,211,0.22);
      box-shadow: 0 30px 86px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.14);
    }

    .onion-card[data-depth="3"] {
      background:
        radial-gradient(circle at 50% 0%, rgba(var(--hot-rgb), 0.19), transparent 38%),
        radial-gradient(circle at 14% 82%, rgba(var(--cold-rgb), 0.18), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.028));
      border-color: rgba(var(--hot-rgb), 0.26);
      box-shadow: 0 34px 96px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.11);
    }

    .onion-card[data-depth="4"] {
      background:
        radial-gradient(circle at 50% 18%, rgba(var(--hot-rgb), 0.24), transparent 28%),
        radial-gradient(circle at 50% 110%, rgba(var(--cold-rgb), 0.20), transparent 38%),
        linear-gradient(180deg, rgba(10,10,12,0.72), rgba(0,0,0,0.38));
      border-color: rgba(var(--hot-rgb), 0.38);
      box-shadow: 0 42px 120px rgba(0,0,0,0.58), 0 0 80px rgba(var(--hot-rgb), 0.10), inset 0 1px 0 rgba(255,255,255,0.10);
    }

    body[data-study-depth="4"] header {
      opacity: 0.42;
      transform: translateY(-4px) scale(.985);
      transition: opacity 420ms ease, transform 420ms ease;
    }

    body[data-study-depth="4"] .flow-subtools {
      opacity: 0.42;
      transition: opacity 260ms ease;
    }

    body[data-study-depth="4"] .flow-subtools:hover {
      opacity: 1;
    }

    body[data-study-depth="4"] #flowTitle {
      text-shadow: 0 0 42px rgba(var(--hot-rgb), 0.22);
    }

    .onion-card,
    #flowTitle,
    #flowDesc,
    .onion-timer {
      transition:
        background 520ms cubic-bezier(.16, 1, .3, 1),
        border-color 520ms cubic-bezier(.16, 1, .3, 1),
        box-shadow 520ms cubic-bezier(.16, 1, .3, 1),
        opacity 420ms ease,
        transform 420ms cubic-bezier(.16, 1, .3, 1),
        text-shadow 420ms ease;
    }

    .onion-card.is-layer-changing > * {
      animation: flowContentSettle 520ms cubic-bezier(.16, 1, .3, 1);
    }

    .onion-card.is-layer-changing {
      filter: brightness(1.04) saturate(1.04);
    }

    @keyframes flowContentSettle {
      0% { opacity: .72; transform: translateY(10px) scale(.992); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .onion-card > * {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
    }

    .onion-card::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 24px;
      pointer-events: none;
    }

    #flowTitle {
      font-size: clamp(1.65rem, 7vw, 3rem);
      line-height: 1.05;
      letter-spacing: -0.06em;
      margin-bottom: 8px;
    }

    #flowDesc { max-width: 620px; font-size: clamp(0.98rem, 2.5vw, 1.12rem); }

    .flow-top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .onion-timers {
      display: grid;
      gap: 10px;
      margin: 16px 0 12px;
      align-content: center;
      min-height: 170px;
    }

    .onion-timer {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: baseline;
      gap: 12px;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(255,255,255,0.07);
    }

    .onion-timer strong { font-size: 0.92rem; letter-spacing: -0.01em; }
    .onion-timer span {
      font-family: var(--mono);
      font-variant-numeric: tabular-nums;
      font-size: clamp(1.45rem, 6.5vw, 2.6rem);
      font-weight: 900;
      letter-spacing: -0.05em;
    }

    .onion-timer.primary { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.10); }
    .onion-timer.secondary { opacity: 0.82; }
    .onion-timer.deep { border-color: rgba(179,19,36,0.42); }

    .onion-card[data-depth="2"] .onion-timer:first-child,
    .onion-card[data-depth="3"] .onion-timer:first-child {
      padding: 18px 20px;
      border-color: rgba(255,255,255,0.32);
      background: rgba(255,255,255,0.115);
      box-shadow: 0 16px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .onion-card[data-depth="2"] .onion-timer:first-child strong,
    .onion-card[data-depth="3"] .onion-timer:first-child strong {
      font-size: 0.98rem;
      color: rgba(246,239,231,0.96);
    }

    .onion-card[data-depth="2"] .onion-timer:first-child span,
    .onion-card[data-depth="3"] .onion-timer:first-child span {
      font-size: clamp(1.85rem, 7.2vw, 3rem);
    }

    .onion-card[data-depth="3"] .onion-timer:not(:first-child) {
      padding: 12px 15px;
      border-radius: 17px;
      background: rgba(255,255,255,0.045);
      opacity: 0.68;
    }

    .onion-card[data-depth="3"] .onion-timer:not(:first-child) strong {
      font-size: 0.78rem;
      color: rgba(246,239,231,0.62);
    }

    .onion-card[data-depth="3"] .onion-timer:not(:first-child) span {
      font-size: clamp(1.05rem, 4.2vw, 1.65rem);
      font-weight: 760;
      letter-spacing: -0.035em;
    }

    .onion-card[data-depth="4"] .onion-timer:first-child {
      padding: 20px 22px;
      border-color: rgba(var(--hot-rgb), 0.46);
      background: rgba(var(--hot-rgb), 0.13);
      box-shadow: 0 18px 42px rgba(0,0,0,0.28), 0 0 42px rgba(var(--hot-rgb), 0.10), inset 0 1px 0 rgba(255,255,255,0.14);
    }

    .onion-card[data-depth="4"] .onion-timer:first-child strong {
      font-size: 1.02rem;
      color: rgba(246,239,231,0.98);
    }

    .onion-card[data-depth="4"] .onion-timer:first-child span {
      font-size: clamp(2.15rem, 8.4vw, 3.6rem);
      font-weight: 950;
      letter-spacing: -0.065em;
    }

    .onion-card[data-depth="4"] .onion-timer:not(:first-child) {
      padding: 11px 15px;
      border-radius: 17px;
      background: rgba(255,255,255,0.042);
      border-color: rgba(255,255,255,0.12);
      opacity: 0.66;
    }

    .onion-card[data-depth="4"] .onion-timer:not(:first-child) strong {
      font-size: 0.76rem;
      color: rgba(246,239,231,0.60);
    }

    .onion-card[data-depth="4"] .onion-timer:not(:first-child) span {
      font-size: clamp(1.02rem, 3.8vw, 1.58rem);
      font-weight: 740;
      letter-spacing: -0.035em;
    }

    .onion-duration {
      margin-top: 10px;
      margin-bottom: 12px;
      min-height: 54px;
      transition: opacity 240ms ease, transform 300ms cubic-bezier(.16, 1, .3, 1);
    }

    .onion-duration.hidden {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-4px);
    }
    .onion-pause-note { margin: -2px 0 12px; color: var(--muted); font-size: 0.9rem; }

    #flowActions {
      margin-top: 18px;
      gap: 12px;
      min-height: 54px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
    }

    #flowActions button {
      min-height: 54px;
      padding: 0 22px;
      border-radius: 18px;
      font-size: 1.02rem;
      font-weight: 850;
    }

    .flow-action-placeholder {
      min-height: 54px;
      border-radius: 18px;
      opacity: 0;
      pointer-events: none;
    }
    #flowActions button.primary { min-width: min(100%, 260px); box-shadow: 0 14px 32px rgba(179,19,36,0.24); }

    .flow-subtools {
      display: flex;
      gap: 10px;
      margin-top: 16px;
      flex-wrap: wrap;
      position: relative;
      z-index: 2;
    }

    .subtool-btn {
      min-height: 40px;
      padding: 0 16px;
      border-radius: 999px;
      font-size: 0.92rem;
    }

    .subtool-btn.active {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.28);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
    }

    #calendarCard, #settingsPanel {
      display: block;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      margin-top: -6px;
      transform: translateY(-10px) scale(.992);
      pointer-events: none;
      transition:
        max-height 520ms cubic-bezier(.16, 1, .3, 1),
        opacity 260ms ease,
        transform 420ms cubic-bezier(.16, 1, .3, 1),
        margin-top 420ms cubic-bezier(.16, 1, .3, 1),
        padding-top 420ms cubic-bezier(.16, 1, .3, 1),
        padding-bottom 420ms cubic-bezier(.16, 1, .3, 1),
        border-color 260ms ease;
      will-change: max-height, opacity, transform;
    }

    #calendarCard {
      padding-top: 0;
      padding-bottom: 0;
      border-color: transparent;
    }

    #settingsPanel {
      display: grid;
      gap: 0;
      transition:
        max-height 460ms cubic-bezier(.2, .8, .2, 1),
        opacity 280ms ease,
        transform 380ms cubic-bezier(.2, .8, .2, 1),
        margin-top 360ms ease,
        gap 360ms ease;
    }

    #calendarCard.open {
      max-height: 980px;
      opacity: 1;
      margin-top: 16px;
      padding-top: 18px;
      padding-bottom: 18px;
      border-color: var(--line);
      transform: translateY(0);
      pointer-events: auto;
    }

    #settingsPanel.open {
      max-height: 1900px;
      opacity: 1;
      margin-top: 16px;
      gap: 16px;
      transform: translateY(0);
      pointer-events: auto;
    }

    @media (prefers-reduced-motion: reduce) {
      #calendarCard, #settingsPanel {
        transition: none;
      }
    }

    #deepCard, #studyCard, #envCard { display: none !important; }

    .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .stat { background: rgba(255,255,255,0.032); border: 1px solid var(--line); border-radius: 20px; padding: 13px 12px; min-width: 0; }
    .stat-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 18px; margin-bottom: 5px; }
    .stat-label { color: var(--muted); font-size: 12px; line-height: 1.35; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }

    .sound-box {
      background: rgba(255,255,255,0.032);
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 15px;
      display: grid;
      gap: 10px;
    }

    .sound-box h3 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
    .sound-box p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }

    .toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
    .user-pill { border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.035); padding: 8px 12px; color: var(--muted); font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }

    .sound-picker { display: grid; gap: 8px; }
    .sound-picker-button { width: 100%; min-height: 58px; text-align: left; display: grid; gap: 5px; align-content: center; }
    .sound-picker-button span { font-size: 12px; color: var(--muted); }
    .sound-picker-button strong { font-size: 14px; font-weight: 650; color: var(--ink); }

    .calendar-nav { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
    .calendar-nav button { min-height: 38px; padding: 8px 11px; border-radius: 13px; }
    .month-label { min-width: 84px; text-align: center; font-family: var(--mono); font-size: 14px; color: var(--ink); }
    .calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
    .calendar-weekdays { margin-top: 16px; color: var(--muted); font-size: 12px; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
    .calendar-grid { margin-top: 8px; }

    .day-cell {
      min-height: 66px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.028);
      padding: 8px 7px;
      display: grid;
      align-content: space-between;
      gap: 4px;
    }

    .day-cell.empty { opacity: .18; background: transparent; }
    .day-cell.today { border-color: rgba(255,59,48,0.42); box-shadow: inset 0 0 0 1px rgba(255,59,48,0.16); background: rgba(255,59,48,0.065); }
    .day-number { font-size: 13px; line-height: 1; }
    .calendar-metric { display: block; margin-top: 3px; line-height: 1.2; white-space: nowrap; font-family: var(--mono); }
    .calendar-metric.primary-study { margin-top: 5px; font-size: 0.82rem; font-weight: 800; letter-spacing: -0.01em; color: #d7f2e4; }
    .calendar-metric.secondary-env { font-size: 0.68rem; opacity: 0.72; color: #d7e7f3; }
    .calendar-metric.zero { opacity: 0.38; font-weight: 500; }

    .bottom-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
    .icon-btn { min-height: 36px; width: 36px; padding: 0; border-radius: 999px; display: inline-grid; place-items: center; font-size: 15px; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(10px);
    }

    .modal-backdrop.visible { display: grid; }
    .modal { width: min(840px, 100%); border-radius: 30px; border: 1px solid var(--line-strong); background: #0b0d12; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55); padding: 20px; }
    .modal-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
    .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
    .theme-option { min-height: 82px; text-align: left; padding: 14px; border-radius: 20px; display: grid; gap: 8px; align-content: start; }
    .theme-option strong { font-size: 14px; }
        .theme-option span { color: var(--muted); font-size: 12px; line-height: 1.45; }

    .confirm-modal { width: min(460px, 100%); padding: 22px 20px 18px; }
    .confirm-modal-header { display: grid; gap: 10px; }
    .confirm-modal-eyebrow { display: inline-flex; width: fit-content; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(var(--hot-rgb), 0.26); background: rgba(var(--hot-rgb), 0.10); color: rgba(255,255,255,0.82); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
    .confirm-modal-text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
    .confirm-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
    .confirm-modal-actions button { min-height: 46px; }

    .swatches { display: flex; gap: 5px; }
    .swatch { width: 18px; height: 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.24); }

    .pulse { animation: pulse 420ms ease-out; }
    @keyframes pulse {
      0% { transform: scale(1); filter: brightness(1); }
      45% { transform: scale(1.008); filter: brightness(1.12); }
      100% { transform: scale(1); filter: brightness(1); }
    }

    body[data-theme="redCold"] {
      --bg: #090b10;
      --hot-rgb: 255, 59, 48;
      --hot-deep-rgb: 179, 19, 36;
      --cold-rgb: 81, 101, 127;
      --red: #ff3b30;
      --red-deep: #b31324;
      --cold: #51657f;
      --cold-bright: #9bb8d3;
    }

    body[data-theme="inkGold"] {
      --bg: #0d0e0c;
      --hot-rgb: 214, 182, 106;
      --hot-deep-rgb: 195, 139, 111;
      --cold-rgb: 89, 96, 79;
      --red: #d6b66a;
      --red-deep: #c38b6f;
      --cold: #59604f;
      --cold-bright: #e0cd93;
    }

    body[data-theme="blueAcid"] {
      --bg: #070a19;
      --hot-rgb: 87, 227, 137;
      --hot-deep-rgb: 199, 125, 255;
      --cold-rgb: 49, 68, 164;
      --red: #57e389;
      --red-deep: #c77dff;
      --cold: #3144a4;
      --cold-bright: #9dd9ff;
    }

    body[data-theme="paperRed"] {
      --bg: #15110f;
      --hot-rgb: 255, 77, 61;
      --hot-deep-rgb: 255, 138, 122;
      --cold-rgb: 75, 85, 99;
      --red: #ff4d3d;
      --red-deep: #ff8a7a;
      --cold: #4b5563;
      --cold-bright: #d1d5db;
    }

    body[data-theme="turtleShell"] {
      --bg: #0b0f0d;
      --hot-rgb: 170, 140, 82;
      --hot-deep-rgb: 86, 70, 34;
      --cold-rgb: 61, 86, 71;
      --red: #b49a62;
      --red-deep: #6f5b2e;
      --cold: #3d5647;
      --cold-bright: #b8c8ae;
      --page-background:
        radial-gradient(circle at 20% 12%, rgba(190, 170, 118, 0.10), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(109, 132, 104, 0.14), transparent 28%),
        linear-gradient(180deg, #151814 0%, #0a0d0a 100%);
      --page-overlay-opacity: .72;
      --page-overlay:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0 1.2px, transparent 1.3px 100%),
        repeating-conic-gradient(from 0deg,
          rgba(192, 171, 112, 0.22) 0deg 10deg,
          rgba(63, 84, 68, 0.0) 10deg 60deg,
          rgba(98, 118, 85, 0.18) 60deg 70deg,
          rgba(63, 84, 68, 0.0) 70deg 120deg);
      --page-overlay-secondary:
        radial-gradient(circle at 20% 20%, rgba(236, 214, 158, 0.10), transparent 0 18%),
        radial-gradient(circle at 80% 70%, rgba(121, 140, 104, 0.10), transparent 0 20%),
        linear-gradient(transparent, transparent);
    }



    body[data-theme="stainedGlass"] {
      --bg: #14141a;
      --ink: #f4f0e8;
      --muted: rgba(244, 240, 232, 0.66);
      --line: rgba(226, 210, 173, 0.16);
      --line-strong: rgba(226, 210, 173, 0.28);
      --panel: rgba(20, 20, 28, 0.84);
      --hot-rgb: 205, 80, 97;
      --hot-deep-rgb: 221, 173, 72;
      --cold-rgb: 59, 118, 161;
      --red: #cd5061;
      --red-deep: #ddad48;
      --cold: #3b76a1;
      --cold-bright: #f1ddad;
      --shadow: 0 26px 74px rgba(4, 5, 9, 0.38);
      --radius: 22px;
      --page-background:
        radial-gradient(circle at 14% 12%, rgba(205,80,97,0.10), transparent 18%),
        radial-gradient(circle at 86% 14%, rgba(59,118,161,0.12), transparent 20%),
        linear-gradient(180deg, #1f1b25 0%, #0b0d11 100%);
      --page-overlay-opacity: .90;
      --page-overlay:
        linear-gradient(125deg, rgba(226,210,173,0.18) 0 1.2%, transparent 1.2% 19%, rgba(226,210,173,0.16) 19% 20.2%, transparent 20.2% 100%),
        linear-gradient(35deg, rgba(226,210,173,0.16) 0 1.1%, transparent 1.1% 23%, rgba(226,210,173,0.12) 23% 24%, transparent 24% 100%),
        radial-gradient(circle at 24% 72%, rgba(205,80,97,0.22), transparent 12%),
        radial-gradient(circle at 78% 64%, rgba(59,118,161,0.18), transparent 14%),
        radial-gradient(circle at 62% 18%, rgba(221,173,72,0.20), transparent 12%);
      --page-overlay-secondary:
        radial-gradient(circle at 16% 20%, rgba(255,255,255,0.10), transparent 16%),
        radial-gradient(circle at 84% 20%, rgba(255,255,255,0.08), transparent 14%);
    }


    body[data-theme="artNouveauBloom"] {
      --bg: #13221e;
      --ink: #eef0de;
      --muted: rgba(238, 240, 222, 0.66);
      --line: rgba(212, 201, 145, 0.18);
      --line-strong: rgba(212, 201, 145, 0.32);
      --panel: rgba(18, 31, 27, 0.86);
      --hot-rgb: 205, 176, 112;
      --hot-deep-rgb: 104, 142, 101;
      --cold-rgb: 70, 110, 97;
      --red: #cdb070;
      --red-deep: #688e65;
      --cold: #466e61;
      --cold-bright: #efe7ba;
      --shadow: 0 24px 64px rgba(6, 12, 10, 0.34);
      --radius: 28px;
      --page-background:
        radial-gradient(circle at 16% 10%, rgba(205,176,112,0.12), transparent 20%),
        radial-gradient(circle at 84% 18%, rgba(104,142,101,0.12), transparent 18%),
        linear-gradient(180deg, #173028 0%, #0b1512 100%);
      --page-overlay-opacity: .82;
      --page-overlay:
        radial-gradient(circle at 18% 82%, rgba(190,204,165,0.08), transparent 14%),
        radial-gradient(circle at 78% 76%, rgba(205,176,112,0.08), transparent 16%),
        linear-gradient(125deg, rgba(205,176,112,0.06), transparent 38%, rgba(104,142,101,0.05) 62%, transparent 100%);
      --page-overlay-secondary:
        linear-gradient(transparent, transparent),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.035) 0 1px, transparent 1.4px 100%);
    }

    body[data-theme="artDecoNoir"] {
      --bg: #0f0d10;
      --ink: #f3e8c8;
      --muted: rgba(243, 232, 200, 0.58);
      --line: rgba(243, 232, 200, 0.18);
      --line-strong: rgba(243, 232, 200, 0.30);
      --panel: rgba(20, 16, 20, 0.88);
      --hot-rgb: 212, 177, 93;
      --hot-deep-rgb: 121, 90, 38;
      --cold-rgb: 42, 39, 47;
      --red: #d4b15d;
      --red-deep: #795a26;
      --cold: #2a272f;
      --cold-bright: #f3deb0;
      --shadow: 0 26px 78px rgba(0, 0, 0, 0.54);
      --radius: 16px;
      --page-background:
        radial-gradient(circle at 50% -10%, rgba(212,177,93,0.14), transparent 22%),
        linear-gradient(180deg, #161218 0%, #0a090c 100%);
      --page-overlay-opacity: .82;
      --page-overlay:
        repeating-linear-gradient(115deg,
          rgba(212,177,93,0.12) 0 2px,
          transparent 2px 16px),
        linear-gradient(180deg, transparent 0 78%, rgba(212,177,93,0.10) 78% 80%, transparent 80% 100%);
      --page-overlay-secondary:
        radial-gradient(circle at 50% 12%, rgba(212,177,93,0.18), transparent 0 18%),
        linear-gradient(90deg, transparent 0 14%, rgba(212,177,93,0.08) 14% 15%, transparent 15% 85%, rgba(212,177,93,0.08) 85% 86%, transparent 86% 100%);
    }

    body[data-theme="artStudio"] {
      --bg: #161118;
      --hot-rgb: 235, 104, 67;
      --hot-deep-rgb: 185, 80, 142;
      --cold-rgb: 76, 126, 169;
      --red: #eb6843;
      --red-deep: #b9508e;
      --cold: #4c7ea9;
      --cold-bright: #f4cc82;
      --page-background:
        radial-gradient(circle at 10% 10%, rgba(244, 204, 130, 0.16), transparent 20%),
        radial-gradient(circle at 84% 12%, rgba(76, 126, 169, 0.18), transparent 22%),
        radial-gradient(circle at 75% 84%, rgba(235, 104, 67, 0.20), transparent 26%),
        linear-gradient(180deg, #1a1420 0%, #0d0b10 100%);
      --page-overlay-opacity: .82;
      --page-overlay:
        radial-gradient(circle at 18% 22%, rgba(250, 212, 163, 0.28), transparent 0 16%),
        radial-gradient(circle at 70% 24%, rgba(96, 151, 215, 0.20), transparent 0 18%),
        radial-gradient(circle at 62% 76%, rgba(203, 98, 154, 0.18), transparent 0 16%),
        radial-gradient(circle at 32% 84%, rgba(230, 108, 72, 0.16), transparent 0 14%);
      --page-overlay-secondary:
        linear-gradient(120deg, rgba(255,255,255,0.03), transparent 40%),
        linear-gradient(300deg, rgba(255,255,255,0.03), transparent 38%);
    }

    .theme-option.active-theme {
      border-color: rgba(var(--hot-rgb), 0.58);
      background: rgba(var(--hot-rgb), 0.12);
      box-shadow: inset 0 0 0 1px rgba(var(--hot-rgb), 0.12);
    }




    body[data-theme="stainedGlass"] .card {
      background:
        linear-gradient(180deg, rgba(20, 20, 28, 0.88), rgba(14, 15, 21, 0.80));
      border-color: rgba(226,210,173,0.20);
      backdrop-filter: none;
    }

    body[data-theme="stainedGlass"] .onion-card {
      background:
        radial-gradient(circle at 50% -8%, rgba(221,173,72,0.08), transparent 22%),
        linear-gradient(180deg, rgba(21, 21, 31, 0.94), rgba(10, 12, 17, 0.88));
      border-color: rgba(226,210,173,0.26);
      box-shadow: 0 28px 80px rgba(4,5,9,0.40), inset 0 0 0 1px rgba(226,210,173,0.08);
    }


    body[data-theme="artNouveauBloom"] .card {
      background:
        linear-gradient(180deg, rgba(17, 30, 26, 0.90), rgba(12, 24, 21, 0.82));
      border-color: rgba(205,176,112,0.22);
      backdrop-filter: none;
    }

    body[data-theme="artNouveauBloom"] .onion-card {
      background:
        radial-gradient(circle at 50% -8%, rgba(205,176,112,0.08), transparent 24%),
        linear-gradient(180deg, rgba(18, 34, 28, 0.95), rgba(9, 20, 17, 0.86));
      border-color: rgba(205,176,112,0.30);
      box-shadow: 0 28px 72px rgba(6,12,10,0.38), inset 0 0 0 1px rgba(205,176,112,0.08);
    }

    body[data-theme="artNouveauBloom"] button {
      border-radius: 18px;
      box-shadow: inset 0 0 0 1px rgba(205,176,112,0.05);
    }

    body[data-theme="artDecoNoir"] .card {
      background:
        linear-gradient(180deg, rgba(18, 15, 20, 0.92), rgba(10, 9, 12, 0.84));
      border-color: rgba(212,177,93,0.24);
      backdrop-filter: none;
    }

    body[data-theme="artDecoNoir"] .onion-card {
      background:
        radial-gradient(circle at 50% -10%, rgba(212,177,93,0.08), transparent 28%),
        linear-gradient(180deg, rgba(22,18,24,0.96), rgba(12,10,14,0.88));
      border-color: rgba(212,177,93,0.34);
      box-shadow: 0 28px 84px rgba(0,0,0,0.56), inset 0 0 0 1px rgba(212,177,93,0.10);
    }

    body[data-theme="turtleShell"] .card {
      background:
        linear-gradient(180deg, rgba(22, 24, 20, 0.68), rgba(14, 16, 13, 0.55)),
        linear-gradient(135deg, rgba(180, 153, 93, 0.08), transparent 34%),
        linear-gradient(225deg, rgba(89, 120, 96, 0.08), transparent 42%);
    }

    body[data-theme="artStudio"] .card {
      background:
        linear-gradient(180deg, rgba(30, 22, 34, 0.70), rgba(16, 14, 18, 0.54)),
        linear-gradient(135deg, rgba(235, 104, 67, 0.10), transparent 34%),
        linear-gradient(225deg, rgba(76, 126, 169, 0.12), transparent 42%);
    }

    body[data-theme="stainedGlass"] button {
      border-radius: 18px;
      box-shadow: inset 0 0 0 1px rgba(226,210,173,0.04);
    }

    body[data-theme="artDecoNoir"] button {
      border-radius: 12px;
      box-shadow: inset 0 0 0 1px rgba(212,177,93,0.08);
    }

    body[data-theme="artDecoNoir"] .badge,
    body[data-theme="artDecoNoir"] .user-pill {
      border-color: rgba(212,177,93,0.24);
      color: #f0deb1;
      background: rgba(212,177,93,0.08);
    }

    body[data-theme="stainedGlass"] .subtitle,
    body[data-theme="stainedGlass"] .section-desc,
    body[data-theme="stainedGlass"] .calendar-note,
    body[data-theme="stainedGlass"] .cloud-status,
    body[data-theme="stainedGlass"] .log,
    body[data-theme="stainedGlass"] .stat-label,
    body[data-theme="stainedGlass"] .sound-box p,
    body[data-theme="stainedGlass"] .theme-option span,
    body[data-theme="stainedGlass"] .day-cell,
    body[data-theme="stainedGlass"] .month-label,
    body[data-theme="stainedGlass"] .calendar-weekdays,
    body[data-theme="stainedGlass"] .user-pill,
    body[data-theme="stainedGlass"] .badge {
      color: #eadab3;
    }

    body[data-theme="artNouveauBloom"] .subtitle,
    body[data-theme="artNouveauBloom"] .section-desc,
    body[data-theme="artNouveauBloom"] .calendar-note,
    body[data-theme="artNouveauBloom"] .cloud-status,
    body[data-theme="artNouveauBloom"] .log,
    body[data-theme="artNouveauBloom"] .stat-label,
    body[data-theme="artNouveauBloom"] .sound-box p,
    body[data-theme="artNouveauBloom"] .theme-option span,
    body[data-theme="artNouveauBloom"] .day-cell,
    body[data-theme="artNouveauBloom"] .month-label,
    body[data-theme="artNouveauBloom"] .calendar-weekdays,
    body[data-theme="artNouveauBloom"] .user-pill,
    body[data-theme="artNouveauBloom"] .badge {
      color: #e7e7cf;
    }

    body[data-theme="artDecoNoir"] .subtitle,
    body[data-theme="artDecoNoir"] .section-desc,
    body[data-theme="artDecoNoir"] .calendar-note,
    body[data-theme="artDecoNoir"] .cloud-status,
    body[data-theme="artDecoNoir"] .log,
    body[data-theme="artDecoNoir"] .stat-label,
    body[data-theme="artDecoNoir"] .sound-box p,
    body[data-theme="artDecoNoir"] .theme-option span,
    body[data-theme="artDecoNoir"] .day-cell,
    body[data-theme="artDecoNoir"] .month-label,
    body[data-theme="artDecoNoir"] .calendar-weekdays {
      color: #d8c8a3;
    }

    body[data-theme="turtleShell"] .subtitle,
    body[data-theme="turtleShell"] .section-desc,
    body[data-theme="turtleShell"] .calendar-note,
    body[data-theme="turtleShell"] .cloud-status,
    body[data-theme="turtleShell"] .log,
    body[data-theme="turtleShell"] .stat-label,
    body[data-theme="turtleShell"] .sound-box p,
    body[data-theme="turtleShell"] .theme-option span,
    body[data-theme="turtleShell"] .day-cell,
    body[data-theme="turtleShell"] .month-label,
    body[data-theme="turtleShell"] .calendar-weekdays,
    body[data-theme="turtleShell"] .user-pill,
    body[data-theme="turtleShell"] .badge {
      color: #d7deca;
    }

    body[data-theme="artStudio"] .subtitle,
    body[data-theme="artStudio"] .section-desc,
    body[data-theme="artStudio"] .calendar-note,
    body[data-theme="artStudio"] .cloud-status,
    body[data-theme="artStudio"] .log,
    body[data-theme="artStudio"] .stat-label,
    body[data-theme="artStudio"] .sound-box p,
    body[data-theme="artStudio"] .theme-option span,
    body[data-theme="artStudio"] .day-cell,
    body[data-theme="artStudio"] .month-label,
    body[data-theme="artStudio"] .calendar-weekdays,
    body[data-theme="artStudio"] .user-pill,
    body[data-theme="artStudio"] .badge {
      color: #eadfd2;
    }

    body[data-theme="inkGold"] .subtitle,
    body[data-theme="inkGold"] .section-desc,
    body[data-theme="inkGold"] .calendar-note,
    body[data-theme="inkGold"] .cloud-status,
    body[data-theme="inkGold"] .log,
    body[data-theme="inkGold"] .stat-label,
    body[data-theme="inkGold"] .sound-box p,
    body[data-theme="inkGold"] .theme-option span,
    body[data-theme="inkGold"] .day-cell,
    body[data-theme="inkGold"] .month-label,
    body[data-theme="inkGold"] .calendar-weekdays,
    body[data-theme="inkGold"] .user-pill,
    body[data-theme="inkGold"] .badge {
      color: #e2d8b8;
    }

    body[data-theme="blueAcid"] .subtitle,
    body[data-theme="blueAcid"] .section-desc,
    body[data-theme="blueAcid"] .calendar-note,
    body[data-theme="blueAcid"] .cloud-status,
    body[data-theme="blueAcid"] .log,
    body[data-theme="blueAcid"] .stat-label,
    body[data-theme="blueAcid"] .sound-box p,
    body[data-theme="blueAcid"] .theme-option span,
    body[data-theme="blueAcid"] .day-cell,
    body[data-theme="blueAcid"] .month-label,
    body[data-theme="blueAcid"] .calendar-weekdays,
    body[data-theme="blueAcid"] .user-pill,
    body[data-theme="blueAcid"] .badge {
      color: #dce8ff;
    }

    body[data-theme="paperRed"] .subtitle,
    body[data-theme="paperRed"] .section-desc,
    body[data-theme="paperRed"] .calendar-note,
    body[data-theme="paperRed"] .cloud-status,
    body[data-theme="paperRed"] .log,
    body[data-theme="paperRed"] .stat-label,
    body[data-theme="paperRed"] .sound-box p,
    body[data-theme="paperRed"] .theme-option span,
    body[data-theme="paperRed"] .day-cell,
    body[data-theme="paperRed"] .month-label,
    body[data-theme="paperRed"] .calendar-weekdays,
    body[data-theme="paperRed"] .user-pill,
    body[data-theme="paperRed"] .badge {
      color: #ece2da;
    }

    body[data-theme="redCold"] .subtitle,
    body[data-theme="redCold"] .section-desc,
    body[data-theme="redCold"] .calendar-note,
    body[data-theme="redCold"] .cloud-status,
    body[data-theme="redCold"] .log,
    body[data-theme="redCold"] .stat-label,
    body[data-theme="redCold"] .sound-box p,
    body[data-theme="redCold"] .theme-option span,
    body[data-theme="redCold"] .day-cell,
    body[data-theme="redCold"] .month-label,
    body[data-theme="redCold"] .calendar-weekdays,
    body[data-theme="redCold"] .user-pill,
    body[data-theme="redCold"] .badge {
      color: #e7ddd5;
    }

    body[data-theme="artNouveauBloom"] input,
    body[data-theme="artNouveauBloom"] select {
      color: #1f252c;
      background: rgba(255,255,255,0.86);
    }

    body[data-theme="stainedGlass"] input,
    body[data-theme="stainedGlass"] select {
      color: #f7f1e7;
      background: rgba(255,255,255,0.08);
      border-color: rgba(226,210,173,0.22);
    }

    body[data-theme="artNouveauBloom"] input::placeholder {
      color: rgba(17,17,17,0.45);
    }

    body[data-theme="stainedGlass"] input::placeholder {
      color: rgba(247,241,231,0.44);
    }

    body[data-theme="stainedGlass"] .stat-value,
    body[data-theme="artNouveauBloom"] .stat-value {
      color: #1f252c;
    }

    .sound-card {
      position: relative;
      z-index: 3000;
      overflow: visible;
    }

    .sound-card:hover,
    .sound-card:focus-within {
      z-index: 7000;
    }

    .sound-picker {
      position: relative;
      z-index: 7100;
      overflow: visible;
      padding-bottom: 0;
    }

    .sound-picker:hover,
    .sound-picker:focus-within {
      z-index: 7300;
    }

    .sound-picker-button {
      width: 100%;
      min-height: 58px;
      text-align: left;
      display: grid;
      gap: 5px;
      align-content: center;
    }

    .sound-picker-button span {
      font-size: 12px;
      color: var(--muted);
    }

    .sound-picker-button strong {
      font-size: 14px;
      font-weight: 650;
      color: var(--ink);
    }

    .sound-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      width: min(520px, calc(100vw - 24px));
      max-width: calc(100vw - 24px);
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      z-index: 7200;
    }

    .sound-picker.open .sound-menu {
      display: block;
    }

    .sound-menu-inner {
      display: grid;
      grid-template-columns: minmax(190px, 0.86fr) minmax(160px, 0.58fr);
      gap: 10px;
      align-items: start;
    }

    .sound-feature-list,
    .sound-detail-list {
      max-height: min(62vh, 520px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 8px;
      border-radius: 20px;
      border: 1px solid var(--line-strong);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)),
        #0b0d12;
      box-shadow: 0 24px 74px rgba(0,0,0,0.48);
      backdrop-filter: blur(18px);
    }

    .sound-detail-list {
      width: 78%;
      min-height: 130px;
    }

    .sound-feature-row,
    .sound-leaf {
      width: 100%;
      min-height: 42px;
      border-radius: 14px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: transparent;
      border-color: transparent;
      color: var(--ink);
      text-align: left;
    }

    .sound-feature-row span,
    .sound-leaf span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sound-feature-row small {
      color: var(--muted);
      font-size: 12px;
      flex: none;
    }

    .sound-feature-row:hover,
    .sound-feature-row.active-feature,
    .sound-leaf:hover,
    .sound-leaf.active-sound {
      background: rgba(var(--hot-rgb), 0.13);
      border-color: rgba(var(--hot-rgb), 0.24);
    }

    .sound-leaf.active-sound::after {
      content: "✓";
      margin-left: auto;
      color: var(--red);
    }

    @media (max-width: 720px) {
      .sound-menu {
        position: absolute;
        left: 0 !important;
        top: calc(100% + 6px) !important;
        width: 100% !important;
        z-index: 7200;
      }

      .sound-menu-inner {
        grid-template-columns: 1fr;
      }

      .sound-detail-list {
        width: 100%;
      }
    }
  

    /* Sound selection interaction shield.
       It blocks clicks on page controls while keeping the active sound menu usable. */
    .sound-interaction-shield {
      position: fixed;
      inset: 0;
      display: none;
      z-index: 7100;
      background: transparent;
      pointer-events: auto;
    }

    body.sound-selecting .sound-interaction-shield {
      display: block;
    }

    /* Login must never be blocked by the sound picker shield. */
    body:not(.app-ready) .sound-interaction-shield,
    body.auth-screen .sound-interaction-shield {
      display: none !important;
      pointer-events: none !important;
    }

    #authCard {
      position: relative;
      z-index: 2147483002;
      pointer-events: auto !important;
    }

    body:not(.app-ready) .modal-backdrop:not(#themeModal):not(#helpModal):not(#helpHintModal),
    body.auth-screen .modal-backdrop:not(#themeModal):not(#helpModal):not(#helpHintModal) {
      pointer-events: none !important;
    }

    body.sound-selecting .sound-card {
      z-index: 7200;
    }

    body.sound-selecting .sound-box {
      pointer-events: none;
    }

    body.sound-selecting .sound-box.active-sound-box {
      pointer-events: auto;
    }

    body.sound-selecting .sound-box.active-sound-box > :not(.sound-picker) {
      pointer-events: none;
    }

    body.sound-selecting .sound-picker.open,
    body.sound-selecting .sound-picker.open * {
      pointer-events: auto;
    }

    body.sound-selecting .sound-picker.open {
      z-index: 7300;
    }

    .sound-picker.open .sound-menu {
      display: block;
    }

    .sound-menu {
      top: 100%;
      padding-top: 8px;
      pointer-events: auto;
    }

    .sound-menu-inner,
    .sound-feature-list,
    .sound-detail-list,
    .sound-feature-row,
    .sound-leaf,
    .sound-confirm-row,
    .sound-confirm-button {
      pointer-events: auto;
    }

    .sound-confirm-row {
      position: sticky;
      bottom: 0;
      z-index: 3;
      margin-top: 8px;
      padding-top: 8px;
      background: linear-gradient(180deg, rgba(11,13,18,0), #0b0d12 34%);
    }

    .sound-confirm-button {
      width: 100%;
      min-height: 42px;
      border-radius: 14px;
    }

    .sound-detail-list {
      background: #0b0d12;
      box-shadow: 0 24px 74px rgba(0,0,0,0.58);
      isolation: isolate;
    }



    body.modal-open {
      overflow: hidden;
    }

    .help-fab {
      position: fixed;
      right: max(14px, env(safe-area-inset-right));
      top: max(14px, env(safe-area-inset-top));
      z-index: 900;
      width: 42px;
      min-width: 42px;
      height: 42px;
      min-height: 42px;
      padding: 0;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.045);
      color: var(--muted);
      box-shadow: 0 10px 30px rgba(0,0,0,0.18);
      backdrop-filter: blur(10px);
      opacity: .62;
    }

    .help-fab:hover {
      opacity: 1;
      color: var(--ink);
      transform: translateY(-1px);
      border-color: rgba(255,255,255,0.22);
      background: rgba(255,255,255,0.075);
    }

    .help-fab:focus-visible {
      opacity: 1;
      outline: none;
      box-shadow: 0 0 0 3px rgba(var(--hot-rgb), 0.14), 0 10px 30px rgba(0,0,0,0.18);
    }

    .help-fab-icon {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      background: rgba(255,255,255,0.075);
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 900;
    }

    .help-fab > span:not(.help-fab-icon),
    .help-fab-note {
      display: none;
    }

    .modal-backdrop {
      z-index: 12000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 240ms ease;
    }

    .modal-backdrop.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .modal {
      transform: translateY(18px) scale(.985);
      opacity: 0;
      transition: transform 320ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease;
    }


    #helpHintModal.visible,
    #helpModal.visible {
      opacity: 1;
      pointer-events: auto;
    }

    #helpHintModal.visible .modal,
    #helpModal.visible .modal {
      pointer-events: auto;
    }

    .modal-backdrop.visible .modal {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .help-modal {
      width: min(940px, 100%);
      max-height: min(88vh, 920px);
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      gap: 0;
      padding: 0;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(11,13,18,0.98), rgba(11,13,18,0.94)),
        linear-gradient(135deg, rgba(var(--hot-rgb), 0.08), transparent 36%),
        linear-gradient(225deg, rgba(var(--cold-rgb), 0.10), transparent 42%);
    }

    .help-modal-header {
      padding: 24px 24px 18px;
      border-bottom: 1px solid var(--line);
      background:
        radial-gradient(circle at 10% 0%, rgba(var(--hot-rgb), 0.12), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    }

    .help-modal-header .eyebrow {
      margin-bottom: 8px;
    }

    .help-modal-title-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
    }

    .help-modal-title-wrap {
      min-width: 0;
    }

    .help-modal-title {
      margin: 0;
      font-size: clamp(28px, 4vw, 40px);
      line-height: 1.05;
      letter-spacing: -0.05em;
      font-weight: 560;
    }

    .help-modal-subtitle {
      margin: 10px 0 0;
      max-width: 720px;
      color: var(--muted);
      line-height: 1.8;
      font-size: 14px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    .help-modal-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 16px 24px 0;
    }

    .help-nav-chip {
      min-height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      font-size: 13px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--line);
      color: var(--ink);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform .08s ease, border-color .15s ease, background .15s ease;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    .help-nav-chip:hover {
      transform: translateY(-1px);
      border-color: rgba(255,255,255,0.24);
      background: rgba(255,255,255,0.08);
    }

    .help-modal-scroll {
      overflow-y: auto;
      padding: 18px 24px 24px;
      display: grid;
      gap: 18px;
      scroll-behavior: smooth;
    }

    .help-hero-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 14px;
    }

    .help-card {
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255,255,255,0.035);
      padding: 18px;
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .help-card h3,
    .help-section h3 {
      margin: 0;
      font-size: 17px;
      line-height: 1.35;
      letter-spacing: -0.02em;
      font-weight: 620;
    }

    .help-card p,
    .help-section p,
    .help-list,
    .help-mini-list,
    .help-ordered {
      margin: 0;
      color: var(--muted);
      line-height: 1.78;
      font-size: 14px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    .help-ordered,
    .help-list,
    .help-mini-list {
      padding-left: 1.2em;
    }

    .help-grid-three {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .help-section {
      border: 1px solid var(--line);
      border-radius: 26px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025));
      padding: 20px;
      display: grid;
      gap: 14px;
      scroll-margin-top: 22px;
    }

    .help-section-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }

    .help-index {
      flex: none;
      min-width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(var(--hot-rgb), 0.28);
      background: rgba(var(--hot-rgb), 0.10);
      display: inline-grid;
      place-items: center;
      font-family: var(--mono);
      font-size: 12px;
      color: #ffd9d4;
    }

    .help-step-flow {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }

    .help-step {
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.035);
      padding: 14px;
      display: grid;
      gap: 8px;
    }

    .help-step strong,
    .help-highlight strong,
    .help-pill strong {
      font-size: 13px;
      letter-spacing: -0.01em;
    }

    .help-step span,
    .help-highlight span,
    .help-pill span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    .help-highlight-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .help-highlight,
    .help-pill {
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.035);
      padding: 14px;
      display: grid;
      gap: 6px;
    }

    .help-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .help-meta .badge {
      padding: 8px 12px;
    }


    .help-hint-modal {
      width: min(460px, 100%);
      padding: 22px;
      border-radius: 28px;
      background:
        radial-gradient(circle at 16% 0%, rgba(var(--hot-rgb), 0.12), transparent 34%),
        linear-gradient(180deg, rgba(18,21,29,0.98), rgba(12,14,20,0.96));
      box-shadow: 0 28px 80px rgba(0,0,0,0.42);
    }

    .help-hint-modal .help-fab-icon {
      width: 34px;
      height: 34px;
      color: var(--ink);
      background: rgba(255,255,255,0.10);
      border: 1px solid var(--line);
    }

    .help-hint-body {
      display: grid;
      gap: 14px;
    }

    .help-hint-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .help-hint-title-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .help-hint-title {
      margin: 0;
      font-size: 21px;
      line-height: 1.2;
      letter-spacing: -0.035em;
      font-weight: 620;
    }

    .help-hint-text {
      margin: 0;
      color: var(--muted);
      line-height: 1.78;
      font-size: 14px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    .help-hint-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      flex-wrap: wrap;
      padding-top: 4px;
    }

    .help-modal-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 16px 24px 22px;
      border-top: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.03));
    }

    .help-footer-note {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }


    .help-modal-scroll,
    .sound-feature-list,
    .sound-detail-list {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .help-modal-scroll::-webkit-scrollbar,
    .sound-feature-list::-webkit-scrollbar,
    .sound-detail-list::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

    .help-modal-scroll {
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 860px) {
      .help-hero-grid,
      .help-grid-three,
      .help-highlight-grid {
        grid-template-columns: 1fr;
      }

      .help-step-flow {
        grid-template-columns: 1fr;
      }

      .help-modal-footer {
        flex-direction: column;
        align-items: stretch;
      }
    }


    @media (max-width: 560px) {
      body { padding-left: 12px; padding-right: 12px; }
      .help-fab { left: auto; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); bottom: auto; }
      .help-fab-note { display: none; }
      .help-modal-header { padding: 20px 18px 16px; }
      .help-modal-nav { padding: 14px 18px 0; }
      .help-modal-scroll { padding: 16px 18px 18px; }
      .help-modal-footer { padding: 14px 18px 18px; }
      .auth-inputs, .sound-grid, .controls-three, .stats { grid-template-columns: 1fr; }
      .theme-grid { grid-template-columns: 1fr; }
      .controls { grid-template-columns: 1fr; }
      .duration-row { grid-template-columns: 1fr 78px auto; }
      .head-row { flex-direction: column; align-items: stretch; }
      .calendar-nav { justify-content: space-between; width: 100%; }
      .day-cell { min-height: 56px; padding: 7px 5px; }
      .flow-subtools { gap: 8px; }
      .subtool-btn { flex: 1 1 0; min-width: 0; }
      .bottom-actions { grid-template-columns: 1fr; }
    }


    /* Sound picker overlay fix: keep the restored menu above the shield,
       and let outside clicks close the floating layer instead of freezing the page. */
    #settingsPanel {
      position: relative;
      overflow: visible;
    }

    body.sound-selecting #settingsPanel {
      z-index: 7600;
    }

    body.sound-selecting .sound-card {
      position: relative;
      z-index: 7800;
    }

    body.sound-selecting .sound-picker.open {
      position: relative;
      z-index: 7900;
    }

    body.sound-selecting .sound-picker.open .sound-menu {
      z-index: 8000;
    }

    body.sound-selecting .sound-interaction-shield {
      display: block !important;
      z-index: 7400;
      pointer-events: auto !important;
    }


    /* Final sound menu layer fix: keep outside click-to-close, but let the menu itself receive clicks. */
    body.sound-selecting .sound-interaction-shield {
      display: block !important;
      z-index: 6000 !important;
      pointer-events: auto !important;
    }

    body.sound-selecting .sound-card,
    body.sound-selecting .sound-box.active-sound-box,
    body.sound-selecting .sound-picker.open {
      position: relative;
      z-index: 9200 !important;
      pointer-events: auto !important;
    }

    body.sound-selecting .sound-picker.open .sound-menu {
      z-index: 9300 !important;
      pointer-events: auto !important;
    }

    body.sound-selecting .sound-picker.open .sound-menu,
    body.sound-selecting .sound-picker.open .sound-menu * {
      pointer-events: auto !important;
    }


    /* Definitive sound-picker interaction fix:
       Do not use a physical shield layer. Outside-click closing is handled in JS capture phase,
       so the menu itself can always receive clicks. */
    body.sound-selecting .sound-interaction-shield {
      display: none !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }

    body.sound-selecting #settingsPanel,
    body.sound-selecting .sound-card,
    body.sound-selecting .sound-box.active-sound-box,
    body.sound-selecting .sound-picker.open,
    body.sound-selecting .sound-picker.open .sound-menu,
    body.sound-selecting .sound-picker.open .sound-menu * {
      pointer-events: auto !important;
    }

    body.sound-selecting #settingsPanel {
      position: relative;
      z-index: 10000 !important;
      overflow: visible !important;
    }

    body.sound-selecting .sound-picker.open .sound-menu {
      z-index: 10020 !important;
    }

    /* =========================================================
       Focus Onion Mobile Adaptation v1
       Scope: mobile.html only. Core JS / Supabase logic unchanged.
       ========================================================= */

    .view-switch-link {
      min-height: 36px;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink);
      background: rgba(255,255,255,0.035);
      display: inline-grid;
      place-items: center;
      text-decoration: none;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 13px;
      white-space: nowrap;
    }

    .view-switch-link:hover {
      border-color: var(--line-strong);
      background: rgba(255,255,255,0.065);
    }

    @media (max-width: 860px) {
      :root {
        --radius: 22px;
      }

      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      body {
        display: block;
        min-height: 100dvh;
        padding:
          max(12px, env(safe-area-inset-top))
          max(10px, env(safe-area-inset-right))
          calc(20px + env(safe-area-inset-bottom))
          max(10px, env(safe-area-inset-left));
        overscroll-behavior-y: contain;
      }

      body.modal-open {
        overflow: hidden;
        touch-action: none;
      }

      .app {
        width: 100%;
        max-width: 100%;
        margin: 0;
        gap: 12px;
      }

      header {
        padding: 34px 2px 8px;
        gap: 8px;
      }

      .mark {
        width: 34px;
      }

      .eyebrow {
        font-size: 10px;
        letter-spacing: .18em;
      }

      h1 {
        font-size: clamp(30px, 12vw, 46px);
        line-height: 1.02;
        letter-spacing: -0.065em;
      }

      .subtitle {
        max-width: 100%;
        font-size: 13px;
        line-height: 1.6;
      }

      .card {
        border-radius: 22px;
        padding: 14px;
        box-shadow: 0 18px 54px rgba(0,0,0,0.38);
      }

      .auth-card {
        padding: 18px 14px;
      }

      .head-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }

      .section-title {
        font-size: 19px;
        line-height: 1.2;
      }

      .section-desc,
      .cloud-status,
      .log,
      .calendar-note {
        font-size: 13px;
        line-height: 1.62;
      }

      .badge,
      .user-pill {
        width: fit-content;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      input,
      select,
      button {
        font-size: 16px;
      }

      input,
      select {
        min-height: 50px;
        border-radius: 15px;
      }

      input[type="number"] {
        width: 92px;
      }

      button {
        min-height: 50px;
        border-radius: 15px;
        padding: 12px 14px;
      }

      .auth-inputs,
      .controls,
      .controls-three,
      .sound-grid,
      .stats,
      .theme-grid,
      .help-hero-grid,
      .help-grid-three,
      .help-highlight-grid,
      .help-step-flow {
        grid-template-columns: 1fr !important;
      }

      .auth-inputs,
      .sound-grid {
        margin-top: 12px;
      }

      .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }

      .toolbar .controls,
      .toolbar .controls-three {
        width: 100%;
      }

      .flow-top-actions {
        justify-content: flex-start;
        gap: 8px;
      }

      .onion-card {
        min-height: auto;
        padding: 20px 14px;
        grid-template-rows: auto auto auto auto auto;
        align-content: stretch;
      }

      .onion-card::before {
        inset: 10px;
        border-radius: 18px;
      }

      .onion-card > * {
        max-width: 100%;
      }

      #flowTitle {
        font-size: clamp(29px, 11vw, 44px);
        line-height: 1.03;
        margin-bottom: 8px;
      }

      #flowDesc {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.6;
      }

      .onion-timers {
        min-height: 0;
        margin: 14px 0 12px;
        gap: 9px;
      }

      .onion-timer {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 7px;
        padding: 14px;
        border-radius: 18px;
      }

      .onion-timer strong {
        font-size: 0.86rem;
      }

      .onion-timer span {
        justify-self: start;
        font-size: clamp(2rem, 13vw, 3.8rem);
        line-height: .96;
      }

      .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 {
        padding: 15px;
      }

      .onion-card[data-depth="2"] .onion-timer:first-child span,
      .onion-card[data-depth="3"] .onion-timer:first-child span {
        font-size: clamp(2.25rem, 14vw, 4.2rem);
      }

      .onion-card[data-depth="4"] .onion-timer:first-child span {
        font-size: clamp(2.7rem, 18vw, 5rem);
      }

      .onion-card[data-depth="3"] .onion-timer:not(:first-child) span,
      .onion-card[data-depth="4"] .onion-timer:not(:first-child) span {
        font-size: clamp(1.15rem, 7vw, 2rem);
      }

      .duration-row {
        grid-template-columns: 1fr 92px;
        gap: 8px;
        align-items: end;
      }

      .duration-row label {
        grid-column: 1 / -1;
      }

      .duration-row button {
        min-width: 0;
      }

      #flowActions {
        grid-template-columns: 1fr;
        gap: 10px;
        min-height: 0;
        margin-top: 14px;
      }

      #flowActions button,
      #flowActions button.primary {
        width: 100%;
        min-width: 0;
        min-height: 56px;
        padding: 0 16px;
        font-size: 1rem;
      }

      .flow-action-placeholder {
        display: none;
      }

      .flow-subtools {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
      }

      .subtool-btn {
        width: 100%;
        min-width: 0;
        padding: 0 12px;
        font-size: 0.9rem;
      }

      #calendarCard.open {
        max-height: 1250px;
        padding-top: 14px;
        padding-bottom: 14px;
      }

      #settingsPanel.open {
        max-height: 3200px;
      }

      .calendar-nav {
        width: 100%;
        justify-content: space-between;
      }

      .calendar-nav button {
        min-width: 46px;
        min-height: 42px;
      }

      .month-label {
        flex: 1;
        min-width: 0;
      }

      .calendar-weekdays,
      .calendar-grid {
        gap: 4px;
      }

      .calendar-weekdays {
        font-size: 11px;
      }

      .day-cell {
        min-height: 54px;
        padding: 6px 4px;
        border-radius: 13px;
      }

      .day-number {
        font-size: 12px;
      }

      .calendar-metric.primary-study {
        font-size: 0.68rem;
      }

      .calendar-metric.secondary-env {
        font-size: 0.58rem;
      }

      .sound-card,
      #settingsPanel {
        overflow: visible !important;
      }

      .sound-box {
        padding: 14px;
        border-radius: 19px;
      }

      .sound-picker-button {
        min-height: 58px;
      }

      .sound-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px;
        padding-top: 0;
      }

      .sound-menu-inner {
        grid-template-columns: 1fr !important;
        gap: 8px;
      }

      .sound-feature-list,
      .sound-detail-list {
        width: 100% !important;
        max-height: min(46dvh, 420px);
        border-radius: 18px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }

      .sound-feature-row,
      .sound-leaf {
        min-height: 48px;
        padding: 11px 12px;
      }

      .sound-feature-row span,
      .sound-leaf span {
        white-space: normal;
        line-height: 1.35;
      }

      .sound-confirm-button {
        min-height: 48px;
      }

      .stats {
        gap: 8px;
      }

      .stat {
        border-radius: 18px;
        padding: 13px 12px;
      }

      .stat-value {
        font-size: 22px;
      }

      .bottom-actions {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .bottom-actions .icon-btn,
      .bottom-actions button,
      .bottom-actions .view-switch-link {
        width: 100%;
        min-height: 46px;
      }

      .help-fab {
        top: max(12px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        left: auto;
        bottom: auto;
        width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 999px;
      }

      .help-fab > span:not(.help-fab-icon) {
        display: none;
      }

      .modal-backdrop {
        padding:
          max(10px, env(safe-area-inset-top))
          max(10px, env(safe-area-inset-right))
          max(10px, env(safe-area-inset-bottom))
          max(10px, env(safe-area-inset-left));
        place-items: center;
      }

      .modal,
      .help-modal,
      .help-hint-modal {
        width: 100%;
        max-width: 100%;
        max-height: 88dvh;
        border-radius: 22px;
        overflow: hidden;
      }

      .modal {
        padding: 16px;
      }

      .help-modal {
        padding: 0;
      }

      .help-modal-header {
        padding: 18px 16px 14px;
      }

      .help-modal-title-row {
        gap: 10px;
      }

      .help-modal-title {
        font-size: clamp(24px, 8vw, 32px);
      }

      .help-modal-subtitle {
        font-size: 13px;
        line-height: 1.65;
      }

      .help-modal-nav {
        padding: 12px 16px 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .help-modal-nav::-webkit-scrollbar {
        display: none;
      }

      .help-nav-chip {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 40px;
      }

      .help-modal-scroll {
        max-height: 58dvh;
        padding: 14px 16px 16px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }

      .help-section {
        border-radius: 20px;
        padding: 14px;
      }

      .help-section-head {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .help-card,
      .help-step,
      .help-highlight,
      .help-pill {
        border-radius: 17px;
        padding: 13px;
      }

      .help-modal-footer {
        padding: 12px 16px 16px;
      }

      .help-modal-footer button {
        width: 100%;
      }

      .help-hint-body {
        padding: 18px 16px;
      }

      .help-hint-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .theme-option {
        min-height: 74px;
      }

      body[data-study-depth="4"] header {
        opacity: 0.24;
        transform: translateY(-4px) scale(.985);
      }

      @supports (height: 100svh) {
        body {
          min-height: 100svh;
        }

        .modal,
        .help-modal,
        .help-hint-modal {
          max-height: 88svh;
        }

        .help-modal-scroll {
          max-height: 58svh;
        }
      }
    }

    @media (max-width: 380px) {
      body {
        padding-left: 8px;
        padding-right: 8px;
      }

      .card {
        padding: 12px;
      }

      #flowTitle {
        font-size: clamp(25px, 10vw, 34px);
      }

      .onion-timer span {
        font-size: clamp(1.8rem, 12vw, 3.2rem);
      }

      .calendar-metric.primary-study {
        font-size: 0.62rem;
      }

      .calendar-metric.secondary-env {
        display: none;
      }

      .help-modal-title {
        font-size: 23px;
      }
    }


    /* =========================================================
       Focus Onion Mobile Adaptation v2
       Targeted refinements based on touch-device feedback.
       ========================================================= */
    @media (max-width: 860px) {
      body {
        overflow-x: hidden;
      }

      /* 1) First-layer entry card: more prominent title and button,
         with a shorter overall height so the CTA sits higher. */
      .onion-card[data-depth="1"] {
        min-height: clamp(300px, 42svh, 410px);
        padding: 18px 15px 16px;
        justify-content: start;
      }

      .onion-card[data-depth="1"] .head-row {
        margin-bottom: 8px;
      }

      .onion-card[data-depth="1"] #flowTitle {
        font-size: clamp(2.15rem, 11.8vw, 3.5rem);
        line-height: 0.98;
        margin-bottom: 10px;
      }

      .onion-card[data-depth="1"] #flowDesc {
        font-size: 0.95rem;
        line-height: 1.55;
        max-width: 26em;
      }

      .onion-card[data-depth="1"] .flow-top-actions {
        align-items: flex-start;
      }

      .onion-card[data-depth="1"] .onion-timers {
        display: none;
      }

      .onion-card[data-depth="1"] #flowActions {
        margin-top: 14px;
      }

      .onion-card[data-depth="1"] #flowActions [data-flow-action="enter-env"] {
        min-height: 66px;
        font-size: 1.08rem;
        font-weight: 780;
        letter-spacing: -0.02em;
        box-shadow: 0 16px 36px rgba(var(--hot-rgb), 0.26);
      }

      /* 2 & 4) After entering layer 2+, let the study canvas take over
         almost the whole mobile viewport. Layer 2 and 3 share the same size. */
      body[data-study-depth="2"] header,
      body[data-study-depth="3"] header,
      body[data-study-depth="4"] header {
        max-height: 0;
        min-height: 0;
        overflow: hidden;
        opacity: 0.02;
        margin: 0;
        padding: 0;
        transform: translateY(-18px) scale(.98);
        pointer-events: none;
      }

      body[data-study-depth="2"] .app,
      body[data-study-depth="3"] .app,
      body[data-study-depth="4"] .app {
        gap: 8px;
      }

      body[data-study-depth="2"] .app-area,
      body[data-study-depth="3"] .app-area,
      body[data-study-depth="4"] .app-area {
        min-height: calc(100svh - max(12px, env(safe-area-inset-top)) - calc(18px + env(safe-area-inset-bottom)));
      }

      body[data-study-depth="2"] .onion-card,
      body[data-study-depth="3"] .onion-card,
      body[data-study-depth="4"] .onion-card {
        min-height: calc(100svh - max(12px, env(safe-area-inset-top)) - calc(18px + env(safe-area-inset-bottom)) - 6px);
        padding: 18px 16px 16px;
        border-radius: 24px;
        grid-template-rows: auto auto auto auto 1fr;
      }

      body[data-study-depth="2"] .onion-card::before,
      body[data-study-depth="3"] .onion-card::before,
      body[data-study-depth="4"] .onion-card::before {
        inset: 10px;
        border-radius: 20px;
      }

      body[data-study-depth="2"] #flowTitle,
      body[data-study-depth="3"] #flowTitle,
      body[data-study-depth="4"] #flowTitle {
        font-size: clamp(2rem, 10.8vw, 3.25rem);
        line-height: 0.98;
      }

      body[data-study-depth="2"] .onion-timers,
      body[data-study-depth="3"] .onion-timers,
      body[data-study-depth="4"] .onion-timers {
        margin: 14px 0 14px;
      }

      body[data-study-depth="2"] .flow-subtools,
      body[data-study-depth="3"] .flow-subtools,
      body[data-study-depth="4"] .flow-subtools {
        margin-top: auto;
        padding-top: 10px;
      }

      body[data-study-depth="2"] #flowActions,
      body[data-study-depth="3"] #flowActions,
      body[data-study-depth="4"] #flowActions {
        margin-top: 14px;
      }

      /* 3) Sound picker: keep a visible two-pane layout on mobile.
         The menu floats as an in-viewport sheet; left list narrows to make room for details. */
      body.sound-selecting {
        overflow: hidden;
      }

      body.sound-selecting .sound-picker.open .sound-menu {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(72svh, 560px) !important;
        padding: 12px !important;
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 22px;
        background:
          radial-gradient(circle at top left, rgba(var(--hot-rgb), 0.14), transparent 34%),
          linear-gradient(180deg, rgba(18,21,29,0.98), rgba(8,10,16,0.96));
        box-shadow: 0 30px 80px rgba(0,0,0,0.55);
        margin-top: 0 !important;
      }

      body.sound-selecting .sound-picker.open .sound-menu-inner {
        grid-template-columns: minmax(114px, 0.88fr) minmax(142px, 1.12fr) !important;
        align-items: stretch;
        gap: 10px;
      }

      body.sound-selecting .sound-feature-list,
      body.sound-selecting .sound-detail-list {
        height: min(56svh, 450px);
        max-height: none;
        min-height: 280px;
      }

      body.sound-selecting .sound-feature-list {
        width: auto !important;
      }

      body.sound-selecting .sound-detail-list {
        width: auto !important;
      }

      body.sound-selecting .sound-feature-row,
      body.sound-selecting .sound-leaf {
        min-height: 52px;
        text-align: left;
      }

      body.sound-selecting .sound-feature-row small {
        margin-left: 6px;
        opacity: .65;
      }

      body.sound-selecting .sound-feature-row.active-feature {
        border-color: rgba(var(--hot-rgb), 0.42);
        background: rgba(var(--hot-rgb), 0.12);
      }

      /* 5) Theme chooser modal: make the sheet fully scrollable and stop the background from moving. */
      body.modal-open {
        overflow: hidden;
        touch-action: auto;
      }

      #themeModal {
        align-items: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }

      #themeModal.visible {
        pointer-events: auto;
      }

      #themeModal .modal {
        margin: auto 0;
        width: 100%;
        max-width: 100%;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding: 16px;
      }

      #themeModal .modal-head {
        position: sticky;
        top: 0;
        z-index: 2;
        background: linear-gradient(180deg, rgba(16,18,24,0.98), rgba(16,18,24,0.92));
        padding-bottom: 10px;
      }

      #themeModal .theme-grid {
        max-height: calc(100svh - 170px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-right: 2px;
      }

      #themeModal .theme-option {
        min-height: 84px;
      }
    }

    @media (max-width: 420px) {
      body.sound-selecting .sound-picker.open .sound-menu {
        left: 8px !important;
        right: 8px !important;
        padding: 10px !important;
      }

      body.sound-selecting .sound-picker.open .sound-menu-inner {
        grid-template-columns: minmax(102px, 0.84fr) minmax(132px, 1.16fr) !important;
        gap: 8px;
      }

      body.sound-selecting .sound-feature-list,
      body.sound-selecting .sound-detail-list {
        height: min(54svh, 410px);
        min-height: 250px;
      }

      .onion-card[data-depth="1"] #flowTitle {
        font-size: clamp(2rem, 11.4vw, 3.1rem);
      }
    }


    /* =========================================================
       Focus Onion Mobile Full Optimization v3
       Full mobile pass: layout, CTA, immersive layers, sound picker, theme modal.
       ========================================================= */

    @media (max-width: 860px) {
      :root {
        --mobile-page-pad-x: max(10px, env(safe-area-inset-left));
        --mobile-page-pad-r: max(10px, env(safe-area-inset-right));
        --mobile-page-pad-top: max(10px, env(safe-area-inset-top));
        --mobile-page-pad-bottom: max(14px, env(safe-area-inset-bottom));
      }

      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
      }

      body {
        display: block;
        min-height: 100svh;
        padding: var(--mobile-page-pad-top) var(--mobile-page-pad-r) calc(14px + env(safe-area-inset-bottom)) var(--mobile-page-pad-x);
        overscroll-behavior-y: contain;
      }

      body:not(.modal-open):not(.sound-selecting) {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      .app {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        gap: 10px;
      }

      header {
        padding: 12px 4px 8px;
        gap: 8px;
      }

      .mark {
        width: 48px;
      }

      .eyebrow {
        font-size: 10px;
        letter-spacing: .18em;
      }

      h1 {
        font-size: clamp(42px, 15vw, 68px);
        line-height: .92;
        letter-spacing: -0.075em;
      }

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

      .card {
        border-radius: 24px;
        padding: 15px;
      }

      button,
      input,
      select,
      .view-switch-link {
        font-size: 16px;
      }

      button,
      .view-switch-link {
        min-height: 52px;
        border-radius: 16px;
      }

      input,
      select {
        min-height: 52px;
        font-size: 16px;
      }

      .auth-card {
        padding: 18px 15px;
      }

      .auth-card .head-row,
      .onion-card .head-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
      }

      .auth-inputs,
      .controls,
      .controls-three,
      .sound-grid,
      .stats,
      .theme-grid,
      .help-hero-grid,
      .help-grid-three,
      .help-highlight-grid,
      .help-step-flow {
        grid-template-columns: 1fr !important;
      }

      .section-title {
        font-size: 20px;
      }

      .section-desc {
        font-size: 13px;
        line-height: 1.62;
      }

      .badge {
        min-height: 34px;
        display: inline-grid;
        place-items: center;
        padding: 6px 10px;
        font-size: 12px;
      }

      /* Layer 1: shorter, more attractive, stronger CTA. */
      .onion-card[data-depth="1"] {
        min-height: clamp(320px, 44svh, 430px) !important;
        padding: 20px 15px 16px !important;
        align-content: start !important;
        grid-template-rows: auto 0 auto auto auto !important;
        background:
          radial-gradient(circle at 12% 4%, rgba(255,255,255,0.20), transparent 34%),
          radial-gradient(circle at 92% 12%, rgba(var(--cold-rgb), 0.20), transparent 36%),
          radial-gradient(circle at 48% 110%, rgba(var(--hot-rgb), 0.14), transparent 42%),
          linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04)) !important;
      }

      .onion-card[data-depth="1"]::before {
        inset: 10px;
        border-radius: 19px;
      }

      .onion-card[data-depth="1"] .head-row {
        min-height: 0;
        margin-bottom: 10px;
      }

      .onion-card[data-depth="1"] #flowTitle {
        font-size: clamp(2.45rem, 13vw, 4rem) !important;
        line-height: .92 !important;
        letter-spacing: -0.075em;
        margin: 0 0 10px;
        text-wrap: balance;
      }

      .onion-card[data-depth="1"] #flowDesc {
        max-width: 22em;
        font-size: .96rem;
        line-height: 1.5;
        color: rgba(246,239,231,.72);
      }

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

      .onion-card[data-depth="1"] .onion-duration {
        display: none;
      }

      .onion-card[data-depth="1"] #flowActions {
        margin-top: 18px !important;
        grid-template-columns: 1fr !important;
      }

      .onion-card[data-depth="1"] #flowActions [data-flow-action="enter-env"] {
        min-height: 76px !important;
        width: 100%;
        border-radius: 22px;
        font-size: clamp(1.12rem, 4.9vw, 1.35rem);
        font-weight: 850;
        letter-spacing: -0.035em;
        color: #fff5f3;
        border-color: rgba(var(--hot-rgb), 0.42);
        background:
          radial-gradient(circle at 18% 15%, rgba(255,255,255,.22), transparent 28%),
          linear-gradient(135deg, rgba(var(--hot-rgb), .30), rgba(var(--cold-rgb), .20));
        box-shadow: 0 18px 42px rgba(var(--hot-rgb), .24), inset 0 1px 0 rgba(255,255,255,.15);
      }

      .onion-card[data-depth="1"] #flowActions [data-flow-action="enter-env"]::after {
        content: "  →";
        opacity: .86;
      }

      .onion-card[data-depth="1"] .flow-subtools {
        margin-top: 12px !important;
      }

      /* Layers 2+: immersive full-screen study canvas. */
      body[data-study-depth="2"],
      body[data-study-depth="3"],
      body[data-study-depth="4"] {
        padding: var(--mobile-page-pad-top) var(--mobile-page-pad-r) calc(10px + env(safe-area-inset-bottom)) var(--mobile-page-pad-x);
      }

      body[data-study-depth="2"] header,
      body[data-study-depth="3"] header,
      body[data-study-depth="4"] header {
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: translateY(-20px) scale(.98);
        pointer-events: none;
      }

      body[data-study-depth="2"] .app,
      body[data-study-depth="3"] .app,
      body[data-study-depth="4"] .app {
        min-height: calc(100svh - var(--mobile-page-pad-top) - var(--mobile-page-pad-bottom));
        gap: 8px;
      }

      body[data-study-depth="2"] .app-area,
      body[data-study-depth="3"] .app-area,
      body[data-study-depth="4"] .app-area {
        min-height: calc(100svh - var(--mobile-page-pad-top) - var(--mobile-page-pad-bottom));
        gap: 8px;
      }

      body[data-study-depth="2"] .onion-card,
      body[data-study-depth="3"] .onion-card,
      body[data-study-depth="4"] .onion-card {
        min-height: calc(100svh - var(--mobile-page-pad-top) - var(--mobile-page-pad-bottom)) !important;
        padding: 17px 15px 14px !important;
        border-radius: 25px;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
        align-content: stretch !important;
      }

      body[data-study-depth="2"] .onion-card::before,
      body[data-study-depth="3"] .onion-card::before,
      body[data-study-depth="4"] .onion-card::before {
        inset: 10px;
        border-radius: 20px;
      }

      body[data-study-depth="2"] .onion-card .head-row,
      body[data-study-depth="3"] .onion-card .head-row,
      body[data-study-depth="4"] .onion-card .head-row {
        min-height: 0;
        margin-bottom: 10px;
      }

      body[data-study-depth="2"] #flowTitle,
      body[data-study-depth="3"] #flowTitle,
      body[data-study-depth="4"] #flowTitle {
        font-size: clamp(2rem, 10.6vw, 3.25rem) !important;
        line-height: .94 !important;
        margin-bottom: 8px;
        text-wrap: balance;
      }

      body[data-study-depth="2"] #flowDesc,
      body[data-study-depth="3"] #flowDesc,
      body[data-study-depth="4"] #flowDesc {
        font-size: .86rem;
        line-height: 1.45;
        max-width: 24em;
      }

      body[data-study-depth="2"] .onion-timers,
      body[data-study-depth="3"] .onion-timers,
      body[data-study-depth="4"] .onion-timers {
        min-height: 0 !important;
        margin: 8px 0 10px !important;
        display: grid;
        align-content: stretch;
        gap: 10px;
      }

      body[data-study-depth="2"] .onion-timer,
      body[data-study-depth="3"] .onion-timer,
      body[data-study-depth="4"] .onion-timer {
        grid-template-columns: 1fr;
        gap: 8px;
        align-content: center;
        padding: 16px;
        border-radius: 22px;
      }

      body[data-study-depth="2"] .onion-timer:first-child,
      body[data-study-depth="3"] .onion-timer:first-child,
      body[data-study-depth="4"] .onion-timer:first-child {
        min-height: 34svh;
        display: grid;
        align-content: center;
      }

      body[data-study-depth="2"] .onion-timer:first-child strong,
      body[data-study-depth="3"] .onion-timer:first-child strong,
      body[data-study-depth="4"] .onion-timer:first-child strong {
        font-size: .94rem;
        color: rgba(246,239,231,.78);
      }

      body[data-study-depth="2"] .onion-timer:first-child span,
      body[data-study-depth="3"] .onion-timer:first-child span {
        font-size: clamp(3.25rem, 20vw, 6.4rem) !important;
        line-height: .9;
        letter-spacing: -0.08em;
      }

      body[data-study-depth="4"] .onion-timer:first-child span {
        font-size: clamp(3.6rem, 22vw, 7.2rem) !important;
        line-height: .86;
        letter-spacing: -0.085em;
      }

      body[data-study-depth="3"] .onion-timer:not(:first-child),
      body[data-study-depth="4"] .onion-timer:not(:first-child) {
        min-height: 76px;
        padding: 12px 14px;
        opacity: .74;
      }

      body[data-study-depth="3"] .onion-timer:not(:first-child) span,
      body[data-study-depth="4"] .onion-timer:not(:first-child) span {
        font-size: clamp(1.35rem, 8vw, 2.35rem) !important;
      }

      body[data-study-depth="2"] #flowActions,
      body[data-study-depth="3"] #flowActions,
      body[data-study-depth="4"] #flowActions {
        margin-top: 8px !important;
        gap: 10px;
      }

      body[data-study-depth="2"] #flowActions button,
      body[data-study-depth="3"] #flowActions button,
      body[data-study-depth="4"] #flowActions button {
        min-height: 62px !important;
        border-radius: 20px;
        font-size: 1.04rem;
        font-weight: 780;
      }

      body[data-study-depth="2"] .flow-subtools,
      body[data-study-depth="3"] .flow-subtools,
      body[data-study-depth="4"] .flow-subtools {
        margin-top: 10px !important;
        padding-top: 0;
        grid-template-columns: 1fr 1fr;
      }

      .subtool-btn {
        min-height: 50px;
        border-radius: 999px;
      }

      .duration-row {
        border-radius: 18px;
        padding: 10px;
        background: rgba(255,255,255,.035);
        border: 1px solid var(--line);
      }

      /* Calendar and settings remain usable below the full-screen card. */
      #calendarCard.open,
      #settingsPanel.open {
        margin-top: 10px;
      }

      #settingsPanel.open {
        max-height: 3600px !important;
      }

      .sound-card,
      #settingsPanel {
        overflow: visible !important;
      }

      .sound-box {
        border-radius: 22px;
        padding: 15px;
      }

      .sound-picker-button {
        min-height: 62px;
        border-radius: 18px;
      }

      .sound-box > .success {
        min-height: 56px;
        border-radius: 18px;
      }

      /* Sound picker v3: fixed two-pane sheet on mobile. */
      body.sound-selecting {
        overflow: hidden !important;
        touch-action: none;
      }

      body.sound-selecting::before {
        opacity: .22;
      }

      body.sound-selecting .sound-picker.open .sound-menu {
        display: block !important;
        position: fixed !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        max-width: none !important;
        height: min(72svh, 560px) !important;
        max-height: min(72svh, 560px) !important;
        margin: 0 !important;
        padding: 12px !important;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 24px;
        background:
          radial-gradient(circle at 12% 0%, rgba(var(--hot-rgb), .18), transparent 34%),
          radial-gradient(circle at 88% 0%, rgba(var(--cold-rgb), .18), transparent 34%),
          linear-gradient(180deg, rgba(16,18,26,.985), rgba(8,10,14,.965));
        box-shadow: 0 30px 92px rgba(0,0,0,.62);
        z-index: 16000 !important;
        pointer-events: auto !important;
      }

      body.sound-selecting .sound-picker.open .sound-menu::before {
        content: "选择反馈音";
        display: block;
        margin: 0 0 10px;
        color: rgba(246,239,231,.92);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: -0.02em;
      }

      body.sound-selecting .sound-picker.open .sound-menu-inner {
        height: calc(100% - 28px);
        display: grid !important;
        grid-template-columns: minmax(112px, .86fr) minmax(150px, 1.14fr) !important;
        gap: 10px;
        align-items: stretch;
      }

      body.sound-selecting .sound-feature-list,
      body.sound-selecting .sound-detail-list {
        width: auto !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border-radius: 19px;
        padding: 8px;
      }

      body.sound-selecting .sound-feature-row,
      body.sound-selecting .sound-leaf {
        min-height: 52px;
        padding: 10px 10px;
        border-radius: 15px;
        text-align: left;
      }

      body.sound-selecting .sound-feature-row span,
      body.sound-selecting .sound-leaf span {
        white-space: normal !important;
        line-height: 1.32;
        overflow: visible;
      }

      body.sound-selecting .sound-feature-row small {
        margin-left: auto;
        opacity: .72;
      }

      body.sound-selecting .sound-feature-row.active-feature {
        border-color: rgba(var(--hot-rgb), .42);
        background: rgba(var(--hot-rgb), .13);
      }

      body.sound-selecting .sound-leaf.active-sound {
        border-color: rgba(var(--hot-rgb), .44);
        background: rgba(var(--hot-rgb), .14);
      }

      body.sound-selecting .sound-confirm-row {
        position: sticky;
        bottom: -8px;
        margin-left: -8px;
        margin-right: -8px;
        padding: 10px 8px 8px;
      }

      body.sound-selecting .sound-confirm-button {
        min-height: 50px;
        border-radius: 16px;
      }

      /* Theme modal v3: visible, scrollable, no background hijacking. */
      body.modal-open {
        overflow: hidden !important;
        touch-action: auto !important;
      }

      #themeModal.visible {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding:
          max(10px, env(safe-area-inset-top))
          max(10px, env(safe-area-inset-right))
          max(10px, env(safe-area-inset-bottom))
          max(10px, env(safe-area-inset-left));
      }

      #themeModal .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100svh - 20px) !important;
        min-height: 0;
        margin: 0 auto !important;
        padding: 14px !important;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
        border-radius: 24px;
        touch-action: auto;
      }

      #themeModal .head-row {
        flex: none;
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 10px;
        padding-bottom: 10px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--line);
      }

      #themeModal .theme-grid {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 2px 2px 4px;
        grid-template-columns: 1fr !important;
        gap: 10px;
      }

      #themeModal .theme-option {
        min-height: 88px;
        border-radius: 20px;
      }

      /* Help modal / hint modal keep scroll inside the modal. */
      #helpModal.visible,
      #helpHintModal.visible {
        overflow: hidden;
      }

      .help-modal,
      .help-hint-modal {
        max-height: calc(100svh - 20px) !important;
      }

      .help-modal-scroll {
        min-height: 0;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }

      .help-fab {
        width: 38px;
        height: 38px;
        min-height: 38px;
        opacity: .52;
      }
    }

    @media (max-width: 430px) {
      body.sound-selecting .sound-picker.open .sound-menu {
        left: max(7px, env(safe-area-inset-left)) !important;
        right: max(7px, env(safe-area-inset-right)) !important;
        height: min(70svh, 520px) !important;
        max-height: min(70svh, 520px) !important;
        padding: 10px !important;
      }

      body.sound-selecting .sound-picker.open .sound-menu-inner {
        grid-template-columns: minmax(104px, .82fr) minmax(138px, 1.18fr) !important;
        gap: 8px;
      }

      body.sound-selecting .sound-feature-row,
      body.sound-selecting .sound-leaf {
        min-height: 50px;
        padding: 9px;
        font-size: 14px;
      }

      .onion-card[data-depth="1"] #flowTitle {
        font-size: clamp(2.25rem, 12.4vw, 3.55rem) !important;
      }

      body[data-study-depth="2"] .onion-timer:first-child span,
      body[data-study-depth="3"] .onion-timer:first-child span {
        font-size: clamp(3rem, 19.5vw, 5.9rem) !important;
      }

      body[data-study-depth="4"] .onion-timer:first-child span {
        font-size: clamp(3.2rem, 21vw, 6.6rem) !important;
      }
    }

    @media (max-width: 360px) {
      body.sound-selecting .sound-picker.open .sound-menu-inner {
        grid-template-columns: minmax(96px, .78fr) minmax(128px, 1.22fr) !important;
      }

      body.sound-selecting .sound-feature-row,
      body.sound-selecting .sound-leaf {
        font-size: 13px;
      }

      .onion-card[data-depth="1"] #flowActions [data-flow-action="enter-env"] {
        min-height: 70px !important;
      }
    }


    /* =========================================================
       Focus Onion Mobile Hotfix v4
       Fix: layer-1 button/subtool overlap; restore scrolling after opening calendar/settings.
       ========================================================= */
    @media (max-width: 860px) {
      /* First layer is only for entering the environment. Hide secondary tools here
         so they cannot overlap the primary CTA on small screens. */
      .onion-card[data-depth="1"] .flow-subtools {
        display: none !important;
      }

      .onion-card[data-depth="1"] {
        grid-template-rows: auto 0 0 auto !important;
        min-height: clamp(300px, 40svh, 405px) !important;
      }

      .onion-card[data-depth="1"] #flowActions {
        margin-top: 16px !important;
        position: relative;
        z-index: 3;
      }

      .onion-card[data-depth="1"] #flowActions [data-flow-action="enter-env"] {
        margin-top: 0;
      }

      /* When a sub panel is open, stop treating the onion card as a locked full-screen scene.
         The card becomes a compact header section and the page scrolls normally to the panel. */
      body.subpanel-open {
        overflow-y: auto !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      body.subpanel-open[data-study-depth="2"] .app,
      body.subpanel-open[data-study-depth="3"] .app,
      body.subpanel-open[data-study-depth="4"] .app,
      body.subpanel-open[data-study-depth="2"] .app-area,
      body.subpanel-open[data-study-depth="3"] .app-area,
      body.subpanel-open[data-study-depth="4"] .app-area {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
      }

      body.subpanel-open[data-study-depth="2"] .onion-card,
      body.subpanel-open[data-study-depth="3"] .onion-card,
      body.subpanel-open[data-study-depth="4"] .onion-card {
        min-height: clamp(430px, 62svh, 590px) !important;
        height: auto !important;
        grid-template-rows: auto auto auto auto auto !important;
        overflow: hidden;
      }

      body.subpanel-open[data-study-depth="2"] .onion-timer:first-child,
      body.subpanel-open[data-study-depth="3"] .onion-timer:first-child,
      body.subpanel-open[data-study-depth="4"] .onion-timer:first-child {
        min-height: 22svh !important;
      }

      body.subpanel-open[data-study-depth="2"] .onion-timer:first-child span,
      body.subpanel-open[data-study-depth="3"] .onion-timer:first-child span {
        font-size: clamp(2.7rem, 16vw, 5.1rem) !important;
      }

      body.subpanel-open[data-study-depth="4"] .onion-timer:first-child span {
        font-size: clamp(3rem, 18vw, 5.7rem) !important;
      }

      body.subpanel-open #calendarCard.open,
      body.subpanel-open #settingsPanel.open {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        margin-top: 10px !important;
      }

      body.subpanel-open #calendarCard.open {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
      }

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

      body.subpanel-open .sound-card,
      body.subpanel-open #settingsPanel,
      body.subpanel-open #calendarCard {
        overflow: visible !important;
      }

      /* The opened panels should participate in the document flow, not act like
         modal-like locked regions. */
      body.subpanel-open #calendarCard.open *,
      body.subpanel-open #settingsPanel.open * {
        touch-action: auto;
      }
    }


    /* =========================================================
       PWA / Fullscreen mobile experience
       Works best when added to the home screen. Android also tries
       Fullscreen API on the Enter Environment tap.
       ========================================================= */
    :root {
      --app-vh: 1vh;
    }

    html.is-fullscreen,
    html.is-standalone {
      background: #090b10;
    }

    body.is-fullscreen,
    body.is-standalone {
      min-height: calc(var(--app-vh) * 100);
      background: var(--page-background);
    }

    .fullscreen-hint {
      display: none;
      margin: 8px 2px 0;
      color: rgba(246,239,231,0.52);
      font-size: 12px;
      line-height: 1.55;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    body.is-standalone .fullscreen-hint,
    body.is-fullscreen .fullscreen-hint {
      display: none !important;
    }

    @media (max-width: 860px) {
      .fullscreen-hint {
        display: block;
      }

      body[data-study-depth="2"] .fullscreen-hint,
      body[data-study-depth="3"] .fullscreen-hint,
      body[data-study-depth="4"] .fullscreen-hint {
        display: none;
      }

      body.is-standalone,
      body.is-fullscreen {
        padding:
          max(8px, env(safe-area-inset-top))
          max(8px, env(safe-area-inset-right))
          max(10px, env(safe-area-inset-bottom))
          max(8px, env(safe-area-inset-left));
      }

      body.is-standalone[data-study-depth="2"] .app-area,
      body.is-standalone[data-study-depth="3"] .app-area,
      body.is-standalone[data-study-depth="4"] .app-area,
      body.is-fullscreen[data-study-depth="2"] .app-area,
      body.is-fullscreen[data-study-depth="3"] .app-area,
      body.is-fullscreen[data-study-depth="4"] .app-area {
        min-height: calc(var(--app-vh) * 100 - max(8px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)));
      }

      body.is-standalone[data-study-depth="2"] .onion-card,
      body.is-standalone[data-study-depth="3"] .onion-card,
      body.is-standalone[data-study-depth="4"] .onion-card,
      body.is-fullscreen[data-study-depth="2"] .onion-card,
      body.is-fullscreen[data-study-depth="3"] .onion-card,
      body.is-fullscreen[data-study-depth="4"] .onion-card {
        min-height: calc(var(--app-vh) * 100 - max(8px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)) - 4px);
      }

      body.is-standalone[data-sub-panel-open="true"] .onion-card,
      body.is-fullscreen[data-sub-panel-open="true"] .onion-card {
        min-height: auto;
      }

      body.is-standalone .help-fab,
      body.is-fullscreen .help-fab {
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
      }
    }


    /* =========================================================
       Focus Onion Mobile Polish v6
       Fixes: centered mobile stage, right-edge overflow, locked scroll when panels closed,
       adaptive viewport sizing, and safer mobile sound feedback.
       ========================================================= */
    @media (max-width: 860px) {
      *, *::before, *::after {
        box-sizing: border-box;
      }

      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
      }

      body {
        min-height: calc(var(--app-vh) * 100);
      }

      .app,
      .app-area,
      .card,
      .onion-card,
      .auth-card,
      #calendarCard,
      #settingsPanel,
      .sound-card,
      .sound-box,
      .head-row,
      .toolbar,
      .onion-timers,
      .onion-timer,
      #flowActions,
      .flow-subtools,
      .duration-row,
      .stats,
      .bottom-actions {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .head-row,
      .toolbar {
        overflow: hidden;
      }

      .head-row > *,
      .toolbar > *,
      .onion-timer > *,
      #flowActions > *,
      .flow-subtools > * {
        min-width: 0;
      }

      #flowTitle,
      #flowDesc,
      .section-title,
      .section-desc,
      .badge,
      .user-pill,
      .month-label {
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      .onion-timer {
        overflow: hidden;
      }

      .onion-timer span {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: clip;
        white-space: nowrap;
      }

      .flow-subtools,
      #flowActions {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .flow-subtools {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      }

      /* Login / initial mobile screen: vertically center the title and main module. */
      body.auth-screen .app {
        min-height: calc(var(--app-vh) * 100 - max(12px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom)));
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(12px, 2.2svh, 18px);
      }

      body.auth-screen header {
        padding: 0 4px 4px;
      }

      body.auth-screen h1 {
        font-size: clamp(2.7rem, 13vw, 4.2rem);
      }

      body.auth-screen .auth-card {
        margin: 0;
      }

      /* When settings/calendar are closed, prevent drifting down to hidden lower content. */
      body.app-ready:not(.subpanel-open):not(.modal-open):not(.sound-selecting) {
        height: calc(var(--app-vh) * 100);
        min-height: calc(var(--app-vh) * 100);
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: pan-x pan-y;
      }

      body.app-ready:not(.subpanel-open) .app {
        height: calc(var(--app-vh) * 100 - max(12px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom)));
        max-height: calc(var(--app-vh) * 100 - max(12px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom)));
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        gap: clamp(8px, 1.6svh, 14px);
      }

      body.app-ready:not(.subpanel-open) header {
        flex: 0 0 auto;
      }

      body.app-ready:not(.subpanel-open) .app-area.visible {
        flex: 0 1 auto;
        display: grid;
        overflow: hidden;
      }

      body.app-ready:not(.subpanel-open) #calendarCard,
      body.app-ready:not(.subpanel-open) #settingsPanel {
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }

      /* First layer: compact centered entry stage. */
      body.app-ready:not(.subpanel-open) .onion-card[data-depth="1"] {
        min-height: clamp(310px, 47svh, 430px) !important;
        max-height: min(58svh, 470px);
        padding: clamp(15px, 4vw, 20px) !important;
        align-content: center;
        justify-content: center;
        overflow: hidden;
      }

      body.app-ready:not(.subpanel-open) .onion-card[data-depth="1"] .head-row {
        gap: 10px;
      }

      body.app-ready:not(.subpanel-open) .onion-card[data-depth="1"] #flowTitle {
        font-size: clamp(2.25rem, 11.5vw, 3.6rem) !important;
      }

      body.app-ready:not(.subpanel-open) .onion-card[data-depth="1"] #flowActions [data-flow-action="enter-env"] {
        width: 100%;
        min-height: clamp(64px, 9.2svh, 82px) !important;
      }

      /* Layer 2/3/4: adaptive immersive stage without right overflow. */
      body.app-ready:not(.subpanel-open)[data-study-depth="2"] header,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] header,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] header {
        display: none !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .app,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .app,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .app {
        justify-content: center;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .app-area.visible,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .app-area.visible,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .app-area.visible {
        height: 100%;
        max-height: 100%;
        align-items: stretch;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-card,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-card,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-card {
        height: 100%;
        min-height: 0 !important;
        max-height: 100%;
        padding: clamp(12px, 3.2vw, 18px) !important;
        border-radius: clamp(19px, 5vw, 26px);
        overflow: hidden;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto auto auto;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-card .head-row,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-card .head-row,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-card .head-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: start;
        flex: none;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] #flowTitle,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] #flowTitle,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] #flowTitle {
        font-size: clamp(1.85rem, 9.5vw, 3.1rem) !important;
        line-height: 0.98;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] #flowDesc,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] #flowDesc,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] #flowDesc {
        font-size: clamp(0.78rem, 3.25vw, 0.98rem);
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-timers,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timers,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timers {
        height: auto;
        min-height: 0;
        max-height: 100%;
        margin: clamp(8px, 1.4svh, 14px) 0;
        overflow: hidden;
        align-content: stretch;
        grid-auto-rows: minmax(0, auto);
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-timer:first-child,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer:first-child,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer:first-child {
        min-height: clamp(160px, 34svh, 280px) !important;
        align-content: center;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-timer:first-child span,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer:first-child span {
        font-size: clamp(2.7rem, 17.5vw, 5.6rem) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer:first-child span {
        font-size: clamp(3rem, 18.5vw, 6.1rem) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer:not(:first-child),
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer:not(:first-child) {
        padding: clamp(8px, 2.4vw, 12px) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer:not(:first-child) span,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer:not(:first-child) span {
        font-size: clamp(1rem, 5.7vw, 1.75rem) !important;
      }

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

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] #flowActions button,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] #flowActions button,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] #flowActions button {
        min-height: clamp(48px, 7.2svh, 58px) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .flow-subtools,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .flow-subtools,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .flow-subtools {
        margin-top: clamp(6px, 1.2svh, 10px) !important;
        padding-top: 0 !important;
      }

      /* Open settings/calendar: restore normal document scrolling. */
      body.subpanel-open {
        height: auto !important;
        min-height: calc(var(--app-vh) * 100) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain;
      }

      body.subpanel-open .app,
      body.subpanel-open .app-area.visible {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        justify-content: flex-start !important;
      }

      body.subpanel-open #calendarCard.open,
      body.subpanel-open #settingsPanel.open {
        overflow: visible !important;
      }
    }

    @media (max-width: 860px) and (max-height: 740px) {
      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-timer:first-child,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer:first-child,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer:first-child {
        min-height: clamp(126px, 28svh, 214px) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] #flowTitle,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] #flowTitle,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] #flowTitle {
        font-size: clamp(1.62rem, 8vw, 2.55rem) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-timer:first-child span,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer:first-child span {
        font-size: clamp(2.35rem, 15.5vw, 4.7rem) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer:first-child span {
        font-size: clamp(2.6rem, 16.8vw, 5.2rem) !important;
      }
    }

    @media (max-width: 380px) {
      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-card,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-card,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-card {
        padding: 11px !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .badge,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .badge,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .badge {
        font-size: 11px;
        padding: 6px 8px;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] #flowDesc,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] #flowDesc,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] #flowDesc {
        -webkit-line-clamp: 1;
      }
    }


    /* =========================================================
       Clean redo patch: stable panels, no smooth-panel rewrite,
       stronger mobile anti-overlap layout, help hidden after entry.
       ========================================================= */
    @media (max-width: 860px) {
      body[data-study-depth="2"] .help-fab,
      body[data-study-depth="3"] .help-fab,
      body[data-study-depth="4"] .help-fab {
        display: none !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-card,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-card,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-card {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-card > *,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-card > *,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-card > * {
        min-width: 0 !important;
        max-width: 100% !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-timers,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timers,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timers {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-content: stretch !important;
        gap: clamp(6px, 1.2svh, 10px) !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: 100% !important;
        overflow: hidden !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-timer,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        gap: 4px !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-timer:first-child,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer:first-child,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer:first-child {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: clamp(12px, 3vw, 18px) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer:not(:first-child),
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer:not(:first-child) {
        flex: 0 0 auto !important;
        padding: clamp(7px, 2vw, 11px) clamp(10px, 2.6vw, 14px) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-timer span,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer span,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer span {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        line-height: 0.95 !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-timer:first-child span,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer:first-child span {
        font-size: clamp(2.25rem, 15.5vw, 4.85rem) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer:first-child span {
        font-size: clamp(2.45rem, 16.5vw, 5.25rem) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer:not(:first-child) span,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer:not(:first-child) span {
        font-size: clamp(0.95rem, 5vw, 1.55rem) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-pause-note {
        flex: 0 0 auto !important;
        margin: 0 !important;
        font-size: clamp(0.76rem, 3vw, 0.9rem) !important;
        line-height: 1.35 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] #flowActions,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] #flowActions,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] #flowActions {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] #flowActions button,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] #flowActions button,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] #flowActions button {
        min-width: 0 !important;
        width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: clamp(0.88rem, 3.6vw, 1rem) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .flow-subtools,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .flow-subtools,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .flow-subtools {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      }
    }

    @media (max-width: 860px) and (max-height: 700px) {
      body.app-ready:not(.subpanel-open)[data-study-depth="2"] #flowDesc,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] #flowDesc,
      body.app-ready:not(.subpanel-open)[data-study-depth="4"] #flowDesc {
        display: none !important;
      }

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

      body.app-ready:not(.subpanel-open)[data-study-depth="2"] .onion-timer:first-child span,
      body.app-ready:not(.subpanel-open)[data-study-depth="3"] .onion-timer:first-child span {
        font-size: clamp(2rem, 13.5vw, 4.15rem) !important;
      }

      body.app-ready:not(.subpanel-open)[data-study-depth="4"] .onion-timer:first-child span {
        font-size: clamp(2.15rem, 14.5vw, 4.45rem) !important;
      }
    }


    /* =========================================================
       Stable mobile sheet panels v3
       Requirements:
       - Opening Settings / Calendar must not resize or restyle the study module.
       - Page background must not dim, blur, or shift.
       - Panels animate as independent fixed sheets and scroll internally.
       ========================================================= */
    @media (max-width: 860px) {
      body.panel-sheet-open {
        /* Do not change background, card size, or layout. Keep existing mobile scene intact. */
        overflow: hidden !important;
      }

      body.panel-sheet-open .app,
      body.panel-sheet-open .app-area.visible,
      body.panel-sheet-open .onion-card,
      body.panel-sheet-open .onion-card[data-depth="1"],
      body.panel-sheet-open .onion-card[data-depth="2"],
      body.panel-sheet-open .onion-card[data-depth="3"],
      body.panel-sheet-open .onion-card[data-depth="4"] {
        transform: none !important;
        filter: none !important;
      }

      body.panel-sheet-open .onion-card {
        margin-top: inherit !important;
        margin-bottom: inherit !important;
      }

      #calendarCard,
      #settingsPanel {
        position: fixed !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        top: auto !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(74svh, 640px) !important;
        height: auto !important;
        margin: 0 !important;
        opacity: 0 !important;
        transform: translate3d(0, calc(100% + 18px), 0) scale(.985) !important;
        pointer-events: none !important;
        z-index: 8800 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
        border-radius: 24px !important;
        box-shadow: 0 28px 80px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.11) !important;
        transition:
          transform 360ms cubic-bezier(.18, .86, .24, 1),
          opacity 220ms ease !important;
        will-change: transform, opacity;
      }

      #calendarCard {
        display: block !important;
        padding: 16px !important;
      }

      #settingsPanel {
        display: grid !important;
        gap: 12px !important;
        padding: 12px !important;
        background:
          radial-gradient(circle at 16% 0%, rgba(var(--hot-rgb), 0.12), transparent 32%),
          linear-gradient(180deg, rgba(17,20,28,0.985), rgba(7,9,14,0.97)) !important;
        backdrop-filter: blur(18px) !important;
      }

      #calendarCard.open,
      #settingsPanel.open {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        pointer-events: auto !important;
      }

      #settingsPanel .card {
        box-shadow: none !important;
      }

      .panel-sheet-close {
        position: sticky;
        top: 0;
        z-index: 5;
        width: 100%;
        min-height: 42px;
        margin: 0 0 10px;
        border-radius: 16px;
        border-color: rgba(255,255,255,0.16);
        background: rgba(255,255,255,0.075);
        backdrop-filter: blur(12px);
        color: var(--ink);
      }

      #calendarCard .panel-sheet-close {
        margin-bottom: 12px;
      }

      #settingsPanel .panel-sheet-close {
        margin: 0 0 2px;
      }

      body:not(.app-ready) #calendarCard,
      body:not(.app-ready) #settingsPanel,
      body.auth-screen #calendarCard,
      body.auth-screen #settingsPanel {
        display: none !important;
      }

      @media (max-height: 700px) {
        #calendarCard,
        #settingsPanel {
          max-height: min(82svh, 620px) !important;
          border-radius: 22px !important;
        }
      }
    }


    /* v2 sheet panel fix: the old centered full-screen layout hides panels when
       body lacks .subpanel-open. Keep .subpanel-open disabled so the study module
       does not resize, but override the old max-height/padding rules with a
       higher-specificity selector. */
    @media (max-width: 860px) {
      body.app-ready.panel-sheet-open:not(.subpanel-open) #calendarCard.open,
      body.app-ready.panel-sheet-open:not(.subpanel-open) #settingsPanel.open {
        position: fixed !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        top: auto !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(74svh, 640px) !important;
        height: auto !important;
        margin: 0 !important;
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        pointer-events: auto !important;
        z-index: 8800 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
        border-radius: 24px !important;
        box-shadow: 0 28px 80px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.11) !important;
        transition: transform 360ms cubic-bezier(.18, .86, .24, 1), opacity 220ms ease !important;
        will-change: transform, opacity;
      }

      body.app-ready.panel-sheet-open:not(.subpanel-open) #calendarCard.open {
        display: block !important;
        padding: 16px !important;
        background:
          radial-gradient(circle at 16% 0%, rgba(var(--cold-rgb), 0.14), transparent 34%),
          linear-gradient(180deg, rgba(17,20,28,0.985), rgba(7,9,14,0.97)) !important;
        backdrop-filter: blur(18px) !important;
      }

      body.app-ready.panel-sheet-open:not(.subpanel-open) #settingsPanel.open {
        display: grid !important;
        gap: 12px !important;
        padding: 12px !important;
        background:
          radial-gradient(circle at 16% 0%, rgba(var(--hot-rgb), 0.12), transparent 32%),
          linear-gradient(180deg, rgba(17,20,28,0.985), rgba(7,9,14,0.97)) !important;
        backdrop-filter: blur(18px) !important;
      }

      body.app-ready.panel-sheet-open:not(.subpanel-open) #calendarCard.open .panel-sheet-close,
      body.app-ready.panel-sheet-open:not(.subpanel-open) #settingsPanel.open .panel-sheet-close {
        display: grid !important;
        place-items: center;
        position: sticky;
        top: 0;
        z-index: 5;
        width: 100%;
        min-height: 42px;
        margin: 0 0 10px;
        border-radius: 16px;
        border-color: rgba(255,255,255,0.16);
        background: rgba(255,255,255,0.075);
        backdrop-filter: blur(12px);
        color: var(--ink);
      }

      body.app-ready.panel-sheet-open:not(.subpanel-open) .app,
      body.app-ready.panel-sheet-open:not(.subpanel-open) .app-area.visible,
      body.app-ready.panel-sheet-open:not(.subpanel-open) .onion-card {
        transform: none !important;
        filter: none !important;
      }

      @media (max-height: 700px) {
        body.app-ready.panel-sheet-open:not(.subpanel-open) #calendarCard.open,
        body.app-ready.panel-sheet-open:not(.subpanel-open) #settingsPanel.open {
          max-height: min(82svh, 620px) !important;
          border-radius: 22px !important;
        }
      }
    }



    .feedback-stage {
      --stage-tension: 0;
      --stage-eruption: 0;
      --stage-glow: 0.12;
      --stage-tilt: 0deg;
      --stage-orbit-speed: 22s;
      --stage-wave-speed: 14s;
      --stage-ring-opacity: 0.20;
      --stage-wave-opacity: 0;
      --stage-mesh-opacity: 0.10;
      --stage-rift-opacity: 0;
      --stage-noise-opacity: 0.05;
      --stage-card-alpha: 0.070;
      --stage-contrast: 1;
      position: fixed;
      inset: 0;
      z-index: 1120;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 10px;
      padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
      color: var(--ink);
      background: var(--page-background);
      opacity: 0;
      transform: translate3d(100%, 0, 0) scale(1.015);
      pointer-events: none;
      transition: transform 640ms cubic-bezier(.16, .92, .14, 1), opacity 460ms ease;
      overflow: hidden;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      isolation: isolate;
    }

    .feedback-stage[data-tier="1"] { --stage-ring-opacity: .12; --stage-wave-opacity: 0; --stage-mesh-opacity: .05; --stage-rift-opacity: 0; --stage-noise-opacity: .035; --stage-card-alpha: .060; }
    .feedback-stage[data-tier="2"] { --stage-ring-opacity: .20; --stage-wave-opacity: .08; --stage-mesh-opacity: .08; --stage-rift-opacity: 0; --stage-noise-opacity: .045; --stage-card-alpha: .067; }
    .feedback-stage[data-tier="3"] { --stage-ring-opacity: .30; --stage-wave-opacity: .14; --stage-mesh-opacity: .11; --stage-rift-opacity: .05; --stage-noise-opacity: .060; --stage-card-alpha: .074; }
    .feedback-stage[data-tier="4"] { --stage-ring-opacity: .40; --stage-wave-opacity: .22; --stage-mesh-opacity: .16; --stage-rift-opacity: .09; --stage-noise-opacity: .075; --stage-card-alpha: .083; }
    .feedback-stage[data-tier="5"] { --stage-ring-opacity: .50; --stage-wave-opacity: .31; --stage-mesh-opacity: .20; --stage-rift-opacity: .14; --stage-noise-opacity: .090; --stage-card-alpha: .094; }
    .feedback-stage[data-tier="6"] { --stage-ring-opacity: .62; --stage-wave-opacity: .42; --stage-mesh-opacity: .25; --stage-rift-opacity: .22; --stage-noise-opacity: .110; --stage-card-alpha: .108; }
    .feedback-stage[data-tier="7"] { --stage-ring-opacity: .74; --stage-wave-opacity: .54; --stage-mesh-opacity: .30; --stage-rift-opacity: .34; --stage-noise-opacity: .130; --stage-card-alpha: .122; }
    .feedback-stage[data-tier="8"] { --stage-ring-opacity: .86; --stage-wave-opacity: .67; --stage-mesh-opacity: .36; --stage-rift-opacity: .48; --stage-noise-opacity: .150; --stage-card-alpha: .138; }
    .feedback-stage[data-tier="9"] { --stage-ring-opacity: 1; --stage-wave-opacity: .78; --stage-mesh-opacity: .42; --stage-rift-opacity: .62; --stage-noise-opacity: .170; --stage-card-alpha: .154; }

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

    body.feedback-stage-open { overflow: hidden; }

    .feedback-stage::before,
    .feedback-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .feedback-stage::before {
      z-index: -3;
      background:
        radial-gradient(circle at calc(50% + var(--stage-tension) * 9%) calc(14% + var(--stage-eruption) * 4%), rgba(var(--hot-rgb), calc(.16 + var(--stage-tension) * .20)), transparent 28%),
        radial-gradient(circle at calc(13% + var(--stage-eruption) * 10%) 84%, rgba(var(--cold-rgb), calc(.18 + var(--stage-tension) * .12)), transparent 34%),
        radial-gradient(circle at 88% 76%, rgba(var(--hot-deep-rgb), calc(.10 + var(--stage-tension) * .17)), transparent 31%),
        linear-gradient(138deg, rgba(var(--cold-rgb), calc(.07 + var(--stage-tension) * .04)), rgba(var(--hot-rgb), calc(.045 + var(--stage-tension) * .04)) 45%, transparent 72%),
        var(--page-background);
      filter: saturate(calc(1.02 + var(--stage-tension) * .35)) contrast(calc(1 + var(--stage-tension) * .08));
      transition: filter 520ms ease, background 520ms ease;
    }

    .feedback-stage::after {
      z-index: 3;
      inset: 14px;
      border: 1px solid rgba(255,255,255,calc(0.07 + var(--stage-tension) * 0.065));
      border-radius: 30px;
      background:
        linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,calc(.018 + var(--stage-tension) * .024)) 46%, transparent 55% 100%),
        radial-gradient(circle at 50% 4%, rgba(255,255,255,calc(.028 + var(--stage-tension) * .03)), transparent 42%);
      box-shadow:
        inset 0 0 calc(22px + var(--stage-tension) * 58px) rgba(var(--hot-rgb), calc(0.04 + var(--stage-tension) * 0.08)),
        0 0 calc(18px + var(--stage-tension) * 34px) rgba(var(--cold-rgb), calc(0.05 + var(--stage-tension) * .06));
      opacity: calc(.78 + var(--stage-tension) * .20);
      transition: border-color 520ms ease, box-shadow 520ms ease, opacity 520ms ease;
    }

    .feedback-stage > * {
      position: relative;
      z-index: 1;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    .feedback-stage-scene {
      position: absolute;
      inset: -8%;
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
    }

    .feedback-aurora,
    .feedback-mesh,
    .feedback-wave,
    .feedback-orbit-field,
    .feedback-rift {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .feedback-aurora {
      background:
        radial-gradient(ellipse at 50% 18%, rgba(var(--hot-rgb), calc(.18 + var(--stage-tension) * .25)), transparent 30%),
        radial-gradient(ellipse at 18% 76%, rgba(var(--cold-rgb), calc(.16 + var(--stage-tension) * .16)), transparent 32%),
        radial-gradient(ellipse at 82% 74%, rgba(var(--hot-deep-rgb), calc(.10 + var(--stage-tension) * .18)), transparent 28%);
      filter: blur(calc(14px + var(--stage-tension) * 15px)) saturate(calc(1.12 + var(--stage-tension) * .42));
      opacity: calc(.68 + var(--stage-tension) * .22);
      animation: feedbackAuroraDrift calc(20s - var(--stage-tension) * 8s) ease-in-out infinite alternate;
    }

    @keyframes feedbackAuroraDrift {
      0% { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
      50% { transform: translate3d(2%, 1.2%, 0) scale(calc(1.015 + var(--stage-tension) * .018)); }
      100% { transform: translate3d(1.5%, -2%, 0) scale(calc(1.025 + var(--stage-tension) * .026)); }
    }

    .feedback-mesh {
      opacity: var(--stage-mesh-opacity);
      background-image:
        linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px),
        radial-gradient(circle, rgba(var(--hot-rgb),.24) 0 1px, transparent 1.8px);
      background-size: 42px 42px, 42px 42px, 28px 28px;
      background-position: center;
      mask-image: radial-gradient(ellipse at center, #000 0 48%, transparent 82%);
      transform: perspective(720px) rotateX(58deg) translateY(10%);
      animation: feedbackMeshSlide calc(18s - var(--stage-tension) * 8s) linear infinite;
    }

    @keyframes feedbackMeshSlide {
      to { background-position: center 84px, center 84px, center 56px; }
    }

    .feedback-wave {
      top: 50%;
      left: 50%;
      width: min(118vw, 620px);
      height: min(118vw, 620px);
      inset: auto;
      border-radius: 999px;
      border: 1px solid rgba(var(--hot-rgb), calc(.10 + var(--stage-tension) * .15));
      box-shadow:
        0 0 34px rgba(var(--hot-rgb), calc(.08 + var(--stage-tension) * .12)),
        inset 0 0 40px rgba(var(--cold-rgb), calc(.08 + var(--stage-tension) * .10));
      opacity: var(--stage-wave-opacity);
      transform: translate(-50%, -50%) scale(.50);
      animation: feedbackWavePulse var(--stage-wave-speed) cubic-bezier(.2, .72, .18, 1) infinite;
      mix-blend-mode: screen;
    }

    .feedback-wave-two {
      border-color: rgba(var(--cold-rgb), calc(.12 + var(--stage-tension) * .18));
      animation-delay: calc(var(--stage-wave-speed) * -.44);
      transform: translate(-50%, -50%) scale(.36) rotate(22deg);
    }

    @keyframes feedbackWavePulse {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(.34) rotate(0deg); }
      18% { opacity: calc(var(--stage-wave-opacity) * .88); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(calc(1.03 + var(--stage-tension) * .42)) rotate(calc(32deg + var(--stage-tension) * 28deg)); }
    }

    .feedback-orbit-field span,
    .feedback-rift span {
      position: absolute;
      left: 50%;
      top: 50%;
      pointer-events: none;
    }

    .feedback-orbit-field span {
      width: calc(5px + var(--stage-tension) * 5px);
      height: calc(5px + var(--stage-tension) * 5px);
      border-radius: 999px;
      background: rgba(255,255,255,calc(.40 + var(--stage-tension) * .38));
      box-shadow: 0 0 18px rgba(var(--hot-rgb), calc(.18 + var(--stage-tension) * .26));
      opacity: calc(var(--stage-ring-opacity) * .72);
      transform-origin: calc(-78px - var(--i) * 16px) calc(18px + var(--i) * 7px);
      animation: feedbackParticleOrbit calc(var(--stage-orbit-speed) + var(--i) * .7s) linear infinite;
      animation-delay: calc(var(--i) * -.65s);
    }

    @keyframes feedbackParticleOrbit {
      from { transform: rotate(calc(var(--i) * 42deg)) translateX(calc(90px + var(--i) * 13px)) rotate(0deg); }
      to { transform: rotate(calc(var(--i) * 42deg + 360deg)) translateX(calc(90px + var(--i) * 13px)) rotate(-360deg); }
    }

    .feedback-rift {
      opacity: var(--stage-rift-opacity);
      filter: drop-shadow(0 0 18px rgba(var(--hot-rgb), calc(.16 + var(--stage-tension) * .18)));
      mix-blend-mode: screen;
    }

    .feedback-rift span {
      width: calc(130px + var(--i) * 28px);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(var(--hot-rgb),.76), rgba(255,255,255,.62), transparent);
      transform: translate(-50%, -50%) rotate(calc(-42deg + var(--i) * 21deg)) translateY(calc(-146px + var(--i) * 72px));
      animation: feedbackRiftFlash calc(6.4s - var(--stage-tension) * 2.6s) ease-in-out infinite;
      animation-delay: calc(var(--i) * -.72s);
    }

    @keyframes feedbackRiftFlash {
      0%, 100% { opacity: .15; filter: blur(.2px); }
      42% { opacity: calc(.28 + var(--stage-tension) * .42); filter: blur(0); }
      50% { opacity: calc(.62 + var(--stage-tension) * .36); }
      58% { opacity: .24; }
    }

    .feedback-stage-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 42px;
      padding-inline: 4px;
    }

    .feedback-stage-title {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .feedback-stage-title strong {
      font-size: .98rem;
      letter-spacing: -.03em;
      text-shadow: 0 0 calc(16px + var(--stage-tension) * 24px) rgba(var(--hot-rgb), calc(.12 + var(--stage-tension) * .16));
    }

    .feedback-stage-title span {
      display: block;
      color: rgba(246,239,231,calc(.46 + var(--stage-tension) * .18));
      font-family: var(--mono);
      font-size: .70rem;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .feedback-stage-close { display: none !important; }

    .feedback-stage-main {
      min-height: 0;
      display: grid;
      place-items: center;
    }

    .feedback-pad {
      width: min(100%, 398px);
      min-height: min(73svh, 616px);
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,calc(0.12 + var(--stage-tension) * 0.09));
      border-radius: calc(32px + var(--stage-tension) * 10px);
      background:
        linear-gradient(180deg, rgba(255,255,255,calc(var(--stage-card-alpha) + .030)), rgba(255,255,255,calc(var(--stage-card-alpha) * .42))),
        radial-gradient(circle at 50% 18%, rgba(var(--hot-rgb), calc(0.12 + var(--stage-tension) * 0.18)), transparent 37%),
        radial-gradient(circle at 20% 88%, rgba(var(--cold-rgb), calc(0.08 + var(--stage-tension) * 0.12)), transparent 43%);
      box-shadow:
        0 30px 88px rgba(0,0,0,calc(.36 + var(--stage-tension) * .10)),
        0 0 calc(40px + var(--stage-tension) * 98px) rgba(var(--hot-rgb), var(--stage-glow)),
        0 0 calc(24px + var(--stage-tension) * 56px) rgba(var(--cold-rgb), calc(.08 + var(--stage-tension) * .11)),
        inset 0 1px 0 rgba(255,255,255,calc(.13 + var(--stage-tension) * .06));
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 16px;
      padding: 20px;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: none;
      outline: none;
      transform: rotate(var(--stage-tilt));
      transition: border-color 520ms ease, border-radius 520ms ease, background 520ms ease, box-shadow 520ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1);
      backdrop-filter: blur(calc(18px + var(--stage-tension) * 6px)) saturate(calc(1.05 + var(--stage-tension) * .24));
    }

    .feedback-pad-surface {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,calc(.035 + var(--stage-tension) * .040)) 45%, transparent 56% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,calc(.018 + var(--stage-tension) * .020)) 0 1px, transparent 1px 24px);
      opacity: calc(.34 + var(--stage-tension) * .28);
      mix-blend-mode: screen;
      animation: feedbackSurfaceScan calc(8.8s - var(--stage-tension) * 3.2s) linear infinite;
    }

    @keyframes feedbackSurfaceScan {
      from { transform: translateX(-20%) skewX(-8deg); }
      to { transform: translateX(20%) skewX(-8deg); }
    }

    .feedback-pad > :not(.feedback-pad-surface) { position: relative; z-index: 1; }

    .feedback-stage[data-tier="3"] .feedback-pad,
    .feedback-stage[data-tier="4"] .feedback-pad,
    .feedback-stage[data-tier="5"] .feedback-pad,
    .feedback-stage[data-tier="6"] .feedback-pad,
    .feedback-stage[data-tier="7"] .feedback-pad,
    .feedback-stage[data-tier="8"] .feedback-pad,
    .feedback-stage[data-tier="9"] .feedback-pad {
      animation: feedbackStageBreath calc(6.2s - var(--stage-tension) * 2.8s) ease-in-out infinite;
    }

    @keyframes feedbackStageBreath {
      0%, 100% { transform: rotate(var(--stage-tilt)) scale(1); filter: brightness(1); }
      50% { transform: rotate(var(--stage-tilt)) scale(calc(1.006 + var(--stage-tension) * 0.020)); filter: brightness(calc(1 + var(--stage-tension) * .06)); }
    }

    .feedback-stage.level-up .feedback-pad {
      animation: feedbackLevelUp 1120ms cubic-bezier(.16, 1, .3, 1);
    }

    @keyframes feedbackLevelUp {
      0% { transform: rotate(0deg) scale(1); filter: brightness(1); }
      20% { transform: rotate(calc(var(--stage-tilt) * 1.8)) scale(calc(1.03 + var(--stage-tension) * .025)); filter: brightness(calc(1.18 + var(--stage-tension) * .18)); }
      42% { transform: rotate(calc(var(--stage-tilt) * -0.75)) scale(calc(1.012 + var(--stage-tension) * .010)); filter: brightness(calc(1.08 + var(--stage-tension) * .08)); }
      68% { transform: rotate(calc(var(--stage-tilt) * .38)) scale(1.008); }
      100% { transform: rotate(var(--stage-tilt)) scale(1); filter: brightness(1); }
    }

    .feedback-pad:focus-visible {
      box-shadow:
        0 30px 88px rgba(0,0,0,.42),
        0 0 0 3px rgba(var(--hot-rgb),0.24),
        0 0 calc(42px + var(--stage-tension) * 108px) rgba(var(--hot-rgb), var(--stage-glow)),
        inset 0 1px 0 rgba(255,255,255,0.16);
    }

    .feedback-score-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .feedback-score-kicker,
    .feedback-progress-caption {
      color: rgba(246,239,231,0.50);
      font-size: .68rem;
      letter-spacing: .10em;
      text-transform: uppercase;
      font-family: var(--mono);
    }

    .feedback-score-value {
      margin-top: 4px;
      font-family: var(--mono);
      font-variant-numeric: tabular-nums;
      font-size: clamp(2.45rem, 15vw, 4.25rem);
      font-weight: 950;
      line-height: .88;
      letter-spacing: -.09em;
      text-shadow:
        0 0 calc(18px + var(--stage-tension) * 36px) rgba(var(--hot-rgb),calc(0.12 + var(--stage-tension) * 0.18)),
        0 18px 40px rgba(0,0,0,.34);
    }

    .feedback-stage-badge,
    .feedback-level-pill {
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,calc(.12 + var(--stage-tension) * .08));
      background:
        linear-gradient(135deg, rgba(var(--hot-rgb),calc(.10 + var(--stage-tension) * .08)), rgba(var(--cold-rgb),calc(.09 + var(--stage-tension) * .05))),
        rgba(255,255,255,0.055);
      color: rgba(255,255,255,.84);
      padding: 7px 11px;
      font-size: .75rem;
      white-space: nowrap;
      font-family: var(--mono);
      letter-spacing: .03em;
      box-shadow:
        0 0 calc(var(--stage-tension) * 38px) rgba(var(--hot-rgb), calc(var(--stage-tension) * 0.15)),
        inset 0 1px 0 rgba(255,255,255,.10);
      backdrop-filter: blur(14px);
    }

    .feedback-stage-badge {
      align-self: start;
      margin-top: 2px;
      text-transform: uppercase;
      color: rgba(246,239,231,calc(.62 + var(--stage-tension) * .18));
    }

    .feedback-level-pill {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: .78rem;
      letter-spacing: -.01em;
    }

    .feedback-orb-wrap {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 280px;
      perspective: 840px;
    }

    .feedback-orb-aura {
      position: absolute;
      width: min(83vw, 346px);
      aspect-ratio: 1 / 1;
      border-radius: 999px;
      background:
        radial-gradient(circle, rgba(var(--hot-rgb), calc(.16 + var(--stage-tension) * .24)), transparent 48%),
        conic-gradient(from 0deg, rgba(var(--hot-rgb),.34), rgba(var(--cold-rgb),.20), rgba(var(--hot-deep-rgb),.22), rgba(var(--hot-rgb),.34));
      filter: blur(calc(19px + var(--stage-tension) * 13px));
      opacity: calc(.42 + var(--stage-tension) * .38);
      transform: scale(calc(.82 + var(--stage-tension) * .20));
      animation: feedbackAuraSpin calc(var(--stage-orbit-speed) * 1.25) linear infinite;
      mix-blend-mode: screen;
    }

    @keyframes feedbackAuraSpin { to { transform: scale(calc(.82 + var(--stage-tension) * .20)) rotate(360deg); } }

    .feedback-orb {
      --feedback-progress: 0deg;
      width: min(68vw, 294px);
      aspect-ratio: 1 / 1;
      border-radius: 999px;
      position: relative;
      display: grid;
      place-items: center;
      background:
        conic-gradient(from -90deg, rgba(var(--hot-rgb), calc(0.78 + var(--stage-tension) * 0.12)) 0deg, rgba(var(--cold-rgb), 0.92) var(--feedback-progress), rgba(255,255,255,0.080) var(--feedback-progress), rgba(255,255,255,0.036) 360deg);
      box-shadow:
        0 24px 76px rgba(0,0,0,0.38),
        0 0 calc(70px + var(--stage-tension) * 118px) rgba(var(--hot-rgb), calc(0.12 + var(--stage-tension) * 0.20)),
        0 0 calc(26px + var(--stage-tension) * 60px) rgba(var(--cold-rgb), calc(0.10 + var(--stage-tension) * 0.16));
      transition: background 360ms ease, transform 240ms cubic-bezier(.16, 1, .3, 1), box-shadow 520ms ease;
      transform-style: preserve-3d;
      animation: feedbackOrbFloat calc(6s - var(--stage-tension) * 2.2s) ease-in-out infinite;
    }

    @keyframes feedbackOrbFloat {
      0%, 100% { transform: translateY(0) rotateX(calc(var(--stage-tension) * 3deg)); }
      50% { transform: translateY(calc(-3px - var(--stage-tension) * 9px)) rotateX(calc(var(--stage-tension) * -5deg)); }
    }

    .feedback-orb::before,
    .feedback-orb::after {
      content: "";
      position: absolute;
      inset: calc(14px - var(--stage-tension) * 4px);
      border-radius: inherit;
      pointer-events: none;
    }

    .feedback-orb::before {
      background:
        radial-gradient(circle at 48% 42%, rgba(255,255,255,calc(0.16 + var(--stage-tension) * 0.14)), transparent 25%),
        radial-gradient(circle at 54% 58%, rgba(var(--hot-rgb),calc(.16 + var(--stage-tension) * .12)), transparent 44%),
        linear-gradient(160deg, rgba(255,255,255,0.13), rgba(255,255,255,0.034)),
        var(--page-background);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -32px 74px rgba(0,0,0,0.22);
    }

    .feedback-orb::after {
      inset: calc(27px - var(--stage-tension) * 7px);
      border: 1px solid rgba(255,255,255,calc(.13 + var(--stage-tension) * .09));
      border-top-color: rgba(var(--hot-rgb),calc(.30 + var(--stage-tension) * .28));
      border-right-color: rgba(var(--cold-rgb),calc(.22 + var(--stage-tension) * .20));
      opacity: calc(.40 + var(--stage-ring-opacity) * .40);
      animation: feedbackInnerRing calc(var(--stage-orbit-speed) * .82) linear infinite reverse;
    }

    @keyframes feedbackInnerRing { to { transform: rotate(360deg); } }

    .feedback-orb-ring {
      position: absolute;
      inset: 50%;
      width: calc(110% + var(--stage-tension) * 38%);
      height: calc(40% + var(--stage-tension) * 10%);
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,calc(.08 + var(--stage-tension) * .11));
      transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg);
      opacity: var(--stage-ring-opacity);
      box-shadow: 0 0 24px rgba(var(--hot-rgb),calc(.06 + var(--stage-tension) * .15));
      mix-blend-mode: screen;
    }

    .feedback-orb-ring-one { animation: feedbackRingSpin var(--stage-orbit-speed) linear infinite; }
    .feedback-orb-ring-two { width: calc(126% + var(--stage-tension) * 42%); transform: translate(-50%, -50%) rotateX(64deg) rotateZ(58deg); border-color: rgba(var(--hot-rgb),calc(.12 + var(--stage-tension) * .18)); animation: feedbackRingSpin calc(var(--stage-orbit-speed) * .72) linear infinite reverse; }
    .feedback-orb-ring-three { width: calc(138% + var(--stage-tension) * 50%); transform: translate(-50%, -50%) rotateX(76deg) rotateZ(-36deg); border-color: rgba(var(--cold-rgb),calc(.10 + var(--stage-tension) * .17)); animation: feedbackRingSpin calc(var(--stage-orbit-speed) * 1.12) linear infinite; }

    @keyframes feedbackRingSpin { to { rotate: 360deg; } }

    .feedback-orb-core {
      position: relative;
      z-index: 1;
      width: calc(39% + var(--stage-tension) * 7%);
      aspect-ratio: 1 / 1;
      border-radius: 999px;
      background:
        radial-gradient(circle, rgba(255,255,255,0.95) 0 7%, rgba(var(--hot-rgb),0.78) 9% 28%, rgba(var(--cold-rgb),0.32) 48%, rgba(255,255,255,0.05) 72%);
      box-shadow:
        0 0 calc(48px + var(--stage-tension) * 62px) rgba(var(--hot-rgb), calc(0.27 + var(--stage-tension) * 0.22)),
        0 0 calc(22px + var(--stage-tension) * 40px) rgba(var(--cold-rgb), calc(0.10 + var(--stage-tension) * 0.16)),
        inset 0 1px 0 rgba(255,255,255,0.34);
      animation: feedbackCorePulse calc(3.8s - var(--stage-tension) * 1.6s) ease-in-out infinite;
    }

    .feedback-orb-seed {
      position: absolute;
      z-index: 2;
      width: calc(8px + var(--stage-tension) * 10px);
      height: calc(8px + var(--stage-tension) * 10px);
      border-radius: 999px;
      background: rgba(255,255,255,.88);
      box-shadow: 0 0 24px rgba(var(--hot-rgb), .42);
      transform: translate(calc(38px + var(--stage-tension) * 12px), calc(-40px - var(--stage-tension) * 12px));
      opacity: calc(.46 + var(--stage-tension) * .42);
      animation: feedbackSeedOrbit calc(var(--stage-orbit-speed) * .52) linear infinite;
    }

    @keyframes feedbackCorePulse {
      0%, 100% { transform: scale(1); filter: brightness(1); }
      50% { transform: scale(calc(1.025 + var(--stage-tension) * .055)); filter: brightness(calc(1.05 + var(--stage-tension) * .12)); }
    }

    @keyframes feedbackSeedOrbit {
      to { rotate: 360deg; }
    }

    .feedback-stage[data-tier="1"] .feedback-orb-ring-two,
    .feedback-stage[data-tier="1"] .feedback-orb-ring-three,
    .feedback-stage[data-tier="1"] .feedback-orb-seed { opacity: 0; }

    .feedback-stage[data-tier="2"] .feedback-orb-ring-three { opacity: 0; }

    .feedback-orb.pulse-medium { animation: feedbackPulseMedium 460ms cubic-bezier(.16, 1, .3, 1); }
    .feedback-orb.pulse-high { animation: feedbackPulseHigh 680ms cubic-bezier(.16, 1, .3, 1); }

    @keyframes feedbackPulseMedium {
      0% { transform: scale(1); }
      45% { transform: scale(calc(1.035 + var(--stage-tension) * .018)); filter: brightness(calc(1.08 + var(--stage-tension) * .06)); }
      100% { transform: scale(1); }
    }

    @keyframes feedbackPulseHigh {
      0% { transform: scale(1); filter: brightness(1); }
      36% { transform: scale(calc(1.078 + var(--stage-tension) * .035)); filter: brightness(calc(1.16 + var(--stage-tension) * .13)); }
      68% { transform: scale(calc(1.018 + var(--stage-tension) * .012)); }
      100% { transform: scale(1); filter: brightness(1); }
    }

    .feedback-gain {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(.96);
      opacity: 0;
      pointer-events: none;
      font-family: var(--mono);
      font-weight: 950;
      font-size: clamp(2.2rem, 12vw, 4.35rem);
      letter-spacing: -.08em;
      color: rgba(255,255,255,.94);
      text-shadow:
        0 0 28px rgba(var(--hot-rgb),calc(.20 + var(--stage-tension) * .24)),
        0 16px 42px rgba(0,0,0,0.42);
    }

    .feedback-gain.show { animation: feedbackGainFloat 760ms cubic-bezier(.16, 1, .3, 1); }
    @keyframes feedbackGainFloat {
      0% { opacity: 0; transform: translate(-50%, -40%) scale(.78); filter: blur(2px); }
      20% { opacity: 1; transform: translate(-50%, -58%) scale(calc(1.05 + var(--stage-tension) * .08)); filter: blur(0); }
      100% { opacity: 0; transform: translate(-50%, calc(-112% - var(--stage-tension) * 22%)) scale(.98); filter: blur(.5px); }
    }

    .feedback-level-flash {
      position: absolute;
      left: 50%;
      top: 16%;
      transform: translate(-50%, -50%) scale(.92);
      opacity: 0;
      pointer-events: none;
      font-family: var(--mono);
      font-size: clamp(1.28rem, 7vw, 2.24rem);
      font-weight: 900;
      letter-spacing: -.04em;
      color: rgba(255,255,255,0.95);
      text-shadow:
        0 0 36px rgba(var(--hot-rgb),0.42),
        0 14px 42px rgba(0,0,0,0.42);
    }

    .feedback-level-flash.show { animation: feedbackLevelFlash 1120ms cubic-bezier(.16, 1, .3, 1); }
    @keyframes feedbackLevelFlash {
      0% { opacity: 0; transform: translate(-50%, -30%) scale(.74) rotate(-4deg); filter: blur(3px); }
      22% { opacity: 1; transform: translate(-50%, -50%) scale(calc(1.08 + var(--stage-tension) * .08)) rotate(1deg); filter: blur(0); }
      56% { opacity: .86; }
      100% { opacity: 0; transform: translate(-50%, -94%) scale(.96) rotate(4deg); filter: blur(.5px); }
    }

    .feedback-sparks {
      position: absolute;
      inset: -24px;
      pointer-events: none;
      overflow: hidden;
      border-radius: inherit;
    }

    .feedback-spark {
      position: absolute;
      width: calc(6px * var(--spark-scale, 1));
      height: calc(6px * var(--spark-scale, 1));
      border-radius: 999px;
      background: rgba(255,255,255,0.84);
      box-shadow:
        0 0 18px rgba(var(--hot-rgb),0.50),
        0 0 32px rgba(var(--cold-rgb),0.16);
      animation: feedbackSpark var(--spark-life, 920ms) ease-out forwards;
      mix-blend-mode: screen;
    }

    .feedback-spark-burst {
      width: calc(13px * var(--spark-scale, 1));
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(var(--hot-rgb),.72), transparent);
    }

    @keyframes feedbackSpark {
      0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.35) rotate(0deg); }
      18% { opacity: .98; }
      100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(.10) rotate(120deg); }
    }

    .feedback-progress-panel { display: grid; gap: 9px; }

    .feedback-progress-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      color: rgba(246,239,231,0.52);
      font-size: .74rem;
      font-family: var(--mono);
      line-height: 1.35;
    }

    #feedbackStageHint {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 70%;
      color: rgba(246,239,231,calc(.44 + var(--stage-tension) * .16));
    }

    .feedback-progress-track {
      height: 13px;
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,calc(.10 + var(--stage-tension) * .05));
      background:
        linear-gradient(90deg, rgba(var(--cold-rgb),calc(.08 + var(--stage-tension) * .04)), rgba(255,255,255,.050)),
        rgba(255,255,255,0.055);
      box-shadow: inset 0 1px 5px rgba(0,0,0,.18);
    }

    .feedback-progress-fill {
      width: 100%;
      height: 100%;
      transform-origin: left center;
      transform: scaleX(0);
      border-radius: inherit;
      background:
        linear-gradient(90deg, rgba(var(--cold-rgb),0.95), rgba(var(--hot-rgb),0.94), rgba(255,255,255,.72));
      box-shadow:
        0 0 calc(30px + var(--stage-tension) * 50px) rgba(var(--hot-rgb),calc(0.18 + var(--stage-tension) * 0.22)),
        inset 0 1px 0 rgba(255,255,255,.18);
      transition: transform 360ms cubic-bezier(.16, 1, .3, 1), box-shadow 520ms ease;
    }

    .feedback-stage-footer { display: none; }

    body[data-theme="stainedGlass"] .feedback-mesh {
      background-image:
        linear-gradient(60deg, rgba(255,255,255,.16) 1px, transparent 1px),
        linear-gradient(120deg, rgba(255,255,255,.12) 1px, transparent 1px),
        radial-gradient(circle, rgba(var(--hot-rgb),.30) 0 1.2px, transparent 2px);
      background-size: 54px 54px, 54px 54px, 34px 34px;
    }

    body[data-theme="artNouveauBloom"] .feedback-orb-ring,
    body[data-theme="turtleShell"] .feedback-orb-ring {
      border-radius: 58% 42% 54% 46%;
    }

    body[data-theme="artDecoNoir"] .feedback-mesh {
      background-image:
        linear-gradient(90deg, rgba(var(--hot-rgb),.20) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.09) 1px, transparent 1px),
        repeating-linear-gradient(45deg, transparent 0 18px, rgba(var(--hot-rgb),.07) 18px 20px);
    }

    body[data-theme="paperRed"] .feedback-stage,
    body[data-theme="paperRed"] .feedback-pad {
      color: #201818;
    }

    body[data-theme="paperRed"] .feedback-stage-title span,
    body[data-theme="paperRed"] .feedback-score-kicker,
    body[data-theme="paperRed"] .feedback-progress-meta,
    body[data-theme="paperRed"] #feedbackStageHint {
      color: rgba(55,45,40,.60);
    }

    body[data-theme="paperRed"] .feedback-level-pill,
    body[data-theme="paperRed"] .feedback-stage-badge {
      color: rgba(36,30,28,.76);
      background: rgba(255,255,255,.52);
    }

    @media (max-height: 720px) {
      .feedback-pad { min-height: min(62svh, 500px); gap: 12px; padding: 16px; }
      .feedback-orb-wrap { min-height: 210px; }
      .feedback-orb { width: min(56vw, 224px); }
      .feedback-orb-aura { width: min(72vw, 270px); }
      #feedbackStageHint { max-width: 62%; }
    }

    @media (prefers-reduced-motion: reduce) {
      .feedback-stage,
      .feedback-stage *,
      .feedback-stage *::before,
      .feedback-stage *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
      }
      .feedback-wave,
      .feedback-orbit-field,
      .feedback-rift,
      .feedback-pad-surface {
        display: none !important;
      }
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (max-width: 640px) {
      .confirm-modal { width: min(100%, 420px); padding: 18px 16px 16px; border-radius: 24px; }
      .confirm-modal-actions { grid-template-columns: 1fr; }
    }

/* === v5: abstract growth tree feedback stage === */
.feedback-tree-stage {
  --tree-primary: rgba(var(--hot-rgb), .84);
  --tree-secondary: rgba(var(--cold-rgb), .78);
  --tree-accent: rgba(var(--hot-deep-rgb), .52);
  --tree-core-shadow: rgba(0, 0, 0, .34);
  --tree-panel: rgba(255, 255, 255, .072);
  --tree-line: rgba(255, 255, 255, .16);
  --tree-text-soft: rgba(255, 255, 255, .68);
  --tree-field-opacity: calc(.28 + var(--stage-tension, .12) * .42);
  --tree-bloom-scale: calc(.92 + var(--stage-bloom, .16) * .20);
  background:
    radial-gradient(circle at 16% 0%, rgba(var(--hot-rgb), .18), transparent 34%),
    radial-gradient(circle at 82% 10%, rgba(var(--cold-rgb), .16), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(var(--hot-deep-rgb), .18), transparent 38%),
    linear-gradient(180deg, rgba(7, 10, 16, .94), rgba(6, 8, 12, .98));
}

.feedback-tree-stage[data-mood="warm"] {
  --tree-primary: rgba(var(--hot-rgb), .92);
  --tree-secondary: rgba(255, 208, 142, .80);
  --tree-accent: rgba(var(--hot-deep-rgb), .58);
  --tree-panel: rgba(255, 248, 239, .08);
}

.feedback-tree-stage[data-mood="cool"] {
  --tree-primary: rgba(var(--cold-rgb), .90);
  --tree-secondary: rgba(186, 231, 255, .78);
  --tree-accent: rgba(116, 179, 255, .46);
  --tree-panel: rgba(230, 244, 255, .08);
}

.feedback-tree-stage[data-mood="deep"] {
  --tree-primary: rgba(var(--cold-rgb), .84);
  --tree-secondary: rgba(var(--hot-rgb), .72);
  --tree-accent: rgba(var(--hot-deep-rgb), .62);
  --tree-panel: rgba(245, 244, 255, .07);
}

.feedback-tree-stage .feedback-stage-scene {
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.feedback-tree-stage .feedback-tree-aurora,
.feedback-tree-stage .feedback-tree-mist,
.feedback-tree-stage .feedback-tree-field-rings,
.feedback-tree-stage .feedback-tree-starfield {
  position: absolute;
  inset: 0;
}

.feedback-tree-stage .feedback-tree-aurora {
  background:
    radial-gradient(circle at 25% 18%, rgba(var(--hot-rgb), .26), transparent 28%),
    radial-gradient(circle at 78% 22%, rgba(var(--cold-rgb), .26), transparent 32%),
    radial-gradient(circle at 50% 80%, rgba(var(--hot-deep-rgb), .24), transparent 36%);
  mix-blend-mode: screen;
  filter: blur(18px);
  opacity: .9;
  animation: feedbackAuroraFloat 16s ease-in-out infinite alternate;
}

.feedback-tree-stage .feedback-tree-mist {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%, transparent 78%, rgba(255,255,255,.02)),
    radial-gradient(circle at 50% 58%, rgba(255,255,255,.08), transparent 44%);
  opacity: calc(.30 + var(--stage-bloom, .16) * .22);
  filter: blur(18px);
}

.feedback-tree-stage .feedback-tree-field-rings span {
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(86vw, 520px);
  aspect-ratio: 1.18;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  transform: translate(-50%, -50%) scale(calc(.64 + var(--i, 0) * .11));
  opacity: calc(.06 + var(--stage-tension, .12) * .10);
  filter: blur(1px);
}

.feedback-tree-stage .feedback-tree-field-rings span:nth-child(1) { animation: feedbackRingOrbit 18s linear infinite; }
.feedback-tree-stage .feedback-tree-field-rings span:nth-child(2) { animation: feedbackRingOrbit 22s linear infinite reverse; }
.feedback-tree-stage .feedback-tree-field-rings span:nth-child(3) { animation: feedbackRingOrbit 28s linear infinite; }
.feedback-tree-stage .feedback-tree-field-rings span:nth-child(4) { animation: feedbackRingOrbit 34s linear infinite reverse; }

.feedback-tree-stage .feedback-tree-starfield span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  opacity: calc(.18 + var(--stage-tension, .12) * .26);
  box-shadow: 0 0 18px rgba(255,255,255,.32);
  animation: feedbackStarTwinkle 5.8s ease-in-out infinite;
}

.feedback-tree-stage .feedback-tree-starfield span:nth-child(1) { left: 12%; top: 20%; }
.feedback-tree-stage .feedback-tree-starfield span:nth-child(2) { left: 24%; top: 32%; animation-delay: -.7s; }
.feedback-tree-stage .feedback-tree-starfield span:nth-child(3) { left: 34%; top: 18%; animation-delay: -1.3s; }
.feedback-tree-stage .feedback-tree-starfield span:nth-child(4) { left: 66%; top: 16%; animation-delay: -.4s; }
.feedback-tree-stage .feedback-tree-starfield span:nth-child(5) { left: 78%; top: 28%; animation-delay: -1.1s; }
.feedback-tree-stage .feedback-tree-starfield span:nth-child(6) { left: 84%; top: 40%; animation-delay: -.2s; }
.feedback-tree-stage .feedback-tree-starfield span:nth-child(7) { left: 18%; top: 48%; animation-delay: -.9s; }
.feedback-tree-stage .feedback-tree-starfield span:nth-child(8) { left: 72%; top: 52%; animation-delay: -1.5s; }

.feedback-tree-stage .feedback-stage-top,
.feedback-tree-stage .feedback-stage-main {
  position: relative;
  z-index: 2;
}

.feedback-tree-stage .feedback-stage-top {
  gap: 12px;
  align-items: center;
  padding-inline: 2px;
}

.feedback-tree-stage .feedback-level-pill {
  min-width: 92px;
  text-align: center;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}

.feedback-tree-stage .feedback-stage-title strong {
  letter-spacing: -.03em;
}

.feedback-tree-stage .feedback-stage-title span {
  color: var(--tree-text-soft);
}

.feedback-tree-stage .feedback-tree-pad {
  position: relative;
  overflow: hidden;
  min-height: min(82vh, 760px);
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(var(--hot-rgb), .09), transparent 34%),
    linear-gradient(225deg, rgba(var(--cold-rgb), .12), transparent 42%),
    rgba(7, 10, 16, .66);
  box-shadow: 0 32px 84px rgba(0,0,0,.34);
  backdrop-filter: blur(22px) saturate(1.08);
}

.feedback-tree-stage .feedback-pad-surface {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 22%),
    radial-gradient(circle at 50% 64%, rgba(255,255,255,.04), transparent 40%);
  pointer-events: none;
}

.feedback-tree-stage .feedback-tree-status-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.feedback-tree-stage .feedback-stat-card,
.feedback-tree-stage .feedback-stage-badge {
  min-height: 68px;
  border-radius: 18px;
  background: var(--tree-panel);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.feedback-tree-stage .feedback-stat-card {
  padding: 12px 14px;
  display: grid;
  align-content: center;
  gap: 4px;
}

.feedback-tree-stage .feedback-score-kicker {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tree-text-soft);
  font-family: var(--mono);
}

.feedback-tree-stage .feedback-score-value,
.feedback-tree-stage .feedback-task-value {
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1;
  letter-spacing: -.06em;
}

.feedback-tree-stage .feedback-task-value {
  color: rgba(255,255,255,.94);
}

.feedback-tree-stage .feedback-stage-badge {
  display: grid;
  place-items: center;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  color: rgba(255,255,255,.88);
}

.feedback-tree-stage .feedback-tree-wrap {
  position: relative;
  min-height: clamp(360px, 52vh, 480px);
  margin: 14px 0 18px;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 74%, rgba(255,255,255,.05), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
}

.feedback-tree-stage .feedback-tree-ground,
.feedback-tree-stage .feedback-tree-glow,
.feedback-tree-stage .feedback-tree-field,
.feedback-tree-stage .feedback-tree-roots,
.feedback-tree-stage .feedback-tree-crown,
.feedback-tree-stage .feedback-gain,
.feedback-tree-stage .feedback-level-flash,
.feedback-tree-stage .feedback-sparks {
  position: absolute;
}

.feedback-tree-stage .feedback-tree-ground {
  left: 50%;
  bottom: 32px;
  width: min(74vw, 320px);
  height: 74px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10), rgba(255,255,255,.03) 58%, transparent 72%);
  filter: blur(10px);
  opacity: calc(.36 + var(--stage-tension, .1) * .34);
}

.feedback-tree-stage .feedback-tree-glow {
  left: 50%;
  bottom: 66px;
  width: min(72vw, 300px);
  height: min(72vw, 300px);
  transform: translateX(-50%) scale(var(--tree-bloom-scale));
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.11), transparent 32%),
    radial-gradient(circle, var(--tree-primary), transparent 54%);
  opacity: calc(.20 + var(--stage-bloom, .2) * .44 + var(--stage-pool, .08) * .22);
  filter: blur(18px);
  animation: feedbackGlowBreath 6.8s ease-in-out infinite;
}

.feedback-tree-stage .feedback-tree-field {
  inset: 0;
  pointer-events: none;
}

.feedback-tree-stage .feedback-field-ring {
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(74vw, 320px);
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: var(--tree-field-opacity);
}

.feedback-tree-stage .feedback-field-ring.ring-a { animation: feedbackRingOrbit 15s linear infinite; }
.feedback-tree-stage .feedback-field-ring.ring-b { width: min(62vw, 270px); height: 86px; animation: feedbackRingOrbit 11s linear infinite reverse; }
.feedback-tree-stage .feedback-field-ring.ring-c { width: min(88vw, 380px); height: 166px; animation: feedbackRingOrbit 21s linear infinite; }
.feedback-tree-stage .feedback-field-ring.ring-d { width: min(54vw, 230px); height: 70px; animation: feedbackRingOrbit 9s linear infinite reverse; }

.feedback-tree-stage .feedback-tree-roots,
.feedback-tree-stage .feedback-tree-crown {
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  width: min(76vw, 340px);
  height: min(76vw, 410px);
}

.feedback-tree-stage .feedback-tree-roots {
  height: min(40vw, 170px);
  bottom: 24px;
}

.feedback-tree-stage .feedback-root-line,
.feedback-tree-stage .feedback-tree-trunk,
.feedback-tree-stage .feedback-branch,
.feedback-tree-stage .feedback-fractal {
  position: absolute;
  left: 50%;
  bottom: 0;
  border-radius: 999px;
  transform-origin: center bottom;
  background: linear-gradient(180deg, rgba(255,255,255,.98), var(--tree-secondary) 28%, var(--tree-primary) 76%, transparent 100%);
  box-shadow: 0 0 20px rgba(255,255,255,.10), 0 0 28px rgba(0,0,0,.18);
}

.feedback-tree-stage .feedback-tree-seed,
.feedback-tree-stage .feedback-leaf,
.feedback-tree-stage .feedback-crown-aura,
.feedback-tree-stage .feedback-crown-halo,
.feedback-tree-stage .feedback-life-field,
.feedback-tree-stage .feedback-star {
  position: absolute;
}

.feedback-tree-stage .feedback-tree-seed {
  left: 50%;
  bottom: 34px;
  width: 34px;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 46% 54% 50% 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.98), var(--tree-secondary) 40%, var(--tree-primary) 75%, rgba(var(--hot-deep-rgb), .65));
  box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset, 0 0 22px var(--tree-primary), 0 10px 28px rgba(0,0,0,.26);
  animation: feedbackSeedBreath 4.8s ease-in-out infinite;
}

.feedback-tree-stage .feedback-tree-trunk {
  width: 16px;
  height: 180px;
  bottom: 48px;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 14px rgba(255,255,255,.18));
}

.feedback-tree-stage .branch-a { width: 12px; height: 118px; bottom: 140px; transform: translateX(-50%) rotate(-40deg); }
.feedback-tree-stage .branch-b { width: 12px; height: 118px; bottom: 140px; transform: translateX(-50%) rotate(40deg); }
.feedback-tree-stage .branch-c { width: 10px; height: 92px; bottom: 208px; transform: translateX(-50%) rotate(-18deg); }
.feedback-tree-stage .branch-d { width: 10px; height: 92px; bottom: 208px; transform: translateX(-50%) rotate(18deg); }
.feedback-tree-stage .branch-e { width: 9px; height: 80px; bottom: 246px; transform: translateX(-50%) rotate(-56deg); }
.feedback-tree-stage .branch-f { width: 9px; height: 80px; bottom: 246px; transform: translateX(-50%) rotate(56deg); }

.feedback-tree-stage .feedback-leaf {
  width: 48px;
  height: 26px;
  border-radius: 50% 60% 50% 60%;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.12));
  box-shadow: 0 0 26px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}

.feedback-tree-stage .leaf-a { left: 74px; bottom: 224px; transform: rotate(-28deg); }
.feedback-tree-stage .leaf-b { right: 74px; bottom: 224px; transform: rotate(28deg); }
.feedback-tree-stage .leaf-c { left: 88px; bottom: 274px; transform: rotate(-6deg); }
.feedback-tree-stage .leaf-d { right: 88px; bottom: 274px; transform: rotate(6deg); }
.feedback-tree-stage .leaf-e { left: 112px; bottom: 314px; transform: rotate(-34deg) scale(.86); }
.feedback-tree-stage .leaf-f { right: 112px; bottom: 314px; transform: rotate(34deg) scale(.86); }
.feedback-tree-stage .leaf-g { left: 136px; bottom: 336px; transform: rotate(-12deg) scale(.72); }
.feedback-tree-stage .leaf-h { right: 136px; bottom: 336px; transform: rotate(12deg) scale(.72); }

.feedback-tree-stage .feedback-fractal {
  width: 6px;
  height: 92px;
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.14) 35%, var(--tree-accent) 82%, transparent);
}

.feedback-tree-stage .fractal-a { bottom: 252px; transform: translateX(-50%) rotate(-76deg); }
.feedback-tree-stage .fractal-b { bottom: 252px; transform: translateX(-50%) rotate(76deg); }
.feedback-tree-stage .fractal-c { bottom: 312px; transform: translateX(-50%) rotate(-30deg); }
.feedback-tree-stage .fractal-d { bottom: 312px; transform: translateX(-50%) rotate(30deg); }

.feedback-tree-stage .feedback-crown-aura,
.feedback-tree-stage .feedback-crown-halo,
.feedback-tree-stage .feedback-life-field {
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
}

.feedback-tree-stage .feedback-crown-aura {
  bottom: 142px;
  width: 188px;
  height: 188px;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 60%);
  border: 1px solid rgba(255,255,255,.08);
  filter: blur(6px);
  animation: feedbackGlowBreath 7.2s ease-in-out infinite reverse;
}

.feedback-tree-stage .feedback-crown-halo {
  bottom: 122px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: feedbackRingOrbit 18s linear infinite reverse;
}

.feedback-tree-stage .feedback-life-field {
  bottom: 84px;
  width: 312px;
  height: 312px;
  background:
    radial-gradient(circle, rgba(255,255,255,.06), transparent 44%),
    radial-gradient(circle, rgba(var(--hot-rgb), .10), transparent 66%),
    radial-gradient(circle, rgba(var(--cold-rgb), .10), transparent 72%);
  filter: blur(10px);
  opacity: calc(.36 + var(--stage-bloom, .2) * .34);
}

.feedback-tree-stage .feedback-star {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 18px rgba(255,255,255,.34);
  animation: feedbackStarTwinkle 5.2s ease-in-out infinite;
}

.feedback-tree-stage .star-a { left: 66px; bottom: 286px; }
.feedback-tree-stage .star-b { left: 88px; bottom: 348px; animation-delay: -.8s; }
.feedback-tree-stage .star-c { right: 66px; bottom: 286px; animation-delay: -1.2s; }
.feedback-tree-stage .star-d { right: 88px; bottom: 348px; animation-delay: -.3s; }
.feedback-tree-stage .star-e { left: 152px; bottom: 372px; animation-delay: -.9s; }
.feedback-tree-stage .star-f { right: 152px; bottom: 372px; animation-delay: -1.4s; }

.feedback-tree-stage .root-a { width: 8px; height: 74px; transform: translateX(-50%) rotate(-62deg); }
.feedback-tree-stage .root-b { width: 8px; height: 82px; transform: translateX(-50%) rotate(-28deg); }
.feedback-tree-stage .root-c { width: 8px; height: 82px; transform: translateX(-50%) rotate(28deg); }
.feedback-tree-stage .root-d { width: 8px; height: 74px; transform: translateX(-50%) rotate(62deg); }
.feedback-tree-stage .root-e { width: 6px; height: 96px; transform: translateX(-50%) rotate(0deg); }

.feedback-tree-stage .feedback-gain,
.feedback-tree-stage .feedback-level-flash {
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
}

.feedback-tree-stage .feedback-gain {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.98);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
}

.feedback-tree-stage .feedback-gain.empty {
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.08);
}

.feedback-tree-stage .feedback-level-flash {
  top: 28%;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.94);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.feedback-tree-stage .feedback-sparks {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.feedback-tree-stage .feedback-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.98), var(--tree-primary));
  box-shadow: 0 0 22px rgba(255,255,255,.28);
  animation: feedbackSparkFly var(--spark-life, 900ms) ease-out forwards;
}

.feedback-tree-stage .feedback-spark-burst {
  width: 10px;
  height: 10px;
}

.feedback-tree-stage .feedback-progress-panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  padding: 14px 16px 2px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.feedback-tree-stage .feedback-progress-meta,
.feedback-tree-stage .feedback-task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--tree-text-soft);
}

.feedback-tree-stage .feedback-progress-meta span:first-child,
.feedback-tree-stage .feedback-task-meta span:first-child {
  flex: 1 1 auto;
}

.feedback-tree-stage .feedback-progress-meta span:last-child,
.feedback-tree-stage .feedback-task-meta span:last-child {
  white-space: nowrap;
  color: rgba(255,255,255,.92);
  font-family: var(--mono);
}

.feedback-tree-stage .feedback-progress-track {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}

.feedback-tree-stage .feedback-progress-fill {
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--tree-secondary), rgba(255,255,255,.98), var(--tree-primary));
  box-shadow: 0 0 24px rgba(255,255,255,.16);
}

.feedback-tree-stage #feedbackOrb {
  filter: drop-shadow(0 24px 42px rgba(0,0,0,.26));
  transition: transform .85s cubic-bezier(.2,.8,.2,1), filter .8s ease;
}

.feedback-tree-stage #feedbackOrb.pulse-medium {
  animation: feedbackTreePulseMedium .88s ease;
}

.feedback-tree-stage #feedbackOrb.pulse-high {
  animation: feedbackTreePulseHigh 1.06s cubic-bezier(.2,.88,.18,1);
}

.feedback-tree-stage #feedbackOrb.pulse-empty {
  animation: feedbackTreePulseEmpty .58s ease;
}

.feedback-tree-stage.level-up #feedbackOrb {
  filter: drop-shadow(0 0 24px rgba(255,255,255,.24)) drop-shadow(0 0 48px var(--tree-primary));
}

.feedback-tree-stage .reveal-2,
.feedback-tree-stage .reveal-3,
.feedback-tree-stage .reveal-4,
.feedback-tree-stage .reveal-5,
.feedback-tree-stage .reveal-6,
.feedback-tree-stage .reveal-7,
.feedback-tree-stage .reveal-8,
.feedback-tree-stage .reveal-9 {
  opacity: 0;
  filter: blur(12px);
  transition: opacity .72s ease, filter .86s ease;
}

.feedback-tree-stage[data-tier="2"] :is(.reveal-2),
.feedback-tree-stage[data-tier="3"] :is(.reveal-2, .reveal-3),
.feedback-tree-stage[data-tier="4"] :is(.reveal-2, .reveal-3, .reveal-4),
.feedback-tree-stage[data-tier="5"] :is(.reveal-2, .reveal-3, .reveal-4, .reveal-5),
.feedback-tree-stage[data-tier="6"] :is(.reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6),
.feedback-tree-stage[data-tier="7"] :is(.reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6, .reveal-7),
.feedback-tree-stage[data-tier="8"] :is(.reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6, .reveal-7, .reveal-8),
.feedback-tree-stage[data-tier="9"] :is(.reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6, .reveal-7, .reveal-8, .reveal-9),
.feedback-tree-stage[data-complete="true"] :is(.reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6, .reveal-7, .reveal-8, .reveal-9) {
  opacity: 1;
  filter: blur(0);
}

.feedback-tree-stage[data-complete="true"] .feedback-life-field,
.feedback-tree-stage[data-complete="true"] .feedback-crown-halo,
.feedback-tree-stage[data-complete="true"] .feedback-tree-glow {
  opacity: .82;
}

@keyframes feedbackAuroraFloat {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

@keyframes feedbackRingOrbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes feedbackGlowBreath {
  0%, 100% { transform: translateX(-50%) scale(.94); opacity: .32; }
  50% { transform: translateX(-50%) scale(1.05); opacity: .56; }
}

@keyframes feedbackSeedBreath {
  0%, 100% { transform: translateX(-50%) scale(.96); }
  50% { transform: translateX(-50%) scale(1.06); }
}

@keyframes feedbackStarTwinkle {
  0%, 100% { opacity: .18; transform: scale(.8); }
  48% { opacity: .82; transform: scale(1.16); }
}

@keyframes feedbackTreePulseMedium {
  0% { transform: translateX(-50%) scale(1); }
  35% { transform: translateX(-50%) scale(1.04) rotate(calc(var(--stage-sway, 0deg) * .16)); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes feedbackTreePulseHigh {
  0% { transform: translateX(-50%) scale(1); }
  26% { transform: translateX(-50%) scale(1.1) rotate(calc(var(--stage-sway, 0deg) * .34)); }
  62% { transform: translateX(-50%) scale(.98); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes feedbackTreePulseEmpty {
  0% { transform: translateX(-50%) scale(1); opacity: .96; }
  50% { transform: translateX(-50%) scale(.985); opacity: .78; }
  100% { transform: translateX(-50%) scale(1); opacity: .96; }
}

@keyframes feedbackSparkFly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.32);
  }
  12% {
    opacity: .92;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), var(--dy), 0) scale(var(--spark-scale, 1));
  }
}

@media (max-width: 430px) {
  .feedback-tree-stage .feedback-tree-status-row {
    grid-template-columns: 1fr 1fr;
  }

  .feedback-tree-stage .feedback-stage-badge {
    grid-column: 1 / -1;
  }

  .feedback-tree-stage .feedback-tree-wrap {
    min-height: 344px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-tree-stage .feedback-tree-aurora,
  .feedback-tree-stage .feedback-tree-field-rings span,
  .feedback-tree-stage .feedback-tree-starfield span,
  .feedback-tree-stage .feedback-tree-glow,
  .feedback-tree-stage .feedback-tree-seed,
  .feedback-tree-stage .feedback-field-ring,
  .feedback-tree-stage #feedbackOrb,
  .feedback-tree-stage .feedback-spark {
    animation: none !important;
  }
}

/* === vA visual reset: reference-driven abstract art tree === */
.feedback-tree-stage-va {
  --va-bg: #080706;
  --va-paper: rgba(220, 178, 105, .14);
  --va-ink: rgba(10, 10, 10, .92);
  --va-line: rgba(238, 205, 146, .82);
  --va-line-soft: rgba(238, 205, 146, .34);
  --va-accent: rgba(255, 116, 49, .86);
  --va-tile: rgba(221, 172, 92, .74);
  --va-tile-2: rgba(244, 204, 130, .42);
  --va-text: rgba(255, 244, 224, .94);
  --va-muted: rgba(255, 235, 205, .62);
  --va-tray: rgba(5, 5, 4, .56);
  --va-tray-line: rgba(235, 190, 116, .22);
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: max(18px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  gap: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 32%, rgba(var(--hot-rgb), .18), transparent 28%),
    radial-gradient(circle at 20% 80%, rgba(var(--cold-rgb), .14), transparent 30%),
    linear-gradient(180deg, #090806 0%, #050505 100%);
}

.feedback-tree-stage-va[data-mood="warm"] {
  --va-bg: #070604;
  --va-paper: rgba(210, 168, 95, .16);
  --va-ink: rgba(9, 8, 7, .95);
  --va-line: rgba(232, 190, 115, .90);
  --va-line-soft: rgba(232, 190, 115, .38);
  --va-accent: rgba(255, 98, 38, .94);
  --va-tile: rgba(221, 166, 82, .78);
  --va-tile-2: rgba(255, 211, 135, .46);
  --va-text: rgba(255, 241, 214, .96);
  --va-muted: rgba(255, 229, 191, .64);
}

.feedback-tree-stage-va[data-mood="cool"] {
  --va-bg: #f6f7f5;
  --va-paper: rgba(67, 108, 159, .08);
  --va-ink: rgba(75, 87, 92, .72);
  --va-line: rgba(19, 84, 152, .76);
  --va-line-soft: rgba(38, 104, 168, .24);
  --va-accent: rgba(104, 176, 219, .64);
  --va-tile: rgba(197, 219, 228, .76);
  --va-tile-2: rgba(40, 87, 156, .42);
  --va-text: rgba(29, 42, 52, .92);
  --va-muted: rgba(40, 55, 65, .58);
  --va-tray: rgba(255, 255, 255, .68);
  --va-tray-line: rgba(35, 88, 144, .16);
  background:
    radial-gradient(circle at 50% 35%, rgba(83, 149, 205, .14), transparent 33%),
    linear-gradient(180deg, #fbfbfa 0%, #eef2f3 100%);
}

.feedback-tree-stage-va[data-mood="deep"] {
  --va-bg: #091225;
  --va-paper: rgba(68, 210, 211, .09);
  --va-ink: rgba(6, 12, 24, .90);
  --va-line: rgba(81, 220, 213, .86);
  --va-line-soft: rgba(81, 220, 213, .28);
  --va-accent: rgba(238, 174, 93, .86);
  --va-tile: rgba(36, 188, 190, .54);
  --va-tile-2: rgba(245, 178, 94, .38);
  --va-text: rgba(224, 251, 248, .95);
  --va-muted: rgba(190, 235, 234, .58);
  --va-tray: rgba(2, 10, 22, .56);
  --va-tray-line: rgba(89, 225, 218, .18);
  background:
    radial-gradient(circle at 50% 36%, rgba(54, 204, 211, .16), transparent 31%),
    radial-gradient(circle at 76% 16%, rgba(245, 178, 94, .08), transparent 24%),
    linear-gradient(180deg, #0b1730 0%, #05070e 100%);
}

.feedback-tree-stage-va .feedback-stage-scene,
.feedback-tree-stage-va .feedback-va-scene,
.feedback-tree-stage-va .feedback-va-paper-grain,
.feedback-tree-stage-va .feedback-va-clouds,
.feedback-tree-stage-va .feedback-va-constellation,
.feedback-tree-stage-va .feedback-va-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.feedback-tree-stage-va .feedback-va-paper-grain {
  background:
    radial-gradient(circle at 18% 16%, var(--va-paper), transparent 30%),
    radial-gradient(circle at 82% 18%, var(--va-paper), transparent 28%),
    radial-gradient(circle at 46% 74%, var(--va-paper), transparent 34%),
    repeating-linear-gradient(105deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
  opacity: .9;
  mix-blend-mode: screen;
}

.feedback-tree-stage-va .feedback-va-clouds {
  background:
    radial-gradient(ellipse at 18% 32%, var(--va-line-soft), transparent 22%),
    radial-gradient(ellipse at 82% 30%, var(--va-line-soft), transparent 20%),
    radial-gradient(ellipse at 50% 12%, rgba(255,255,255,.05), transparent 18%);
  filter: blur(18px);
  opacity: calc(.24 + var(--stage-tension, .08) * .28);
  animation: feedbackVaCloud 18s ease-in-out infinite alternate;
}

.feedback-tree-stage-va .feedback-va-constellation {
  background:
    linear-gradient(90deg, transparent 49.7%, var(--va-line-soft) 49.9% 50.1%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, var(--va-line-soft) 49.9% 50.1%, transparent 50.3%);
  background-size: 160px 160px;
  opacity: .16;
}

.feedback-tree-stage-va .feedback-va-field {
  opacity: calc(.10 + var(--stage-bloom, .1) * .18);
  background: radial-gradient(circle at 50% 54%, transparent 35%, var(--va-line-soft) 36%, transparent 37%, transparent 48%, var(--va-line-soft) 49%, transparent 50%);
}

.feedback-tree-stage-va > *:not(.feedback-stage-scene) { position: relative; z-index: 2; }

.feedback-tree-stage-va .feedback-va-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 3px 0;
  color: var(--va-text);
}

.feedback-tree-stage-va .feedback-va-eyebrow {
  color: var(--va-muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.feedback-tree-stage-va .feedback-va-head h2 {
  margin: 0;
  font-size: clamp(24px, 7.2vw, 34px);
  line-height: 1;
  letter-spacing: -.065em;
  font-weight: 560;
}

.feedback-tree-stage-va .feedback-va-head p {
  margin: 8px 0 0;
  color: var(--va-muted);
  font-size: 13px;
}

.feedback-tree-stage-va .feedback-va-seal {
  min-width: 64px;
  min-height: 64px;
  border: 1px solid var(--va-tray-line);
  background: var(--va-tray);
  color: var(--va-text);
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.feedback-tree-stage-va .feedback-va-main {
  min-height: 0;
  display: grid;
  align-items: stretch;
}

.feedback-tree-stage-va .feedback-va-pad {
  min-height: 0;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.feedback-tree-stage-va .feedback-va-artboard {
  position: relative;
  height: 100%;
  min-height: 430px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 58%, rgba(255,255,255,.035), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.004));
  touch-action: pan-y;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.26));
}

.feedback-tree-stage-va .feedback-va-tree {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.feedback-tree-stage-va .feedback-va-tree path,
.feedback-tree-stage-va .feedback-va-tree ellipse,
.feedback-tree-stage-va .feedback-va-tree circle {
  vector-effect: non-scaling-stroke;
}

.feedback-tree-stage-va .va-background path {
  fill: none;
  stroke: var(--va-line-soft);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: .55;
}

.feedback-tree-stage-va .va-roots path {
  fill: none;
  stroke: var(--va-line);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .72;
}

.feedback-tree-stage-va .va-seed ellipse {
  fill: var(--va-accent);
  opacity: .9;
  filter: url(#feedbackVaGlow);
}

.feedback-tree-stage-va .va-seed path {
  fill: none;
  stroke: var(--va-text);
  stroke-width: 1.3;
  opacity: .78;
}

.feedback-tree-stage-va .va-trunk-wide {
  fill: none;
  stroke: var(--va-ink);
  stroke-width: 28;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feedback-tree-stage-va[data-mood="cool"] .va-trunk-wide {
  stroke: rgba(112, 122, 130, .34);
}

.feedback-tree-stage-va[data-mood="deep"] .va-trunk-wide {
  stroke: rgba(5, 15, 30, .86);
}

.feedback-tree-stage-va .va-trunk-line,
.feedback-tree-stage-va .va-fiber {
  fill: none;
  stroke: url(#feedbackVaFlow);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#feedbackVaGlow);
}

.feedback-tree-stage-va .va-trunk-line.inner { stroke-width: 2.1; opacity: .75; }
.feedback-tree-stage-va .va-fiber { stroke-width: 1.6; opacity: .74; }

.feedback-tree-stage-va .va-main-branches path {
  fill: none;
  stroke: var(--va-ink);
  stroke-width: 17;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feedback-tree-stage-va .va-secondary-branches path,
.feedback-tree-stage-va .va-fine-branches path {
  fill: none;
  stroke: var(--va-line);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#feedbackVaGlow);
}

.feedback-tree-stage-va .va-secondary-branches path { stroke-width: 4.2; opacity: .86; }
.feedback-tree-stage-va .va-fine-branches path { stroke-width: 1.7; opacity: .72; }

.feedback-tree-stage-va[data-mood="cool"] .va-main-branches path { stroke: rgba(42, 52, 58, .48); }
.feedback-tree-stage-va[data-mood="deep"] .va-main-branches path { stroke: rgba(2, 8, 18, .88); }

.feedback-tree-stage-va .va-tile {
  fill: var(--va-tile);
  stroke: var(--va-line);
  stroke-width: 1.2;
  opacity: .9;
  filter: drop-shadow(0 5px 14px rgba(0,0,0,.18));
}

.feedback-tree-stage-va .va-tile:nth-child(even) { fill: var(--va-tile-2); }
.feedback-tree-stage-va .va-petals circle { fill: var(--va-accent); opacity: .75; filter: url(#feedbackVaGlow); }
.feedback-tree-stage-va .va-grad-a { stop-color: var(--va-line); }
.feedback-tree-stage-va .va-grad-b { stop-color: var(--va-accent); }
.feedback-tree-stage-va .va-grad-c { stop-color: var(--va-line); }

.feedback-tree-stage-va .feedback-va-life-field {
  position: absolute;
  inset: 10% 4%;
  border-radius: 50%;
  border: 1px solid var(--va-line-soft);
  opacity: calc(.14 + var(--stage-bloom, .12) * .20);
  filter: blur(.3px);
}

.feedback-tree-stage-va .feedback-va-bottom {
  margin-top: 2px;
  border: 1px solid var(--va-tray-line);
  border-radius: 22px;
  background: var(--va-tray);
  color: var(--va-text);
  padding: 13px 14px 12px;
  display: grid;
  gap: 10px;
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
}

.feedback-tree-stage-va .feedback-va-progress-copy,
.feedback-tree-stage-va .feedback-task-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  color: var(--va-muted);
  font-size: 12px;
  line-height: 1.45;
}

.feedback-tree-stage-va .feedback-va-progress-copy strong,
.feedback-tree-stage-va .feedback-task-meta span:last-child {
  color: var(--va-text);
  font-family: var(--mono);
  white-space: nowrap;
}

.feedback-tree-stage-va .feedback-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}

.feedback-tree-stage-va .feedback-progress-fill {
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--va-line), var(--va-accent), var(--va-line));
  box-shadow: 0 0 22px var(--va-accent);
}

.feedback-tree-stage-va .feedback-va-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.feedback-tree-stage-va .feedback-va-stats div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.075);
}

.feedback-tree-stage-va .feedback-va-stats span {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--va-muted);
  font-family: var(--mono);
}

.feedback-tree-stage-va .feedback-va-stats strong {
  font-size: 20px;
  letter-spacing: -.04em;
  color: var(--va-text);
}

.feedback-tree-stage-va .feedback-gain,
.feedback-tree-stage-va .feedback-level-flash {
  position: absolute;
  left: 50%;
  z-index: 6;
  pointer-events: none;
  color: var(--va-text);
  border: 1px solid var(--va-tray-line);
  background: var(--va-tray);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.feedback-tree-stage-va .feedback-gain {
  top: 56%;
  transform: translate(-50%, -50%);
  padding: 9px 15px;
  border-radius: 999px;
}

.feedback-tree-stage-va .feedback-level-flash {
  top: 18%;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  border-radius: 999px;
  letter-spacing: .14em;
  font-size: 12px;
}

.feedback-tree-stage-va .feedback-sparks {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
}

.feedback-tree-stage-va .feedback-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--va-accent);
  box-shadow: 0 0 18px var(--va-accent);
  animation: feedbackSparkFly var(--spark-life, 900ms) ease-out forwards;
}

.feedback-tree-stage-va .reveal-2,
.feedback-tree-stage-va .reveal-3,
.feedback-tree-stage-va .reveal-4,
.feedback-tree-stage-va .reveal-5,
.feedback-tree-stage-va .reveal-6,
.feedback-tree-stage-va .reveal-7,
.feedback-tree-stage-va .reveal-8,
.feedback-tree-stage-va .reveal-9 {
  opacity: 0;
  transition: opacity .55s ease, filter .65s ease;
  filter: blur(5px);
}

.feedback-tree-stage-va[data-tier="2"] :is(.reveal-2),
.feedback-tree-stage-va[data-tier="3"] :is(.reveal-2, .reveal-3),
.feedback-tree-stage-va[data-tier="4"] :is(.reveal-2, .reveal-3, .reveal-4),
.feedback-tree-stage-va[data-tier="5"] :is(.reveal-2, .reveal-3, .reveal-4, .reveal-5),
.feedback-tree-stage-va[data-tier="6"] :is(.reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6),
.feedback-tree-stage-va[data-tier="7"] :is(.reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6, .reveal-7),
.feedback-tree-stage-va[data-tier="8"] :is(.reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6, .reveal-7, .reveal-8),
.feedback-tree-stage-va[data-tier="9"] :is(.reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6, .reveal-7, .reveal-8, .reveal-9),
.feedback-tree-stage-va[data-complete="true"] :is(.reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6, .reveal-7, .reveal-8, .reveal-9) {
  opacity: 1;
  filter: blur(0);
}

.feedback-tree-stage-va #feedbackOrb.pulse-medium .va-trunk-line,
.feedback-tree-stage-va #feedbackOrb.pulse-high .va-trunk-line,
.feedback-tree-stage-va.level-up .va-trunk-line {
  animation: feedbackVaFlowPulse .86s ease;
}

.feedback-tree-stage-va #feedbackOrb.pulse-high .va-tile,
.feedback-tree-stage-va.level-up .va-tile {
  animation: feedbackVaTileWake 1.05s ease;
}

.feedback-tree-stage-va.level-up .feedback-va-artboard {
  animation: feedbackVaBoardWake 1.1s ease;
}

@keyframes feedbackVaCloud {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1%, 0) scale(1.06); }
}

@keyframes feedbackVaFlowPulse {
  0%, 100% { stroke-width: 3.2; opacity: 1; }
  42% { stroke-width: 5.4; opacity: .95; }
}

@keyframes feedbackVaTileWake {
  0%, 100% { transform: translateY(0); opacity: .9; }
  44% { transform: translateY(-4px); opacity: 1; }
}

@keyframes feedbackVaBoardWake {
  0%, 100% { filter: drop-shadow(0 24px 60px rgba(0,0,0,.26)); }
  42% { filter: drop-shadow(0 18px 50px var(--va-accent)); }
}

@media (max-height: 740px) {
  .feedback-tree-stage-va { gap: 8px; }
  .feedback-tree-stage-va .feedback-va-head h2 { font-size: 24px; }
  .feedback-tree-stage-va .feedback-va-artboard { min-height: 370px; }
  .feedback-tree-stage-va .feedback-va-bottom { padding: 11px 12px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-tree-stage-va *,
  .feedback-tree-stage-va *::before,
  .feedback-tree-stage-va *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}