: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;
    }


    /* Manual view switch link for desktop/mobile fallback. */
    .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);
    }


    .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; }
    }