/* Shared mobile surfaces: same palette, edges and artwork as Respiraciones. */
html[data-mobile-shell] :is(#music-library-view, #routine-planner-view) { width: 100%; margin: 0; padding: 0; }
/* Before Start, the practice already exists underneath its preparation
   dialog. Keep that implementation detail completely invisible instead of
   blurring it through the safety screen. */
html[data-mobile-shell] .journey-prep-overlay:not(.countdown-active) {
    background: #0a0f18 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* The global decorative particle field belongs to the catalogue shell. The
   live breathing canvas already renders technique-aware motion, so keeping
   both canvases active creates stray soft dots behind the geometry. */
html[data-mobile-shell] body.in-practice:not(.video-mode) #bg-particles-canvas {
    opacity: 0 !important;
    visibility: hidden;
}
/* Preserve the contrast veil over the photograph, but remove the unrelated
   cyan radial bloom that otherwise reads as a blurry object behind Aura. */
html[data-mobile-shell] body.in-practice:not(.video-mode) .practice-atmosphere::after {
    content: none; display: none;
}
html[data-mobile-shell] :is(.music-library-header, #routine-planner-view .routine-hero) { padding: 0; margin: 0 0 16px; }
html[data-mobile-shell] :is(.music-library-header, .routine-hero) > .intent-eyebrow { display: none; }
html[data-mobile-shell] :is(.music-library-header h2, #routine-planner-view .routine-hero h1) {
    font-size: 28px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.025em;
}
html[data-mobile-shell] :is(.music-library-header p, #routine-planner-view .routine-hero p) { font-size: 14px; line-height: 1.45; margin: 0; color: #b9ccda; }
/* Override the shared #app-main hero rules as a complete surface: retaining
   their border while resetting only padding left the copy touching its frame. */
html[data-mobile-shell] #app-main #music-library-view { min-width: 0; max-width: 100%; box-sizing: border-box; }
html[data-mobile-shell] #app-main #music-library-view .music-library-header {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
    margin: 0 0 16px; padding: 16px; border: 1px solid var(--mobile-line);
    border-radius: 16px; background: linear-gradient(135deg, #0b2b3e, #071727);
    text-align: left;
}
html[data-mobile-shell] #app-main #music-library-view .music-library-header > .intent-eyebrow { display: none; }
html[data-mobile-shell] #app-main #music-library-view .music-library-header > h2 {
    margin: 0; min-width: 0; max-width: 100%; font-size: 28px; line-height: 1.2;
    letter-spacing: -.025em; overflow-wrap: anywhere;
}
html[data-mobile-shell] #app-main #music-library-view .music-library-header > p {
    margin: 0; min-width: 0; max-width: 100%; font-size: 14px; line-height: 1.45;
    white-space: normal; overflow-wrap: anywhere; color: #b9ccda;
}
html[data-mobile-shell] .music-filters { display: flex; flex-wrap: wrap; overflow: visible; gap: 5px; margin: 12px 0; }
html[data-mobile-shell] .music-filters button {
    flex: 1 1 calc(33.333% - 5px); min-width: 96px; min-height: 38px; padding: 7px 8px;
    border: 1px solid var(--mobile-line); border-radius: 10px; background: #0d1c2c;
    color: #aebfce; font-size: 11px; line-height: 1.15;
}
html[data-mobile-shell] .music-filters button.active { color: #effcff; background: #07506a; border-color: #25d4ed80; }
html[data-mobile-shell] .music-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
/* Playback is a control state, not a screen transition. */
html[data-mobile-shell] #music-library-view {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}
html[data-mobile-shell] .music-grid .music-card {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; width: 100%;
    min-height: 244px; aspect-ratio: .86; padding: 0; gap: 0; border: 1px solid #13607a;
    border-radius: 14px; background: #04192a; box-shadow: none; overflow: hidden;
    contain: layout paint; transform: none;
}
html[data-mobile-shell] .music-grid .music-card[hidden] { display: none; }
html[data-mobile-shell] .music-card .music-art {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; overflow: hidden;
    background-color: #04182c;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
html[data-mobile-shell] .music-art::before {
    content: ''; position: absolute; z-index: 1; inset: 0; display: block;
    background: linear-gradient(180deg, rgba(2, 12, 24, .08), transparent 38%, rgba(2, 13, 25, .46) 70%, rgba(2, 12, 23, .94));
}
html[data-mobile-shell] .music-art::after { display: none; }
html[data-mobile-shell] .music-card-copy {
    /* Keep the floating controls anchored to the whole cover. A positioned
       copy block made their `top` coordinate start halfway down the card. */
    position: static; z-index: 2; display: flex; flex: 0 0 auto; flex-direction: column;
    min-height: 102px; padding: 28px 11px 10px; overflow: visible;
    background: linear-gradient(transparent, rgba(3, 15, 28, .5) 30%, rgba(3, 13, 25, .84));
    text-shadow: 0 2px 10px rgba(0, 8, 18, .9);
}
html[data-mobile-shell] .music-card-copy h3 {
    display: flex; align-items: flex-end; overflow: hidden; min-height: 2.3em;
    font-size: 13px !important; font-weight: 390; line-height: 1.15; letter-spacing: .006em; margin: 4px 0 6px;
}
html[data-mobile-shell] .music-card-copy .technique-purpose-label { font-size: 9px !important; white-space: normal; overflow: visible; letter-spacing: .015em; color: #c1d4df; }
html[data-mobile-shell] .music-card .music-player-row { position: static; height: 0; margin: 0; }
html[data-mobile-shell] .music-card .music-player-row :is(.music-progress, .music-time) { display: none; }
html[data-mobile-shell] .music-card .mobile-cover-play {
    position: absolute !important; inset: 10px auto auto 10px; width: 44px; height: 44px;
    margin: 0; transform: none; border-radius: 50%; background: #38d9ee; color: #041321; z-index: 3;
}
html[data-mobile-shell] .music-card .music-favorite-toggle {
    top: 4px; right: 1px; left: auto; width: 44px; height: 44px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 3;
}
html[data-mobile-shell] .music-card .music-favorite-toggle svg { width: 17px; height: 19px; }
html[data-mobile-shell] .music-queue-add { width: 100%; min-height: 40px; margin-top: auto; padding: 8px; border-radius: 9px; border: 1px solid var(--mobile-line); background: #102a3c; font-size: 13px; }
html[data-mobile-shell] .music-queue-add.is-added { color: #93edda; background: #0c3939; }
html[data-mobile-shell] .music-card-copy > p.mobile-music-description {
    display: block; min-height: 2.6em; max-height: 2.6em; margin: 0 0 8px; overflow: hidden;
    color: #c5d5df; font-size: 10.5px; line-height: 1.3;
    white-space: normal; overflow-wrap: normal;
}
@keyframes mobileSoundBars {
    from { transform: scaleY(.62); opacity: .7; }
    to { transform: scaleY(1.08); opacity: 1; }
}
html[data-mobile-shell] .mobile-music-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
html[data-mobile-shell] [data-mobile-queue-open] { min-height: 44px; padding: 10px 16px; border: 1px solid var(--mobile-accent); border-radius: 12px; background: #07405a; color: #edfaff; font: inherit; font-size: 14px; }
html[data-mobile-shell] .mobile-queue-toast { font-size: 13px; color: #a5e6db; }
html[data-mobile-shell] .mobile-queue-dialog {
    position: fixed; inset: auto 0 0; width: min(640px, 100%); max-width: 100%; max-height: 85dvh;
    margin: auto auto 0; box-sizing: border-box; overflow: auto; padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    color: #eef8ff; border: 1px solid #286079; border-radius: 24px 24px 0 0; background: #071727;
}
html[data-mobile-shell] .mobile-queue-dialog::backdrop { background: #010916b8; }
html[data-mobile-shell] .mobile-queue-close { display: block; margin-left: auto; min-height: 44px; padding: 8px 12px; color: #cff6ff; background: #12364b; border: 0; border-radius: 10px; font: inherit; }
html[data-mobile-shell] .mobile-queue-dialog .music-playlist-panel { margin: 0; padding: 8px 0; border: 0; background: none; box-shadow: none; }
html[data-mobile-shell] .mobile-queue-dialog .music-playlist-heading { flex-direction: column; align-items: stretch; gap: 12px; }
html[data-mobile-shell] .mobile-queue-dialog .music-playlist-heading .intent-eyebrow { display: none; }
html[data-mobile-shell] .music-queue-item { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--mobile-line); border-radius: 0; background: none; }
html[data-mobile-shell] .music-queue-track { flex: 1 1 190px; min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; min-height: 44px; }
html[data-mobile-shell] .music-queue-track strong { white-space: normal; line-height: 1.3; }
html[data-mobile-shell] .music-queue-order button { min-width: 40px; min-height: 40px; }
html[data-mobile-shell] .music-queue-item.is-current { color: #8ee9f3; background: #0c2a3b; }
html[data-mobile-shell] #routine-planner-view :is(.routine-active-card, .routine-preset-card, .routine-empty-card, .challenge-medals) { border: 1px solid #13607a; border-radius: 16px; background: #071b2c; box-shadow: none; }
html[data-mobile-shell] #routine-planner-view .routine-active-card { padding: 16px; }
html[data-mobile-shell] #routine-planner-view .routine-view-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 16px; }
html[data-mobile-shell] #routine-planner-view .routine-view-nav button { min-width: 0; min-height: 44px; padding: 8px 5px; background: #0d1c2c; border: 1px solid var(--mobile-line); border-radius: 12px; color: #d5e4ec; font-size: 12px; }
html[data-mobile-shell] #routine-planner-view .routine-view-nav button[aria-pressed="true"] { background: #07405a; border-color: var(--mobile-accent); }
html[data-mobile-shell] #routine-planner-view .routine-section-heading { margin: 0 0 12px; }
html[data-mobile-shell] #routine-planner-view .routine-section-heading > .intent-eyebrow { display: none; }
html[data-mobile-shell] #routine-planner-view .routine-section-heading h2 { font-size: 19px; margin: 0 0 6px; }
html[data-mobile-shell] #routine-planner-view .routine-section-heading p { font-size: 14px; line-height: 1.4; }
html[data-mobile-shell] #routine-planner-view .challenge-preset-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 10px; }
html[data-mobile-shell] #routine-planner-view .challenge-preset-grid .routine-preset-card { padding: 12px; overflow: hidden; gap: 8px; }
html[data-mobile-shell] .mobile-challenge-art { position: relative; flex: 0 0 auto; width: calc(100% + 24px); min-height: 145px; aspect-ratio: 1.25; margin: -12px -12px 4px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #146381, #041b2f 75%); }
html[data-mobile-shell] .mobile-challenge-art > svg { position: absolute; width: 100%; height: 100%; }
html[data-mobile-shell] .mobile-challenge-art > span { position: absolute; inset: 10% 20% 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #c8f9ff; text-shadow: 0 0 15px #43e3f4a0; }
html[data-mobile-shell] .mobile-challenge-art b { font-size: 44px; font-weight: 650; line-height: 1; }
html[data-mobile-shell] .mobile-challenge-art small { font-size: 13px; }
html[data-mobile-shell] .routine-preset-card:nth-child(2) .mobile-challenge-art { filter: hue-rotate(325deg); }
html[data-mobile-shell] .routine-preset-card:nth-child(3) .mobile-challenge-art { filter: hue-rotate(25deg); }
html[data-mobile-shell] .routine-preset-card:nth-child(4) .mobile-challenge-art { filter: hue-rotate(280deg); }
html[data-mobile-shell] #routine-planner-view .routine-preset-card h3 { font-size: 17px; line-height: 1.25; }
html[data-mobile-shell] #routine-planner-view .routine-preset-card > p { font-size: 13px; line-height: 1.4; }
html[data-mobile-shell] #routine-planner-view .routine-preset-card > .intent-eyebrow { font-size: 10px; letter-spacing: .05em; }
html[data-mobile-shell] #routine-planner-view .routine-preset-card > .glass-button { font-size: 13px; padding: 10px 6px; }
html[data-mobile-shell] #routine-planner-view .challenge-benefits {
    display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none;
}
html[data-mobile-shell] #routine-planner-view .challenge-benefits li {
    position: relative; padding-left: 18px; color: #c8dce7; font-size: 11.5px; line-height: 1.35;
}
html[data-mobile-shell] #routine-planner-view .challenge-benefits li::before {
    content: '✓'; position: absolute; left: 0; top: 0; color: #5ce3d5; font-weight: 800;
}
html[data-mobile-shell] #routine-planner-view .routine-preset-options { margin-top: auto; }
html[data-mobile-shell] #routine-panel-create { min-width: 0; }
html[data-mobile-shell] #routine-panel-create .routine-builder {
    width: 100%; min-width: 0; margin: 0; padding: 0 14px 16px; box-sizing: border-box;
    overflow: hidden; border: 1px solid #17627b; border-radius: 18px;
    background: linear-gradient(160deg, #08283b, #061725 45%); box-shadow: none;
}
html[data-mobile-shell] .routine-builder-visual {
    position: relative; height: 132px; margin: 0 -14px 14px; overflow: hidden;
    background: radial-gradient(circle at 50% 30%, #176f86, #041a2b 72%);
}
html[data-mobile-shell] .routine-builder-visual > svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
html[data-mobile-shell] .routine-builder-visual > span {
    position: absolute; left: 50%; top: 46%; display: grid; place-items: center;
    width: 68px; height: 68px; transform: translate(-50%, -50%);
    border: 1px solid #adf7ff; border-radius: 50%; color: #d9fcff; background: #0b3546a8;
    font-size: 38px; font-weight: 300; box-shadow: 0 0 24px #36dbe75c;
}
html[data-mobile-shell] .routine-builder-hero { margin: 0; padding: 0; text-align: left; }
html[data-mobile-shell] .routine-builder-hero > .intent-eyebrow { display: block; margin: 0 0 5px; color: #54ddeb; font-size: 10px; letter-spacing: .08em; }
html[data-mobile-shell] .routine-builder-hero h2 { margin: 0 0 6px; color: #f3f9fc; font-size: 21px; line-height: 1.2; }
html[data-mobile-shell] .routine-builder-hero p { margin: 0; color: #b9ccda; font-size: 13px; line-height: 1.45; }
html[data-mobile-shell] .routine-builder-steps {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0;
}
html[data-mobile-shell] .routine-builder-steps > span {
    display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 66px; padding: 7px 4px;
    border: 1px solid #174559; border-radius: 11px; background: #0a2132; color: #c9dce7;
    font-size: 10px; line-height: 1.25; text-align: center;
}
html[data-mobile-shell] .routine-builder-steps b {
    display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%;
    color: #04202a; background: #4cdeeb; font-size: 11px;
}
html[data-mobile-shell] .routine-builder-selection {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    margin: 0 0 10px; color: #edf8fb;
}
html[data-mobile-shell] .routine-builder-selection strong { font-size: 14px; }
html[data-mobile-shell] .routine-builder-selection small { color: #8faabc; font-size: 10px; text-align: right; }
html[data-mobile-shell] #routine-panel-create .routine-builder-days { display: grid; gap: 8px; padding: 0; }
html[data-mobile-shell] #routine-panel-create .routine-builder-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 9px;
    min-width: 0; padding: 10px; border: 1px solid #17384a; border-radius: 12px;
    background: #071827; transition: border-color .2s ease, background .2s ease;
}
html[data-mobile-shell] #routine-panel-create .routine-builder-row.enabled { border-color: #278097; background: #0a2637; }
html[data-mobile-shell] #routine-panel-create .routine-day-toggle { grid-column: 1 / -1; min-height: 28px; color: #dbeaf2; font-size: 14px; font-weight: 650; }
html[data-mobile-shell] #routine-panel-create .routine-day-toggle input { width: 20px; height: 20px; accent-color: #3edbea; }
html[data-mobile-shell] #routine-panel-create .routine-builder-field { display: grid; min-width: 0; gap: 5px; }
html[data-mobile-shell] #routine-panel-create .routine-builder-field > span { color: #88a6b9; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
html[data-mobile-shell] #routine-panel-create .routine-builder-field :is(select, input) {
    width: 100%; min-width: 0; height: 42px; box-sizing: border-box; padding: 8px;
    border: 1px solid #285065; border-radius: 9px; background: #061421; color: #eef8fc; font-size: 12px;
}
html[data-mobile-shell] #routine-panel-create .routine-builder-row:not(.enabled) .routine-builder-field { display: none; }
html[data-mobile-shell] #routine-panel-create .routine-builder > .glass-button { width: 100%; min-height: 46px; margin: 14px 0 0; border-radius: 11px; }
html[data-mobile-shell] #routine-planner-view .routine-today-card { border: 1px solid #2d91a9; border-radius: 14px; background: linear-gradient(135deg, #104859, #081e32); padding: 14px; }
html[data-mobile-shell] #routine-planner-view .routine-active-heading h2 { font-size: 22px; line-height: 1.2; }
html[data-mobile-shell] .mobile-profile-heading { display: none; }
html[data-mobile-shell] body.mobile-profile-active { overflow-y: auto; }
html[data-mobile-shell] body.mobile-profile-active #app-main > :not(#account-overlay) { display: none !important; }
html[data-mobile-shell] body.mobile-profile-active #account-overlay {
    display: block; position: static; width: 100%; padding: 0; overflow: visible;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-mobile-shell] body.mobile-profile-active .mobile-profile-heading { display: block; font-size: 28px; margin: 0 0 16px; }
html[data-mobile-shell] body.mobile-profile-active .account-card { width: 100%; max-height: none; overflow: visible; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
html[data-mobile-shell] body.mobile-profile-active :is(#account-close, .account-heading) { display: none; }
html[data-mobile-shell] body.mobile-profile-active > .mobile-bottom-nav { display: grid !important; visibility: visible; pointer-events: auto; }
html[data-mobile-shell] body.mobile-profile-active :is(.account-identity, .account-sync-card, #account-access-card, .profile-achievements) { border-color: #13607a; background: #071b2c; border-radius: 16px; }
html[data-mobile-shell] body.mobile-profile-active .profile-achievements { padding: 14px; margin: 0; }
html[data-mobile-shell] .profile-badge-collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
html[data-mobile-shell] .profile-badge {
    --orb-tone: #43d9ef; position: relative; min-width: 0; padding: 18px 8px 12px; border: 1px solid #174357;
    border-radius: 16px; background: radial-gradient(ellipse at 50% 32%, #13354b, #061523 75%); text-align: center;
}
html[data-mobile-shell] .profile-badge[data-tone="forest"] { --orb-tone: #60e1b3; }
html[data-mobile-shell] .profile-badge[data-tone="aurora"] { --orb-tone: #b38afb; }
html[data-mobile-shell] .profile-badge[data-tone="cosmic"] { --orb-tone: #fb9ac6; }
html[data-mobile-shell] .profile-badge[data-tone="frost"] { --orb-tone: #c5eaff; }
html[data-mobile-shell] .profile-badge[data-tone="master"] { --orb-tone: #ffe296; border-color: #b6975166; }
html[data-mobile-shell] .profile-badge-orb {
    display: block; position: relative; width: min(90px, 80%); height: auto; aspect-ratio: 1; margin: 0 auto 16px;
    border: 1px solid color-mix(in srgb, var(--orb-tone) 80%, white); border-radius: 50%;
    background: radial-gradient(circle at 31% 24%, #fff 0, var(--orb-tone) 10%, color-mix(in srgb, var(--orb-tone) 35%, #12293d) 44%, #021020 77%);
    box-shadow: inset -10px -12px 14px #0008, inset 2px 2px 8px #fff8, 0 0 22px color-mix(in srgb, var(--orb-tone) 24%, transparent);
}
html[data-mobile-shell] .profile-badge-orb::after { content: ''; position: absolute; inset: 22% -7%; border: 1px solid var(--orb-tone); border-radius: 50%; transform: rotate(-27deg); opacity: .6; }
html[data-mobile-shell] .profile-badge-orb i { display: none; }
html[data-mobile-shell] .profile-badge .profile-badge-orb::after { display: none !important; content: none !important; }
html[data-mobile-shell] .profile-badge.locked .profile-badge-orb { filter: grayscale(.8); opacity: .5; }
html[data-mobile-shell] .profile-badge.unlocked { border-color: color-mix(in srgb, var(--orb-tone) 55%, transparent); }
html[data-mobile-shell] .profile-badge strong { display: block; color: #f1f7ff; font-size: 16px; }
html[data-mobile-shell] .profile-badge small { display: block; margin-top: 5px; color: #adc5d6; font-size: 12px; }
html[data-mobile-shell] .profile-badge-meter { margin-top: 12px; height: 3px; background: #1b3144; }
html[data-mobile-shell] .profile-badge-meter > i { background: var(--orb-tone); }

/* The upper shortcut owns account management; the five-item bottom bar owns
   the daily product destinations. */
html[data-mobile-shell] .mobile-bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html[data-mobile-shell] body.mobile-profile-active .account-card { padding-top: 52px; }
html[data-mobile-shell] body.mobile-profile-active #account-close {
    display: grid; position: fixed; z-index: 96; top: max(12px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right)); width: 42px; height: 42px;
    border: 1px solid #28536a; border-radius: 50%; color: #e9f9ff; background: #0a2031;
}
html[data-mobile-shell] body.mobile-profile-active #profile-saved-practices { display: none; }
html[data-mobile-shell] body.mobile-profile-active :is(.account-identity, .account-sync-card, #account-access-card) {
    border-color: #13607a; background: #071b2c; border-radius: 16px;
}

/* Saved library: one explicit home for techniques, experiences and music. */
html[data-mobile-shell] #favorites-view { width: 100%; margin: 0; }
html[data-mobile-shell] #app-main #favorites-view .favorites-header {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
    margin: 0 0 16px; padding: 16px; border: 1px solid var(--mobile-line);
    border-radius: 16px; background: linear-gradient(135deg, #0b2b3e, #071727); text-align: left;
}
html[data-mobile-shell] #favorites-view .favorites-header .intent-eyebrow { display: none; }
html[data-mobile-shell] #favorites-view .favorites-header h2 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.025em; }
html[data-mobile-shell] #favorites-view .favorites-header p { max-width: 100%; margin: 0; font-size: 14px; line-height: 1.45; text-align: left; }
html[data-mobile-shell] .favorites-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 18px; padding: 5px; border: 1px solid #183f54; border-radius: 15px; background: #081a29; }
html[data-mobile-shell] .favorites-switcher button { min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; color: #b8cbd8; border: 0; border-radius: 11px; background: transparent; font: inherit; font-size: 12px; }
html[data-mobile-shell] .favorites-switcher button[aria-selected="true"] { color: #071723; background: #5de7e9; box-shadow: 0 0 16px #34dcea3a; }
html[data-mobile-shell] .favorites-switcher span { min-width: 18px; padding: 2px 5px; border-radius: 99px; color: inherit; background: #ffffff18; font-size: 9px; }
html[data-mobile-shell] .favorites-groups { display: grid; gap: 20px; }
html[data-mobile-shell] .favorites-group { min-width: 0; }
html[data-mobile-shell] .favorites-group[hidden] { display: none; }
html[data-mobile-shell] .favorites-group-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 9px;
}
html[data-mobile-shell] .favorites-group-heading h3 { margin: 0; font-size: 18px; }
html[data-mobile-shell] .favorites-group-heading span {
    min-width: 25px; padding: 4px 7px; border-radius: 99px; color: #9eeefa; background: #0c3549;
    font-size: 11px; text-align: center;
}
html[data-mobile-shell] #favorites-view .favorites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-mobile-shell] #favorites-view .favorite-library-card {
    min-width: 0; aspect-ratio: .82; border: 1px solid #145b76; border-radius: 15px;
    background: radial-gradient(circle at 50% 23%, #165970, #061a2b 68%); box-shadow: none;
}
html[data-mobile-shell] #favorites-view .favorite-library-card.mobile-saved-card { min-height: 0; aspect-ratio: .78; overflow: hidden; }
html[data-mobile-shell] #favorites-view .favorite-library-card.mobile-saved-card {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    width: 100%; min-width: 0; height: auto; min-height: 210px; aspect-ratio: .86;
    padding: 0; overflow: hidden; border-radius: 13px; background: #04192a; color: #f8fafc;
}
html[data-mobile-shell] #favorites-view .mobile-saved-card .favorite-main-action {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    width: 100%; min-width: 0; min-height: 0; padding: 0; overflow: hidden;
}
html[data-mobile-shell] #favorites-view .mobile-saved-card .mobile-card-art { inset: 0; height: auto; }
html[data-mobile-shell] #favorites-view .mobile-saved-card .mobile-card-copy { height: auto; padding: 22px 10px 10px; }
html[data-mobile-shell] #favorites-view .mobile-saved-card .mobile-card-title { min-height: 2.3em; font-size: 14.5px; }
html[data-mobile-shell] #favorites-view .mobile-saved-card .mobile-card-pattern { font-size: clamp(19px, 5.5vw, 24px); }
html[data-mobile-shell] #favorites-view .mobile-saved-card .mobile-card-pattern.is-long { font-size: clamp(17px, 4.85vw, 21px); }
html[data-mobile-shell] #favorites-view .mobile-saved-card .mobile-card-meta { font-size: 12px; }
html[data-mobile-shell] #favorites-view .mobile-saved-card .mobile-card-badges { top: 10px; left: 9px; gap: 4px; }
html[data-mobile-shell] #favorites-view .mobile-saved-card .mobile-card-badges > span { padding: 3px 6px; font-size: 10px; }
html[data-mobile-shell] #favorites-view .mobile-saved-card .mobile-card-lock { top: 47px; right: 12px; left: auto; }
html[data-mobile-shell] #favorites-view [data-favorite-group="experiences"] { background: radial-gradient(circle at 50% 23%, #165b56, #061a2b 70%); }
html[data-mobile-shell] #favorites-view [data-favorite-group="music"] { background: radial-gradient(circle at 50% 23%, #344879, #071729 70%); }
html[data-mobile-shell] #favorites-view .favorite-main-action {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 7px;
    min-height: 100%; padding: 14px; text-align: left;
}
html[data-mobile-shell] #favorites-view .favorite-card-icon {
    width: 72px; height: 72px; margin: auto auto 4px; border-color: #8feeff80; border-radius: 50%;
    color: #c8faff; background: #0b3549a6; font-size: 28px;
}
html[data-mobile-shell] #favorites-view .favorite-card-copy { width: 100%; }
html[data-mobile-shell] #favorites-view .favorite-card-copy small { margin: 0 0 4px; font-size: 9px; letter-spacing: .03em; }
html[data-mobile-shell] #favorites-view .favorite-card-copy strong { font-size: 15px; line-height: 1.2; }
html[data-mobile-shell] #favorites-view .favorite-card-copy > span { margin-top: 4px; font-size: 11px; line-height: 1.35; -webkit-line-clamp: 2; }
html[data-mobile-shell] #favorites-view .favorite-remove { top: 4px; right: 1px; z-index: 8; width: 44px; height: 44px; color: #fff; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html[data-mobile-shell] #favorites-view .favorite-remove svg { fill: #fff; stroke: #fff; filter: none; }
html[data-mobile-shell] .favorite-card-lock { position: absolute; top: 11px; left: 11px; color: #d8f7ff; }
html[data-mobile-shell] .favorite-card-lock svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
html[data-mobile-shell] .favorites-group-empty { margin: 0; padding: 14px; border: 1px dashed #23495d; border-radius: 13px; color: #91aabd; font-size: 13px; }
html[data-mobile-shell] #favorites-view .favorites-empty { width: 100%; margin: 0; padding: 30px 18px; border-radius: 17px; }
html[data-mobile-shell] #favorites-view .favorites-empty > span { font-size: 2.7rem; }
html[data-mobile-shell] #favorites-view .favorites-empty h3 { margin-top: 13px; }
html[data-mobile-shell] .saved-music-art { position: absolute; inset: 0 0 36%; overflow: hidden; background: radial-gradient(circle at 50% 38%, #286b82, #06192b 74%); }
html[data-mobile-shell] [data-music-category="sleep"] .saved-music-art { background: radial-gradient(circle at 55% 38%, #32478d, #06162a 76%); }
html[data-mobile-shell] [data-music-category="nature"] .saved-music-art { background: radial-gradient(circle at 55% 38%, #197465, #041d25 76%); }
html[data-mobile-shell] [data-music-category="energy"] .saved-music-art { background: radial-gradient(circle at 55% 38%, #806b37, #082435 76%); }
html[data-mobile-shell] [data-music-category="depth"] .saved-music-art { background: radial-gradient(circle at 55% 38%, #563b72, #09162d 76%); }
html[data-mobile-shell] .saved-music-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: mobileSoundscape 8s ease-in-out infinite alternate; }
html[data-mobile-shell] .saved-music-art > i { position: absolute; left: 50%; top: 46%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid #c6f7ff9c; border-radius: 50%; background: repeating-radial-gradient(circle, #082a3cd9 0 3px, #2f5b70c9 4px 5px); box-shadow: 0 0 24px #39dcf250; animation: mobileRecordFloat 5.5s ease-in-out infinite alternate; }
html[data-mobile-shell] .saved-music-art b { position: absolute; left: 40%; top: 40%; width: 20%; height: 20%; border-radius: 50%; background: #e2fbff; box-shadow: 0 0 11px #6ceafa; }
html[data-mobile-shell] .saved-music-copy { position: absolute; inset: 64% 0 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 10px; text-align: left; }
html[data-mobile-shell] .saved-music-copy small { color: #9eb8c8; font-size: 10px; }
html[data-mobile-shell] .saved-music-copy strong { color: #f3fbff; font-size: 14px; line-height: 1.25; }

/* Progress is independent from account and owns every practice metric. */
html[data-mobile-shell] #progress-view { width: 100%; min-width: 0; gap: 12px; padding: 0; }
html[data-mobile-shell] #progress-view .progress-hero { grid-template-columns: 1fr; gap: 10px; }
html[data-mobile-shell] #progress-view .progress-card { border-color: #14536b; border-radius: 16px; background: #071b2c; }
html[data-mobile-shell] #progress-view .progress-welcome {
    min-height: 0; justify-content: flex-start; gap: 4px; margin: 0; padding: 4px 4px 8px;
    overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none;
}
html[data-mobile-shell] #progress-view .progress-welcome h2 { margin: 2px 0 3px; font-size: 24px; }
html[data-mobile-shell] #progress-view .progress-welcome p { margin: 0; font-size: 13px; line-height: 1.42; }
html[data-mobile-shell] #progress-view .progress-sync-state { margin-top: 2px; font-size: 11px; }
html[data-mobile-shell] #progress-view .progress-today { justify-content: flex-start; gap: 11px; padding: 14px 12px; }
html[data-mobile-shell] #progress-view .progress-today > .progress-metric-detail {
    align-self: flex-start; margin: 0; padding: 6px 9px; border: 1px solid #1b5268;
    border-radius: 999px; color: #bcd5e1; background: #0a2638; font-size: 11px; line-height: 1.2;
}
html[data-mobile-shell] .progress-week-strip-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
html[data-mobile-shell] .progress-week-strip-heading strong { color: #d8eaf3; font-size: 11px; font-weight: 650; text-align: right; }
html[data-mobile-shell] .progress-week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; width: 100%; }
html[data-mobile-shell] .progress-week-strip-day { display: grid; justify-items: center; gap: 5px; min-width: 0; }
html[data-mobile-shell] .progress-week-strip-day b {
    display: grid; place-items: center; width: 30px; height: 30px; box-sizing: border-box;
    border: 1px solid #294a5d; border-radius: 50%; color: #05202a; background: #0b2232;
    font-size: 13px; line-height: 1;
}
html[data-mobile-shell] .progress-week-strip-day.completed b { border-color: #55e4e9; background: #55e4e9; box-shadow: 0 0 12px #40dbea42; }
html[data-mobile-shell] .progress-week-strip-day.today b { border-width: 2px; border-color: #d5fbff; box-shadow: inset 0 0 0 2px #0a3142, 0 0 10px #40dbea42; }
html[data-mobile-shell] .progress-week-strip-day small { min-width: 0; color: #8fa9b9; font-size: 9px; text-transform: capitalize; }
html[data-mobile-shell] .progress-week-strip-day.today small { color: #e7f8fc; font-weight: 750; }
html[data-mobile-shell] #progress-view .stats-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
html[data-mobile-shell] #progress-view .stats-summary-grid .progress-card { padding: 11px 8px; }
html[data-mobile-shell] #progress-view .progress-metric-label { font-size: 9px; }
html[data-mobile-shell] #progress-view .progress-metric-value { font-size: 17px; }
html[data-mobile-shell] #progress-view .stats-summary-grid .progress-metric-detail { display: none; }
html[data-mobile-shell] #progress-view .mobile-progress-achievements {
    display: grid; gap: 13px; margin: 0; padding: 14px; border: 1px solid #14536b;
    border-radius: 16px; background: linear-gradient(160deg, #0b293d, #061725);
}
html[data-mobile-shell] #progress-view .mobile-progress-achievements .profile-stats { display: none; }
html[data-mobile-shell] #progress-view .profile-badge-heading { align-items: end; }
html[data-mobile-shell] #progress-view .profile-badge-heading h3 { margin: 3px 0 0; font-size: 19px; }
html[data-mobile-shell] .profile-badge-share {
    width: 100%; min-height: 32px; margin-top: 8px; border: 1px solid color-mix(in srgb, var(--orb-tone) 45%, #17384a);
    border-radius: 9px; color: #dffaff; background: #0b2a3d; font: inherit; font-size: 11px; font-weight: 700;
}

/* Mobile custom studio: visual preview first, then compact vertical controls. */
html[data-mobile-shell] #custom-studio-view { width: 100%; min-width: 0; margin: 0; }
html[data-mobile-shell] #app-main #custom-studio-view .custom-studio-hero {
    display: grid; justify-items: center; align-items: center; gap: 5px; width: 100%; max-width: none;
    margin: 2px 0 18px; padding: 4px 14px; box-sizing: border-box;
    border: 0; border-radius: 0; background: none; text-align: center;
}
html[data-mobile-shell] #custom-studio-view .custom-studio-hero .intent-eyebrow { display: none; }
html[data-mobile-shell] #custom-studio-view .custom-studio-hero h2 { margin: 0 0 5px; font-size: 28px; }
html[data-mobile-shell] #custom-studio-view .custom-studio-hero p { max-width: 38ch; margin: 0; font-size: 13px; line-height: 1.4; text-align: center; }
html[data-mobile-shell] #custom-studio-view .custom-studio-layout { display: grid; grid-template-columns: 1fr; gap: 12px; }
html[data-mobile-shell] #custom-studio-form { min-width: 0; padding: 12px; border-radius: 17px; }
html[data-mobile-shell] .mobile-studio-preview {
    position: relative; height: 185px; margin: -12px -12px 12px; overflow: hidden; border-radius: 17px 17px 0 0;
    background-image: linear-gradient(0deg, #041523e8, transparent 75%), var(--mobile-studio-atmosphere, radial-gradient(circle at 50% 30%, #176d85, #041a2b 75%));
    background-size: cover; background-position: center;
}
html[data-mobile-shell] .mobile-studio-art, html[data-mobile-shell] .mobile-studio-art > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-mobile-shell] .mobile-studio-art > svg:last-child { position: absolute; left: 50%; top: 45%; width: 104px; height: 104px; transform: translate(-50%, -50%); fill: none; stroke: #c2f8ff; stroke-width: 4; filter: drop-shadow(0 0 9px #4bdcec); }
html[data-mobile-shell] .mobile-studio-art :is(circle, polygon) { vector-effect: non-scaling-stroke; }
html[data-mobile-shell] #custom-studio-view .custom-studio-step { grid-template-columns: 25px minmax(0, 1fr); gap: 8px; padding: 14px 0; }
html[data-mobile-shell] #custom-studio-view .custom-step-number { width: 25px; height: 25px; font-size: 11px; }
html[data-mobile-shell] #custom-studio-view .custom-studio-step h3 { margin: 0 0 4px; font-size: 17px; }
html[data-mobile-shell] #custom-studio-view .custom-studio-step p { margin: 0 0 10px; font-size: 12px; }
html[data-mobile-shell] #custom-studio-view :is(.custom-preset-grid, .custom-rhythm-grid, .custom-duration-options, .custom-animation-grid, .custom-studio-atmospheres) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow: visible;
}
html[data-mobile-shell] #custom-studio-view :is(.custom-preset-grid, .custom-duration-options, .custom-animation-grid) button { min-width: 0; min-height: 48px; padding: 8px; }
html[data-mobile-shell] #custom-studio-view .custom-rhythm-grid label { min-width: 0; padding: 8px; }
html[data-mobile-shell] #custom-studio-view .custom-studio-atmospheres button { min-width: 0; width: 100%; aspect-ratio: 1.25; }
html[data-mobile-shell] #custom-studio-view .custom-studio-options { padding: 7px; border-radius: 13px; }
html[data-mobile-shell] #custom-studio-view .custom-saved-panel { padding: 14px; border-radius: 16px; }

/* Current in-app guide; replaces the deleted legacy route. */
html[data-mobile-shell] body.mobile-guide-active #app-main > :not(#mobile-product-guide) { display: none !important; }
html[data-mobile-shell] .mobile-product-guide { width: 100%; min-width: 0; }
html[data-mobile-shell] .mobile-guide-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
html[data-mobile-shell] .mobile-guide-header img { border-radius: 14px; }
html[data-mobile-shell] .mobile-guide-header span { min-width: 0; }
html[data-mobile-shell] .mobile-guide-header small { color: #53deed; font-size: 9px; letter-spacing: .15em; }
html[data-mobile-shell] .mobile-guide-header h1 { margin: 2px 0 0; font-size: 25px; line-height: 1.12; }
html[data-mobile-shell] .mobile-guide-intro { margin: 0 0 14px; color: #b8ccda; font-size: 13px; line-height: 1.4; }
html[data-mobile-shell] .mobile-guide-grid { display: grid; gap: 8px; }
html[data-mobile-shell] .mobile-guide-grid article { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid #16475e; border-radius: 13px; background: #071b2c; }
html[data-mobile-shell] .mobile-guide-grid article > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #bdf7ff; background: #0b3a50; }
html[data-mobile-shell] .mobile-guide-grid h2 { margin: 0 0 3px; font-size: 15px; }
html[data-mobile-shell] .mobile-guide-grid p { margin: 0; color: #abc0cf; font-size: 12px; line-height: 1.4; }
html[data-mobile-shell] .mobile-guide-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
html[data-mobile-shell] .mobile-guide-actions button { min-height: 44px; padding: 8px; border: 1px solid #1c718c; border-radius: 11px; color: #ebfbff; background: #0b3449; font: inherit; font-size: 12px; font-weight: 700; }

/* Fast four-step mobile session finder. */
html[data-mobile-shell] #practice-finder-overlay { padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); }
html[data-mobile-shell] #practice-finder-overlay .finder-card {
    width: min(100%, 520px); max-height: calc(100dvh - 28px); padding: 22px 14px 14px;
    border: 1px solid #27677e; border-radius: 21px; background: linear-gradient(155deg, #0b2b3e, #061523 62%);
}
html[data-mobile-shell] #practice-finder-overlay .finder-card h2 { margin: 3px 34px 5px 0; font-size: 24px; }
html[data-mobile-shell] #practice-finder-overlay .finder-card > p { margin: 0 26px 10px 0; font-size: 13px; line-height: 1.4; }
html[data-mobile-shell] #practice-finder-overlay .finder-progress { display: grid; gap: 6px; margin: 12px 0 4px; color: #a9c4d1; font-size: 11px; }
html[data-mobile-shell] #practice-finder-overlay .finder-progress i { display: block; height: 4px; overflow: hidden; border-radius: 99px; background: #18394b; }
html[data-mobile-shell] #practice-finder-overlay .finder-progress b { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #23cde6, #67efe0); transition: width .2s ease; }
html[data-mobile-shell] #practice-finder-overlay .finder-step[hidden],
html[data-mobile-shell] #practice-finder-overlay .finder-results[hidden] { display: none; }
html[data-mobile-shell] #practice-finder-overlay .finder-question { padding: 12px 0; }
html[data-mobile-shell] #practice-finder-overlay .finder-question legend { padding-bottom: 8px; font-size: 14px; }
html[data-mobile-shell] #practice-finder-overlay .finder-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
html[data-mobile-shell] #practice-finder-overlay .finder-options button { min-width: 0; min-height: 42px; padding: 8px; white-space: normal; font-size: 12px; }
html[data-mobile-shell] #practice-finder-overlay [data-finder-purpose]:last-child { grid-column: 1 / -1; }
html[data-mobile-shell] #practice-finder-overlay :is(.finder-format-options, .finder-time-options, .finder-level-options) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-mobile-shell] #practice-finder-overlay .finder-options button[aria-pressed="true"] { color: #03151f; border-color: #69eff1; background: #61e8eb; box-shadow: 0 0 18px #39dce93d; }
html[data-mobile-shell] #finder-show-results { width: 100%; min-height: 48px; margin-top: 8px; }
html[data-mobile-shell] #practice-finder-overlay .finder-result { margin: 10px 0; padding: 13px; border-radius: 14px; }
html[data-mobile-shell] #practice-finder-overlay .finder-result strong { font-size: 18px; }
html[data-mobile-shell] #practice-finder-overlay .finder-result p { font-size: 12px; line-height: 1.4; }
html[data-mobile-shell] #practice-finder-overlay .finder-result-primary { width: 100%; display: grid; gap: 5px; color: #eefaff; border: 1px solid #2abbd1; background: radial-gradient(circle at 80% 0, #155c70, #071b2d 68%); text-align: left; font: inherit; cursor: pointer; }
html[data-mobile-shell] #practice-finder-overlay .finder-result-primary > small { color: #57e4ed; font-size: 9px; letter-spacing: .11em; }
html[data-mobile-shell] #practice-finder-overlay .finder-result-primary > b { color: #8ee9dc; font-size: 11px; line-height: 1.4; }
html[data-mobile-shell] #practice-finder-overlay .finder-result-primary > em { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; color: #d9fbff; font-size: 12px; font-style: normal; font-weight: 750; }
html[data-mobile-shell] #practice-finder-overlay .finder-result-primary:focus-visible { outline: 2px solid #d9fbff; outline-offset: 3px; }
html[data-mobile-shell] #practice-finder-overlay .finder-results-heading h3 { margin: 3px 0 8px; font-size: 18px; }
html[data-mobile-shell] #practice-finder-overlay .finder-results-heading small { color: #4bddec; font-size: 9px; letter-spacing: .1em; }
html[data-mobile-shell] #practice-finder-overlay .finder-alternatives { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
html[data-mobile-shell] #practice-finder-overlay .finder-alternatives button { min-width: 0; min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 11px; text-align: left; color: #edfaff; border: 1px solid #24556b; border-radius: 13px; background: #0b2234; font: inherit; }
html[data-mobile-shell] #practice-finder-overlay .finder-alternatives small { color: #50dae8; font-size: 8px; letter-spacing: .08em; }
html[data-mobile-shell] #practice-finder-overlay .finder-alternatives strong { font-size: 13px; line-height: 1.25; }
html[data-mobile-shell] #practice-finder-overlay .finder-alternatives span { color: #9eb6c5; font-size: 10px; }
html[data-mobile-shell] #practice-finder-overlay :is(.finder-restart, .finder-back) { min-height: 40px; margin-top: 8px; padding: 8px 10px; color: #b9d6e0; border: 0; background: transparent; font: inherit; font-size: 12px; }

html[data-mobile-shell] .favorite-toggle { border-color: transparent; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-mobile-shell] .favorite-toggle:hover { border-color: transparent; background: transparent; }
html[data-mobile-shell] .favorite-toggle.is-favorite { color: #fff; border-color: transparent; background: transparent; box-shadow: none; transform: none; }
html[data-mobile-shell] .favorite-toggle.is-favorite svg { fill: #fff; stroke: #fff; filter: none; }
html[data-mobile-shell] :is(#techniques-grid, #combined-grid, #music-library-view) .favorite-toggle[aria-pressed="true"] svg {
    fill: #fff !important; stroke: #fff !important; filter: none !important;
}

html[data-mobile-shell] .global-music-controls button svg,
html[data-mobile-shell] .global-music-main-controls button svg { width: 19px; height: 19px; fill: currentColor; }
html[data-mobile-shell] :is(.global-music-controls, .global-music-main-controls) button:not(.global-music-toggle) {
    color: #dff9ff; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
html[data-mobile-shell] :is(.global-music-controls, .global-music-main-controls) button:not(.global-music-toggle):hover {
    background: transparent;
}
html[data-mobile-shell] :is(.global-music-controls, .global-music-main-controls) button:not(.global-music-toggle) svg {
    width: 27px; height: 27px;
}
html[data-mobile-shell] .global-music-controls .global-music-toggle { width: 48px; height: 48px; box-shadow: 0 0 18px #38d9ee55; }
html[data-mobile-shell] .global-music-main-controls .global-music-toggle { width: 64px !important; height: 64px !important; }

/* Calm five-destination navigation: full-width footing, generous separation
   between symbol and label, and no oversized active pill competing with the
   catalog. Touch targets remain at least 52px tall. */
html[data-mobile-shell] body:not(.in-practice) > .mobile-bottom-nav {
    right: 0; bottom: 0; left: 0;
    min-height: calc(72px + env(safe-area-inset-bottom));
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: 18px 18px 0 0;
    background: rgba(4, 14, 25, .965);
    box-shadow: 0 -10px 32px rgba(0, 0, 0, .32);
}
html[data-mobile-shell] body:not(.in-practice) > .mobile-bottom-nav button {
    min-height: 52px; padding: 5px 2px 3px; gap: 6px;
    border-radius: 12px; background: transparent;
}
html[data-mobile-shell] body:not(.in-practice) > .mobile-bottom-nav button.active {
    color: #39deef; background: transparent;
}
html[data-mobile-shell] body:not(.in-practice) > .mobile-bottom-nav svg { width: 22px; height: 22px; }
html[data-mobile-shell] body:not(.in-practice) > .mobile-bottom-nav span {
    font-size: 10px; font-weight: 650; line-height: 1; letter-spacing: -.01em;
}

/* iOS gives type=time an intrinsic control width that can ignore min-width: 0
   inside a fractional grid. Give both slots an explicit share of the row and
   contain the native control so Morning and Night can never overlap. */
html[data-mobile-shell] .routine-reminder-times {
    grid-template-columns: repeat(2, calc((100% - 10px) / 2));
    overflow: hidden;
}
html[data-mobile-shell] .routine-reminder-times label {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
html[data-mobile-shell] .routine-reminder-times input[type="time"] {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding-inline: 4px;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    font-size: clamp(.78rem, 3.7vw, .95rem);
}

/* Active mobile practice is intentionally immersive. The name and dose were
   already chosen in preparation; the live screen gives that space back to the
   breathing geometry and keeps only the current phase, cue and controls. */
html[data-mobile-shell] body.in-practice:not(.video-mode) #practice-view {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: 'journey' 'visual' 'guidance' 'stats' 'controls';
    gap: clamp(3px, .7dvh, 8px);
    padding-top: max(12px, env(safe-area-inset-top));
}
html[data-mobile-shell] body.in-practice:not(.video-mode) .practice-header { display: none !important; }
html[data-mobile-shell] body.in-practice:not(.video-mode):not(.style-ola) .sphere-container {
    transform: none; width: 100%; height: 100%;
}
html[data-mobile-shell] body.in-practice:not(.style-ola):not(.video-mode) #animation-canvas {
    /* Aura has wide transparent margins inside the canvas. Oversizing the
       drawing surface makes the actual geometry read as the main event. */
    width: min(238cqw, 218cqh); height: min(238cqw, 218cqh);
}
html[data-mobile-shell] body.in-practice:not(.video-mode) .breathing-bubble {
    width: min(370px, 96cqw); height: min(250px, 96cqh);
}
html[data-mobile-shell] body.in-practice:not(.video-mode) .bubble-text-phase { --practice-phase-label-size: 1.25rem; }
html[data-mobile-shell] body.in-practice:not(.video-mode) .practice-guidance-stack {
    align-self: start;
    transform: translateY(var(--practice-guide-shift, 0px));
}
html[data-mobile-shell] body.in-practice:not(.video-mode) #practice-view .guidance-text {
    justify-content: flex-start;
}
html[data-mobile-shell] body.in-practice:not(.video-mode) #animation-canvas {
    max-width: var(--practice-canvas-cap, 100%);
}
html[data-mobile-shell] body.style-ola.in-practice:not(.video-mode) #practice-view {
    /* The journey panel remains a named grid item even when switching styles.
       Omitting its area creates implicit columns and pushes the exit offscreen. */
    grid-template-rows: auto 40px minmax(0, 1fr) auto auto auto;
    grid-template-areas: 'journey' 'counter' 'visual' 'guidance' 'stats' 'controls';
}
html[data-mobile-shell] body.style-ola.in-practice:not(.video-mode) .sphere-container {
    width: 100%; height: 100%; min-height: 0;
}
html[data-mobile-shell] body.style-ola.in-practice:not(.video-mode) #animation-canvas {
    width: 148cqw; height: 142cqh; max-width: var(--practice-canvas-cap, none);
}
html[data-mobile-shell] body.style-ola.in-practice:not(.video-mode) #ola-hud {
    /* The counter belongs to the same focal area as the travelling cursor,
       not to the empty top of the screen. */
    transform: translateY(var(--practice-hud-shift, 0px));
    z-index: 40;
}
html[data-mobile-shell] body.style-ola.in-practice:not(.video-mode) .practice-guidance-stack {
    transform: translateY(var(--practice-guide-shift, 0px));
}
html[data-mobile-shell] body.in-practice:not(.video-mode) .session-info {
    transform: none;
}
html[data-mobile-shell] body.in-practice:not(.video-mode) .control-bar {
    transform: none;
    z-index: 50;
}

/* Match both columns and named areas when the phone turns sideways. */
@media (orientation: landscape) and (max-height: 540px) {
    html[data-mobile-shell] body.in-practice:not(.video-mode) #practice-view > :is(.practice-guidance-stack, #ola-hud) {
        transform: none;
    }
    html[data-mobile-shell] body.in-practice:not(.video-mode) #animation-canvas {
        width: min(130cqw, 120cqh);
        height: min(130cqw, 120cqh);
        max-width: 100%;
    }
    html[data-mobile-shell] body.style-ola.in-practice:not(.video-mode) #animation-canvas {
        width: 100cqw;
        height: 100cqh;
    }
    html[data-mobile-shell] body.in-practice:not(.video-mode) #practice-view {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        grid-template-areas: 'visual journey' 'visual guidance' 'visual stats' 'visual controls';
    }
    html[data-mobile-shell] body.style-ola.in-practice:not(.video-mode) #practice-view {
        grid-template-rows: 40px minmax(0, 1fr) auto auto;
        grid-template-areas: 'counter journey' 'visual guidance' 'visual stats' 'visual controls';
    }
}

@media (max-width: 390px) {
    html[data-mobile-shell] .global-music-controls #global-music-previous { display: grid; }
}

/* Reserve the player's footprint before playback starts. Showing the fixed
   player therefore changes no document dimensions and iOS has nothing to
   scroll-anchor or nudge when a track is selected. */
html[data-mobile-shell] #music-library-view {
    padding-bottom: calc(154px + env(safe-area-inset-bottom));
    /* WebKit can choose the tapped card as a scroll anchor while the fixed
       player is mounted. The catalogue owns its own stable footer space, so
       anchoring here is both unnecessary and visibly disruptive. */
    overflow-anchor: none;
}
html[data-mobile-shell] body.music-player-visible:not(.in-practice) {
    padding-bottom: 0;
}
/* Keep errors outside catalog layout. Never contain/transform the player:
   its expanded child must remain fixed to the viewport. */
html[data-mobile-shell] [data-native-music-status] {
    position: fixed;
    z-index: 120;
    top: max(12px, env(safe-area-inset-top));
    left: 16px;
    right: 16px;
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #102b3b;
    color: #fff;
}
html[data-mobile-shell] .music-grid .music-card,
html[data-mobile-shell] .music-card .mobile-cover-play {
    transition: none !important;
}

@media (max-width: 360px) {
    html[data-mobile-shell] body:not(.in-practice) > .mobile-bottom-nav span { font-size: 9px; }
    html[data-mobile-shell] body:not(.in-practice) > .mobile-bottom-nav svg { width: 20px; height: 20px; }
    html[data-mobile-shell] #favorites-view .favorite-card-icon { width: 58px; height: 58px; }
    html[data-mobile-shell] #progress-view .stats-summary-grid { grid-template-columns: 1fr; }
}

@keyframes mobileRecordFloat { from { transform: translate(-50%, -48%) rotate(-3deg); } to { transform: translate(-50%, -52%) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
    html[data-mobile-shell] :is(.mobile-record, .saved-music-art > svg, .saved-music-art > i) { animation: none !important; }
}