.lock-panel { display: grid; place-items: center; padding: 52px 18px; }
    .lock-card { max-width: 520px; text-align: center; background: var(--panel-strong); border: 1px solid var(--line); border-radius: 12px; padding: 38px 30px; box-shadow: var(--shadow); }
    .lock-emoji { font-size: 2.3rem; display: block; margin-bottom: 6px; }
    .lock-card h2 { margin: 4px 0 8px; }
    .lock-blurb { color: var(--soft); margin: 0 0 6px; }
    .lock-sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 22px; }
    .lock-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .lock-peek { margin: 0 auto 18px; max-width: 360px; text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg-soft); }
    .lock-peek-title { margin: 0 0 8px; font-size: 0.72rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
    .lock-peek-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
    .lock-peek-list li { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; font-weight: 700; color: var(--soft); }
    .lock-peek-list li em { margin-left: auto; font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
    .lock-peek-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(176, 112, 31, 0.12); color: var(--teal-deep); font-size: 0.7rem; font-weight: 850; flex: none; }
    body[data-theme="dark"] .lock-peek { background: rgba(255, 255, 255, 0.04); }
    /* Free first-lesson preview banner across the top of a previewed tool. */
    .preview-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid rgba(176, 112, 31, 0.4); border-radius: var(--radius); background: linear-gradient(120deg, rgba(176, 112, 31, 0.1), transparent 65%), var(--panel-strong); }
    .preview-banner-copy strong { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 0.94rem; }
    .preview-banner-copy p { margin: 4px 0 0; color: var(--soft); font-size: 0.84rem; max-width: 560px; }
    .preview-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }body[data-theme="dark"] .preview-banner { background: linear-gradient(120deg, rgba(176, 112, 31, 0.1), transparent 65%), var(--panel-strong); }
    .depth-lock { display: grid; gap: 12px; justify-items: start; padding: 6px 2px; }
    .depth-lock .lock-actions { justify-content: flex-start; }
    .depth-lock-line { margin: 0; color: var(--soft); font-size: 0.9rem; line-height: 1.55; max-width: 560px; }
    .nav-lock { font-size: 0.78em; opacity: 0.8; }
    .ear-view-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    /* Welcome / onboarding modal */
    .welcome-modal { max-width: 680px; }
    .welcome-modal > .auth-modal-head { margin-bottom: 46px; }   /* clear air between the header line and the question cards (sticky head eats ~20px of flow space) */
    .welcome-step > :first-child { margin-top: 0; }
    .welcome-step { padding-top: 2px; }
    .welcome-lead { margin: 2px 0 14px; max-width: 590px; }
    .welcome-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0 0 14px; }
    .welcome-feature { display: grid; grid-template-columns: 32px 1fr; gap: 9px; align-items: start; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); }
    .welcome-feature-icon { font-size: 1.1rem; line-height: 1.25; }
    .welcome-feature strong { display: block; font-size: 0.9rem; color: var(--ink); }
    /* Groove Deck gets visual emphasis as the fastest way to start (P14). */
    .welcome-feature.is-primary { grid-column: 1 / -1; border-color: var(--teal); background: linear-gradient(135deg, rgba(176,112,31,0.10), rgba(176,112,31,0.03)); }
    .welcome-feature-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 0.6rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: middle; line-height: 1.5; }
    /* Only the description line is muted/block — NOT the "Start here" pill (a span inside <strong>). */
    .welcome-feature > div > span { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
    .welcome-note { font-size: 0.82rem; color: var(--soft); background: rgba(176, 112, 31, 0.08); border-radius: 8px; padding: 11px 12px; margin: 0 0 14px; line-height: 1.45; }
    .welcome-question { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-strong); }
    .welcome-question-copy { display: grid; gap: 2px; }
    .welcome-question-copy strong { color: var(--ink); font-size: 0.92rem; }
    .welcome-question-copy span { color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
    .welcome-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
    .welcome-chip { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 0.86rem; padding: 8px 14px; cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
    .welcome-chip:hover { border-color: var(--teal); }
    .welcome-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
    .welcome-firstcard { border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius); background: var(--panel-strong); padding: 14px 16px; display: grid; gap: 6px; margin-bottom: 12px; }
    .welcome-fc-name { font-size: 1.25rem; font-weight: 850; color: var(--ink); }
    .welcome-fc-meta { color: var(--muted); font-size: 0.86rem; }
    .welcome-fc-chords { font-family: ui-monospace, Menlo, monospace; font-weight: 800; color: var(--ink); }
    .welcome-fc-goal { color: var(--soft); font-size: 0.9rem; }
    .welcome-fc-idea { color: var(--soft); font-size: 0.86rem; line-height: 1.45; border-top: 1px dashed var(--line); padding-top: 8px; }
    .welcome-fc-idea em { font-style: normal; font-weight: 850; color: var(--teal-deep); }
    body[data-theme="dark"] .welcome-chip { background: var(--panel-strong); }
    body[data-theme="dark"] .welcome-chip.is-on { background: #e7c266; color: #14110c; border-color: #e7c266; }
    body[data-theme="dark"] .welcome-fc-idea em { color: #e7c266; }@media (max-width: 600px) { .welcome-features { grid-template-columns: 1fr; } }
    /* Welcome wizard (stepped onboarding) */
    /* Dots live INSIDE the sticky modal head so they can never scroll under it (mobile bug). */
    .welcome-progress { display: flex; gap: 6px; justify-content: flex-start; margin: 10px 0 0; }
    .welcome-heard-input { margin-top: 10px; }
    .welcome-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background 0.2s ease, transform 0.2s ease; }
    .welcome-dot.is-done { background: var(--teal); }
    .welcome-dot.is-active { background: var(--teal-deep); transform: scale(1.3); }
    .welcome-step { animation: welcomeStepIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
    @keyframes welcomeStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    .welcome-nav { display: flex; gap: 10px; margin-top: 18px; }
    .welcome-nav .primary-button { flex: 1; }
    .welcome-skip-link { display: block; width: 100%; margin-top: 12px; padding: 6px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.86rem; text-decoration: underline; cursor: pointer; }
    .welcome-skip-link:hover { color: var(--ink); }@media (prefers-reduced-motion: reduce) { .welcome-step { animation: none; } }
    /* Free vs Premium T-chart */
    .tchart { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0; }
    .tchart.tchart-solo { grid-template-columns: minmax(0, 460px); justify-content: center; }
    .tchart-col { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--bg-soft); }
    .tchart-col.is-current { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
    .tchart-col.is-premium { background: linear-gradient(180deg, rgba(176, 112, 31, 0.07), rgba(86, 104, 138, 0.05)); }
    .tchart-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
    .tchart-plan { font-weight: 850; font-size: 1rem; color: var(--ink); }
    .tchart-here { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; background: var(--teal-deep); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
    .tchart-trial { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-deep); background: rgba(176, 112, 31, 0.16); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
    .tchart-price { font-size: 0.86rem; font-weight: 800; color: var(--soft); margin-bottom: 10px; }
    .tchart-price span { color: var(--muted); font-weight: 600; font-size: 0.78rem; }
    .tchart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
    .tchart-list li { display: grid; grid-template-columns: 16px 1fr; gap: 7px; font-size: 0.8rem; line-height: 1.35; color: var(--ink); }
    .tchart-list li.is-no { color: var(--muted); }
    .tchart-mark { font-weight: 800; }
    .tchart-list li.is-yes .tchart-mark { color: var(--teal-deep); }
    .tchart-list li.is-no .tchart-mark { color: var(--rose); }
    .welcome-trial-btn { background: transparent; border: 0; color: var(--teal-deep); font-weight: 800; font-size: 0.9rem; cursor: pointer; padding: 6px; }
    .welcome-trial-btn:hover { text-decoration: underline; }
    .welcome-plan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .welcome-plan-actions > button { flex: 1 1 auto; min-width: 150px; justify-content: center; text-align: center; }
    .welcome-plan-actions .welcome-trial-btn { border: 1px solid var(--teal-deep); border-radius: 999px; padding: 10px 14px; font-size: 0.85rem; font-weight: 800; }
    .welcome-plan-actions .welcome-trial-btn:hover { text-decoration: none; background: rgba(176, 112, 31, 0.08); }@media (max-width: 600px) { .tchart { grid-template-columns: 1fr; } }
    /* Show / hide password toggle */
    .pw-wrap { position: relative; display: block; }
    .pw-wrap > input { width: 100%; padding-right: 64px; }
    .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--teal-deep); font-size: 0.78rem; font-weight: 700; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
    .pw-toggle:hover { background: rgba(176, 112, 31, 0.08); }
    /* Groove builder + My Grooves */
    .build-lock { text-align: center; display: grid; gap: 8px; padding: 24px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
    .build-lock .lock-emoji { font-size: 1.8rem; }
    .build-lock strong { font-size: 1.02rem; }
    .mygrooves { display: grid; gap: 8px; margin-top: 8px; }
    .mygroove-item { display: flex; gap: 8px; align-items: stretch; }
    .mygroove-load { flex: 1; text-align: left; display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; transition: border-color 0.15s ease; }
    .mygroove-load strong { color: var(--ink); font-size: 0.92rem; }
    .mygroove-load span { color: var(--muted); font-size: 0.76rem; }
    .mygroove-load:hover { border-color: var(--teal); }
    .mygroove-del, .mygroove-edit { border: 1px solid var(--line); background: #fff; border-radius: var(--radius); color: var(--muted); cursor: pointer; padding: 0 11px; display: grid; place-items: center; }
    .mygroove-del:hover { color: var(--rose); border-color: var(--rose); }
    .mygroove-edit:hover { color: var(--teal-deep); border-color: var(--teal); }
    .mygroove-item.is-editing .mygroove-load { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(176, 112, 31, 0.2); }
    .build-editing-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 8px; background: rgba(176, 112, 31, 0.1); border-left: 3px solid var(--teal); font-size: 0.85rem; color: var(--soft); }
    body[data-theme="dark"] .mygroove-load, body[data-theme="dark"] .mygroove-del, body[data-theme="dark"] .mygroove-edit { background: var(--panel-strong); }
    body[data-theme="dark"] .lock-card { background: var(--panel-strong); }
    .band-feel { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
    /* 191px columns clip Pocket/Accompaniment ("Busy" was invisible) */
    .tool-drawer .band-feel { grid-template-columns: minmax(0, 1fr); }
    .feel-group { min-width: 0; }
    /* Tabs never squeeze below their label (sloppy text overflow on iPhone) — the row
       shares space when it can and scrolls sideways when it can't. */
    .seg-row { display: flex; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; }
    /* One-tap accompaniment amount, right under the tempo — free for everyone. */
    .density-quick { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
    .density-quick .seg-row { flex: 1 1 230px; width: auto; }
    .density-quick .seg { padding: 7px 10px; font-size: 0.78rem; white-space: nowrap; }
    .seg {
      flex: 1 0 auto;
      min-width: 0;
      min-height: var(--control-min);
      padding: 7px 10px;
      background: transparent;
      color: var(--muted);
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
      border-right: 1px solid var(--line);
      text-align: center;
      /* true centering at every width — labels sat optically off-center at some sizes */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1.15;
      white-space: nowrap;
    }
    .seg:last-child { border-right: 0; }
    .seg.is-active { background: var(--ink); color: #fff; }
    body[data-theme="dark"] .band-mixer { background: rgba(255, 255, 255, 0.04); }
    body[data-theme="dark"] .mix-toggle,
    body[data-theme="dark"] .seg-row { background: var(--panel-strong); }
    body[data-theme="dark"] .seg.is-active { background: #e7c266; color: #1a1509; }@media (max-width: 480px) {
      .mix-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .band-feel { grid-template-columns: minmax(0, 1fr); }
      .seg { padding: 8px 7px; font-size: 0.76rem; }
    }

    .practice-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 2px;
    }

    .practice-stat {
      min-height: 46px;
      min-width: 118px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
      display: grid;
      gap: 1px;
      padding: 7px 10px;
    }

    .practice-stat span {
      color: var(--muted);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 760;
    }

    .practice-stat strong {
      color: var(--ink);
      font-size: 1rem;
    }

    .term-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 6px;
    }

    .term-row .pill {
      white-space: normal;
      justify-content: flex-start;
      text-align: left;
    }
    /* Compact top-of-deck guide strip (horizontal, not a tall side panel). */
    .guide-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; }
    .guide-kicker { font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; }
    .guide-top .guide-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
    .guide-top .guide-step { display: flex; align-items: center; gap: 7px; color: var(--soft); font-size: 0.88rem; font-weight: 650; }
    .guide-top .guide-step::before { content: none; counter-increment: none; }   /* the .guide-num chip already numbers each step — avoid a double circle */
    /* ritual steps: plain inline text, never panel boxes */
    body[data-theme="dark"] .guide-top .guide-step, .studio-content .guide-top .guide-step { background: transparent; border: none; }
    .guide-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 0.72rem; font-weight: 850; flex: 0 0 auto; }
    .groove-mode-tabs { max-width: 360px; margin: 0 0 16px; }/* Build-tab chord input: live validation chips. */
    .chord-chips { margin-top: 8px; display: grid; gap: 6px; }
    .chord-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .chord-chip { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 800; font-size: 0.84rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
    .chord-chip.is-ok { color: var(--teal-deep); background: rgba(176, 112, 31, 0.12); border-color: rgba(176, 112, 31, 0.3); }
    .chord-chip.is-bad { color: #b42318; background: rgba(184, 92, 80, 0.12); border-color: rgba(184, 92, 80, 0.4); }
    .chip-hint { color: var(--muted); font-size: 0.78rem; }
    .chip-hint.is-bad { color: #b42318; }
    .chip-hint code { font-family: ui-monospace, Menlo, monospace; background: var(--bg-soft); padding: 1px 5px; border-radius: 4px; }
    body[data-theme="dark"] .chord-chip.is-ok { color: #e7c266; }
    body[data-theme="dark"] .chord-chip.is-bad, body[data-theme="dark"] .chip-hint.is-bad { color: #ff9a92; }

    .daily-panel,
    .guide-panel,
    .recent-panel {
      padding: 18px;
    }

    .daily-content {
      display: grid;
      gap: 12px;
      margin-top: 14px;
      padding: 14px;
      border-radius: 12px;
      background: var(--bg-soft);
    }

    .daily-title {
      font-size: 1.35rem;
      line-height: 1.1;
      font-weight: 860;
    }
    .daily-sub { color: var(--muted); font-size: 0.92rem; }
    .daily-chords { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-size: 1rem; color: var(--ink); }
    .daily-goal { display: flex; align-items: center; gap: 7px; color: var(--soft); font-size: 0.88rem; line-height: 1.4; }
    .daily-goal svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--teal); }
    .daily-cta { justify-self: start; }

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

    .recent-list {
      display: grid;
      gap: 8px;
      margin-top: 14px;
    }

    .recent-item {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
      color: var(--ink);
      padding: 10px;
      text-align: left;
      cursor: pointer;
      display: grid;
      gap: 3px;
      transition: transform var(--motion-ui) var(--ease-ui), box-shadow var(--motion-ui) var(--ease-ui), border-color var(--motion-ui) var(--ease-ui);
    }
    .recent-item:hover, .recent-item:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--accent, var(--teal)); outline: none; }@media (prefers-reduced-motion: reduce) { .recent-item { transition: none; } .recent-item:hover, .recent-item:focus-visible { transform: none; } }

    .recent-item strong {
      font-size: 0.95rem;
      line-height: 1.15;
    }

    .recent-item span {
      color: var(--muted);
      font-size: 0.82rem;
    }.section-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: end;
      margin-bottom: 12px;
    }

    .section-head p {
      color: var(--muted);
      max-width: 620px;
      line-height: 1.45;
      font-size: 0.95rem;
    }.empty-state {
      min-height: 142px;
      border: 1px dashed var(--line-strong);
      border-radius: var(--radius);
      display: grid;
      place-items: center;
      color: var(--muted);
      padding: 20px;
      text-align: center;
      line-height: 1.45;
    }

    .guide-list {
      display: grid;
      gap: 12px;
      margin-top: 14px;
      counter-reset: guide;
    }

    .guide-step {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 10px;
      align-items: start;
      color: var(--soft);
      line-height: 1.4;
    }

    .guide-step::before {
      counter-increment: guide;
      content: counter(guide);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #e2f4ef;
      color: var(--teal);
      display: grid;
      place-items: center;
      font-weight: 900;
    }

    .scale-map {
      display: grid;
      gap: 9px;
      margin-top: 14px;
      padding: 11px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
    }

    .scale-map-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 0.76rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 760;
    }

    .scale-keys {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 3px;
    }

    .scale-key {
      min-height: 34px;
      border-radius: 5px;
      border: 1px solid var(--line);
      background: #f8fafb;
      color: var(--muted);
      display: grid;
      place-items: center;
      font-size: 0.68rem;
      font-weight: 800;
    }

    .scale-key.is-active {
      background: var(--teal);
      border-color: transparent;
      color: #ffffff;
    }
    /* Chord tones are the strongest safe notes: a darker fill + an inset ring + a dot marker,
       so they read as distinct from plain scale-colour notes without relying on colour alone. */
    .scale-key.is-chordtone {
      background: var(--ink);
      color: #ffffff;
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
      position: relative;
    }
    .scale-key-mark { position: absolute; top: 2px; right: 3px; font-size: 0.5rem; line-height: 1; opacity: 0.85; }
    .scale-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      align-items: center;
      font-size: 0.72rem;
      color: var(--muted);
      font-weight: 700;
    }
    .scale-legend-item { display: inline-flex; align-items: center; gap: 6px; }
    .scale-legend-key { min-height: 0; width: 16px; height: 16px; font-size: 0.5rem; padding: 0; }
    .scale-legend-note { font-weight: 640; font-style: italic; }
    .chord-scale strong { color: var(--ink); font-weight: 820; }
    .chord-scale.is-tones strong { color: var(--teal-text, var(--teal)); }
    body[data-theme="dark"] .scale-key.is-chordtone { background: #f5f0e6; color: #14110c; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35); }

    .app-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 14px;padding:6px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.74);box-shadow:0 12px 34px rgba(38,53,66,.08);position:sticky;top:8px;z-index:30;backdrop-filter:blur(16px)}
    .instrument-bar{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.74);box-shadow:0 8px 22px rgba(38,53,66,.06);backdrop-filter:blur(12px)}
    .instrument-bar-label{font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
    .instrument-seg{width:auto;flex:0 1 auto;max-width:440px}
    .instrument-seg .seg{min-height:var(--control-min);padding:8px 18px}
    body[data-theme="dark"] .instrument-bar{background:var(--panel);border-color:var(--line)}
    /* Owner 2026-07-14: landscape instrument-bar fix (full note in git history). */
    @media (max-width:640px), (orientation: landscape) and (max-height: 560px) {.instrument-bar{flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}.instrument-bar-label{white-space:normal}.instrument-seg{width:100%;max-width:none;min-width:0}
      /* 5 instruments overflow a single phone row — wrap them into visible chips so Bass/Vocals are
         never hidden behind a horizontal scroll (a regression from when the picker had only 3). */
      .instrument-bar .instrument-seg{flex-wrap:wrap;overflow:visible;border:0;background:transparent;gap:6px}
      .instrument-bar .instrument-seg .seg{flex:1 1 28%;border:1px solid var(--line);border-radius:10px}
      .instrument-bar .instrument-seg .seg.is-active{border-color:var(--ink)}}.ear-small, .profile-hint {color:var(--muted);font-size:.82rem;line-height:1.4}
    .section-layout{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:18px;align-items:start}.sheet-reader {border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(14px);padding:18px}.sheet-reader h2 {font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.status-chip{display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;border:1px solid var(--line);border-radius:999px;background:var(--bg-soft);color:var(--muted);font-size:.68rem;font-weight:850;padding:3px 8px;text-transform:uppercase;letter-spacing:.045em}.status-chip.is-completed,.status-chip.is-complete{background:rgba(176,112,31,.12);color:var(--teal-deep);border-color:rgba(176,112,31,.28)}.status-chip.is-available{background:rgba(86,104,138,.1);color:var(--blue);border-color:rgba(86,104,138,.28)}.status-chip.is-free-preview,.status-chip.is-free{background:rgba(176,112,31,.14);color:var(--teal-deep);border-color:var(--teal)}.status-chip.is-account-required{background:rgba(217,169,40,.14);color:#7b5b05;border-color:rgba(217,169,40,.35)}.status-chip.is-premium-required,.status-chip.is-prerequisite{background:rgba(117,100,200,.1);color:var(--violet);border-color:rgba(117,100,200,.3)}.status-chip.is-coming-soon{color:var(--muted);border-style:dashed}.status-chip.is-next{background:rgba(217,169,40,.16);color:#7b5b05;border-color:rgba(217,169,40,.35)}body[data-theme="dark"] .status-chip.is-free-preview,body[data-theme="dark"] .status-chip.is-free{color:#e7c266;border-color:rgba(147,225,206,.5)}body[data-theme="dark"] .status-chip.is-available{color:#8dbbfa}body[data-theme="dark"] .status-chip.is-premium-required,body[data-theme="dark"] .status-chip.is-prerequisite{color:#c6bcff}.status-chip .gi{width:.82em;height:.82em;vertical-align:-.11em}.reader-head {display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:14px}.profile-actions {display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}.tempo-input{width:92px;min-height:40px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);padding:0 10px;font-weight:800}
    .sheet-scroll{display:grid;gap:14px;max-height:min(68vh,760px);overflow-y:auto;overflow-x:hidden;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:#fffdf8}.staff{position:relative;height:76px;margin-bottom:7px;border-left:2px solid rgba(43,33,20,.38);background:repeating-linear-gradient(to bottom,transparent 0,transparent 11px,rgba(43,33,20,.44) 12px,transparent 13px);background-size:100% 52px;background-position:0 12px}.staff-label{position:absolute;left:-27px;top:27px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:.72rem;font-weight:900}.sheet-note{position:absolute;width:24px;min-height:18px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;transform:translate(-50%,-50%);font-size:.58rem;font-weight:900;box-shadow:0 2px 0 rgba(43,33,20,.18)}.sheet-note.is-active{background:var(--rose);box-shadow:0 0 0 5px rgba(216,109,100,.18)}.sheet-caption{margin-top:10px;color:var(--soft);line-height:1.45}
    .sheet-notation{width:100%;overflow-x:auto}
    .sheet-notation svg{display:block;max-width:100%;height:auto}.path-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.count-stepper{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.count-stepper .count-value{min-width:76px;text-align:center;font-weight:850;color:var(--ink);padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.lead-chord-text{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:14px;font-weight:850;fill:#1a2730}/* literal ink, NOT var(--teal-deep): the sheet paper is theme-independent cream (see :511), so the dark-mode var painted 1.63:1 amber-on-cream; #1a2730 is the same ink VexFlow draws the notes with (studio.js setFillStyle) */
    .ear-meter{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin:12px 0;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.ear-note{font-size:clamp(2.4rem,7vw,5.2rem);line-height:.9;font-weight:950;color:var(--teal-deep)}.confidence-bar{height:10px;border-radius:999px;background:#e6ecef;overflow:hidden}.confidence-bar span{display:block;height:100%;width:var(--confidence,0%);background:linear-gradient(90deg,var(--teal),var(--gold))}.ear-sheet{margin-top:16px}
    .ear-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
    /* <=520px: 3-up clipped the 144px tempo stepper off a 360 screen — 2-up, Tempo full-row. */
    @media (max-width:520px){.ear-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.ear-controls > .field:last-child{grid-column:1/-1}}
    .ear-note.is-live{color:var(--rose);animation:earpulse 1s ease-in-out infinite}
    @keyframes earpulse{0%,100%{opacity:.7}50%{opacity:1}}
    .ear-analyzing{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius);background:var(--teal-soft);color:var(--teal-deep);font-weight:700;margin-bottom:12px}
    .spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(176,112,31,.25);border-top-color:var(--gold);animation:spin .8s linear infinite;display:inline-block}
    @keyframes spin{to{transform:rotate(360deg)}}
    .ear-views{margin-top:14px}
    .ear-honesty{border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius);background:var(--bg-soft);padding:11px 14px;margin-bottom:14px;display:grid;gap:5px}
    .ear-honesty p{color:var(--soft);font-size:.86rem;line-height:1.45;margin:0}
    .ear-leadsheet-note{background:var(--bg-soft);border-radius:var(--radius);padding:8px 12px;margin-bottom:10px;color:var(--soft)}
    .ear-tab{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.92rem;line-height:1.7;white-space:pre;overflow-x:auto;color:var(--ink);margin:0;padding:8px 4px}
    .ear-view-head{display:grid;gap:10px;margin-bottom:10px} .ear-view-toprow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .ear-view-tabs{width:100%}
    .ear-view-tabs{flex-wrap:wrap}
    .ear-use-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
    .ear-use-row .ear-small{margin-right:2px}
    .ear-simple{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
    .ear-chip{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:8px;display:grid;gap:5px;text-align:center}
    .ear-chip.is-uncertain{border-color:var(--gold);background:rgba(217,169,40,.12)}
    .ear-chip-main{display:flex;align-items:baseline;justify-content:center;gap:2px}
    .ear-chip-main strong{font-size:1.15rem;color:var(--ink)}
    .ear-chip-oct{color:var(--muted);font-size:.72rem;font-weight:700}
    .ear-chip-dur{color:var(--muted);font-size:.7rem}
    .ear-chip-edit{display:flex;gap:3px;justify-content:center}
    .ear-chip-edit button{width:26px;height:24px;border:1px solid var(--line);border-radius:6px;background:var(--bg-soft);color:var(--soft);cursor:pointer;font-size:.7rem;line-height:1;display:grid;place-items:center}
    .ear-chip-edit button:hover{background:var(--ink);color:#fff}
    .ear-legend{margin-top:10px}
    /* Playback highlight — the currently-sounding note/chord (set via DOM, no re-render). */
    .ear-chip.is-playing,.chord-cell.is-playing{border-color:var(--teal);background:rgba(176,112,31,.16);box-shadow:0 0 0 2px rgba(176,112,31,.3)}
    .ear-view-controls .ghost-button.is-playing{color:var(--rose);border-color:var(--rose)}
    /* Full-screen reading mode — room for tall ledger-line notes + bigger notation, for every view. */
    .ear-views.ear-fs-active{position:fixed;inset:0;z-index:97;margin:0;background:var(--bg);overflow:auto;padding:clamp(10px,2.5vw,22px)}
    .ear-views.ear-fs-active .ear-view-head{position:sticky;top:0;background:var(--bg);padding:8px 0;margin:0 0 10px;border-bottom:1px solid var(--line);z-index:1}
    .ear-views.ear-fs-active .sheet-scroll{max-height:82vh}
    .ear-views.ear-fs-active .ear-simple{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
    .ear-views.ear-fs-active .ear-chord-chart{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
    .ear-key-line{margin-bottom:8px}
    .ear-chord-chart{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
    .chord-cell{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:10px;display:grid;gap:3px;text-align:center}
    .chord-num{color:var(--muted);font-size:.7rem;font-weight:800}
    .chord-sym{font-size:1.5rem;line-height:1.05;color:var(--ink);font-weight:850}
    .chord-mel{color:var(--muted);font-size:.72rem;min-height:1em}
    .ear-quiz{margin-top:14px;display:grid;gap:8px}
    .qs-guide-line{stroke:rgba(26,39,48,0.28);stroke-width:1}
    .qs-guide-note{fill:rgba(26,39,48,0.34)}
    body[data-theme="dark"] .chord-cell{background:var(--panel-strong)}
    body[data-theme="dark"] .ear-chip,body[data-theme="dark"] .ear-controls select{background:var(--panel-strong)}
    /* Dark: the flat repaint (0,2,2) beat is-done/current (0,2,1) — one grey. */
    body[data-theme="dark"] .lesson-stepper i.is-done{background:var(--accent,var(--blue))}
    body[data-theme="dark"] .lesson-stepper i.is-current{background:var(--accent-2,var(--violet))}
    .profile-form{display:grid;gap:12px;margin-top:14px}.profile-input,.profile-textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);padding:12px;outline:none}.profile-textarea{min-height:96px;resize:vertical}@media (max-width:820px) {.section-layout {grid-template-columns:1fr}.reader-head {flex-direction:column}}@media (max-width:680px) {.app-nav{grid-template-columns:repeat(2,minmax(0,1fr));position:static}.sheet-scroll{max-height:none;padding:8px}.ear-meter{grid-template-columns:1fr}}
    /* Phones: the music tools stay dominant. Account/admin lives behind the gear icon
       Every primary destination and utility stays visible at every width — the stacked
       layout (below) handles small screens instead of hiding buttons. */


    /* INK (2026-07-09 redesign): paper's dark mode — same token slots as the :root block. */
    body[data-theme="dark"],
    html[data-boot-theme="dark"] body {
      color-scheme: dark;
      --bg: #14110c;
      --bg-soft: #1c1812;
      --panel: rgba(30, 26, 19, 0.93);
      --panel-strong: #241f17;
      --line: rgba(240, 232, 214, 0.13);
      --line-strong: rgba(240, 232, 214, 0.24);
      --ink: #f0e8d6;
      --muted: #b1a488;
      --soft: #d6cbb2;
      --teal: #d9a95a;      /* ONE METAL: dark-mode accent is the gold itself */
      --teal-text: #d9a95a;   /* gold meets AA on ink grounds */
      --teal-deep: #e7c266;
      --gold: #d9a95a;
      --rose: #e08a77;
      --blue: #93a8c6;
      --violet: #b2a3d4;
      --shadow: 0 20px 58px rgba(0, 0, 0, 0.4);
      background:
        radial-gradient(circle at 12% 0%, rgba(217, 169, 90, 0.09), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(217, 169, 90, 0.08), transparent 30%),
        linear-gradient(180deg, #0f0d09 0%, var(--bg) 48%, #191510 100%);
    }
    body[data-theme="dark"] .gi, html[data-boot-theme="dark"] body .gi { --gi-ac: #c9a25c; --gi-ac-soft: rgba(201,162,92,.16); }   /* icon accent brightens on the dark stage (art223) */body[data-theme="dark"] .pill,body[data-theme="dark"] .number-input,body[data-theme="dark"] .ear-meter,body[data-theme="dark"] .profile-input,body[data-theme="dark"] .profile-textarea,body[data-theme="dark"] .daily-content,body[data-theme="dark"] .recent-item,body[data-theme="dark"] .guide-step,body[data-theme="dark"] .scale-map,body[data-theme="dark"] .chord-strip,body[data-theme="dark"] .mini-button,body[data-theme="dark"] .ghost-button,body[data-theme="dark"] .toggle-button,body[data-theme="dark"] .primary-button {
      background-color: var(--panel-strong);
      color: var(--ink);
    }

    body[data-theme="dark"] .app-nav { background: rgba(26, 21, 13, 0.82); }
    body[data-theme="dark"] .sheet-scroll { background: #fbfaf6; border-color: rgba(0,0,0,0.14); }   /* notation is black-on-paper in dark mode too (readable + matches print/full screen) */
    /* on-paper elements keep ink-dark text in dark mode */
    body[data-theme="dark"] .sheet-scroll .ear-tab { color: #241c11; }
    body[data-theme="dark"] .sheet-scroll .ear-small, body[data-theme="dark"] .sheet-scroll .sheet-caption { color: #5b6a73; }
    body[data-theme="dark"] .tempo-input, body[data-theme="dark"] .count-stepper .count-value { background: var(--panel-strong); color: var(--ink); border-color: var(--line); }   /* was white bg + light text = invisible */
    body[data-theme="dark"] .staff { background: repeating-linear-gradient(to bottom, transparent 0, transparent 11px, rgba(235, 242, 244, 0.52) 12px, transparent 13px); }
    body[data-theme="dark"] .sheet-note { background: #f5f0e6; color: #14110c; }
    body[data-theme="dark"] .sheet-note.is-active { background: var(--rose); color: #ffffff; }
    body[data-theme="dark"] .scale-key { background: #171309; border-color: var(--line); }
    /* Piano keys read as a real keyboard in dark mode: white keys stay light w/ dark labels;
       the :not() guards keep the teal active-key and dark black-key styles winning. */
    body[data-theme="dark"] .mini-key:not(.is-black):not(.is-active) { background: #f0ead9; color: #33291a; border-color: rgba(43,33,20,0.22); }
    body[data-theme="dark"] .empty-state { background: rgba(255, 255, 255, 0.04); }.t-step { min-width: 38px; font-size: 1.05rem; font-weight: 800; padding: 6px 10px; }
    .t-current { min-width: 96px; text-align: center; font-weight: 800; color: var(--ink); padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
    .t-select { width: auto; min-width: 150px; padding: 8px 10px; }
    .t-orig { color: var(--muted); font-weight: 600; font-size: 0.85em; }/* Compact sheet controls: natural-width flex chips (not full-bleed); the transposer keeps its
       stepper affordance. History: full notes in git — this block was a 1.9KB essay (art223 trim). */
    .app-section.section-enter { animation: none; }

    body[data-theme="dark"] .app-nav { background: rgba(30, 26, 19, 0.9); }   /* was rgba(17,24,28): cold slate nav on a warm site */.studio-panel {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }.studio-panel {
      padding: 18px;
    }

    .kicker {
      color: var(--muted);
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 860;
    }.studio-panel p {
      color: var(--soft);
      line-height: 1.5;
    }

    .section-layout {
      grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    }.sheet-reader,.groove-card,.beat-panel,.daily-panel,.guide-panel,.recent-panel {
      box-shadow: var(--shadow);
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 22px 24px;
    }.card-actions {
      gap: 8px;
    }.mini-button, .ghost-button, .toggle-button, .primary-button {
      border: 1px solid var(--line);
      font-weight: 820;
    }

    /* (art225) The ink/cream primary overrides are retired — the SYSTEM CTA gold is universal. */@media (max-width: 680px) {
      .app-nav {
        position: static;
        padding: 5px;
      }
    }



    /* ---- My Account ---- */
    .account-shell { display: grid; gap: 16px; }
    .account-hero { margin-bottom: 0; }
    .account-hero .support-icon {
      width: 38px; height: 38px; display: grid; place-items: center;
      border-radius: 8px; color: var(--teal); background: rgba(176, 112, 31, 0.12);
      font-size: 0.8rem;
    }
    .account-tabs {
      display: flex; gap: 6px; overflow-x: auto; padding: 5px;
      border: 1px solid var(--line); border-radius: var(--radius);
      background: var(--bg-soft); scrollbar-width: thin;
    }
    .account-tab {
      min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px;
      background: transparent; color: var(--soft); font: inherit; font-weight: 820;
      white-space: nowrap; cursor: pointer;
    }
    .account-tab:hover { color: var(--ink); background: rgba(255,255,255,0.55); }
    .account-tab.is-active { color: #fff; background: var(--ink); box-shadow: 0 8px 18px rgba(22, 32, 38, 0.16); }
    .account-tab-divider { align-self: center; margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--line-strong); font-size: 0.68rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; }
    .sync-chip { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 12px; border-radius: 999px; font-size: 0.76rem; font-weight: 750; justify-self: start; }
    .sync-chip svg { width: 14px; height: 14px; }
    .sync-chip.is-synced { color: var(--teal-deep); background: rgba(176, 112, 31, 0.12); border: 1px solid rgba(176, 112, 31, 0.28); }
    .sync-chip.is-pending { color: var(--rust, #b0701f); border-color: rgba(176, 112, 31, .4); }   /* art247: unsynced-yet state */
    .sync-chip.is-local { color: var(--soft); background: var(--bg-soft); border: 1px solid var(--line-strong); }
    body[data-theme="dark"] .sync-chip.is-local { background: rgba(255, 255, 255, 0.05); }
    .account-view { min-width: 0; }
    .account-view-stack { display: grid; gap: 16px; }
    .account-card {
      border: 1px solid var(--line); border-radius: var(--radius);
      background: var(--panel-strong); padding: 18px; display: grid; gap: 12px;
      box-shadow: var(--shadow);
    }
    .account-card h2, .account-card h3 { color: var(--ink); }
    /* Gift Premium — send + redeem (Membership & Billing). */
    .gift-card .kicker { display: inline-flex; align-items: center; gap: 6px; }
    .gift-card .kicker svg { width: 14px; height: 14px; color: var(--teal); }
    .gift-options { display: flex; gap: 10px; flex-wrap: wrap; }
    .gift-option { flex: 1 1 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .16s, transform .16s, box-shadow .16s; }
    .gift-option:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
    .gift-option strong { font-size: 0.98rem; font-weight: 750; }
    .gift-option span { color: var(--teal-deep); font-size: 1.15rem; font-weight: 850; }
    .gift-card .auth-field input { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; letter-spacing: 1px; text-transform: uppercase; }
    .gift-card .auth-field input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
    /* Referral "give a month, get a month" card — shares the gift card's read-only input styling. */
    .referral-card .kicker { display: inline-flex; align-items: center; gap: 6px; }
    .referral-card .kicker svg { width: 14px; height: 14px; color: var(--teal); }
    .referral-card .auth-field input { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; }
    .referral-card .auth-field input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
    .referral-stat { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 0.9rem; font-weight: 700; color: var(--teal-deep); }
    .referral-stat svg { width: 14px; height: 14px; }
    .account-status.is-error { color: #b4452f; }
    body[data-theme="dark"] .gift-option { background: rgba(255,255,255,0.04); }
    body[data-theme="dark"] .account-status.is-error { color: #f0937f; }
    /* Teacher / classroom management. */
    .classroom-card .kicker { display: inline-flex; align-items: center; gap: 6px; }
    .classroom-card .kicker svg { width: 14px; height: 14px; color: var(--teal); }
    .classroom-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .roster { display: grid; gap: 6px; }
    .roster-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
    .roster-email { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 0.9rem; }
    .roster-state { flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
    .roster-state.is-joined { color: var(--teal-deep); }
    .classroom-card .auth-field input { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; }
    .classroom-card .auth-field input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
    .classroom-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
    .classroom-seatfield { flex: 0 0 auto; }
    /* "Paid seats" field + Update button on one clean baseline — label above a centred input, the
       button matched to the input height and bottom-aligned so nothing looks uneven. */
    .classroom-seats { display: inline-flex; align-items: flex-end; gap: 10px; margin-left: auto; }
    .classroom-seats label { display: grid; gap: 4px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); text-transform: uppercase; }
    .classroom-seats input { width: 74px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 1rem; text-align: center; }
    .classroom-seats .ghost-button { height: 40px; min-height: 40px; align-self: flex-end; }
    body[data-theme="dark"] .roster-row { background: rgba(255,255,255,0.04); }
    .account-plan-summary {
      grid-template-columns: minmax(0, 1fr) auto; align-items: start;
      background: linear-gradient(145deg, rgba(176, 112, 31, 0.11), rgba(86, 104, 138, 0.07));
    }
    .account-plan-grid { margin-top: 0; }
    .account-manage-card, .security-session-card {
      grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    }
    .account-actions { display: flex; flex-wrap: wrap; gap: 9px; }
    .account-empty { max-width: 700px; margin: 0 auto; text-align: center; justify-items: center; padding: 34px; }
    .account-status, .security-message {
      min-height: 22px; color: var(--teal-deep); font-weight: 780; line-height: 1.45;
    }
    .security-message { grid-column: 1 / -1; }
    .security-message.is-error { color: #b42318; }
    .account-identity {
      width: fit-content; max-width: 100%; padding: 9px 12px; overflow-wrap: anywhere;
      border-radius: 8px; background: var(--bg-soft); color: var(--ink); font-weight: 800;
    }
    .account-fine-print { color: var(--muted); font-size: 0.82rem; line-height: 1.5; text-align: center; }
    .security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .security-session-card { grid-column: 1 / -1; }

    /* ---- My Practice dashboard ---- */
    .mp-goal-card { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
    .mp-goal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
    .mp-goal-head strong { font-size: 1.05rem; color: var(--ink); }
    .mp-goal-bar { height: 10px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
    .mp-goal-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--teal-deep)); transition: width 0.4s ease; }
    /* Practice calendar heatmap — GitHub-style "don't break the chain" grid. */
    .mp-heatmap { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 16px; display: grid; gap: 12px; }
    .mp-heatmap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .mp-heatmap-head .lib-head { margin: 0; }
    .hm-active { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
    .hm-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 13px); grid-auto-columns: 13px; gap: 3px; justify-content: start; overflow-x: auto; padding: 3px; }   /* padding all around: today's 2px gold ring never clips (owner 2026-07-12) */
    .hm-cell { width: 13px; height: 13px; border-radius: 3px; background: rgba(120,130,140,0.14); }
    .hm-cell[data-lvl="1"] { background: rgba(176, 112, 31,0.34); }
    .hm-cell[data-lvl="2"] { background: rgba(176, 112, 31,0.55); }
    .hm-cell[data-lvl="3"] { background: rgba(176, 112, 31,0.78); }
    .hm-cell[data-lvl="4"] { background: #8a5613; }   /* art228: deepest gold, not ink — the ramp stays one warm story */
    .hm-cell.is-today { box-shadow: 0 0 0 2px var(--gold, #e7c266); }
    /* A gap day a streak rescue bridged — honestly empty of practice, but ringed amber so the
       calendar tells the story of a streak you saved. */
    .hm-cell.is-bridged { background: rgba(232, 146, 59, 0.18); box-shadow: inset 0 0 0 1.5px rgba(232, 146, 59, 0.7); }
    /* Streak rescue banner (My Practice → Progress). */
    .mp-streak-restore { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px; border: 1px solid rgba(232, 146, 59, 0.5); border-left: 3px solid #e8923b; border-radius: var(--radius); background: linear-gradient(135deg, rgba(232, 146, 59, 0.12), rgba(232, 146, 59, 0.03) 70%); }
    .mp-restore-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: rgba(232, 146, 59, 0.18); }
    .mp-restore-ic svg { width: 16px; height: 16px; color: #e07f2c; }
    .mp-restore-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
    .mp-restore-body strong { color: var(--ink); font-size: 0.96rem; }
    .mp-restore-body span { color: var(--soft); font-size: 0.84rem; }
    .mp-restore-btn { flex: 0 0 auto; background: linear-gradient(135deg, #ef9a45, #e07f2c); border-color: transparent; color: #fff; font-weight: 800; }
    .mp-restore-btn svg { color: #fff; }
    .mp-restore-btn:hover { background: linear-gradient(135deg, #f0a253, #e8862f); }
    body[data-theme="dark"] .mp-streak-restore { background: linear-gradient(135deg, rgba(232, 146, 59, 0.16), rgba(232, 146, 59, 0.04) 70%); border-color: rgba(232, 146, 59, 0.4); }
    body[data-theme="dark"] .mp-restore-ic svg { color: #f0b873; }
    .hm-legend { display: flex; align-items: center; gap: 5px; justify-content: flex-end; color: var(--muted); font-size: 0.72rem; font-weight: 700; }
    .hm-legend .hm-cell { width: 12px; height: 12px; }
    /* Achievements — collectible milestone badges. */
    .mp-badges { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 16px; display: grid; gap: 12px; }
    .mp-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 10px; }
    .mp-badge { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 13px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
    .mp-badge-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
    .mp-badge-ic svg { width: 20px; height: 20px; }
    .mp-badge-name { font-size: 0.78rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
    .mp-badge-desc { font-size: 0.68rem; color: var(--muted); line-height: 1.25; }
    .mp-badge.is-earned { border-color: rgba(176, 112, 31,0.35); background: rgba(176, 112, 31,0.07); }
    .mp-badge.is-earned .mp-badge-ic { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color: #fff; box-shadow: 0 4px 12px rgba(176, 112, 31,0.3); }
    .mp-badge.is-locked { opacity: 0.72; }
    .mp-badge.is-locked .mp-badge-ic { background: var(--line); color: var(--muted); }
    .mp-badge.is-locked .mp-badge-name { color: var(--soft); }
    /* Usage-wall "resets in HH:MM:SS" live countdown. */
    .usage-reset { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 2px 0; padding: 9px 12px; border-radius: 8px; background: var(--bg-soft); color: var(--soft); font-size: 0.86rem; font-weight: 650; }
    .usage-reset svg { width: 14px; height: 14px; color: var(--teal); flex: 0 0 auto; }
    .usage-reset strong { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
    body[data-theme="dark"] .usage-reset { background: rgba(255,255,255,0.05); }
    .usage-perks { display: flex; align-items: center; gap: 7px; margin: 0 0 2px; color: var(--soft); font-size: 0.82rem; font-weight: 600; line-height: 1.35; }
    .usage-perks svg { width: 14px; height: 14px; color: var(--gold, #b0701f); flex: 0 0 auto; }
    /* Instrument practice-tip card */
    .tip-card { max-width: 460px; }
    .tip-list { margin: 4px 0 14px; padding-left: 4px; list-style: none; display: grid; gap: 10px; }
    .tip-list li { position: relative; padding-left: 24px; color: var(--ink); font-size: 0.92rem; line-height: 1.45; }
    .tip-list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
    .tip-tune { margin-bottom: 10px; }
    .tip-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .tip-off { background: none; border: 0; color: var(--muted); font-size: 0.82rem; font-weight: 650; cursor: pointer; text-decoration: underline; padding: 6px; }
    .tip-off:hover { color: var(--soft); }
    /* Live tuner */
    .tuner-card { max-width: 420px; text-align: center; }
    .tuner-note { font-size: 3.2rem; font-weight: 900; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
    .tuner-meter { position: relative; height: 56px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; margin: 8px 0; }
    .tuner-zone { position: absolute; left: 45%; width: 10%; top: 0; bottom: 0; background: rgba(176,112,31,0.18); }
    .tuner-center { position: absolute; left: 50%; top: 7px; bottom: 7px; width: 2px; background: var(--soft); transform: translateX(-1px); }
    .tuner-needle { position: absolute; top: 5px; bottom: 5px; width: 4px; border-radius: 2px; background: var(--gold, #b0701f); transform: translateX(-2px); transition: left 0.18s ease-out, background 0.12s linear;   /* glides between ~10Hz commits */ }   /* eased so the needle SETTLES onto its point instead of twitching */
    .tuner-meter.is-intune .tuner-needle { background: var(--teal); box-shadow: 0 0 12px rgba(176, 112, 31,0.6); }
    .tuner-cents { font-weight: 800; color: var(--soft); margin: 2px 0; min-height: 1.3em; transition: color 0.15s linear; }
    /* LOCKED = confidently in tune: the whole meter glows green and the verdict reads green — an
       unmistakable settled state (hysteresis in tunerPaint keeps it from flickering at the edge). */
    [data-tuner-card].is-locked .tuner-meter { border-color: rgba(176, 112, 31,0.65); box-shadow: 0 0 0 3px rgba(176,112,31,0.18), inset 0 0 24px rgba(176, 112, 31,0.10); }
    [data-tuner-card].is-locked .tuner-zone { background: rgba(176, 112, 31,0.30); }
    [data-tuner-card].is-locked .tuner-cents { color: var(--teal-text, #8a5613); }
    body[data-theme="dark"] [data-tuner-card].is-locked .tuner-cents { color: #e7c266; }
    .tuner-string { color: var(--ink); font-weight: 750; margin: 2px 0 4px; }
    .tuner-strings-key { color: var(--muted); font-size: 0.8rem; margin: 0 0 12px; }
    .tuner-error { color: #c0392b; font-weight: 700; margin-bottom: 10px; }
    body[data-theme="dark"] .tuner-meter { background: rgba(255,255,255,0.05); }
    /* One-time post-signup rating prompt */
    .rating-modal { width: min(440px, 100%); max-width: 440px; text-align: center; padding: 22px; position: relative; }
    .rating-head { display: grid; gap: 6px; margin-bottom: 12px; }
    .rating-sub { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
    .rating-stars { display: flex; justify-content: center; gap: 4px; margin: 6px 0; }
    .rating-star { background: none; border: 0; cursor: pointer; padding: 4px; line-height: 0; color: var(--line-strong, #c9bfa8); transition: color .12s ease, transform .12s ease; }
    .rating-star .gi { width: 40px; height: 40px; }
    .rating-star:hover { transform: scale(1.08); }
    .rating-star.is-on { color: var(--gold, #e0a91f); }
    .rating-star.is-on .gi { fill: currentColor; }
    .rating-follow { color: var(--soft); line-height: 1.45; margin: 14px 0 8px; }
    .rating-modal .profile-textarea { width: 100%; }
    .rating-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
    body[data-theme="dark"] .rating-star { color: rgba(255,255,255,0.22); }
    /* Embed-on-a-site modal */
    .embed-modal { max-width: 520px; }
    .embed-code { width: 100%; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.76rem; line-height: 1.45; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); color: var(--ink); }
    .embed-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .embed-actions .primary-button, .embed-actions .ghost-button { flex: 1 1 auto; text-align: center; }
    /* Genre mini-course modal */
    .genre-course { max-width: 480px; }
    .genre-course-body { display: grid; gap: 15px; }
    .genre-sec { display: grid; gap: 6px; }
    .genre-sec-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-deep); }
    .genre-sec-label svg { width: 14px; height: 14px; }
    .genre-sec p { margin: 0; color: var(--soft); line-height: 1.5; }
    .genre-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .genre-chip { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink); font-weight: 800; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
    .genre-note { font-size: 0.82rem; color: var(--muted); margin: 0; }
    body[data-theme="dark"] .genre-sec-label { color: #e7c266; }
    .danger-button { color: var(--rose); border-color: rgba(184, 92, 80, 0.4); }
    .danger-button:hover { background: rgba(184, 92, 80, 0.08); }
    .warning-button { color: #8a5a00; border-color: rgba(201, 138, 18, 0.45); }
    .warning-button:hover { background: rgba(201, 138, 18, 0.1); }
    .reset-data-card { border-left: 4px solid #c98a12; }
    .delete-account-card { border-left: 4px solid var(--rose); }
    .warning-confirm { background: #9b6810; border-color: #9b6810; color: #fff; }
    .danger-confirm { background: #b42318; border-color: #b42318; color: #fff; }
    .account-official-links { display: flex; flex-wrap: wrap; gap: 12px; }
    .account-official-links .official-link { min-height: 44px; display: inline-flex; align-items: center; }
    .account-export-btn { margin-top: 14px; }
    .referral-link-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
    .referral-link-row input { flex: 1; min-width: 0; }
    .referral-link-row .ghost-button { flex: 0 0 auto; }
    .profile-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .profile-group { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); }
    .profile-group-title { margin: 0; font-size: 0.74rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }.restart-path-btn { font-size: 0.8rem; padding: 6px 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
    .restart-path-btn:hover { color: var(--rose); border-color: var(--rose); }
    .profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .profile-actions > button { flex: 1 1 auto; }
    body[data-theme="dark"] .profile-group { background: rgba(255,255,255,0.03); }
    .style-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .style-chip { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.12s ease; }
    .style-chip.is-on { background: rgba(176, 112, 31, 0.12); border-color: var(--teal); color: var(--teal-deep); }
    body[data-theme="dark"] .style-chip { background: var(--panel-strong); }
    body[data-theme="dark"] .style-chip.is-on { color: #e7c266; }@media (max-width: 460px) { .profile-two { grid-template-columns: 1fr; } }body[data-theme="dark"] .mp-goal-card { background: var(--panel-strong); }
    body[data-theme="dark"] .mp-heatmap { background: var(--panel-strong); }
    body[data-theme="dark"] .hm-cell { background: rgba(180,190,200,0.12); }
    body[data-theme="dark"] .hm-cell[data-lvl="1"] { background: rgba(217,169,90,0.38); }
    body[data-theme="dark"] .hm-cell[data-lvl="2"] { background: rgba(217,169,90,0.58); }
    body[data-theme="dark"] .hm-cell[data-lvl="3"] { background: rgba(217,169,90,0.8); }
    body[data-theme="dark"] .hm-cell[data-lvl="4"] { background: #e7c266; }   /* art228: warm gold peak — the turquoise was the only cold color on the site */
    body[data-theme="dark"] .mp-badges { background: var(--panel-strong); }
    body[data-theme="dark"] .mp-badge { background: rgba(255,255,255,0.03); }
    body[data-theme="dark"] .mp-badge.is-earned { background: rgba(217,169,90,0.1); border-color: rgba(217,169,90,0.35); }
    body[data-theme="dark"] .mp-badge.is-locked .mp-badge-ic { background: rgba(255,255,255,0.08); }@media (max-width: 900px) {
      .security-grid { grid-template-columns: 1fr; }
      .security-session-card { grid-column: auto; }
      .account-plan-grid { grid-template-columns: 1fr; }
    }@media (max-width: 600px) {
      .account-plan-summary, .account-manage-card, .security-session-card { grid-template-columns: 1fr; }
      .account-tab { padding: 0 12px; }
    }
    .auth-button { flex: 0 0 auto; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-strong); color: var(--soft); font-weight: 820; cursor: pointer; white-space: nowrap; }
    .auth-button.is-primary { background: linear-gradient(180deg,#c09a58,#a97f38); color: #2b2114; border-color: transparent; } .membership-nudge,.auth-modal,.legal-panel,.cookie-banner { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
    .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; gap: 12px; margin-top: 16px; }
    /* Trial CTA / countdown banner */
    .trial-banner { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin: 16px 0 4px; padding: 14px 18px; border: 1px solid rgba(176, 112, 31, 0.35); border-left: 4px solid var(--teal); border-radius: var(--radius); background: linear-gradient(180deg, rgba(176,112,31,.08), rgba(86,104,138,.05)); }
    .trial-banner.is-active { border-color: rgba(176, 112, 31, 0.45); border-left-color: var(--gold); background: rgba(176, 112, 31, 0.1); }
    .trial-ribbon { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(176, 112, 31, 0.45); background: rgba(176, 112, 31, 0.1); color: var(--ink); font-size: 0.86rem; line-height: 1.35; }
    .trial-ribbon span { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .trial-ribbon svg { width: 14px; height: 14px; color: var(--gold, #b0701f); }
    .trial-ribbon-link { border: 0; background: transparent; color: var(--teal-deep); font-weight: 820; cursor: pointer; padding: 2px 4px; font-size: 0.84rem; text-decoration: underline; text-underline-offset: 2px; }
    body[data-theme="dark"] .trial-ribbon { background: rgba(176, 112, 31, 0.14); border-color: rgba(176, 112, 31, 0.4); }
    body[data-theme="dark"] .trial-ribbon-link { color: #e7c266; }
    /* Install (A2HS) banner + milestone celebration (Wave 6). */
    .install-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(176,112,31,0.08), transparent), var(--panel-strong); color: var(--ink); font-size: 0.88rem; }
    .install-copy { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
    .install-copy svg { width: 16px; height: 16px; color: var(--teal); flex: none; }
    .install-actions { display: inline-flex; align-items: center; gap: 6px; flex: none; }
    .install-dismiss { border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; min-width: 36px; min-height: 36px; border-radius: 8px; }
    .install-dismiss:hover { color: var(--ink); background: var(--bg-soft); }
    /* Session recovery — "Continue your recent groove?" at the top of the Deck after a reload. */
    .session-recover { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line)); background: linear-gradient(180deg, rgba(176,112,31,0.10), transparent), var(--panel-strong); }
    .session-recover-copy { display: grid; gap: 2px; min-width: 0; }
    .session-recover-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 780; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-text, var(--teal)); }
    .session-recover-eyebrow .gi { width: 14px; height: 14px; }
    .session-recover-copy strong { color: var(--ink); font-size: 1.02rem; overflow-wrap: anywhere; }
    .session-recover-copy span:last-child { color: var(--soft); font-size: 0.84rem; }
    .session-recover-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .completion-milestone { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(217,169,40,0.5); background: linear-gradient(180deg, rgba(217,169,40,0.16), rgba(217,169,40,0.06)); }
    .completion-milestone svg { width: 26px; height: 26px; color: #c8961a; flex: none; }
    .completion-milestone strong { display: block; font-size: 1.02rem; }
    .completion-milestone span { color: var(--muted); font-size: 0.86rem; }
    .completion-card.has-milestone { animation: milestonePop var(--motion-ui) var(--ease-ui); }
    @keyframes milestonePop { from { transform: scale(0.99); opacity: 0.6; } to { transform: scale(1); opacity: 1; } }
    body[data-theme="dark"] .completion-milestone { background: linear-gradient(180deg, rgba(217,169,40,0.2), rgba(217,169,40,0.07)); }
    body[data-theme="dark"] .completion-milestone svg { color: #f0bd5a; }@media (prefers-reduced-motion: reduce) { .completion-card.has-milestone { animation: none; } }
    /* Trial ending soon: warm, urgent variant with a direct "Keep Premium" CTA (Wave 5). */
    .trial-ribbon.is-soon { border-color: rgba(217, 122, 40, 0.55); background: linear-gradient(180deg, rgba(217, 140, 40, 0.16), rgba(217, 122, 40, 0.1)); }
    .trial-ribbon.is-soon svg { color: #c8761a; }
    .trial-ribbon-cta { border: 0; border-radius: 8px; background: var(--teal); color: #fff; font-weight: 850; cursor: pointer; padding: 6px 14px; min-height: 34px; font-size: 0.84rem; transition: transform var(--motion-fast) var(--ease-ui), filter var(--motion-fast) var(--ease-ui); }
    .trial-ribbon-cta:hover { filter: saturate(1.08) brightness(1.03); transform: translateY(-1px); }
    .trial-ribbon-cta:active { transform: translateY(1px); }
    body[data-theme="dark"] .trial-ribbon.is-soon { background: linear-gradient(180deg, rgba(217, 140, 40, 0.22), rgba(217, 122, 40, 0.12)); border-color: rgba(230, 150, 60, 0.5); }
    body[data-theme="dark"] .trial-ribbon.is-soon svg { color: #f0a85a; }@media (prefers-reduced-motion: reduce) { .trial-ribbon-cta { transition: none; } .trial-ribbon-cta:hover, .trial-ribbon-cta:active { transform: none; } }
    .trial-banner strong { color: var(--ink); font-size: 1rem; }
    .trial-banner p { color: var(--soft); font-size: 0.88rem; line-height: 1.45; margin-top: 3px; max-width: 60ch; }
    .trial-banner-actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
    .trial-or { color: var(--muted); font-size: 0.72rem; text-align: center; }
    .trial-upgrade-note { margin: 8px 0 2px; color: var(--soft); font-size: 0.82rem; line-height: 1.45; padding: 8px 12px; border-radius: 8px; background: rgba(176, 112, 31, 0.12); border-left: 3px solid var(--gold); }
    .delete-warning { margin: 0; color: var(--soft); font-size: 0.84rem; line-height: 1.5; padding: 10px 12px; border-radius: 8px; background: rgba(192, 57, 43, 0.1); border-left: 3px solid #c0392b; }
    .delete-warning strong { color: var(--ink); }
    .trial-ended-modal { display: grid; gap: 14px; }
    .trial-ended-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .trial-ended-actions .primary-button { flex: 1 1 auto; }
    .security-forgot { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: grid; gap: 6px; }
    body[data-theme="dark"] .trial-banner { background: rgba(176,112,31,.16); }
    /* Subgrid: shared rows keep the three prices level. */
    .plan-card { padding: 16px; display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 12px; box-shadow: none; background: var(--panel-strong); }
    /* Cards stretch to equal height in the grid row; pin the CTA to the bottom at a uniform
       size so Free / Monthly / Yearly read as identical boxes regardless of feature-count. */
    .plan-card > button { margin-top: auto; width: 100%; min-height: 48px; }
    .plan-card.is-featured { border-color: rgba(176, 112, 31, 0.45); box-shadow: var(--shadow); }
    .plan-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; flex-wrap: wrap; }
    .plan-chip { border-radius: 999px; padding: 5px 12px; background: rgba(176, 112, 31, 0.1); color: var(--teal-deep); font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; max-width: 100%; flex: 0 0 auto; align-self: flex-start; line-height: 1.2; text-align: center; }
    /* in tight modals the badge drops cleanly under the title instead of squeezing/clipping */
    @media (max-width: 560px) { .plan-card-head { flex-direction: column; align-items: flex-start; gap: 6px; } .plan-chip { order: -1; } }
    .plan-price { display: flex; align-items: baseline; gap: 4px; font-weight: 900; color: var(--ink); }
    .plan-price strong { font-size: 2rem; line-height: 1; }
    .plan-price span { color: var(--muted); font-size: 0.88rem; }
    .plan-features { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
    .plan-features li { color: var(--soft); line-height: 1.35; font-size: 0.9rem; display: grid; grid-template-columns: 18px 1fr; gap: 6px; }
    .plan-features li::before { content: "✓"; color: var(--teal); font-weight: 900; }
    .auth-backdrop { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 18px; background: rgba(8, 12, 14, 0.58); }   /* 110: covers the jam role drawer (z-100) — walls opened FROM it rendered under it */
    /* ---- Command palette / global search (Wave 2) ---- */
    .cmdk-backdrop { align-items: start; }
    /* width is 100% of the 18px-padded backdrop track (not vw) so it never spills past the
       backdrop padding at narrow widths; capped at 620px and centered on larger screens. */
    .cmdk { width: min(620px, 100%); margin-top: clamp(32px, 11vh, 128px); background: var(--panel-strong); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; display: grid; }
    .cmdk-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 14px; border-bottom: 1px solid var(--line); }
    .cmdk-search-ico { color: var(--muted); display: inline-flex; flex: none; }
    .cmdk-input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 1.04rem; font-weight: 600; padding: 7px 2px; }
    .cmdk-input::placeholder { color: var(--muted); font-weight: 500; }
    .cmdk-input:focus { outline: none; }
    .cmdk-close { flex: none; }
    .cmdk-results { max-height: min(54vh, 460px); overflow-y: auto; padding: 8px; display: grid; gap: 2px; }
    .cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; min-height: 44px; }
    .cmdk-item:hover, .cmdk-item:focus-visible { background: var(--bg-soft); outline: none; }
    .cmdk-item:focus-visible { box-shadow: var(--focus-ring); }
    .cmdk-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--bg-soft); color: var(--teal); }
    .cmdk-ico .gi { width: 18px; height: 18px; }
    .cmdk-text { display: grid; gap: 1px; min-width: 0; }
    .cmdk-text strong { font-size: 0.95rem; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cmdk-text small { color: var(--muted); font-size: 0.8rem; }
    .cmdk-empty { padding: 26px 16px; color: var(--muted); text-align: center; }
    .cmdk-foot { display: flex; gap: 16px; justify-content: flex-end; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.76rem; }
    .cmdk-foot kbd { font: inherit; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
    .checkout-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; background: rgba(8, 12, 14, 0.66); backdrop-filter: blur(3px); }
    .checkout-card { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 26px 30px; border-radius: 12px; background: var(--panel-strong); box-shadow: var(--shadow); max-width: 320px; }
    .checkout-card strong { color: var(--ink); font-size: 1.02rem; }
    .checkout-card span:last-child { color: var(--muted); font-size: 0.86rem; }
    .checkout-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(45,154,132,0.25); border-top-color: var(--teal); animation: gw-spin 0.8s linear infinite; }
    @keyframes gw-spin { to { transform: rotate(360deg); } }
    /* dvh = the VISIBLE viewport in iOS Safari (100vh includes the collapsed toolbar area,
       which made modals feel like they swallowed the whole page in the browser). */
    .auth-modal { width: min(720px, 100%); max-height: min(760px, calc(100vh - 36px)); max-height: min(760px, calc(100dvh - 36px)); overflow: auto; padding: 20px; background: var(--panel-strong); }
    .auth-modal-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; position: sticky; top: 0; z-index: 4; background: var(--panel-strong); }
    /* The sticky head sits ~20px lower than the flow space it reserves (its -20px top margin
       vs the scrollport origin) — the bottom margin must cover that PLUS the visible gap. */
    .auth-modal > .auth-modal-head { margin: -20px -20px 34px; padding: 18px 20px 16px; border-bottom: 1px solid var(--line); }
    .auth-modal-head .kicker { margin-bottom: 2px; }
    .auth-modal > .support-text:first-of-type { margin-top: 2px; }
    .legal-panel > .auth-modal-head { margin: -22px -22px 36px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
    /* Pin modal headings to the active-theme ink — the boot rule pins body color near-white,
       which made headings invisible after a dark→light in-session switch. */
    .auth-modal-head h2 { font-size: clamp(1.55rem, 4vw, 2.25rem); line-height: 1.05; color: var(--ink); -webkit-text-fill-color: var(--ink); }
    .auth-close { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink); cursor: pointer; font-size: 1.2rem; }
    /* Rating/feedback modal: pin the close button to the top-right corner so it never overlaps the centered
       "A quick favor" kicker (the star step and the written-feedback step share this same template). */
    .rating-modal .auth-close { position: absolute; top: 10px; right: 10px; z-index: 3; }
    .auth-form { display: grid; gap: 12px; padding-top: 12px; }
    .auth-form > .auth-field:first-child { margin-top: 4px; }
    /* Provider sign-in (Google/Apple) atop the login + signup forms. */
    .auth-oauth { display: grid; gap: 10px; }
    .oauth-button {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      min-height: 48px; padding: 0 16px; border-radius: 12px;
      border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
      font: inherit; font-weight: 600; cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .oauth-button:hover { background: var(--bg-soft); border-color: var(--ink); }
    .oauth-button:disabled { opacity: 0.6; cursor: default; }
    .oauth-mark { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; }
    .auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.82rem; margin: 2px 0; }
    .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
    .auth-field input, .auth-field select, .auth-field .pw-wrap { scroll-margin-top: 96px; }   /* never let the sticky head clip a focused first field */
    .account-quick-modal { width: min(520px, 100%); }
    /* breathing room between the sticky header line and the first body line at rest */
    .auth-modal-head + .support-text, .auth-modal-head + .auth-form { margin-top: 10px; }
    .account-modal-settings { margin-top: 14px; }
    .settings-list { display: grid; gap: 12px; }
    /* SYSTEM SWITCH (art225, owner-approved card): the sliding on/off control for settings rows.
       Gold track = on (the SUBTLE gold), ink knob rides it; off stays neutral. role="switch". */
    .switch { position: relative; width: 46px; height: 27px; border-radius: 999px; border: 0; cursor: pointer; flex: none; padding: 0; background: rgba(43,33,20,.22); transition: background .18s; }
    .switch .sw-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fbf8f1; box-shadow: 0 1px 3px rgba(20,15,8,.35); transition: left .18s; }
    .switch.is-on { background: #a97f38; }
    .switch.is-on .sw-knob { left: 22px; background: #2b2114; }
    .switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    body[data-theme="dark"] .switch { background: rgba(240,232,214,.2); }
    body[data-theme="dark"] .switch.is-on { background: #a97f38; }
    body[data-theme="dark"] .switch.is-on .sw-knob { background: #14110c; }
    .settings-master-label { font-weight: 800; font-size: 1.02rem; } .settings-row-master { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 4px; }
    .rec-old-note { font-size: 0.8rem; color: var(--muted); align-self: center; }
    .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
    .settings-row > span:first-child { color: var(--soft); font-size: 0.86rem; font-weight: 700; }
    .settings-row.is-stack { align-items: stretch; flex-direction: column; gap: 8px; }
    .notification-settings { display: grid; gap: 10px; }
    .notification-intro { color: var(--soft); line-height: 1.45; font-size: 0.88rem; margin: 0; }
    .notification-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
    .notification-pref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); gap: 8px; }
    .notification-pref { min-width: 0; justify-content: flex-start; }
    .notification-pref[aria-pressed="false"] { opacity: 0.72; }
    /* Explicit column so the label / input / password-hint always stack with even spacing. A bare
       <label> relied on grid-item blockification, and on iOS the password-requirements hint could
       overlap the Create-account button until a validation re-render reflowed it. */
    .auth-field { display: grid; gap: 6px; align-content: start; }
    .auth-field input { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); min-height: 48px; padding: 0 12px; }
    .auth-hint { display: block; margin-top: 0; color: var(--muted); font-size: 0.76rem; line-height: 1.4; }
    .auth-hint.is-warning { color: var(--rose); font-weight: 760; }
    .auth-hint.is-ok { color: var(--teal-deep); font-weight: 760; }
    .email-suggest { align-self: start; margin: -6px 0 2px; padding: 7px 12px; border: 1px solid var(--accent); border-radius: 999px; background: rgba(45, 154, 132, 0.10); color: var(--accent-ink, var(--ink)); font: inherit; font-size: 0.85rem; cursor: pointer; }
    .email-suggest:hover { background: rgba(45, 154, 132, 0.18); }
    body[data-theme="dark"] .email-suggest { color: #d8e0bc; }
    .email-suggest-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 2px; }
    .email-suggest-row .email-suggest { margin: 0; }
    .email-keep { font-size: 0.82rem; }
    .auth-risky-check { margin: -2px 0 4px; padding: 8px 10px; border: 1px solid rgba(180, 35, 24, 0.35); border-radius: 8px; background: rgba(180, 35, 24, 0.05); }
    body[data-theme="dark"] .auth-risky-check { border-color: rgba(255, 140, 130, 0.4); background: rgba(180, 35, 24, 0.16); }
    .auth-rescue { margin-top: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2, rgba(0,0,0,0.03)); font-size: 0.85rem; }
    .auth-rescue strong { display: block; margin-bottom: 6px; font-size: 0.85rem; }
    .auth-rescue ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; color: var(--muted); line-height: 1.45; }
    .auth-rescue .auth-inline-link { font-size: 0.85rem; padding: 0; }
    .auth-rescue .auth-inline-link[disabled] { opacity: 0.55; cursor: default; text-decoration: none; }
    .auth-rescue .auth-resend-status { text-align: left; min-height: 0; margin: 6px 0 0; }
    body[data-theme="dark"] .auth-rescue { background: rgba(255,255,255,0.04); }
    .auth-message { min-height: 22px; color: var(--teal-deep); font-weight: 780; line-height: 1.4; }
    /* Every "you did something wrong / wait a moment" status reads in the light red —
       it stands out and tells the user clearly that something needs their attention. */
    .auth-message.is-error,
    .auth-resend-status.is-cooldown { color: #b42318; }
    .auth-field input[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12); }
    .auth-resend-status { min-height: 20px; color: var(--muted); font-size: 0.82rem; font-weight: 780; line-height: 1.35; text-align: center; }
    .ghost-button.is-cooldown { color: #b42318; border-color: rgba(180, 35, 24, 0.32); }
    .legal-check { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; color: var(--soft); line-height: 1.4; }
    .legal-check input { margin-top: 3px; }
    .auth-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .legal-panel { width: min(760px, 100%); max-height: min(780px, calc(100vh - 36px)); overflow: auto; padding: 22px; background: var(--panel-strong); }
    .legal-copy { display: grid; gap: 14px; padding-top: 10px; color: var(--soft); font-size: 0.92rem; line-height: 1.65; }
    .legal-copy h3, .legal-copy h4 { color: var(--ink); margin-top: 14px; }
    .legal-updated { color: var(--muted); font-size: 0.8rem; }@media (max-width: 560px) { .legal-panel { padding: 16px; max-height: calc(100vh - 16px); } .legal-panel > .auth-modal-head { margin: -16px -16px 30px; padding: 16px 16px 12px; } }
    /* Sits ABOVE the phone bottom-nav (R7 audit: it covered the nav + lower controls). The nav
       is ~78px + safe-area on <=720px; desktop keeps the old 18px. */
    .cookie-banner { position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 90; padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--panel-strong); }@media (max-width: 720px) { .cookie-banner { bottom: calc(86px + env(safe-area-inset-bottom)); } }
    .cookie-banner p { color: var(--soft); line-height: 1.45; } .cookie-banner .primary-button { white-space: nowrap; flex: 0 0 auto; } .membership-nudge p  { color: var(--soft); line-height: 1.4; font-size: 0.9rem; }
    .membership-nudge { box-shadow: none; margin: 12px 0; padding: 13px; display: flex; justify-content: space-between; gap: 12px; align-items: center; background: linear-gradient(180deg, rgba(176, 112, 31, 0.08), rgba(86, 104, 138, 0.06)); }
    .membership-nudge strong { display: block; color: var(--ink); margin-bottom: 4px; }
    .official-link { border: 0; background: transparent; color: var(--teal-deep); font-weight: 820; cursor: pointer; padding: 0; }
    /* Support emails match the site's quiet ink links everywhere — never default browser blue. */
    a[href^="mailto:"] { color: var(--ink); font-weight: 680; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
    a[href^="mailto:"]:hover { text-decoration-color: var(--ink); }
    body[data-theme="dark"] a[href^="mailto:"] { color: var(--ink); }
    .auth-inline-link {
      justify-self: end; margin-top: -6px; border: 0; background: transparent;
      color: var(--teal-deep); font: inherit; font-size: 0.84rem; font-weight: 820;
      cursor: pointer; padding: 2px 0;
    }
    .auth-inline-link:hover { text-decoration: underline; }body[data-theme="dark"] .select-button,body[data-theme="dark"] .select-menu,body[data-theme="dark"] .select-option,body[data-theme="dark"] .range-row,body[data-theme="dark"] .meta-item,body[data-theme="dark"] .pulse-stage,body[data-theme="dark"] .chord,body[data-theme="dark"] .support-banner,body[data-theme="dark"] .home-daily-card,body[data-theme="dark"] .tool-row,body[data-theme="dark"] .home-stat,body[data-theme="dark"] .sheet-reader,body[data-theme="dark"] .auth-modal,body[data-theme="dark"] .legal-panel,body[data-theme="dark"] .cookie-banner,body[data-theme="dark"] .plan-card,body[data-theme="dark"] .membership-nudge,body[data-theme="dark"] .auth-field input,body[data-theme="dark"] .auth-button,body[data-theme="dark"] .account-card,body[data-theme="dark"] .welcome-question,body[data-theme="dark"] .welcome-feature { background-color: var(--panel-strong); color: var(--ink); border-color: var(--line); }
    body[data-theme="dark"] .select-option:hover { background: #2b2114; color: var(--ink); }
    body[data-theme="dark"] .select-option.is-selected { background: rgba(217, 169, 90, 0.16); color: #e7c266; }
    body[data-theme="dark"] .tab-row, body[data-theme="dark"] .seg-row { background: #171309; }
    body[data-theme="dark"] .tab { color: var(--soft); }
    body[data-theme="dark"] .tab.is-active { background: #e7c266; color: #14110c; }body[data-theme="dark"] .mp-goal-head strong { color: var(--ink); }
    body[data-theme="dark"] .official-link { color: #e7c266; }
    body[data-theme="dark"] .auth-inline-link { color: #e7c266; }
    body[data-theme="dark"] .practice-stat { background: var(--panel-strong); border-color: var(--line); }
    body[data-theme="dark"] .membership-nudge { background: linear-gradient(180deg, rgba(56,199,173,.12), rgba(123,173,240,.08)); }
    body[data-theme="dark"] .account-tabs { background: #171309; }
    body[data-theme="dark"] .account-tab:hover { background: rgba(255,255,255,0.05); }
    body[data-theme="dark"] .account-tab.is-active { background: #e7c266; color: #14110c; }
    body[data-theme="dark"] .account-plan-summary { background: linear-gradient(145deg, rgba(56,199,173,.12), rgba(123,173,240,.08)); }
    body[data-theme="dark"] .security-message.is-error { color: #ff9a92; }
    /* (art225) dark auth CTA override retired — same gold both modes */
    body[data-theme="dark"] .auth-message.is-error,
    body[data-theme="dark"] .auth-resend-status.is-cooldown,
    body[data-theme="dark"] .ghost-button.is-cooldown { color: #ff9a92; }
    body[data-theme="dark"] .auth-field input[aria-invalid="true"] { border-color: #ff9a92; box-shadow: 0 0 0 3px rgba(255, 154, 146, 0.14); }
    /* Safety net: EVERY text field and select goes dark in dark mode — no white-on-white
       is possible even for fields missed by the per-component rules above. */
    body[data-theme="dark"] input[type="text"], body[data-theme="dark"] input[type="email"],
    body[data-theme="dark"] input[type="password"], body[data-theme="dark"] input[type="number"],
    body[data-theme="dark"] input[type="search"], body[data-theme="dark"] select, body[data-theme="dark"] textarea {
      background-color: var(--panel-strong); color: var(--ink); border-color: var(--line);
    }
    body[data-theme="dark"] select option { background: #241c11; color: #f0e8d6; }
    /* iOS Safari auto-zooms into any focused field with text under 16px — which then leaves
       the page stuck zoomed/misproportioned. 16px on touch-size screens prevents it entirely. */
    @media (max-width: 900px) {
      input[type="text"], input[type="email"], input[type="password"], input[type="number"],
      input[type="search"], select, textarea,
      .auth-field input, .profile-input, .profile-textarea, .number-input, .tempo-input { font-size: 16px; }
    }
    button:disabled { opacity: 0.62; cursor: not-allowed; }
    /* Small decision cards (Build's Clear / leave-unsaved): the standard .auth-modal panel, sized down
       and centered — proper panel bg + ink in BOTH themes (the old unstyled div clashed in light mode). */
    .confirm-card { width: min(410px, 100%); padding: 22px; text-align: center; display: grid; gap: 10px; }
    .confirm-card h3 { margin: 0; font-size: 1.18rem; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 7px; }
    .confirm-card p { margin: 0; color: var(--soft); line-height: 1.5; font-size: 0.95rem; }
    .confirm-actions { display: grid; gap: 8px; margin-top: 8px; }
    .confirm-actions .primary-button, .confirm-actions .ghost-button { width: 100%; }
    /* Avatar face-fit editor (pan/zoom the photo inside the circle before it's baked). */
    .avatar-editor-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(12, 10, 8, 0.62); padding: 16px; }
    .avatar-editor { width: min(340px, 94vw); background: var(--panel-strong); border: 1px solid var(--line); border-radius: 12px; padding: 18px; box-shadow: var(--shadow); }
    .avatar-editor-head { display: flex; align-items: center; justify-content: space-between; }
    .avatar-editor-head .ghost-button { padding: 2px 10px; font-size: 1.2rem; line-height: 1; }
    .avatar-editor-hint { color: var(--soft); font-size: 0.86rem; margin: 6px 0 12px; }
    .avatar-editor-stage { position: relative; margin: 0 auto; border-radius: 50%; overflow: hidden; touch-action: none; background: #000; }
    .avatar-editor-canvas { display: block; cursor: grab; }
    .avatar-editor-canvas:active { cursor: grabbing; }
    .avatar-editor-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9); pointer-events: none; }
    .avatar-editor-zoom { display: flex; align-items: center; gap: 10px; margin: 14px 2px 4px; color: var(--soft); }
    .avatar-editor-zoom input { flex: 1; }
    .avatar-editor-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
    .avatar-editor-actions .primary-button, .avatar-editor-actions .ghost-button { width: 100%; }

    /* The pencil badge is gone (owner 2026-07-12: redundant next to Change/Adjust/Remove) — the
       avatar itself is the button, and the shell's grid centering keeps initials dead-centre
       (the old display:inline-block override here is what knocked them off-centre). */
    .avatar-preview-btn { padding: 0; border: none; cursor: pointer; }
    .avatar-preview-btn:hover { box-shadow: 0 0 0 2px var(--gold); }
    .avatar-preview-btn:disabled { cursor: default; opacity: 0.7; }
    /* Jam SOUNDCHECK ribbon (owner 2026-07-14): the music-world answer to caution tape — a brass
       corner banner in the site palette instead of industrial hazard stripes. Ships + dies with the jam gate. */
    .jam-soon .lock-card { position: relative; overflow: hidden; }
    /* A 45° corner banner only reads centred when its midpoint sits ON the corner's diagonal — i.e.
       inset-from-right must equal inset-from-top. It was 44px vs ~35px, so the word rode high and the
       card's overflow:hidden clipped the S (owner). top 30px puts the midpoint back on the diagonal. */
    .jam-soon .sc-ribbon { position: absolute; top: 30px; right: -56px; width: 200px; transform: rotate(45deg); background: linear-gradient(180deg, #d9a441, var(--gold)); color: #241a08; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-align: center; padding: 7px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.3); pointer-events: none; }