.mobile-app-install-banner {
    min-height: 64px;
    padding: 10px 24px;
}

.mobile-app-install-icon {
    width: 44px;
    height: 44px;
}

.mobile-app-install-title {
    font-size: 16px;
}

.mobile-app-install-subtitle {
    font-size: 14px;
}

.mobile-app-install-store-badge {
    height: 40px;
}

.mobile-app-install-store-text {
    min-height: 40px;
    padding: 0 16px;
    font-size: 14px;
}

.ai-content-badges {
    gap: 4px;
}

/* Spacing now lives on the .card-ai-actions-row wrapper (app.css) */
.card-ai-content-badges {
    margin-top: 0;
    margin-bottom: 0;
}

.player-ai-content-badges {
    margin-top: 8px;
}

.ai-content-badge-icon {
    width: 28px;
    height: 28px;
}

.player-ai-content-badges .ai-content-badge-icon {
    width: 36px;
    height: 36px;
}

.filter-pill-option-label {
    gap: 8px;
}

.filter-pill-option-icon {
    width: 24px;
    height: 24px;
}

.player-bar {
    background: linear-gradient(to top, #181818 0%, #282828 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* Extra large breakpoint styles (>=1200px) */
@media (min-width: 1200px) {
    /* AdminSongManagement container */
    #grid-container {
        width: 100%;
        height: calc(100vh - 10rem);
    }

    .song-text-details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 20px;
    }

    .song-text-details .song-title {
        margin: 0;
    }

    .song-title {
        font-size: 80px;
        font-weight: 900;
        line-height: 1;
        margin: 0 20px 0 20px;
        padding: 0;
    }

    /* The card title / artist / genre / stream-count rules that used to sit here are gone.
       Their colours were dark-theme greys hardcoded in a BREAKPOINT sheet, so they only
       existed above 1200px and were dead anyway (the theme sheet loads last and wins), and
       their margin-bottom:4px was quietly beating the margin:0 in app.css. Colour is now in
       light.css/dark.css and sizing is at the bottom of this file. */

    .stream-icon {
        width: 12px;
        height: 12px;
        fill: currentColor;
    }

    .stream-count-info {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #b3b3b3;
        font-size: 14px;
        font-weight: 500;
    }

    .artist-name-info {
        color: #b3b3b3;
        font-size: 14px;
        font-weight: 400;
        margin-top: 4px;
    }

    /* Genre info on song player */
    .genre-info {
        color: #b3b3b3;
        font-size: 14px;
        font-weight: 400;
        margin-top: 4px;
    }

    .stream-icon {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

    /* Featured Music Carousel - XL breakpoint: show ~5 cards */
    .featured-music-carousel {
        gap: 24px;
        padding-right: 24px;
    }

    .featured-music-carousel .music-card {
        width: 220px; /* Fixed width for XL screens */
        min-width: 220px;
    }

    .home-container {
        padding: 2rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Hero Section - XL Breakpoint */
    .hero-section {
        flex-direction: row;
        flex-wrap: nowrap;
        text-align: left;
        gap: 3rem;
        padding: 3rem 0;
    }

    .hero-content {
        min-width: 0;
        max-width: 34rem;
    }

    .hero-title {
        font-size: 4rem;
        margin-bottom: 1.5rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        max-width: 500px;
        margin-bottom: 2rem;
    }

    .hero-cta {
        justify-content: flex-start;
        gap: 1rem;
    }

    .hero-visual {
        margin-left: auto;
    }

    .cta-primary,
    .cta-secondary {
        padding: 14px 32px;
        font-size: 1rem;
    }

    .cta-large {
        padding: 16px 48px;
        font-size: 1.125rem;
    }

    .hero-animation {
        width: 300px;
        height: 300px;
    }

    /* Features Section - XL Breakpoint */
    .features-section {
        padding: 4rem 0;
    }

    .features-section .section-title {
        font-size: 2.5rem;
        margin-bottom: 3rem;
    }

    .features-grid {
        gap: 2rem;
    }

    .feature-card {
        padding: 2rem;
    }

    .feature-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 1.5rem;
    }

    .feature-card h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .feature-card p {
        font-size: 1rem;
        margin: 0;
    }

    /* User Playlists Section - XL Breakpoint */
    .user-playlists-section {
        gap: 1.5rem;
        padding: 2rem 0;
    }

    .user-playlists-section .section-title {
        font-size: 2rem;
    }

    /* Featured Music Section - XL Breakpoint */
    .featured-music-section {
        padding: 2rem 0;
    }

    .featured-music-section .section-title {
        font-size: 2rem;
    }

    .featured-music-section .section-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    /* CTA Split Section Spacing */
    .cta-split-section {
        margin: 3rem 0;
    }

    .cta-split-container {
        gap: 2rem;
        max-width: 1400px;
        margin: 0 auto;
        padding: 15px 10px 15px 2rem;
    }

    .cta-card {
        padding: 2rem;
        min-height: 500px;
    }

    .cta-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 1.5rem;
    }

    .cta-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .cta-description {
        font-size: 1.125rem;
        margin-bottom: 2rem;
    }

    .cta-benefits {
        margin-bottom: 2rem;
        max-width: 400px;
    }

    .cta-benefits li {
        font-size: 1rem;
        gap: 12px;
        margin-bottom: 1rem;
    }

    .cta-price-highlight {
        font-size: 1.25rem;
        margin-bottom: 2rem;
    }

    .cta-price-highlight .price {
        font-size: 2rem;
    }

    .cta-auth-text {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .cta-button {
        padding: 1rem 2.5rem;
        font-size: 1.125rem;
        width: auto;
        min-width: 250px;
    }

    .cta-button-group .cta-button {
        min-width: 150px;
    }

}

/* Playlists Page Spacing */
.playlists-page-container {
    padding: 20px;
}

.playlists-page-header {
    margin-bottom: 20px;
}

/* NOTE: everything from here to the end of the "Playlists Page Spacing" group is OUTSIDE the
   @media (min-width:1200px) block that closes above - it applies at every width. That was not
   obvious and it caused the two bugs fixed below. */

.playlists-page-grid {
    /* min() so the track can collapse below 300px. A bare minmax(300px,1fr) cannot: on a 360px
       phone it still demanded a 300px column and the grid overflowed. */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.playlists-page-card {
    /* Was width:300px !important and border-radius:16px !important. The fixed width fought the
       track at every size below desktop, and the radius overrode the shared .music-card radius -
       so on the home page a playlist card and a song card sat side by side at 16px and 14px.
       These cards carry .music-card (Home.razor, MyPlaylists.razor.cs:311, PlaylistCard.razor),
       so the shared surface should govern both. */
    height: 100%;
}

.playlists-page-info {
    margin-bottom: 15px;
}

.playlists-page-date {
    font-size: 0.85em;
}

.playlists-page-card-actions {
    gap: 10px;
}

.playlists-page-songs-section {
    margin-top: 30px;
    padding: 20px;
}

.playlists-page-songs-header {
    margin-bottom: 20px;
}

    .playlists-page-songs-header > div {
        gap: 10px;
    }

.playlists-page-songs-list {
    gap: 10px;
}

.playlists-page-song-item {
    padding: 10px;
}

.playlists-page-song-info {
    gap: 5px;
}

.playlists-page-song-genre {
    font-size: 0.85em;
}

.playlists-page-add-song-list {
    max-height: 400px;
    gap: 10px;
}

.playlists-page-add-song-item {
    padding: 10px;
}

.playlists-page-dialog-content {
    padding: 20px 0;
}

.google-auth-button {
    gap: 0.75rem;
}

.google-auth-icon {
    width: 20px;
    height: 20px;
}

/* Lyric timing dialog: spacing and sizing. */
.lyrics-dialog-field { gap: 0.25rem; margin-top: 0.75rem; }
.lyrics-dialog-textarea textarea { min-height: 260px; font-size: 0.95rem; line-height: 1.5; }
.lyrics-dialog-counter { font-size: 0.8rem; margin-top: 0.25rem; }
.lyrics-dialog-hint { font-size: 0.8rem; margin-top: 0.5rem; }
.lyrics-dialog-progress { gap: 0.35rem; margin: 0.75rem 0; }
.lyrics-dialog-progress-label { font-size: 0.85rem; }
.lyrics-dialog-footer { gap: 0.5rem; }


/* =========================================================================
   SONG PLAYER - "Marquee" sizing: desktop base
   Unwrapped, so it is the base every narrower sheet overrides. Sizing and
   spacing only - structure is in app.css, colour in light.css/dark.css.
   NOTE: .player-art-shell and .song-stage-art widths are mirrored in
   Components/Shared/CoverArtSizes.cs (PlayerHero / PlayerStage). Change one
   without the other and the browser fetches the wrong rendition.
   ========================================================================= */

/* No min-height. The band is sized by its content plus this padding: a fixed
   336px left roughly 90px of dead space above the artwork, because the hero
   bottom-aligns and the content only comes to ~240px. */
.song-player-container .song-header { padding: 34px 56px 30px; }
.song-player-container .song-hero-inner { gap: 30px; }
.song-player-container .player-art-shell { width: 168px; height: 168px; border-radius: 14px; }
.song-player-container .song-tag-row { gap: 7px; margin-bottom: 12px; }
.song-player-container .song-chip { height: 27px; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .07em; }
.song-player-container .song-title { font-size: 68px; letter-spacing: -.038em; line-height: .96; margin-bottom: 12px; }
.song-player-container .song-meta-row { gap: 18px; font-size: 14.5px; }
.song-player-container .stream-count-info { gap: 7px; }
.song-player-container .stream-icon { width: 17px; height: 17px; }
.song-player-container .artist-link { font-size: 16px; font-weight: 700; }
.song-player-container .subscription-badge { gap: 6px; font-size: 14px; }
.song-player-container .subscription-badge svg { width: 15px; height: 15px; }
.song-player-container .preview-label { font-size: 14px; font-weight: 600; }
.song-player-container .action-controls { gap: 10px; }
.song-player-container .song-action-cluster { gap: 8px; }
.song-player-container .play-button-large { width: 62px; height: 62px; }
.song-player-container .play-button-large .play-icon { width: 28px; height: 28px; margin-left: 3px; }

.song-player-container .song-stage { grid-template-columns: minmax(0, 1fr) 400px; gap: 34px; padding: 26px 56px 0; }
.song-player-container .song-panel { padding: 24px; height: 336px; }
.song-player-container .song-stage-panel { padding: 24px 30px; }
.song-player-container .song-panel-head { margin-bottom: 14px; }
.song-player-container .song-panel-caption { font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.song-player-container .song-panel-switch { gap: 3px; padding: 3px; }
.song-player-container .lyrics-toggle-button,
.song-player-container .art-toggle-button { gap: 6px; height: 28px; padding: 0 13px; font-size: 12px; font-weight: 600; }
.song-player-container .lyrics-toggle-icon { width: 14px; height: 14px; }
.song-player-container .song-panel-body { height: 246px; }
.song-player-container .lyrics-scroller--player { font-size: 21px; }
.song-player-container .song-stage-art { max-height: 246px; }
.song-player-container .persona-identity { gap: 14px; margin: 16px 0 14px; }
.song-player-container .persona-image-sm { width: 62px; height: 62px; }
.song-player-container .persona-bio { margin: 0 0 14px; font-size: 14px; line-height: 1.65; }
.song-player-container .persona-website { font-size: 13px; }
.song-player-container .song-tip-cta { gap: 9px; height: 46px; font-size: 14px; font-weight: 700; margin-top: auto; }
.song-player-container .song-tip-cta svg { width: 18px; height: 18px; }

.song-player-container .player-bar { margin: 24px 56px 22px; height: 74px; padding: 0 26px; gap: 20px; }
.song-player-container .player-controls { gap: 5px; }
.song-player-container .control-button { width: 40px; height: 40px; }
.song-player-container .control-icon { width: 18px; height: 18px; }
.song-player-container .play-button-small { width: 46px; height: 46px; margin: 0 3px; }
.song-player-container .play-icon-small { width: 20px; height: 20px; }
.song-player-container .progress-container { gap: 14px; }
.song-player-container .time-display { min-width: 40px; font-size: 11.5px; }
.song-player-container .progress-bar-container { height: 5px; }
.song-player-container .progress-bar-container:hover { height: 7px; }
.song-player-container .volume-controls { gap: 8px; }
.song-player-container .volume-bar-container { width: 92px; height: 5px; }
.song-player-container .progress-thumb,
.song-player-container .volume-thumb { width: 13px; height: 13px; }
.song-player-container .progress-limit-marker { width: 3px; }

/* The shared .album-art-animation is a fixed 200x200 - it is the library card
   size. In the hero it overflows the 168px shell and gets clipped, and in the
   stage panel it sits marooned in the middle. Fill whichever box it is in. */
.song-player-container .player-art-shell .album-art-animation { width: 100%; height: 100%; }
.song-player-container .song-panel-art .album-art-animation { width: 100%; height: 100%; max-width: 250px; max-height: 250px; }

/* Bio clamp. Mirrors .song-player-container .persona-bio in app.css - see the comment
   there for why the inherited 4.5em scroll box had to go. */
.song-player-container .persona-bio { -webkit-line-clamp: 3; }
.song-player-container .persona-more { gap: 5px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.song-player-container .persona-more svg { width: 13px; height: 13px; }


/* =========================================================================
   PLAYLIST PLAYER - "Marquee" sizing: desktop base
   Unwrapped, so it is the base every narrower sheet overrides.
   NOTE: .player-art-shell and .playlist-stage-art widths are mirrored in
   Components/Shared/CoverArtSizes.cs (PlaylistPlayerHero / PlayerStage), and
   .track-thumbnail in TrackThumbnail. Change one without the other and the
   browser fetches the wrong rendition - it renders soft, it does not error.
   ========================================================================= */

.playlist-player-container .playlist-header { padding: 34px 56px 30px; }
.playlist-player-container .playlist-hero-inner { gap: 30px; }
.playlist-player-container .player-art-shell { width: 168px; height: 168px; border-radius: 14px; }
.playlist-player-container .playlist-tag-row { gap: 7px; margin-bottom: 12px; }
.playlist-player-container .playlist-chip { height: 27px; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .07em; }
.playlist-player-container .song-title { font-size: 68px; letter-spacing: -.038em; line-height: .96; margin-bottom: 12px; }
.playlist-player-container .playlist-meta-row { gap: 18px; font-size: 14.5px; }
.playlist-player-container .now-playing-info { gap: 6px; }
.playlist-player-container .now-playing-label { font-weight: 500; }
.playlist-player-container .now-playing-track { font-weight: 600; }
.playlist-player-container .stream-count-info { gap: 7px; }
.playlist-player-container .stream-icon { width: 17px; height: 17px; }
.playlist-player-container .subscription-badge { gap: 6px; font-size: 14px; }
.playlist-player-container .subscription-badge svg { width: 15px; height: 15px; }
.playlist-player-container .preview-label { font-size: 14px; font-weight: 600; }
.playlist-player-container .persona-website { font-size: 13px; }
.playlist-player-container .action-controls { gap: 10px; }
.playlist-player-container .track-like-dislike { display: flex; align-items: center; }
.playlist-player-container .play-button-large { width: 62px; height: 62px; }
.playlist-player-container .play-button-large .play-icon { width: 28px; height: 28px; margin-left: 3px; }

.playlist-player-container .playlist-stage { grid-template-columns: minmax(0, 1fr) 400px; gap: 34px; padding: 22px 56px 0; }
.playlist-player-container .playlist-side { gap: 16px; }
.playlist-player-container .playlist-panel { padding: 20px 22px; }
.playlist-player-container .playlist-panel-head { margin-bottom: 14px; }
.playlist-player-container .playlist-panel-caption { font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.playlist-player-container .playlist-panel-count { font-size: 12px; }
.playlist-player-container .playlist-panel-switch { gap: 3px; padding: 3px; }
.playlist-player-container .lyrics-toggle-button,
.playlist-player-container .art-toggle-button { gap: 6px; height: 28px; padding: 0 13px; font-size: 12px; font-weight: 600; }
.playlist-player-container .lyrics-toggle-icon { width: 14px; height: 14px; }
.playlist-player-container .playlist-stage-panel { height: 232px; }
.playlist-player-container .playlist-stage-panel .playlist-panel-body { height: 146px; }
.playlist-player-container .lyrics-scroller--player { font-size: 17px; }
.playlist-player-container .playlist-stage-art { max-height: 146px; }
.playlist-player-container .playlist-artist-panel,
.playlist-player-container .playlist-about-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.playlist-player-container .persona-identity { gap: 13px; margin-bottom: 11px; }
.playlist-player-container .persona-image-sm { width: 48px; height: 48px; }
.playlist-player-container .persona-bio { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; -webkit-line-clamp: 2; }
.playlist-player-container .persona-bio-full { -webkit-line-clamp: none; font-size: 13.5px; line-height: 1.7; margin: 0 0 10px; }
.playlist-player-container .persona-more { gap: 5px; font-size: 12.5px; font-weight: 600; }
.playlist-player-container .persona-more svg { width: 13px; height: 13px; }
.playlist-player-container .playlist-tip-cta { gap: 9px; height: 44px; font-size: 14px; font-weight: 700; margin-top: auto; }
.playlist-player-container .playlist-tip-cta svg { width: 18px; height: 18px; }

.playlist-player-container .track-list th { font-size: 11px; font-weight: 700; letter-spacing: .12em; padding: 0 12px 10px; }
.playlist-player-container .track-list th.track-number { width: 46px; }
.playlist-player-container .track-list th.track-image { width: 52px; }
.playlist-player-container .track-list th.track-streams { width: 90px; }
.playlist-player-container .track-list th.track-duration { width: 70px; }
.playlist-player-container .track-row td { padding: 9px 12px; font-size: 14px; }
.playlist-player-container .track-row td:first-child { border-radius: 8px 0 0 8px; }
.playlist-player-container .track-row td:last-child { border-radius: 0 8px 8px 0; }
.playlist-player-container .track-index { font-size: 14px; }
.playlist-player-container .track-play-btn { width: 22px; height: 22px; }
.playlist-player-container .track-play-btn svg { width: 15px; height: 15px; }
.playlist-player-container .track-title-content { gap: 8px; }
.playlist-player-container .track-name { font-size: 14px; font-weight: 500; }
.playlist-player-container .track-preview-badge { height: 19px; padding: 0 7px; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.playlist-player-container .track-artist,
.playlist-player-container .track-genre { font-size: 13.5px; }
.playlist-player-container .track-thumbnail,
.playlist-player-container .track-thumbnail-animation { width: 40px; height: 40px; }
.playlist-player-container .playing-indicator { gap: 2px; height: 14px; }
.playlist-player-container .playing-indicator span { width: 3px; }
.playlist-player-container .tip-heart-inline { margin-left: 7px; }
.playlist-player-container .tip-heart-inline .tip-heart-icon { width: 15px; height: 15px; }

.playlist-player-container .player-bar { margin: 22px 56px 22px; height: 74px; padding: 0 26px; gap: 20px; }
.playlist-player-container .player-controls { gap: 5px; }
.playlist-player-container .control-button { width: 40px; height: 40px; }
.playlist-player-container .control-icon { width: 18px; height: 18px; }
.playlist-player-container .play-button-small { width: 46px; height: 46px; margin: 0 3px; }
.playlist-player-container .play-icon-small { width: 20px; height: 20px; }
.playlist-player-container .progress-container { gap: 14px; }
.playlist-player-container .time-display { min-width: 40px; font-size: 11.5px; }
.playlist-player-container .progress-bar-container { height: 5px; }
.playlist-player-container .progress-bar-container:hover { height: 7px; }
.playlist-player-container .volume-controls { gap: 8px; }
.playlist-player-container .volume-bar-container { width: 92px; height: 5px; }
.playlist-player-container .progress-thumb,
.playlist-player-container .volume-thumb { width: 13px; height: 13px; }
.playlist-player-container .progress-limit-marker { width: 3px; }


/* =========================================================================
   CARDS — sizing, desktop base
   Unwrapped, so it is the base every narrower sheet overrides.
   NOTE: the grid track and carousel widths below are mirrored in
   Components/Shared/CoverArtSizes.cs (Card). Change one without the other and
   the browser fetches the wrong rendition — it renders soft, it does not error.
   ========================================================================= */

.music-cards-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 24px; }
/* The carousel's per-breakpoint widths are NOT restated here — the existing
   "show ~N cards" rules above (and in lg/md/sm/xs) already own them. */

.music-library-sticky-header { gap: 16px; padding: 12px 0; }
.music-library-sticky-header h3 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.filter-pill { gap: 6px; height: 32px; padding: 0 14px; font-size: 14px; font-weight: 500; }
.filter-pill-count { width: 20px; height: 20px; font-size: 11px; font-weight: 700; }

.card-song-title { font-size: 14px; font-weight: 650; }
.card-artist-name { gap: 6px; font-size: 12.5px; }
.card-persona-image { width: 18px; height: 18px; }
.card-genre { font-size: 11.5px; }
.card-stream-count { font-size: 11.5px; }
.card-stream-info { gap: 5px; }
.card-stream-actions { gap: 8px; }
.card-actions-with-likes { gap: 6px; }
.action-button { height: 34px; }
.action-button .e-btn-icon,
.action-button svg { width: 16px; height: 16px; }

/* Deliberately shorter than the 34px action buttons above it - Share is a secondary action
   and the approved layout has it as a small pill, not a bar. */
.card-bottom-row .fb-share-btn { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
.card-bottom-row .fb-share-btn .fb-logo-box { width: 17px; height: 17px; font-size: 12px; }

.contact-icon { width: 26px; height: 26px; }

/* Section headers and page states — sizing. Unwrapped, like the card block above. */
.section-head { gap: 16px; margin-bottom: 6px; }
.section-eyebrow { font-size: 11.5px; letter-spacing: .10em; margin-bottom: 5px; }
.section-link { gap: 5px; font-size: 13.5px; }
.section-link svg { width: 14px; height: 14px; }

.loading-state,
.error-state,
.empty-state { gap: 14px; min-height: 200px; padding: 32px 24px; }

.empty-state { gap: 12px; padding: 56px 24px; }
.empty-state-icon { width: 64px; height: 64px; margin-bottom: 4px; }
.empty-state-icon svg { width: 30px; height: 30px; }
.empty-state-title { font-size: 18px; }
.empty-state-body { font-size: 14px; line-height: 1.55; }

.state-action { gap: 8px; height: 40px; padding: 0 20px; font-size: 14px; margin-top: 6px; }
.state-action svg { width: 16px; height: 16px; }

/* Creator funnel — spacing that used to be inline style= attributes. */
.cta-button-group { margin: 24px 0; }
.cta-group-note { font-size: 14px; }
.process-steps { display: flex; flex-direction: column; gap: 8px; }
.back-link { gap: 6px; font-size: 13.5px; margin-bottom: 18px; }
.back-link svg { width: 14px; height: 14px; }

/* Hero — the second headline line matches the first, and the two new button tiers match the
   .cta-primary/.cta-secondary geometry defined inside the min-width:1200px block above. */
.cta-outline,
.cta-quiet { padding: 14px 32px; font-size: 1rem; }

/* Auth pages - sizing. Unwrapped: this is the desktop base the breakpoints step down from. */
/* height:100% resolves against .content, which the :has rule in app.css sizes. Without
   :has it computes to auto and the min-height below is what applies, which is the old
   whole-page-scrolls behaviour rather than a broken one. */
.auth-page { margin: -1rem -1.5rem 0; height: 100%; min-height: calc(100dvh - 66px); }
.auth-panel { width: 620px; padding: 52px 56px; }
.auth-panel-logo { height: 40px; }
.auth-panel-eyebrow { font-size: 11.5px; letter-spacing: .10em; margin-bottom: 12px; }
.auth-panel-title { font-size: 44px; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 18px; }
.auth-panel-body { font-size: 17px; line-height: 1.6; max-width: 430px; }
.auth-panel-rule { width: 64px; height: 3px; }

.auth-form-col { padding: 48px 80px; }
.auth-form { max-width: 400px; }
.auth-title { font-size: 32px; line-height: 1.15; letter-spacing: -.022em; margin-bottom: 6px; }
.auth-subtitle { font-size: 15px; line-height: 1.55; margin-bottom: 28px; }

.auth-field { margin-bottom: 18px; }
.auth-label-row { gap: 12px; margin-bottom: 7px; }
.auth-label { font-size: 13px; margin-bottom: 7px; }
.auth-label-row .auth-label { margin-bottom: 0; }
.auth-link { font-size: 13px; }

.auth-alert { gap: 10px; padding: 12px 14px; margin-bottom: 20px; font-size: 13.5px; line-height: 1.5; }
.auth-alert-icon { width: 18px; height: 18px; margin-top: 1px; }

.auth-reactivate { padding: 12px 14px; margin-bottom: 18px; }
.auth-check { margin-bottom: 24px; }

.auth-page .e-btn.auth-submit { height: 48px; font-size: 16px; }
.auth-divider { gap: 14px; margin: 22px 0; }
.auth-divider span { font-size: 11.5px; letter-spacing: .10em; }
.auth-providers { gap: 10px; }
.auth-page .e-btn.auth-provider { height: 46px; gap: 10px; font-size: 15px; }
.auth-provider-icon { width: 18px; height: 18px; }
.auth-footer { font-size: 14px; margin-top: 28px; }
.auth-dev-hint { font-size: 12.5px; line-height: 1.5; margin-top: 18px; }

/* Register - sizing. */
.auth-legal { border-radius: var(--st-radius-sm); padding: 16px; margin-bottom: 22px; }
.auth-legal-row { gap: 10px; padding-bottom: 12px; }
.auth-legal-row-optional { padding: 12px 0 0; }
.auth-legal-split { margin-top: 2px; }
.auth-page .legal-text { font-size: 13.5px; line-height: 1.5; }

.auth-hint { font-size: 12.5px; line-height: 1.45; margin-top: 7px; }
.auth-verify-lead { font-size: 14px; line-height: 1.6; margin-bottom: 10px; }
.auth-verify-lead + .auth-verify-lead { margin-bottom: 22px; }
.auth-countdown { font-size: 13px; margin-top: 10px; }
.auth-rule { margin: 24px 0; }
.auth-subhead { font-size: 15px; margin-bottom: 4px; }
.auth-subhead-note { font-size: 13.5px; line-height: 1.55; margin-bottom: 16px; }

.auth-page .auth-input.form-control { height: 46px; border-radius: var(--st-radius-sm); padding: 0 14px; font-size: 15px; }
.auth-page .validation-errors { margin-bottom: 16px; }
.auth-page .validation-message,
.auth-page .validation-errors li { font-size: 12.5px; line-height: 1.5; }

/* Settings surfaces - sizing. */
.settings-page { gap: 46px; padding: 34px 40px 64px; min-height: calc(100dvh - 66px); margin: -1rem -1.5rem 0; }
.settings-nav { display: flex; width: 212px; gap: 2px; position: sticky; top: 24px; }
.settings-nav-heading { font-size: 11.5px; letter-spacing: .10em; margin-bottom: 10px; }
.settings-nav-link { padding: 8px 12px; border-radius: var(--st-radius-sm); font-size: 13.5px; }
.settings-main { max-width: 760px; }

.settings-head { margin-bottom: 26px; }
.settings-head-eyebrow { font-size: 11.5px; letter-spacing: .10em; margin-bottom: 6px; }
.settings-head-title { font-size: 32px; line-height: 1.12; letter-spacing: -.028em; margin-bottom: 8px; }
.settings-head-note { font-size: 15px; line-height: 1.55; }

.settings-column { gap: 22px; }
.settings-card { border-radius: 14px; padding: 24px; }
.settings-section-head { gap: 16px; margin-bottom: 18px; }
.settings-eyebrow { font-size: 11.5px; letter-spacing: .10em; margin-bottom: 5px; }
.settings-title { font-size: 20px; line-height: 1.25; letter-spacing: -.018em; }
.settings-note { font-size: 13.5px; line-height: 1.55; margin-top: 6px; }
.settings-prose { font-size: 14px; line-height: 1.6; }
.settings-tz { font-size: 12.5px; line-height: 1.5; margin-top: 14px; }
.settings-subhead { font-size: 13px; margin-bottom: 10px; }
.settings-hint { font-size: 12.5px; line-height: 1.45; margin-top: 7px; }
.settings-working { font-size: 14px; margin-top: 16px; }

.status-pill { height: 28px; padding: 0 12px; gap: 7px; font-size: 12.5px; }
.status-pill-dot { width: 7px; height: 7px; }

.fact-rows { margin-bottom: 16px; }
.fact-row { gap: 20px; padding: 11px 0; }
.fact-label { font-size: 13px; }
.fact-value { font-size: 14px; }

.subscription-terms { margin-top: 18px; }
.terms-list { gap: 9px; }
.terms-list li { font-size: 13.5px; line-height: 1.55; padding-left: 25px; }
.terms-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; }
.terms-agreement { margin-top: 18px; padding: 14px; border-radius: var(--st-radius-sm); background-color: var(--st-accent-soft); }

.settings-actions { gap: 10px; margin-top: 18px; }
.settings-inline-status { font-size: 13px; line-height: 1.45; }
:is(.settings-page, .settings-dialog) .e-btn.settings-btn { height: 40px; padding: 0 20px; font-size: 14px; }
:is(.settings-page, .settings-dialog) .e-btn.settings-btn.settings-btn-small { height: 32px; padding: 0 14px; font-size: 13px; }

.settings-check { margin-bottom: 4px; }
.settings-field { margin-bottom: 18px; }
.settings-label { font-size: 13px; margin-bottom: 7px; }

.passkey-rows { margin-bottom: 4px; }
.passkey-row { gap: 14px; padding: 12px 0; }
.passkey-icon { width: 34px; height: 34px; }
.passkey-icon svg { width: 17px; height: 17px; }
.passkey-name { font-size: 14px; margin-bottom: 3px; }
.passkey-meta { font-size: 12.5px; }
.passkey-actions { gap: 8px; }

/* Creator settings - the pieces Manage Account does not have */
.settings-consent { gap: 10px; padding: 16px; margin-bottom: 18px; font-size: 13.5px; line-height: 1.5; }
.settings-hero { gap: 16px; }
.settings-hero-icon { width: 46px; height: 46px; }
.settings-hero-icon svg { width: 24px; height: 24px; }
.settings-label-row { gap: 12px; margin-bottom: 7px; }
.settings-label-row .settings-label { margin-bottom: 0; }
.settings-count { font-size: 12px; }

.status-tiles { gap: 12px; }
.status-tile { padding: 16px; }
.status-tile-label { font-size: 12px; letter-spacing: .04em; margin-bottom: 9px; }

.step { gap: 13px; padding: 13px 0; }
.step-badge { width: 28px; height: 28px; font-size: 13px; }
.step-badge svg { width: 15px; height: 15px; }
.step-title { font-size: 14px; margin-bottom: 3px; }
.step-body { font-size: 13px; line-height: 1.55; }

.payout-sections { gap: 16px; }
.payout-section { padding: 18px; }
.payout-heading { gap: 12px; margin-bottom: 16px; }
.payout-num { width: 26px; height: 26px; font-size: 12.5px; }
.payout-heading-title { font-size: 15px; }

.retry-window { height: 40px; padding: 0 20px; font-size: 14px; }

.info-strip { gap: 10px; padding: 13px 14px; font-size: 13px; line-height: 1.55; font-weight: 600; margin-bottom: 16px; }
.info-strip-icon { width: 17px; height: 17px; margin-top: 1px; }

.persona-rows { margin-bottom: 4px; }
.persona-row { gap: 14px; padding: 14px 0; }
.persona-avatar { width: 46px; height: 46px; font-size: 15px; }
.persona-name { font-size: 14.5px; }
.persona-bio { font-size: 12.5px; line-height: 1.5; }
.persona-meta { font-size: 12px; margin-top: 2px; }

.persona-toolbar { gap: 16px; margin-bottom: 16px; }
.persona-summary { font-size: 13px; }
.persona-cards { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.persona-card { border-radius: 14px; padding: 18px; gap: 10px; }
.persona-card-head { gap: 14px; margin-bottom: 2px; }
.persona-avatar-lg { width: 56px; height: 56px; font-size: 19px; }
.persona-card-bio { font-size: 13.5px; line-height: 1.55; }
.persona-card-site { font-size: 12.5px; }
.persona-card .settings-actions { margin-top: 6px; }

.persona-image-picker { gap: 14px; padding: 14px; margin-bottom: 16px; }
.persona-image-title { font-size: 13.5px; margin-bottom: 3px; }
.persona-image-input { font-size: 13px; margin-top: 10px; }

.crop-tool { padding: 16px; margin-top: 14px; }
.crop-canvas { margin-bottom: 14px; }
.crop-zoom { gap: 12px; margin-bottom: 4px; }
.crop-zoom .settings-label { font-size: 12.5px; }



.settings-empty { gap: 12px; padding: 30px 20px; }
.settings-empty-icon { width: 64px; height: 64px; }
.settings-empty-icon svg { width: 28px; height: 28px; }
.settings-empty-title { font-size: 17px; }
.settings-empty-body { font-size: 14px; line-height: 1.55; }

.settings-guard, .settings-alert { gap: 10px; padding: 13px 14px; font-size: 13px; line-height: 1.55; }
.settings-guard { margin-top: 16px; }
.settings-alert { margin-bottom: 18px; font-weight: 600; }
.settings-guard-icon, .settings-alert-icon { width: 18px; height: 18px; margin-top: 1px; }

.settings-loading { gap: 12px; padding: 80px 20px; font-size: 15px; }
.settings-spinner { width: 20px; height: 20px; border-width: 2px; }

/* ---- Upload ---------------------------------------------------------- */
.upload-box { height: 260px; border-radius: 8px; }
.upload-content .upload-icon { width: 48px; height: 48px; margin-bottom: 8px; }
.inline-icon { width: 16px; height: 16px; }
.upload-processing-animation { width: 200px; height: 200px; }

.cover-art-pool { padding: 0.75rem 1rem; margin-bottom: 1rem; }
.cover-art-chips { gap: 0.75rem; }
.cover-art-chip { width: 7.5rem; padding: 0.5rem; }
.cover-art-chip-name { font-size: 0.75rem; }
.cover-art-thumb-row { width: 3rem; flex: 0 0 3rem; }
.cover-art-dropzone { gap: 0.5rem; min-height: 3.25rem; padding: 0.5rem; font-size: 0.8125rem; }
.cover-art-dropzone .inline-icon { width: 16px; height: 16px; opacity: 0.7; }
.cover-art-remove { font-size: 0.75rem; }
.cover-art-hint-swatch { padding: 0 0.25rem; }

.apply-all { gap: 12px; padding: 14px 16px; margin-bottom: 16px; }
.apply-all-label { font-size: 12.5px; }
.apply-all-field { min-width: 11rem; }
.apply-all-field .form-label { font-size: 12px; margin-bottom: 4px; }
.title-check { gap: 10px; margin-top: 6px; }
.title-check small { font-size: 11.5px; line-height: 1.45; }
.ai-flags { gap: 6px; }
.inline-create { margin-top: 8px; }
.inline-create-actions { gap: 6px; margin-top: 6px; }
.inline-create-link { margin-top: 6px; font-size: 12.5px; }
.review-outstanding { font-size: 12.5px; }

.row-remove { margin-top: 8px; }

.ai-declare { padding: 10px 12px; }
.ai-declare-or { margin: 7px 0 6px; font-size: 11px; font-style: italic; }

.apply-all-field-wide { min-width: 14rem; }