:root {
    --bg-primary: #3E2723;
    --bg-secondary: #2f1d19;
    --accent: #FFD700;
    --text-primary: #fff8f0;
    --text-soft: #eadca0;
    --font-heading: "Bebas Neue", sans-serif;
    --font-body: "Inter", sans-serif;
    /* Semantic aliases (Snap2Grid) — use for new UI; legacy rules may still use raw tokens above */
    --app-accent: var(--accent);
    --app-surface: var(--bg-secondary);
    --app-surface-raised: #3a2620;
    --app-text-body: rgba(255, 248, 240, 0.94);
    --app-text-muted: rgba(255, 248, 240, 0.72);
    --app-danger: #ff6b6b;
    /* Modal system tokens (v0.5 UI phase 3) */
    --tm-modal-overlay-z: 1200;
    --tm-modal-overlay-bg: rgba(10, 6, 5, 0.72);
    --tm-modal-overlay-blur: 4px;
    --tm-modal-panel-radius: 12px;
    --tm-modal-panel-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    --tm-modal-panel-max-width: 420px;
    --tm-modal-panel-size-sm: 360px;
    --tm-modal-panel-size-lg: 680px;
    --tm-modal-panel-bottom-gap: 2.25rem;
    --tm-notif-panel-width: 22rem;
    --tm-notif-panel-max-height: 28rem;
    --tm-notif-item-radius: 8px;
}

/* Dark mode — remap legacy vars + modal overlay */
[data-theme="dark"] {
  --bg-primary:    #1a1e17;
  --bg-secondary:  #12160f;
  --text-primary:  #f0ebe0;
  --text-soft:     #c8c3ad;
  --app-surface:   #1f2419;
  --app-surface-raised: #2a2f24;
  --app-text-body: rgba(240,235,224,0.94);
  --app-text-muted: rgba(240,235,224,0.60);
  --tm-modal-overlay-bg: rgba(0,0,0,0.76);
}

* { box-sizing: border-box; }

/* Global focus-visible — utilise le token focus pour dark/light cohérent */
:focus-visible {
    outline: 2px solid var(--stg-focus, #161a14);
    outline-offset: 2px;
}
/* Supprimer outline sur focus souris (conservé uniquement clavier) */
:focus:not(:focus-visible) { outline: none; }

body {
    margin: 0;
    font-family: var(--font-ui, "Inter Tight", system-ui, sans-serif);
    background: var(--stg-paper, #f4ede2);
    color: var(--stg-ink, #2a1a13);
    min-height: 100vh;
}

/* Défile avec la page : seul le bandeau « Now playing » reste collé au scroll séquenceur */
/* Header sticky ONLY in Browse page */
.main-nav {
    position: sticky;
    top: var(--sp-3, 12px);
    z-index: 1001;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    gap: var(--sp-5, 24px);
    align-items: center;
    margin: var(--sp-3, 12px) var(--sp-6, 32px) 0;
    padding: var(--sp-3, 12px) var(--sp-5, 24px);
    background: var(--stg-paper-2, #fbf6ec);
    border-radius: 999px;
    box-shadow: 0 2px 16px rgba(42, 26, 19, 0.10);
}

.nav-start {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
}

/* Brand — Fraunces italic */
.nav-brand {
    font-family: var(--font-display, "Fraunces", Georgia, serif);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--stg-ink, #2a1a13);
    line-height: 1;
}
.nav-brand em { font-style: italic; }
.nav-brand:hover { color: var(--stg-ink, #2a1a13); opacity: 0.8; }

/* Legacy logo — kept for JS refs fallback */
.nav-logo { display: none; }
.nav-logo-version { display: none; }

.nav-menu-btn {
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.15);
    color: #FFD700;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-site-menu-wrap {
    position: relative;
}

.nav-site-menu-btn {
    background: transparent;
    border: 1px solid var(--stg-rule-soft, #e8dac8);
    color: var(--stg-ink-2, #6b4a3c);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.nav-site-menu-btn:hover {
    background: var(--stg-hover, rgba(42,26,19,0.07));
    border-color: var(--stg-ink-2, #6b4a3c);
}

.nav-site-menu-btn__icon {
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.nav-site-menu-wrap.is-open .nav-site-menu-btn__icon {
    transform: rotate(180deg);
}

.nav-site-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--stg-paper, #f4ede2);
    border: 1px solid var(--stg-rule-soft, #e8dac8);
    border-radius: var(--stg-r-lg, 12px);
    padding: 0.35rem;
    min-width: 11rem;
    flex-direction: column;
    gap: 0.1rem;
    box-shadow: 0 8px 24px rgba(42,26,19,0.12);
    z-index: 2000;
}

.nav-site-menu-panel:not([hidden]) {
    display: flex;
}

.nav-site-menu-item {
    color: var(--stg-ink-2, #6b4a3c);
    padding: 0.55rem 0.8rem;
    text-decoration: none;
    font-family: var(--font-ui, "Inter Tight", sans-serif);
    font-size: var(--fs-small, 0.8rem);
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.12s, color 0.12s;
}

.nav-site-menu-item:hover {
    background: var(--stg-hover, rgba(42,26,19,0.07));
    color: var(--stg-ink, #2a1a13);
}

.contact-mail-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.contact-mail-link:hover {
    text-decoration: underline;
}

.nav-links {
    display: flex;
    gap: var(--sp-1, 4px);
    align-items: center;
    justify-content: center;
}

.nav-links-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.nav-hamburger-btn {
    display: none;
}

.nav-drawer-backdrop {
    display: none;
}

.nav-drawer-secondary {
    display: none;
}

.nav-link {
    text-decoration: none;
    font-family: var(--font-ui, "Inter Tight", sans-serif);
    font-size: var(--fs-small, 0.8rem);
    font-weight: 500;
    color: var(--stg-ink-2, #6b4a3c);
    padding: 5px 12px;
    border-radius: 999px;
    transition: background var(--dur-1, 0.15s) ease, color var(--dur-1, 0.15s) ease;
    border-bottom: none;
}

.nav-link:hover {
    background: var(--stg-hover, rgba(42,26,19,0.07));
    color: var(--stg-ink, #2a1a13);
}
.nav-link.active {
    background: var(--stg-ink, #2a1a13);
    color: var(--stg-paper, #f4ede2);
    border-bottom: none;
}
.nav-link:focus-visible {
    outline: 2px solid var(--stg-focus, #161a14);
    outline-offset: 2px;
}

.nav-end {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
}

/* Nav — mobile drawer (UX-2) */
@media (max-width: 768px) {
    .main-nav {
        display: flex;
        flex-wrap: wrap;
        margin-inline: var(--sp-2, 8px);
        padding: var(--sp-2, 8px) var(--sp-3, 12px);
        gap: var(--sp-2, 8px) var(--sp-3, 12px);
    }
    .nav-start { flex: 1 1 auto; min-width: 0; }
    .nav-brand { font-size: 1.05rem; }
    .nav-hamburger-btn { display: grid; flex-shrink: 0; }
    .nav-site-menu-wrap { display: none; }

    .nav-links-panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1202;
        width: min(17.5rem, 86vw);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: var(--sp-5, 24px) var(--sp-4, 16px) var(--sp-6, 32px);
        background: var(--stg-paper-2, #fbf6ec);
        box-shadow: 8px 0 32px rgba(42, 26, 19, 0.18);
        transform: translateX(-105%);
        transition: transform var(--dur-2, 0.25s) ease;
        overflow-y: auto;
        pointer-events: none;
    }
    .main-nav.is-drawer-open .nav-links-panel {
        transform: translateX(0);
        pointer-events: auto;
    }

    .nav-links {
        order: 0;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--sp-1, 4px);
        width: 100%;
    }
    .nav-link {
        display: block;
        padding: 10px 14px;
        font-size: 0.95rem;
        border-radius: var(--stg-radius-sm, 8px);
        text-align: left;
    }

    .nav-drawer-secondary {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: var(--sp-4, 16px);
        padding-top: var(--sp-4, 16px);
        border-top: 1px solid var(--stg-border, rgba(42, 26, 19, 0.12));
        width: 100%;
    }
    .nav-drawer-secondary__link {
        display: block;
        padding: 9px 14px;
        font-family: var(--font-ui, "Inter Tight", sans-serif);
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--stg-ink-2, #6b4a3c);
        text-decoration: none;
        border-radius: var(--stg-radius-sm, 8px);
        transition: background var(--dur-1, 0.15s) ease, color var(--dur-1, 0.15s) ease;
    }
    .nav-drawer-secondary__link:hover {
        background: var(--stg-hover, rgba(42,26,19,0.07));
        color: var(--stg-ink, #2a1a13);
    }

    .nav-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1201;
        background: var(--tm-modal-overlay-bg, rgba(10, 6, 5, 0.72));
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-2, 0.25s) ease;
    }
    .nav-drawer-backdrop:not([hidden]) {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-end { flex-shrink: 0; margin-left: auto; }
    .nav-btn { padding: 5px 12px; font-size: 0.75rem; }
    .nav-icon-btn { width: 32px; height: 32px; font-size: 0.9rem; }
    .nav-notif-panel {
        right: 0;
        left: auto;
        max-width: min(20rem, calc(100vw - 24px));
    }
}

body.is-nav-drawer-open {
    overflow: hidden;
}
@media (max-width: 390px) {
    .main-nav { margin-inline: 6px; }
    .nav-auth-user { gap: 4px; }
    a.nav-profile-cta { padding: 5px 10px; font-size: 0.68rem; }
}

/* Icon button (search, notif) */
.nav-icon-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: transparent;
    border: none;
    color: var(--stg-ink-2, #6b4a3c);
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem;
    position: relative;
    transition: background var(--dur-1, 0.15s) ease, color var(--dur-1, 0.15s) ease;
}
.nav-icon-btn:hover {
    background: var(--stg-hover, rgba(42,26,19,0.07));
    color: var(--stg-ink, #2a1a13);
}

/* CTA buttons */
.nav-btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-ui, "Inter Tight", sans-serif);
    font-size: var(--fs-small, 0.8rem);
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: background var(--dur-1, 0.15s) ease, color var(--dur-1, 0.15s) ease;
}
.nav-btn--ghost {
    background: transparent;
    color: var(--stg-ink, #2a1a13);
    border: 1px solid var(--stg-rule-soft, #e8dac8);
}
.nav-btn--ghost:hover {
    background: var(--stg-hover, rgba(42,26,19,0.07));
}
.nav-btn--primary {
    background: var(--stg-ink, #2a1a13);
    color: var(--stg-paper, #f4ede2);
}
.nav-btn--primary:hover {
    background: var(--stg-ink-2, #6b4a3c);
}

/* Legacy gilded button — kept for any stray references */
.nav-auth-btn-gilded {
    background: transparent;
    color: var(--stg-ink, #2a1a13);
    border: 1px solid var(--stg-rule-soft, #e8dac8);
    padding: 6px 16px;
    border-radius: 999px;
    font-family: var(--font-ui, "Inter Tight", sans-serif);
    font-weight: 600;
    font-size: var(--fs-small, 0.8rem);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}
.nav-auth-btn-gilded:hover { background: var(--stg-hover, rgba(42,26,19,0.07)); }

.guest-invite-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    padding: 0.45rem 1rem;
    background: rgba(62, 39, 35, 0.88);
    border-bottom: 1px solid rgba(255, 215, 0, 0.22);
    font-size: 0.86rem;
    color: rgba(255, 248, 240, 0.92);
}
.guest-invite-strip.hidden {
    display: none !important;
}
.guest-invite-text {
    text-align: center;
    line-height: 1.4;
}
.guest-invite-btn {
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.5);
    color: var(--accent);
    border-radius: 8px;
    padding: 0.28rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.guest-invite-btn:hover {
    background: rgba(255, 215, 0, 0.2);
}

.nav-auth { display: flex; align-items: center; }
.nav-auth-guest,
.nav-auth-user { display: flex; align-items: center; gap: var(--sp-2, 8px); }
.nav-auth-btn {
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: var(--accent);
    border-radius: 8px;
    padding: 0.38rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.nav-auth-btn:hover {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.65);
}
a.nav-profile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-size: 0.72rem;
}
a.nav-profile-cta.active {
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.45);
}
.nav-meta { color: var(--text-soft); font-size: 0.85rem; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.profile-container { max-width: 40rem; }
.profile-panel { margin-top: 0.5rem; }
.profile-lead { color: rgba(255, 248, 240, 0.9); line-height: 1.55; margin: 0 0 1rem; }
.profile-cta-btn { margin-top: 0.25rem; }
.profile-signed-label { font-size: 0.85rem; color: var(--text-soft); margin: 0; }
.profile-pseudo {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--accent);
    margin: 0.2rem 0 0.75rem;
    letter-spacing: 0.04em;
}
.profile-hint { font-size: 0.9rem; color: rgba(255, 248, 240, 0.82); line-height: 1.5; margin: 0 0 1.25rem; }
.profile-signout-btn { margin-top: 0.25rem; }

.save-modal-hint {
    font-size: 0.88rem;
    color: rgba(255, 248, 240, 0.85);
    margin: 0 0 0.85rem;
    line-height: 1.4;
}
.profile-hint--below-pseudo { margin-top: 0.25rem; }
.profile-api-error {
    font-size: 0.9rem;
    color: #ffb4a8;
    margin: 0.35rem 0 0.75rem;
    line-height: 1.45;
}
.profile-api-error.hidden {
    display: none !important;
}
.profile-playlist-create-block {
    margin: 1rem 0 1.25rem;
    max-width: 36rem;
}
.profile-bio-block {
    margin: 0.75rem 0 1rem;
    max-width: 36rem;
}
.profile-bio-label {
    display: block;
    font-size: 0.88rem;
    color: var(--text-soft);
    margin-bottom: 0.35rem;
}
.profile-bio-textarea {
    width: 100%;
    min-height: 5.5rem;
    padding: 0.5rem 0.6rem;
    box-sizing: border-box;
    background: #2f1d19;
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 8px;
    color: rgba(255, 248, 240, 0.95);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.45;
    resize: vertical;
}
.profile-bio-textarea:focus {
    outline: none;
    border-color: rgba(255, 215, 0, 0.65);
}
.profile-bio-hint {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.82rem;
}
.profile-bio-save {
    margin-top: 0.25rem;
}
.profile-bio-status {
    margin: 0.5rem 0 0;
}
.profile-playlist-row {
    display: block;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 248, 240, 0.88);
    font-size: 0.92rem;
}
.profile-patterns-block { margin: 1rem 0 1.25rem; }
.profile-subtitle {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    color: var(--accent);
    margin: 0 0 0.5rem;
}
.profile-patterns-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.profile-patterns-list li { margin: 0; }
.profile-pattern-open {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 248, 240, 0.95);
    font-size: 0.92rem;
    cursor: pointer;
    font-family: inherit;
}
.profile-pattern-open:hover {
    border-color: rgba(255, 215, 0, 0.55);
    background: rgba(255, 215, 0, 0.08);
}

#playlistPickOverlay,
#profileEditOverlay {
    z-index: 455;
}

.sequencer-pattern-menu-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.sequencer-pattern-menu-wrap.hidden {
    display: none !important;
}
.sequencer-pattern-dropdown {
    position: absolute;
    top: calc(100% + 0.2rem);
    right: 0;
    min-width: 12rem;
    z-index: 30;
    background: linear-gradient(165deg, #3e2723, #2a1814);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 8px;
    padding: 0.35rem 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.sequencer-pattern-dropdown.hidden {
    display: none !important;
}
.sequencer-pattern-dropdown__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.85rem;
    border: none;
    background: transparent;
    color: rgba(255, 248, 240, 0.95);
    font-size: 0.88rem;
    cursor: pointer;
    font-family: inherit;
}
.sequencer-pattern-dropdown__item:hover {
    background: rgba(255, 215, 0, 0.1);
}
.sequencer-pattern-dropdown__item--danger {
    color: #ffb4a8;
}
.control-btn-more {
    min-width: 2.25rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.profile-patterns-sheet {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.35rem;
}
.profile-pattern-row {
    display: flex;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 215, 0, 0.07);
}
.profile-pattern-row:last-child {
    border-bottom: none;
}
.profile-pattern-row__main {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
    text-align: left;
    padding: 0.35rem 0.45rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    cursor: default;
    font-family: inherit;
}
.profile-pattern-row__main:hover {
    background: transparent;
}
.profile-pattern-thumb--btn {
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.profile-pattern-thumb--btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
}
.profile-pattern-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}
.profile-pattern-thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, #8c5d47, #3e2723);
}
.profile-pattern-thumb-play {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 248, 240, 0.85);
    background: rgba(0, 0, 0, 0.42);
    color: #fff8f0;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.12s ease;
    padding: 0;
    line-height: 1;
    font-family: inherit;
}
.profile-pattern-thumb-wrap:hover .profile-pattern-thumb-play,
.profile-pattern-thumb-play.is-previewing,
.profile-pattern-thumb-play:focus-visible {
    opacity: 1;
}
.profile-pattern-thumb-play.is-previewing {
    background: rgba(255, 215, 0, 0.35);
    border-color: rgba(255, 215, 0, 0.9);
    color: #2a1814;
}
.profile-pattern-row__stats--icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(74, 45, 39, 0.72);
}
.profile-stat-ic {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.12rem 0.28rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.1);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.profile-stat-ic .bi {
    font-size: 0.88rem;
    opacity: 0.95;
}
.profile-pattern-row__text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}
.profile-pattern-row__title {
    font-weight: 600;
    font-size: 0.98rem;
    color: rgba(255, 248, 240, 0.98);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-pattern-row__meta {
    font-size: 0.82rem;
    color: rgba(255, 248, 240, 0.55);
}
.profile-pattern-row-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.profile-pattern-row-actions--with-social {
    align-items: flex-start;
}
.profile-pattern-preview-btn,
.profile-pattern-more-btn {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.22);
    background: rgba(0, 0, 0, 0.12);
    color: rgba(255, 248, 240, 0.9);
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1;
    font-family: inherit;
}
.profile-pattern-more-btn {
    font-size: 1.05rem;
    padding-bottom: 0.12rem;
    color: rgba(255, 248, 240, 0.85);
    border-color: rgba(255, 215, 0, 0.12);
    background: rgba(0, 0, 0, 0.1);
}
.profile-pattern-more-btn:hover {
    color: #fff8f0;
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.32);
}
.profile-pattern-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.15rem);
    min-width: 10.75rem;
    z-index: 35;
    background: linear-gradient(165deg, #3e2723, #2a1814);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 8px;
    padding: 0.3rem 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.profile-pattern-dropdown.hidden {
    display: none !important;
}
.profile-pattern-dropdown__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.42rem 0.8rem;
    border: none;
    background: transparent;
    color: rgba(255, 248, 240, 0.95);
    font-size: 0.86rem;
    cursor: pointer;
    font-family: inherit;
}
.profile-pattern-dropdown__item:hover {
    background: rgba(255, 215, 0, 0.1);
}
.profile-pattern-dropdown__item--danger {
    color: #ffb4a8;
}

.profile-playlists-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.35rem;
}
.profile-playlist-details {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    padding: 0.1rem 0.45rem 0.35rem;
}
.profile-playlist-summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    padding: 0.5rem 0.2rem;
    color: rgba(255, 248, 240, 0.95);
    font-size: 0.95rem;
}
.profile-playlist-summary::-webkit-details-marker {
    display: none;
}
.profile-playlist-body {
    padding: 0.2rem 0.15rem 0.45rem;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
}
.profile-playlist-track-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.38rem 0.15rem;
}
.profile-playlist-track-title {
    font-size: 0.86rem;
    color: rgba(255, 248, 240, 0.88);
    flex: 1;
    min-width: 0;
}
.profile-playlist-track-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.profile-playlist-open-btn,
.profile-playlist-rem-btn,
.profile-playlist-preview-btn {
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.25);
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 248, 240, 0.92);
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
}
.profile-playlist-preview-btn {
    min-width: 2rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}
.profile-playlist-empty-hint {
    margin: 0.35rem 0 0.15rem;
}

.profile-edit-panel {
    max-width: 440px;
}
.profile-readonly-field {
    margin: 0;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 248, 240, 0.85);
    font-size: 0.9rem;
    word-break: break-all;
}
.profile-email-line {
    font-size: 0.84rem;
    opacity: 0.78;
    margin: 0.1rem 0 0.45rem;
}
.profile-bio-display {
    margin: 0.25rem 0 0;
    line-height: 1.5;
    color: rgba(255, 248, 240, 0.88);
    font-size: 0.92rem;
    white-space: pre-wrap;
}
.profile-edit-open-btn {
    margin-top: 0.5rem;
}
.profile-import-check {
    display: block;
    margin: 0.5rem 0 0.65rem;
    font-size: 0.88rem;
    color: rgba(255, 248, 240, 0.85);
    cursor: pointer;
}
.profile-import-check input {
    margin-right: 0.4rem;
    vertical-align: middle;
}
/* ── Comments Section: The Gilded Vault ── */
.sequencer-comments-separator {
    margin: 4rem auto 2rem;
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(212, 199, 141, 0.4), transparent);
    width: 80%;
}

.sequencer-comments-panel {
    max-width: 900px;
    margin: 0 auto 5rem;
    padding: 3rem; /* Luxe spacing */
    background: #1F0F0C; /* surface container lowest variant */
    border-radius: 24px;
}

.sequencer-comments-panel__title {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.35rem;
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    line-height: 1.25;
}

.sequencer-comments-count {
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #f5e6c0;
    background: rgba(255, 215, 0, 0.14);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    line-height: 1.2;
}

.sequencer-comments-count.hidden {
    display: none;
}

.sequencer-comments-panel__hint {
    color: #D4C78D;
    font-size: 0.9rem;
    margin-bottom: 2.5rem;
    opacity: 0.7;
}

.pattern-comments-panel {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pattern-comments-list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.pattern-comment-row {
    background: linear-gradient(165deg, #faf8f2 0%, #f4efe6 100%);
    color: #2d1b17;
    padding: 1.1rem 1.2rem 1.2rem;
    border-radius: 14px;
    position: relative;
    border: 1px solid rgba(45, 27, 23, 0.32);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 5px 22px rgba(25, 10, 7, 0.2);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.pattern-comment-row__main {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.pattern-comment-meta {
    font-size: 0.78rem;
    color: rgba(68, 48, 43, 0.55);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}

.pattern-comment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(145deg, #ffe566, #e6c84d);
    color: #2d1b17;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.82rem;
    flex-shrink: 0;
    font-family: 'Epilogue', sans-serif;
}
.pattern-comment-row--reply .pattern-comment-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.78rem;
    border-radius: 10px;
}

.pattern-comment-content {
    flex: 1;
    min-width: 0;
}

.pattern-comment-row--reply {
    margin-left: 0;
    padding: 0.95rem 1.05rem 1.1rem;
    background: linear-gradient(165deg, #f2ebe2 0%, #e8dfd4 100%);
    transform: none;
    border: 1px solid rgba(45, 27, 23, 0.4);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 6px 20px rgba(25, 10, 7, 0.22);
}

.pattern-comment-replies {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    padding-left: 0.15rem;
    margin-left: 0.85rem;
    border-left: 1px solid rgba(45, 27, 23, 0.22);
}

/* Réponses : pas de double retrait (le bloc .replies crée déjà l’alignement) */
.pattern-comment-replies > .pattern-comment-row--reply {
    margin-left: 0;
    transform: none;
}

.pattern-comment-author-link {
    color: #2d1b17 !important;
    font-weight: 800;
    text-decoration: none;
}

.pattern-comment-body {
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 0.4rem;
    word-break: break-word;
    color: #44302b;
    font-weight: 500;
}

.pattern-comment-body--system {
    font-style: italic;
    opacity: 0.6;
}

.pattern-comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin-top: 0.45rem;
    padding-top: 0.35rem;
    border-top: none;
}

.pattern-comment-action {
    background: none;
    border: none;
    color: #a08a85;
    font-weight: 700;
    font-size: 0.58rem;
    text-transform: uppercase;
    cursor: pointer;
    padding: 1px 0;
    transition: all 0.2s;
    letter-spacing: 0.06em;
}

.pattern-comment-action:hover {
    color: #2d1b17;
    transform: translateY(-1px);
}

.pattern-comment-action--danger:hover {
    color: #E74C3C;
}

.pc-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(45, 27, 23, 0.05);
    padding: 0.12rem 0.28rem 0.12rem 0.32rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.68rem;
}

.pc-reaction-active {
    background: #ffd700;
    color: #221b00 !important;
}
.pc-reaction-btn .pc-reaction-count {
    font-size: 0.62rem;
}

/* Inline/Main Composer */
.pattern-comments-composer {
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(165deg, #fff9ec 0%, #fff6df 50%, #f5ebd4 100%);
    padding: 0.75rem 0.95rem;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(45, 27, 23, 0.1);
    border: 1px solid rgba(180, 150, 110, 0.28);
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.pattern-comments-composer.hidden {
    display: none;
}

.pattern-comments-composer__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.pc-inline-toggle-btn {
    margin-bottom: 1.5rem;
}

.pattern-comments-textarea {
    width: 100%;
    min-height: 3.25rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(120, 90, 70, 0.2);
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.92rem;
    color: #2d1b17;
    resize: none;
    transition: all 0.2s;
}

.pattern-comments-textarea:focus {
    outline: none;
    background: #fff;
    border-color: #ffd700;
}

.pc-composer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.pc-reaction-count { margin-left: 0.2rem; }

.pattern-comments-composer--inline-reply {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

/* Comment count badge on Browse cards */
.pc-comment-btn {
    border: none;
    background: transparent;
    color: #c8b896;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0 0.1rem;
}
.pc-comment-btn:hover { color: #ffd700; }
.pc-comment-count { font-variant-numeric: tabular-nums; }

/* Notification bell in nav */
.nav-notif-btn {
    position: relative;
    background: transparent;
    border: none;
    color: var(--stg-ink-2, #6b4a3c);
    font-size: 1.05rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.nav-notif-btn:hover {
    background: var(--stg-hover, rgba(42,26,19,0.07));
    color: var(--stg-ink, #2a1a13);
}
.nav-notif-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1.1em;
    height: 1.1em;
    font-size: 0.62rem;
    font-weight: 700;
    background: #e53935;
    color: #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2em;
    line-height: 1;
    transform: translate(35%, -35%);
}
.nav-notif-badge.hidden { display: none !important; }

/* Notifications dropdown panel */
.nav-notif-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    width: min(var(--tm-notif-panel-width), calc(100vw - 2rem));
    max-height: var(--tm-notif-panel-max-height);
    overflow-y: auto;
    background: linear-gradient(165deg, #3e2723, #2a1814);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55);
    z-index: 2000;
    padding: 0.5rem 0;
}
.nav-notif-panel.hidden { display: none !important; }
.nav-notif-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.85rem 0.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.12);
    font-size: 0.82rem;
    color: rgba(255, 248, 240, 0.7);
}
.nav-notif-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.nav-notif-title {
    font-weight: 700;
}
.nav-notif-subtitle {
    font-size: 0.68rem;
    color: rgba(255, 248, 240, 0.5);
}
.nav-notif-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-notif-mark-all {
    background: transparent;
    border: none;
    color: rgba(255, 215, 0, 0.7);
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
}
.nav-notif-refresh {
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: rgba(255, 248, 240, 0.82);
    border-radius: 999px;
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0.2rem 0.55rem;
}
.nav-notif-refresh:hover {
    border-color: rgba(255, 215, 0, 0.7);
    color: #ffd700;
}
.nav-notif-mark-all:hover { color: #ffd700; }
.nav-notif-item {
    padding: 0.55rem 0.85rem;
    font-size: 0.84rem;
    color: rgba(255, 248, 240, 0.88);
    border-bottom: 1px solid rgba(255, 215, 0, 0.06);
    border-radius: var(--tm-notif-item-radius);
    cursor: pointer;
    transition: background 0.12s;
}
.nav-notif-item:last-child { border-bottom: none; }
.nav-notif-item:hover { background: rgba(255, 215, 0, 0.06); }
.nav-notif-item--unread { background: rgba(255, 215, 0, 0.05); }
.nav-notif-item--unread .nav-notif-item-text::before {
    content: "● ";
    color: #ffd700;
    font-size: 0.5em;
    vertical-align: middle;
    margin-right: 0.2em;
}
.nav-notif-item-time {
    font-size: 0.72rem;
    color: rgba(255, 248, 240, 0.45);
    margin-top: 0.12rem;
}
.nav-notif-empty {
    padding: 1rem 0.85rem;
    font-size: 0.85rem;
    color: rgba(255, 248, 240, 0.45);
    text-align: center;
}
.nav-notif-wrap {
    position: relative;
    display: inline-flex;
    /* Stack above #navProfileMenuWrap (later sibling) so the dropdown panel is visible and clickable */
    z-index: 50;
}

/* Inline sequencer comments block */
.sequencer-comments-block {
    max-width: 1200px;
    width: 90%;
    margin: 1.5rem auto 0.5rem;
    padding: 1rem 1.2rem;
    background: rgba(47, 29, 25, 0.65);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
}
.sequencer-comments-panel {
    max-width: 1200px;
    width: min(1200px, 92vw);
    margin: 1.25rem auto 0.8rem;
    padding: 1rem 1.2rem;
    background: rgba(47, 29, 25, 0.65);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
}
.sequencer-comments-panel__title {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0.11em;
    color: var(--accent);
    margin: 0;
    text-transform: uppercase;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    line-height: 1.25;
}
.sequencer-comments-panel__hint {
    margin: 0.35rem 0 0.75rem;
    color: var(--text-soft);
    font-size: 0.86rem;
}
.sequencer-comments-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin: 0 0 0.65rem;
    text-transform: uppercase;
}
.pattern-comments-list--inline {
    max-height: 22rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 0.65rem;
}
.pattern-comments-composer--inline {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.auth-gate-panel { max-width: 440px; max-height: 90vh; overflow-y: auto; }
.auth-gate-preview-note {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 248, 240, 0.88);
    margin: 0 0 0.75rem;
}
.auth-gate-preview-note { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-soft); }
.auth-gate-error {
    font-size: 0.88rem;
    color: #ffb4a8;
    margin: 0 0 0.75rem;
    line-height: 1.4;
}
.auth-gate-error.hidden { display: none !important; }
.auth-gate-hint {
    margin: -0.35rem 0 0.65rem;
    font-size: 0.8rem;
    color: var(--text-soft);
    line-height: 1.35;
}
.auth-gate-section {
    margin-bottom: 1rem;
}
.auth-gate-section--divider {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
}
.auth-gate-subtitle {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--accent);
}
.auth-gate-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-soft);
    margin: 0.35rem 0 0.2rem;
}
.auth-gate-input {
    margin-bottom: 0.35rem;
}
.auth-gate-fullwidth {
    width: 100%;
    margin-top: 0.5rem;
}
.auth-gate-dev-details {
    margin: 0.75rem 0 0;
    font-size: 0.88rem;
    color: var(--text-soft);
}
.auth-gate-dev-details summary {
    cursor: pointer;
    color: rgba(255, 215, 0, 0.75);
}
.auth-gate-dev-details[open] summary {
    margin-bottom: 0.5rem;
}
.auth-gate-quick-logins {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}
.auth-gate-quick-btn {
    font-size: 0.82rem;
    padding: 0.4rem 0.55rem;
    text-align: center;
    white-space: nowrap;
}
.auth-gate-quick-role {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.08rem 0.35rem;
    border-radius: 3px;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    margin-left: 0.3rem;
    vertical-align: middle;
}

.page { padding: 1rem 1.5rem 2rem; max-width: 1400px; margin: 0 auto; }
.hidden { display: none !important; }

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2rem;
    gap: 1.5rem;
    margin-top: 2rem;
}

.hero-dynamic-title {
    position: relative;
    width: 100%;
    min-height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    text-align: center;
    color: var(--app-text-body);
    margin: 0.5rem 0;
}

.hero-separator {
    display: none;
}

.tut-slider-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    background: #2D1B17;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #0a0605;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.05);
}

.tut-nav-rail {
    display: none;
}

.section-title { font-family: var(--font-heading); font-size: 2rem; margin: 0 0 1rem; }

/* Browse filtres : même « glass » que .floating-header (séquenceur) */
.browse-toolbar {
    margin: 0 auto 1.5rem;
    width: 100%;
    max-width: 1400px;
    padding: 1.45rem 2rem;
    min-height: 5.5rem;
    background: rgba(73, 52, 48, 0.62);
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(18px);
}
.browse-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.35rem;
}
.browse-filter-label {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    font-size: 0.78rem;
    color: #d4c78d;
    font-family: var(--font-body);
}
.browse-filter-label > span {
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
    text-transform: uppercase;
    opacity: 0.92;
}
.browse-filter-control {
    -webkit-appearance: none;
    appearance: none;
    min-width: 10.5rem;
    min-height: 2.65rem;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(196, 155, 80, 0.45);
    background: #5d4037
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d4b86a' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E")
        no-repeat right 0.65rem center;
    color: #f5f0e6;
    font-family: "JetBrains Mono", "Inter", monospace;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.browse-filter-control:hover {
    border-color: #c4a000;
    color: #fff;
    background-color: #5d4037;
}
.browse-filter-control:focus {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
    border-color: #ffd700;
}
.browse-filter-control option,
.browse-filter-control optgroup {
    background: #3e2723;
    color: #fff;
}
/* Apply : angles comme le séquenceur (cf. .ds-sm-btn) — survol discret, sans halo jaune fort */
.browse-toolbar .browse-filter-apply.control-btn {
    margin-left: auto;
    align-self: flex-end;
    border-radius: 8px;
    min-height: 2.65rem;
    padding: 0.5rem 1.35rem;
    font-family: "JetBrains Mono", "Inter", monospace;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: none;
    border: 1px solid rgba(196, 155, 80, 0.45);
    background: #5d4037;
    color: #f5f0e6;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}
.browse-toolbar .browse-filter-apply.control-btn:hover {
    background: #6a4e42;
    color: #fff8f0;
    border-color: rgba(196, 155, 80, 0.75);
}
.browse-toolbar .browse-filter-apply.control-btn:focus-visible {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}
.browse-toolbar .browse-filter-apply.control-btn:active {
    transform: scale(0.97);
}

/* --- Save track modal (warm browns, no white cards) --- */
.save-win-modal {
    max-width: min(42rem, 92vw);
    width: 100%;
    background: linear-gradient(165deg, #6a5348 0%, #554038 38%, #3f322c 100%);
    border: 1px solid rgba(20, 12, 10, 0.45);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 24px 56px rgba(12, 8, 6, 0.55);
    color: #f0e4d8;
}

.save-win-modal-header {
    background: linear-gradient(180deg, rgba(62, 48, 40, 0.95) 0%, rgba(52, 40, 34, 0.98) 100%);
    padding: 1rem 1.35rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.28);
}

.save-win-modal-header--compact {
    padding: 0.85rem 1.15rem;
}

.save-win-modal-title {
    font-family: 'Epilogue', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: #f5eadc;
    margin: 0;
    letter-spacing: -0.02em;
    text-transform: none;
}

.save-win-close-btn {
    background: rgba(30, 22, 18, 0.55);
    border: 1px solid rgba(255, 210, 140, 0.18);
    border-radius: 8px;
    color: #e8d4c4;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.save-win-close-btn:hover {
    color: #fff8ef;
    background: rgba(48, 36, 30, 0.85);
    border-color: rgba(255, 215, 0, 0.35);
}

.save-win-modal-body {
    padding: 1.2rem 1.35rem 1.5rem;
}

.save-win-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.save-win-panel {
    background: rgba(42, 32, 28, 0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 200, 140, 0.1);
    border-radius: 14px;
    padding: 1.15rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.save-win-panel--wide { grid-column: span 2; }
.save-win-panel--full { grid-column: span 3; }

.save-win-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.save-win-panel-header--static {
    justify-content: flex-start;
}

.save-win-panel-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #c9b5a4;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.save-win-panel-label i {
    color: #e8c86a;
    font-size: 0.9rem;
}

/* Switch Toggle */
.save-win-switch {
    width: 32px;
    height: 18px;
    position: relative;
    cursor: pointer;
}

.save-win-switch input { display: none; }

.save-win-slider {
    position: absolute;
    inset: 0;
    background: rgba(80, 55, 45, 0.18);
    border: 1px solid rgba(80, 55, 45, 0.22);
    border-radius: 20px;
    transition: 0.3s;
}

.save-win-slider::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 2px;
    bottom: 2px;
    background: #c4a88a;
    border-radius: 50%;
    transition: 0.3s;
}

.save-win-switch input:checked + .save-win-slider {
    background: rgba(184, 134, 11, 0.35);
    border-color: rgba(154, 107, 45, 0.55);
}

.save-win-switch input:checked + .save-win-slider::before {
    transform: translateX(14px);
    background: #ffd54a;
}

/* Legacy: panels no longer use is-locked blur; remake fields stay visible */
.save-win-panel-content.is-locked {
    opacity: 0.35;
    pointer-events: none;
}

.save-win-field-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    color: #b8a090;
    margin-bottom: 0.45rem;
    opacity: 0.98;
    letter-spacing: 0.08em;
}

.save-win-input-primary {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 200, 120, 0.22);
    color: #fff4e6;
    font-family: 'Epilogue', sans-serif;
    font-weight: 800;
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    padding: 0.45rem 0;
}

.save-win-input-primary:focus {
    outline: none;
    border-color: rgba(255, 215, 100, 0.55);
}

.save-win-visibility-toggle {
    display: flex;
    width: 100%;
    background: rgba(24, 18, 15, 0.55);
    border: 1px solid rgba(255, 200, 120, 0.12);
    border-radius: 10px;
    padding: 4px;
}

.save-win-vis-pill {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(224, 208, 192, 0.45);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.save-win-vis-pill.active {
    background: rgba(255, 200, 72, 0.28);
    color: #fff8ec;
}

.save-win-meta-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem 1.35rem;
    margin-top: 1.35rem;
    align-items: end;
}

@media (max-width: 52rem) {
    .save-win-meta-row {
        grid-template-columns: 1fr 1fr;
    }
    .save-win-meta-item:first-child {
        grid-column: span 2;
    }
}

@media (max-width: 36rem) {
    .save-win-meta-row {
        grid-template-columns: 1fr;
    }
    .save-win-meta-item:first-child {
        grid-column: span 1;
    }
}

.save-win-meta-item--grow {
    min-width: 0;
}

.save-win-bpm-readout {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    color: #ffe8c8;
    font-family: 'Epilogue', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.1;
}

.save-win-bpm-unit {
    font-size: 0.75rem;
    font-weight: 700;
    color: #a89080;
    letter-spacing: 0.06em;
}

.save-win-input-readable {
    width: 100%;
    box-sizing: border-box;
    background: rgba(28, 22, 19, 0.75);
    border: 1px solid rgba(255, 200, 120, 0.16);
    border-radius: 10px;
    color: #f5ebe0;
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    text-transform: none;
    padding: 0.6rem 0.75rem;
    line-height: 1.35;
}

.save-win-input-readable:focus {
    outline: none;
    border-color: rgba(255, 210, 100, 0.45);
    box-shadow: 0 0 0 1px rgba(255, 200, 80, 0.2);
}

.save-win-input-readable::placeholder {
    color: rgba(200, 180, 160, 0.45);
    text-transform: none;
}

.save-win-remake-lead {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #b8a090;
}

.save-win-remake.save-win-remake--dim .save-win-remake-lead,
.save-win-remake.save-win-remake--dim .save-win-remake-grid {
    opacity: 0.48;
    transition: opacity 0.2s ease;
}

.save-win-remake.save-win-remake--dim .save-win-panel-header .save-win-panel-label {
    opacity: 0.72;
}

.save-win-specs-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
    gap: 1.5rem;
}

.save-win-spec-item {
    background: #0a0605;
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.save-win-spec-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    color: #D4C78D;
    opacity: 0.5;
    margin-bottom: 0.5rem;
}

.save-win-spec-value {
    color: #FFD700;
    font-family: 'Epilogue', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
}

.save-win-spec-unit { font-size: 0.75rem; margin-left: 0.25rem; }

.save-win-input-minimal {
    width: 100%;
    background: transparent;
    border: none;
    color: #FFD700;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 0.25rem 0;
}

.save-win-input-minimal:focus { outline: none; }

.save-win-remake-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.save-win-remake-meta {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1.25rem;
}

.save-win-remake-credits {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
}

.save-win-remake-youtube-row {
    grid-column: span 2;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.save-win-youtube-input-wrap { flex: 1; }

.save-win-fetch-btn-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.save-win-fetch-btn {
    background: rgba(212, 199, 141, 0.1);
    border: 1px solid rgba(212, 199, 141, 0.28);
    border-radius: 8px;
    color: #d4c78d;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.save-win-fetch-btn:hover {
    background: rgba(212, 199, 141, 0.2);
    border-color: rgba(212, 199, 141, 0.48);
}

.save-win-fetch-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.save-win-fetch-status {
    display: block;
    font-size: 0.68rem;
    color: #b8a090;
    margin-top: 0.35rem;
    min-height: 1em;
}

.save-win-youtube-preview {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.75rem;
}

.save-win-youtube-preview.hidden { display: none; }

.save-win-youtube-thumb {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.save-win-youtube-info {
    font-size: 0.78rem;
    color: #c0b090;
    line-height: 1.35;
}

.save-win-youtube-info strong {
    display: block;
    color: #d4c78d;
    font-weight: 700;
}

.save-win-modal-footer {
    padding: 0 1.35rem 1.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.save-win-save-btn {
    width: 100%;
    background: #ffd700;
    border: 1px solid rgba(80, 55, 45, 0.22);
    border-radius: 12px;
    padding: 0.95rem 1rem;
    color: #2a1814;
    font-family: 'Epilogue', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    box-shadow: 0 10px 24px rgba(42, 24, 20, 0.18);
    transition: transform 0.2s, box-shadow 0.2s;
}

.save-win-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(42, 24, 20, 0.22);
}
.save-win-save-btn:active { transform: scale(0.99); }

.save-win-footer-hint {
    font-size: 0.6rem;
    font-weight: 700;
    color: #9a8878;
    opacity: 0.75;
    letter-spacing: 0.15em;
}

.save-win-visibility-hint {
    font-size: 0.68rem;
    font-style: normal;
    color: #a09082;
    opacity: 0.95;
    margin-top: 0.65rem;
}

.save-win-cover-upload {
    border-top: 1px solid rgba(255, 200, 120, 0.1);
    padding-top: 0.85rem;
}

.save-win-cover-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.save-win-upload-btn {
    background: rgba(36, 28, 24, 0.65);
    border: 1px dashed rgba(255, 200, 120, 0.28);
    color: #e0d0c4;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.save-win-upload-btn:hover {
    background: rgba(52, 40, 34, 0.85);
    border-color: rgba(255, 215, 100, 0.4);
    color: #fff8f0;
}

.save-cover-preview {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 200, 120, 0.22);
}

.save-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.save-win-radio {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #c9b5a4;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    margin: 0 1rem;
}

.save-win-radio input {
    accent-color: #9a6b2d;
}
.save-visibility-segment {
    display: flex;
    gap: 0.55rem;
    padding: 0.45rem;
    border-radius: 14px;
    background: rgba(8, 5, 4, 0.55);
    border: 1px solid rgba(255, 215, 0, 0.28);
    width: 100%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.save-visibility-pill {
    flex: 1;
    padding: 0.78rem 1rem;
    border: 2px solid rgba(255, 215, 0, 0.28);
    border-radius: 10px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    background: rgba(255, 215, 0, 0.07);
    color: rgba(252, 244, 232, 0.78);
    transition:
        color 0.2s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
.save-visibility-pill:focus-visible {
    outline: none;
    border-color: rgba(255, 230, 140, 0.95);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.35);
}
.save-visibility-pill.active {
    background: linear-gradient(180deg, #fff0a3 0%, #ffd700 42%, #e9b800 100%);
    color: #140a08;
    border: 2px solid rgba(255, 248, 220, 0.95);
    box-shadow:
        0 0 0 2px rgba(255, 193, 7, 0.55),
        0 0 22px rgba(255, 200, 40, 0.45),
        0 6px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transform: scale(1.02);
}
.save-visibility-pill:not(.active):hover {
    color: #fff9e6;
    background: rgba(255, 215, 0, 0.16);
    border-color: rgba(255, 215, 0, 0.55);
    transform: scale(1.015);
    box-shadow: 0 0 16px rgba(255, 200, 60, 0.2);
}
.save-visibility-pill:not(.active):active {
    transform: scale(0.99);
}
.save-visibility-pill.active:active {
    transform: scale(0.985);
}
@keyframes saveVisPillSelect {
    0% {
        box-shadow:
            0 0 0 2px rgba(255, 193, 7, 0.55),
            0 0 22px rgba(255, 200, 40, 0.45),
            0 6px 18px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.55);
        transform: scale(1.02);
    }
    45% {
        box-shadow:
            0 0 0 4px rgba(255, 215, 0, 0.65),
            0 0 36px rgba(255, 220, 80, 0.55),
            0 8px 24px rgba(0, 0, 0, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.65);
        transform: scale(1.06);
    }
    100% {
        box-shadow:
            0 0 0 2px rgba(255, 193, 7, 0.55),
            0 0 22px rgba(255, 200, 40, 0.45),
            0 6px 18px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.55);
        transform: scale(1.02);
    }
}
.save-visibility-pill.save-visibility-pill--flash {
    animation: saveVisPillSelect 0.42s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .save-visibility-pill {
        transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    }
    .save-visibility-pill.save-visibility-pill--flash {
        animation: none;
    }
    .save-visibility-pill:not(.active):hover,
    .save-visibility-pill.active {
        transform: none;
    }
}
.save-visibility-hint {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: rgba(212, 184, 140, 0.85);
    line-height: 1.4;
}
.save-remake-block { margin: 0.5rem 0 0.75rem; }
.save-remake-toggle.is-active {
    border-color: var(--accent);
    color: #ffe566;
}
.save-remake-hint {
    font-size: 0.78rem;
    color: var(--text-soft);
    margin: 0.35rem 0 0.5rem;
    line-height: 1.35;
}
.save-remake-fields { margin-top: 0.35rem; }
.save-remake-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.save-remake-grid-2 .edit-control-group { margin: 0; }
.req { color: #ffb4a8; }

.pattern-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.popular-column { display: flex; flex-direction: column; gap: 0.6rem; }
.pattern-card {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    align-items: center;
    gap: 0.55rem 0.75rem;
    padding: 0.28rem;
    border-radius: 8px;
    background: rgba(47, 29, 25, 0.9);
    border: 1px solid rgba(255, 215, 0, 0.2);
    cursor: pointer;
}
.pattern-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 72px;
    max-height: 72px;
    margin: 0 auto;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pattern-card-remake-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 2;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.28rem;
    border-radius: 3px;
    background: rgba(30, 80, 200, 0.92);
    color: #e8f0ff;
    line-height: 1;
    pointer-events: none;
}
.pattern-card-like-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #c8b896;
}
.pattern-card-like-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(92, 64, 56, 0.28);
    background: linear-gradient(160deg, rgba(255, 246, 223, 0.9), rgba(233, 221, 188, 0.9));
    color: #7e5a50;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(31, 15, 12, 0.2);
    transition: transform 0.12s ease, box-shadow 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.pattern-card-like-btn:hover {
    color: #d43a5f;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 6px 14px rgba(31, 15, 12, 0.24);
    border-color: rgba(212, 58, 95, 0.45);
}
.pattern-card-like-btn.is-liked {
    color: #fff;
    background: linear-gradient(160deg, #ff5b84, #d92b58);
    border-color: rgba(217, 43, 88, 0.8);
    box-shadow: 0 6px 14px rgba(217, 43, 88, 0.35);
}
.pattern-card-like-btn:disabled,
.pattern-card-like-btn[aria-busy="true"] {
    opacity: 0.45;
    cursor: wait;
}
.pattern-card-like-btn[aria-busy="true"] {
    pointer-events: none;
}
.pattern-card-like-count {
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    font-weight: 700;
    color: #4a2d27;
    min-width: 1.35rem;
}
.pattern-card-like-nolike {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

/* Browse : cartes alignées sur le profil (crème, typo, ombre) */
#page-browse .pattern-card {
    background: #efe4cf;
    border: 1px solid rgba(80, 55, 45, 0.18);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
    border-radius: var(--pf-radius-xl, 1.05rem);
    padding: 0.38rem 0.45rem 0.42rem;
    gap: 0.55rem 0.65rem;
    align-items: center;
}
#page-browse .pattern-card-body {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
#page-browse .pattern-card-thumb {
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(31, 15, 12, 0.08);
    align-self: center;
}
#page-browse .pattern-card-title {
    font-family: "Epilogue", "Bebas Neue", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #1f0f0c;
}
#page-browse .pattern-card-artist,
#page-browse .pattern-card-meta {
    color: #5c4038;
}
#page-browse .pattern-card-meta {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
#page-browse .pattern-card-like-row {
    color: #5c4038;
}
#page-browse .pattern-card-meta-row .pattern-card-meta-text {
    color: #5c4038;
}
/* Like / comment : mêmes contrôles que le profil (.profile-pattern-social-btn) */
#page-browse .pattern-card .profile-pattern-social-btn--with-count {
    width: auto;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.45rem;
    gap: 0.25rem;
    border: 1px solid rgba(80, 55, 45, 0.32);
    background: rgba(0, 0, 0, 0.7);
    color: #fff8f0;
}
#page-browse .pattern-card .profile-pattern-social-btn--with-count:hover {
    background: rgba(0, 0, 0, 0.82);
    border-color: rgba(255, 215, 160, 0.45);
    color: #fff;
}
#page-browse .pattern-card .profile-pattern-social-btn--with-count.profile-pattern-social-btn--liked,
#page-browse .pattern-card .profile-pattern-social-btn--with-count.is-liked {
    border-color: rgba(255, 180, 170, 0.6);
    background: rgba(120, 40, 55, 0.55);
    color: #fff;
}
#page-browse .pattern-card .pattern-card-stat-num {
    color: inherit;
    font-size: 0.78rem;
}
#page-browse .pattern-card-stat-nologin {
    color: #5c4038;
}
/* Genre / tag pills (browse, profile, shared) */
.tm-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    line-height: 1.2;
    max-width: min(12rem, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}
.tm-meta-pill--tag {
    font-weight: 700;
    letter-spacing: 0.07em;
    max-width: min(10.5rem, 100%);
}
#page-browse .tm-meta-pill {
    background: rgba(68, 48, 43, 0.16);
    color: #3d2822;
    border: 1px solid rgba(80, 55, 45, 0.22);
}
#page-browse .pattern-card:hover {
    background: #e8dcc4;
    border-color: rgba(80, 55, 45, 0.2);
}
/* Menu ⋮ : lisible sur fond crème */
#page-browse .pattern-card-more {
    color: #0a0a0a;
    opacity: 0.88;
}
#page-browse .pattern-card-more:hover {
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 6px;
}
#page-browse .pattern-card-remake-line--browse-offset {
    margin-top: 0.25rem;
    margin-left: 1.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(80, 55, 45, 0.2);
    max-width: 100%;
    box-sizing: border-box;
}

/* Browse : retour like (erreurs / session) — toast fixe, non bloquant */
.browse-like-toast {
    position: fixed;
    bottom: 1.35rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    max-width: min(22rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    background: rgba(26, 15, 13, 0.94);
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: #fff6df;
    font-size: 0.86rem;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
.browse-like-toast.hidden {
    display: none !important;
}

.pattern-card-play {
    opacity: 0;
    transition: opacity 0.15s ease;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.8);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
.pattern-card:hover .pattern-card-play { opacity: 1; }
.pattern-card-play.is-previewing {
    opacity: 1 !important;
    background: rgba(255, 215, 0, 0.35);
    border-color: var(--accent);
    color: #2c1b17;
}
.pattern-card-body { padding: 0.08rem 0.05rem 0.12rem; }
.pattern-card-title { font-weight: 700; color: var(--accent); }
.pattern-card-artist, .pattern-card-meta { color: #dfd1a2; font-size: 0.82rem; margin-top: 0.22rem; }
.pattern-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}
.pattern-card-meta-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    min-width: 0;
    flex: 1;
}
.pattern-card-meta-text {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5c4038;
    min-width: 0;
}
#page-browse .pattern-card-meta-text {
    color: #5c4038;
}
.pattern-card-meta-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.pattern-card-stat-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.18rem 0.38rem;
    border-radius: 8px;
    border: 1px solid rgba(80, 55, 45, 0.18);
    background: rgba(255, 255, 255, 0.55);
    color: #5c4038;
    font-size: 0.78rem;
    cursor: pointer;
    line-height: 1;
    font-family: inherit;
}
.pattern-card-stat-btn:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(80, 55, 45, 0.28);
}
.pattern-card-like-ic.is-liked {
    color: #b83250;
    border-color: rgba(184, 50, 80, 0.45);
    background: rgba(255, 230, 236, 0.95);
}
#page-browse .pattern-card .pattern-card-like-ic.is-liked {
    color: #fff;
    border-color: rgba(255, 180, 170, 0.6);
    background: rgba(120, 40, 55, 0.55);
}
.pattern-card-stat-num {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.78rem;
}
.pattern-card-stat-nologin {
    font-size: 0.72rem;
    color: #7a6358;
    opacity: 0.85;
}
.pattern-card-original-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: 3px;
    padding: 0.15em 0.45em;
    margin-bottom: 0.2rem;
    vertical-align: middle;
}

.pattern-card-remake-line {
    font-size: 0.74rem;
    color: rgba(92, 64, 56, 0.82);
    margin-top: 0.2rem;
    line-height: 1.35;
}
#page-browse .pattern-card-remake-line {
    color: rgba(74, 45, 39, 0.78);
}
.pattern-card-more {
    border: none;
    background: transparent;
    color: #dfd1a2;
    font-size: 1.2rem;
    cursor: pointer;
}
.pattern-card-delete {
    border: 1px solid rgba(255, 120, 120, 0.5);
    background: rgba(40, 12, 12, 0.5);
    color: #ff8a8a;
    font-size: 0.85rem;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    font-family: inherit;
}
.pattern-card-delete:hover {
    background: rgba(120, 30, 30, 0.75);
    border-color: #ff6b6b;
    color: #fff;
}
.control-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.floating-header {
    position: sticky;
    top: 12px;
    z-index: 90;
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    /* Prototype « glass » : brun plus clair que le fond page + flou */
    background: rgba(73, 52, 48, 0.62);
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: 14px;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(18px);
}
.now-playing { display: flex; flex-direction: column; gap: 0.2rem; }
.now-playing-label { font-size: 0.65rem; letter-spacing: 1px; color: var(--text-soft); }
.now-playing-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
}
.history-icon-btns {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.15rem;
}
.icon-history-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid rgba(255, 215, 0, 0.55);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    color: var(--accent);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.icon-history-btn:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.14);
    border-color: var(--accent);
    transform: scale(1.06);
}
.icon-history-btn:disabled {
    opacity: 0.28;
    cursor: not-allowed;
}
.dirty-star {
    font-family: var(--font-body);
    font-weight: 700;
    color: #ff6b9d;
    font-size: 2rem;
    line-height: 1;
}
.dirty-star.hidden { display: none; }
.now-playing-name {
    font-family: var(--font-heading);
    letter-spacing: 2px;
    font-size: 2.1rem;
    line-height: 1;
}
.now-playing-name--editable {
    cursor: text;
    border-bottom: 1px dashed rgba(255, 215, 0, 0.35);
    padding-bottom: 0.06rem;
}
.now-playing-name--editable:focus {
    outline: none;
    border-bottom-color: var(--accent);
}
.now-playing-sub {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-width: min(720px, 100%);
    font-size: 0.78rem;
    color: var(--text-soft);
    line-height: 1.35;
}
.now-playing-sub.hidden { display: none; }
.now-playing-sub__row { display: block; }
.now-playing-sub a.tm-profile-deep-link {
    color: #f0d56a;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.now-playing-sub a.tm-profile-deep-link:hover {
    color: #fff6c2;
}
.now-playing-sub__original {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #ffd700;
    opacity: 0.75;
}
.header-controls {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.tm-profile-deep-link {
    color: #f0d56a;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.tm-profile-deep-link:hover {
    color: #fff6c2;
}

.pattern-card-creator,
.pattern-card-remake-meta {
    font-size: 0.78rem;
    color: var(--text-soft);
    margin-top: 0.15rem;
    line-height: 1.35;
}
.pattern-card-creator-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}
.pattern-card-creator-anon {
    font-weight: 600;
    color: rgba(245, 230, 192, 0.85);
}
.pattern-card-creator-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: rgba(160, 48, 48, 0.4);
    color: #ffc9c9;
    border: 1px solid rgba(255, 130, 130, 0.35);
}
.pattern-card-remake-meta {
    color: rgba(92, 64, 56, 0.78);
}

.pattern-card-creator-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.15rem;
}
.pattern-card-creator-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    background: rgba(120, 40, 40, 0.55);
    color: #ffc9c9;
    border: 1px solid rgba(255, 120, 120, 0.35);
}
.pattern-card-creator-name {
    font-weight: 600;
    color: var(--text-soft);
}

.profile-viewing-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    background: rgba(0, 0, 0, 0.35);
    font-size: 0.85rem;
    color: var(--text-soft);
}
.profile-viewing-banner__report {
    margin-left: auto;
    font-size: 0.8rem;
}
@media (max-width: 520px) {
    .profile-viewing-banner__report {
        margin-left: 0;
        width: 100%;
    }
}
.profile-playlist-empty-quick {
    display: block;
    margin: 0.5rem 0 0.25rem;
    min-width: 0;
}
.tm-modal-panel--report-user .tm-modal-select,
.tm-modal-panel--report-user .tm-modal-input,
.profile-playlist-empty-panel .modal-input {
    width: 100%;
    box-sizing: border-box;
}
.pattern-comment-action--report {
    font-weight: 600;
    border: 1px solid rgba(255, 180, 120, 0.35);
}
.profile-viewing-banner.hidden { display: none; }
.profile-viewing-banner__label { font-weight: 600; color: #f5e6c0; }
.profile-viewing-banner__link {
    color: #f0d56a;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.profile-viewing-banner__link:hover {
    color: #fff6c2;
}

.profile-pattern-row--readonly .profile-pattern-row-actions {
    gap: 0.25rem;
}
.clear-btn, .control-btn, .add-track-btn {
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.clear-btn:hover:not(:disabled),
.control-btn:hover:not(:disabled):not(.control-btn-publish):not(.browse-filter-apply),
.add-track-btn:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.55);
    color: #f5e6c0;
}

/* CLEAR / NEW — même style, coins arrondis, état actif jaune + texte brun */
.sequencer-header-action-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
}
.sequencer-header-action-btn {
    font-family: var(--font-heading);
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    padding: 0.38rem 0.55rem;
    min-width: 4.5rem;
    border-radius: 10px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.sequencer-header-action-btn:hover {
    color: #f5e6c0;
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.55);
}
.sequencer-header-action-btn:active {
    background: #e6c84d;
    color: #2c1b17;
    border-color: rgba(44, 27, 23, 0.45);
}
/* Même logique que #globalTransport : or = pause / arrêt, rouge = lecture active */
.play-pause-btn {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    background: #ffd700;
    color: #221b00;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.32);
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.play-pause-btn.transport-playing {
    background: #c62828;
    color: #fff;
    box-shadow: 0 0 26px rgba(198, 40, 40, 0.48);
}
.play-pause-btn:hover {
    filter: brightness(1.06);
}
.play-pause-btn.transport-playing:hover {
    filter: brightness(1.08);
}
/* BPM : petit libellé au-dessus, valeur large (prototype) */
.bpm-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    padding: 0.35rem 0.85rem 0.4rem;
    min-width: 4.25rem;
    background: rgba(45, 27, 23, 0.55);
    border: 1px solid rgba(77, 71, 50, 0.45);
    border-radius: 10px;
    box-sizing: border-box;
}
.bpm-control-label {
    font-family: var(--font-heading);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #d4c78d;
    opacity: 0.85;
    line-height: 1;
}
.bpm-control label:not(.bpm-control-label) {
    font-family: var(--font-heading);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #d4c78d;
    opacity: 0.85;
    line-height: 1;
}
.master-volume-control { display: flex; align-items: center; gap: 0.4rem; }
.master-volume-control input { accent-color: var(--accent); width: 88px; }
.bpm-input {
    width: 3.25rem;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    color: #ffd700;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.35rem;
    line-height: 1.1;
    text-align: center;
    -moz-appearance: textfield;
}
.bpm-input::-webkit-outer-spin-button,
.bpm-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.bpm-input:focus {
    outline: none;
    color: #ffe566;
}

/* Quick / Advanced : pilule — largeur du contenu seulement (pas toute la rangée) */
.sequencer-mode-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin: 1.35rem auto 0;
    width: fit-content;
    max-width: calc(100% - 1.5rem);
    padding: 0.28rem;
    border-radius: 999px;
    background: #190a07;
    border: 1px solid rgba(77, 71, 50, 0.35);
    box-sizing: border-box;
}
.sequencer-mode-btn {
    font-family: var(--font-heading);
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.55rem 1.65rem;
    border: none;
    border-radius: 999px;
    background: rgba(68, 48, 43, 0.95);
    color: #d4c78d;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.sequencer-mode-btn:hover:not(.active) {
    color: #f0e4d0;
    background: rgba(80, 58, 50, 0.98);
}
.sequencer-mode-btn.active {
    background: #ffd700;
    color: #221b00;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.28);
}

.sequencer-container { margin: 22px auto 30px; width: 95%; max-width: 1800px; padding: 1.2rem; }
.pattern-selector-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 0 1rem;
    gap: 0.85rem 1.25rem;
}
.pattern-selector-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.pattern-nav-cluster {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.pattern-actions-save {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
}
.pattern-import-drop {
    border-radius: 10px;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.pattern-import-drop.pattern-import-drop--active {
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
    background-color: rgba(255, 215, 0, 0.06);
}
.selector-label { font-family: var(--font-heading); font-size: 1.35rem; margin-right: 0.25rem; flex-shrink: 0; }
.pattern-dropdown, .add-track-dropdown {
    background: rgba(0, 0, 0, 0.35);
    color: var(--accent);
    border: 1px solid rgba(255, 215, 0, 0.55);
    padding: 0.45rem 0.75rem;
    font-weight: 600;
    border-radius: 8px;
}
.pattern-dropdown-compact {
    max-width: min(220px, 32vw);
    min-width: 120px;
    width: auto;
    padding: 0.38rem 2.1rem 0.38rem 0.65rem;
    font-size: 0.78rem;
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.25;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFD700' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
    background-size: 14px;
    cursor: pointer;
}
.pattern-dropdown-compact:hover,
.pattern-dropdown-compact:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
}
.pattern-dropdown-compact option {
    background: #1f1410;
    color: var(--accent);
    padding: 0.5rem;
    font-size: 0.85rem;
}
.control-btn-nav {
    font-family: var(--font-heading);
    letter-spacing: 0.06em;
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    min-width: auto;
}
.control-btn-save {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
}
.control-btn-save:hover {
    background: rgba(255, 215, 0, 0.12);
}
.control-btn-publish {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(129, 199, 132, 0.65);
    color: #c8e6c9;
    background: rgba(27, 94, 32, 0.25);
}
.control-btn-publish:hover {
    background: rgba(129, 199, 132, 0.18);
}
.control-btn-publish.hidden {
    display: none !important;
}

/* Ligne Quick : grille + tête ; actions M/S/EDIT/× hors carte */
.drum-track-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.65rem;
    transition: opacity 0.22s ease;
}
.drum-tracks--solo-mode .drum-track-wrap--solo-dim {
    opacity: 0.34;
    filter: saturate(0.65);
}
.drum-tracks--solo-mode .drum-track-wrap--solo-focus {
    opacity: 1;
    filter: none;
}
.drum-track-wrap--muted .drum-track--main {
    opacity: 0.4;
}
.drum-track-wrap--muted .track-actions-rail .track-action-icon-btn:not(.track-action-icon-btn--active) {
    opacity: 0.38;
}
.drum-track-wrap--muted .track-actions-rail .track-action-icon-btn--active {
    opacity: 1;
}

.drum-track--main {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.3);
    border-left: 6px solid var(--accent);
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
}
.track-actions-rail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    padding: 0.2rem;
    background: transparent;
    border: none;
    box-shadow: none;
}
.track-action-rail-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.35rem 0.4rem;
    background: rgba(56, 37, 33, 0.5);
    border: 1px solid rgba(77, 71, 50, 0.35);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.material-symbols-outlined.track-action-ms-icon {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    -webkit-font-smoothing: antialiased;
    color: inherit;
}
.track-action-ms-icon--fill {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.track-action-icon-btn {
    width: 2.15rem;
    height: 2.15rem;
    min-width: 2.15rem;
    min-height: 2.15rem;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #d4c78d;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.track-action-icon-btn:hover {
    background: #ffd700;
    color: #221b00;
    transform: scale(1.04);
}
.track-action-icon-btn:hover .track-action-ms-icon {
    color: #221b00;
}
.track-action-icon-btn--active {
    background: #ffd700;
    color: #221b00;
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.35);
}
.track-action-icon-btn--active .track-action-ms-icon {
    color: #221b00;
}
.track-action-icon-btn--delete {
    color: rgba(212, 199, 141, 0.75);
}
.track-action-icon-btn--delete:hover {
    background: rgba(120, 30, 30, 0.75);
    color: #fff5f4;
}
.track-action-icon-btn--delete.track-action-icon-btn--active {
    background: rgba(120, 30, 30, 0.75);
    color: #fff;
}

/* ── Remake hero ──────────────────────────────────────────────────────────── */

.remake-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #0d0806;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.remake-hero.hidden { display: none; }

.remake-hero__video { position: relative; }

.remake-hero__iframe-wrap {
    position: relative;
    padding-top: 56.25%;
    background: #000;
}

.remake-hero__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.remake-hero__meta {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow: hidden;
}

.remake-hero__badge {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 4px;
    padding: 0.2em 0.5em;
    align-self: flex-start;
}

.remake-hero__title {
    font-size: 1rem;
    font-weight: 700;
    color: #f0e8d0;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remake-hero__artist {
    font-size: 0.8rem;
    color: #b0a080;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remake-hero__dl {
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.remake-hero__dl-item { display: contents; }

.remake-hero__dl dt {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #7a6a4a;
    text-transform: uppercase;
    grid-column: 1;
}

.remake-hero__dl dd {
    font-size: 0.75rem;
    color: #c0a870;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remake-hero__dl-item { display: flex; flex-direction: column; }

@media (max-width: 640px) {
    .remake-hero { grid-template-columns: 1fr; }
}

#page-sequencer #quickSequencerRoot {
    padding: 0.35rem 0 1rem;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
}

/* Initially hidden — JS controls display via element.style.display */
#quickWindowNav  { display: none; }
#dsVelocityPopup { display: none; }

.quick-window-nav {
    width: 100%;
    max-width: min(920px, 96%);
    margin: 0 auto 1.1rem;
    padding: 0.85rem 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 215, 0, 0.38);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.25);
}
.quick-window-segments-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(255, 215, 0, 0.42);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.quick-segment-auto-btn {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.45);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-soft);
    cursor: pointer;
    flex-shrink: 0;
}
.quick-segment-auto-btn:hover {
    color: var(--accent);
    background: rgba(255, 215, 0, 0.08);
}
.quick-segment-auto-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255, 215, 0, 0.16);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.2);
}
.quick-window-nav-title {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    letter-spacing: 0.14em;
    color: var(--accent);
    flex-shrink: 0;
    opacity: 0.92;
    text-transform: uppercase;
}
.quick-window-segments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}
.quick-window-segment {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    padding: 0.42rem 1.05rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.45);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-soft);
    cursor: pointer;
    line-height: 1.2;
    letter-spacing: 0.06em;
    min-width: 2.5rem;
    text-align: center;
}
.quick-window-segment:hover {
    background: rgba(255, 215, 0, 0.1);
    color: var(--accent);
}
.quick-window-segment.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255, 215, 0, 0.14);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.2);
}

.kit-display {
    margin-bottom: 0.7rem;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    color: var(--text-soft);
    font-size: 1.1rem;
}
/* Largeur fixe : grilles de steps alignées entre les pistes ; texte tronqué … */
.track-head--fixed {
    width: 7.75rem;
    min-width: 7.75rem;
    max-width: 7.75rem;
    box-sizing: border-box;
}
.track-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    font-family: var(--font-heading);
    text-align: left;
    padding: 0.22rem 0.35rem;
    border: 1px solid rgba(255, 215, 0, 0.45);
    background: rgba(0, 0, 0, 0.25);
    color: var(--accent);
    cursor: pointer;
    border-radius: 4px;
    line-height: 1.15;
}
.track-label-text-col {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.track-label-preview-ic {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    font-size: 0.88rem;
    color: #ffd700;
    opacity: 0;
    transform: translateX(-3px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.track-preview-trigger:hover .track-label-preview-ic,
.track-preview-trigger:focus-visible .track-label-preview-ic {
    opacity: 1;
    transform: translateX(0);
}
.track-label-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.22rem;
    letter-spacing: 0.04em;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.track-label:hover {
    background: rgba(255, 215, 0, 0.12);
    border-color: var(--accent);
}
.track-kit-tag {
    display: block;
    font-family: var(--font-body);
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    color: var(--text-soft);
    font-weight: 500;
    margin-top: 0.12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.step-sequencer { display: grid; grid-template-columns: repeat(32, 1fr); gap: 0; flex: 1; min-width: 0; }
.step-pad {
    aspect-ratio: 1;
    border: 1px solid rgba(255, 215, 0, 0.3);
    background: rgba(62, 39, 35, 0.5);
    cursor: pointer;
    border-radius: 2px;
    user-select: none;
    touch-action: none;
}
.step-pad.step-downbeat {
    border-color: rgba(255, 107, 157, 0.85);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 157, 0.35);
}
.step-pad.active { background: var(--accent); }
.step-pad.step-downbeat.active {
    background: linear-gradient(145deg, #ffd54f, #ff6b9d);
}
.step-pad.playing { outline: 2px solid #fff; }
/* Colonne temps (Quick) : visible même sans note sur la piste */
.step-pad.step-pad--playhead {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.step-pad.step-pad--playhead.playing {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.65);
    outline: 2px solid #fff;
}
.track-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    min-width: 62px;
}
.track-actions .track-action-btn {
    width: auto;
    min-width: 62px;
}
.track-actions .track-action-btn.track-action-compact {
    min-width: 2.75rem;
    width: 2.75rem;
    padding-left: 0;
    padding-right: 0;
    font-weight: 700;
    font-size: 0.8rem;
}
.track-action-btn {
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 0.68rem;
    line-height: 1;
    padding: 0.2rem 0.3rem;
    cursor: pointer;
    width: 62px;
}
.track-action-btn.active {
    background: var(--accent);
    color: #2c1b17;
}
.track-action-btn.track-action-delete {
    border-color: rgba(255, 120, 120, 0.55);
    color: #ff9e9e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    min-height: 2rem;
}
.track-action-btn.track-action-delete:hover {
    background: rgba(120, 30, 30, 0.45);
    border-color: #ff6b6b;
    color: #fff;
}

.track-edit-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #3E2723;
    border: 2px solid var(--accent);
    border-radius: 10px;
    padding: 1rem;
    width: 300px;
    z-index: 300;
    display: none;
}
.track-edit-popover.active { display: block; }
.track-edit-popover.track-edit-popover-wide.active {
    display: flex;
    flex-direction: column;
}
.popover-title { margin: 0 0 0.8rem; font-family: var(--font-heading); }
.edit-control-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; }
.popover-dropdown, .popover-slider {
    background: #2f1d19;
    color: var(--accent);
    border: 1px solid var(--accent);
}
.close-popover-btn {
    width: 100%;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    padding: 0.45rem;
}

#confirmModalOverlay {
    z-index: calc(var(--tm-modal-overlay-z) + 20);
}
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--tm-modal-overlay-z);
    background: var(--tm-modal-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(var(--tm-modal-overlay-blur));
}
.modal-overlay.modal-overlay--pos-center {
    align-items: center;
}
.modal-overlay.modal-overlay--pos-bottom {
    align-items: flex-end;
    padding-bottom: var(--tm-modal-panel-bottom-gap);
}
/* Avertissements « modifications » : pas d’assombrissement plein écran */
.modal-overlay.modal-overlay--subtle {
    background: transparent;
    backdrop-filter: none;
}
.modal-overlay.modal-overlay--subtle .modal-panel {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 215, 0, 0.25);
}
.modal-overlay.hidden { display: none !important; }
.modal-panel {
    width: 100%;
    max-width: var(--tm-modal-panel-max-width);
    background: linear-gradient(165deg, #3e2723, #2a1814);
    border: 2px solid var(--accent);
    border-radius: var(--tm-modal-panel-radius);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--tm-modal-panel-shadow);
}
.modal-panel.modal-panel--size-sm {
    max-width: min(var(--tm-modal-panel-size-sm), 94vw);
}
.modal-panel.modal-panel--size-md {
    max-width: min(540px, 96vw);
}
.modal-panel.modal-panel--size-lg {
    max-width: min(var(--tm-modal-panel-size-lg), 96vw);
}

/* Empty playlist: wider panel + library list matches liked-patterns stream rows */
.modal-panel.profile-playlist-empty-panel {
    max-width: min(34rem, 96vw);
    width: min(34rem, 96vw);
    padding: 1.15rem 1.2rem 1.25rem;
}

/* Save track modal: wider than default 420px modal cap */
.modal-panel.save-win-modal {
    max-width: min(42rem, 92vw);
    width: min(42rem, 92vw);
    padding: 0;
    background: linear-gradient(165deg, #6a5348 0%, #554038 38%, #3f322c 100%);
    border: 1px solid rgba(20, 12, 10, 0.45);
    border-radius: 18px;
    box-shadow: 0 24px 56px rgba(12, 8, 6, 0.55);
    color: #f0e4d8;
}
.modal-title {
    margin: 0 0 0.6rem;
    font-family: var(--font-heading);
    letter-spacing: 2px;
    font-size: 1.5rem;
}
.modal-hint {
    margin: 0 0 0.8rem;
    color: var(--text-soft);
    font-size: 0.88rem;
}
.modal-input {
    width: 100%;
    padding: 0.45rem 0.55rem;
    background: #2f1d19;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-body);
}
.modal-file {
    width: 100%;
    color: var(--text-soft);
    font-size: 0.85rem;
}
.save-cover-preview {
    margin-top: 0.5rem;
    max-height: 120px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.35);
}
.save-cover-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: cover;
}
.save-cover-preview.hidden { display: none; }
.save-mode-fieldset {
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    margin: 0.75rem 0 1rem;
}
.save-mode-legend {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    padding: 0 0.35rem;
    color: var(--text-soft);
}
.save-mode-label {
    display: block;
    margin: 0.35rem 0;
    color: var(--accent);
    font-size: 0.9rem;
    cursor: pointer;
}
.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
}
.modal-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    cursor: pointer;
    border: 1px solid var(--accent);
}
.modal-btn.secondary {
    background: transparent;
    color: var(--accent);
}
.modal-btn.primary {
    background: var(--accent);
    color: #2c1b17;
    border-color: var(--accent);
}

.modal-overlay .modal-btn:focus-visible,
.modal-overlay .modal-input:focus-visible,
.modal-overlay .auth-gate-input:focus-visible,
.save-win-modal .save-win-input-primary:focus-visible,
.save-win-modal .save-win-input-readable:focus-visible,
.save-win-modal .save-win-close-btn:focus-visible {
    outline: 2px solid rgba(255, 236, 180, 0.95);
    outline-offset: 2px;
}

.add-track-section { margin-top: 1.2rem; text-align: center; }
.add-track-wrapper { display: inline-flex; gap: 0.6rem; margin-top: 0.4rem; }
.add-track-btn { width: 34px; border-radius: 50%; }

.about-container {
    max-width: 700px;
    margin: 2rem auto;
    background: rgba(47, 29, 25, 0.92);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    padding: 1.2rem;
}
.about-title { font-family: var(--font-heading); font-size: 2.4rem; margin: 0 0 0.8rem; }
.about-legal-link { margin-top: 1rem; font-size: 0.95rem; opacity: 0.92; }
.about-legal-link a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.about-container--article {
    max-width: min(52rem, 94vw);
}
.about-article {
    overflow: auto;
    color: var(--app-text-body);
    font-size: 0.98rem;
    line-height: 1.6;
}
.about-portrait {
    float: left;
    max-width: min(280px, 42%);
    margin: 0.15rem 1.25rem 0.85rem 0;
}
.about-portrait__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.28);
    object-fit: cover;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.about-prose p {
    margin: 0.65rem 0 0;
}
.about-prose p:first-child {
    margin-top: 0;
}
.about-social-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.about-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}
.about-social-link:hover {
    color: #ffe08a;
}
.about-social-link i {
    font-size: 1.15rem;
    opacity: 0.95;
}
@media (max-width: 640px) {
    .about-portrait {
        float: none;
        max-width: 220px;
        margin: 0 auto 1rem;
        text-align: center;
    }
    .about-portrait__img {
        margin-inline: auto;
    }
}

.legal-container { max-width: 46rem; }
.legal-article { color: rgba(255, 248, 240, 0.92); font-size: 0.95rem; line-height: 1.55; }
.legal-article .legal-lead { font-size: 1rem; margin: 0 0 1.25rem; }
.legal-article h2 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    margin: 1.5rem 0 0.5rem;
    color: var(--accent);
}
.legal-article h2:first-of-type { margin-top: 0.5rem; }
.legal-article h2[id],
.legal-article h3[id] {
    scroll-margin-top: 5.5rem;
}
.legal-article p { margin: 0.5rem 0 0.75rem; }
.legal-article ul { margin: 0.35rem 0 0.85rem 1.1rem; padding: 0; }
.legal-article li { margin: 0.35rem 0; }
.legal-article a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-article code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.88em;
    background: rgba(0, 0, 0, 0.25);
    padding: 0.12em 0.35em;
    border-radius: 4px;
}
.legal-updated { margin-top: 1.75rem; opacity: 0.75; font-size: 0.88rem; }

.global-floating-wrap {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 120;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0.65rem;
    max-width: calc(100vw - 36px);
}
.browse-confirm-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.5rem;
    padding: 0.45rem 0.65rem;
    max-width: min(320px, calc(100vw - 100px));
    background: rgba(42, 26, 22, 0.94);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.browse-confirm-strip--nudge {
    animation: browse-confirm-nudge 0.55s ease-out;
}
@keyframes browse-confirm-nudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}
.browse-confirm-label {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-soft);
    line-height: 1.35;
    flex: 1 1 140px;
    min-width: 0;
}
.browse-confirm-label strong {
    color: var(--accent);
    font-weight: 700;
}
.browse-confirm-btn {
    font-family: var(--font-heading);
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    padding: 0.28rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--accent);
}
.browse-confirm-yes {
    background: rgba(255, 215, 0, 0.2);
    color: var(--accent);
}
.browse-confirm-no {
    background: transparent;
    color: var(--text-soft);
    border-color: rgba(255, 215, 0, 0.35);
}
.browse-confirm-yes:hover {
    background: rgba(255, 215, 0, 0.32);
}
.browse-confirm-no:hover {
    color: var(--accent);
    border-color: rgba(255, 215, 0, 0.55);
}

/* Suppression pattern (Browse) : même emplacement que le bandeau « charger si dirty », ton danger */
.browse-delete-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.5rem;
    padding: 0.45rem 0.65rem;
    max-width: min(340px, calc(100vw - 100px));
    background: rgba(48, 18, 18, 0.96);
    border: 1px solid rgba(255, 120, 120, 0.65);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(180, 40, 40, 0.35);
}
.browse-delete-strip--nudge {
    animation: browse-confirm-nudge 0.55s ease-out;
}
.browse-delete-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: #f5d4d4;
    line-height: 1.35;
    flex: 1 1 160px;
    min-width: 0;
}
.browse-delete-label strong {
    color: #ffb3b3;
    font-weight: 700;
}
.browse-delete-btn {
    font-family: var(--font-heading);
    letter-spacing: 0.06em;
    font-size: 0.82rem;
    padding: 0.28rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid rgba(255, 150, 150, 0.55);
}
.browse-delete-cancel {
    background: transparent;
    color: #e8c4c4;
    border-color: rgba(255, 180, 180, 0.4);
}
.browse-delete-cancel:hover {
    color: #fff;
    border-color: rgba(255, 200, 200, 0.65);
}
.browse-delete-confirm {
    background: rgba(180, 45, 45, 0.85);
    color: #fff;
    border-color: rgba(255, 100, 100, 0.9);
}
.browse-delete-confirm:hover {
    background: rgba(210, 55, 55, 0.95);
    border-color: #ff8a8a;
}

.global-transport {
    position: relative;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 700;
    transition: color 0.15s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.global-transport.transport-playing {
    color: #c62828;
}
.global-transport:hover {
    transform: none;
    color: #fff6c2;
    filter: brightness(1.12);
}
.global-transport--nav {
    width: auto;
    height: auto;
    font-size: 1.2rem;
}
.confirm-modal-message {
    margin: 0 0 1rem;
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.45;
}
.track-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex-shrink: 0;
}
.sample-picker-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
}
.sample-picker-row.is-selected {
    border-color: var(--accent);
    background: rgba(255, 215, 0, 0.08);
}
.sample-play-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--accent);
    background: rgba(47, 29, 25, 0.9);
    color: var(--accent);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
}
.sample-play-btn:hover {
    background: rgba(255, 215, 0, 0.2);
}
.sample-picker-select {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    border: none;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.82rem;
    padding: 0.2rem 0;
}
.sample-picker-name {
    font-weight: 600;
    word-break: break-word;
}
.sample-tag {
    color: var(--text-soft);
    font-size: 0.78rem;
    white-space: nowrap;
}
.track-edit-popover-wide {
    width: min(96vw, 520px);
    max-height: min(90vh, 640px);
    overflow: hidden;
}
.edit-sample-list-wrap {
    max-height: min(45vh, 280px);
    overflow-y: auto;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

@media (max-width: 900px) {
    .pattern-grid { grid-template-columns: 1fr; gap: 0.8rem; }
    .floating-header {
        width: 100%;
        top: 0;
        border-radius: 0;
        padding: 0.8rem;
    }
    .browse-toolbar {
        width: 100%;
        border-radius: 0;
        padding: 0.85rem 1rem;
    }
    .sequencer-mode-toggle {
        width: fit-content;
        max-width: calc(100% - 1rem);
        margin-left: auto;
        margin-right: auto;
        padding: 0.28rem;
    }
    .sequencer-container { padding: 0.6rem; }
}

/* ========================================================
   Browse Page - Hover Effects, Menus, Inline Edit
   ======================================================== */
.hero {
    text-align: center;
    position: relative;
    padding-top: 2rem;
}

.hero-separator {
    width: 60%;
    max-width: 800px;
    margin: 3rem auto;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.font-serif {
    font-family: 'Georgia', 'Times New Roman', Times, serif;
}

.hero-dynamic-title {
    position: relative;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 5vw, 4.5rem);
    text-transform: lowercase;
    font-weight: 300;
    margin-bottom: 1rem;
    color: var(--app-text-body);
}

.hero-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; /* fully centered */
    transition: opacity 0.5s ease;
}

.tw-text, .tw-cursor, .gooey-text {
    font-weight: 300;
    text-transform: lowercase;
}

.gooey-svg { position: absolute; width: 0; height: 0; }
.gooey-text-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    filter: url(#threshold);
}
.gooey-text {
    position: absolute;
    text-align: center; /* fully centered */
    width: 100%;
    font-size: inherit;
    letter-spacing: normal;
    user-select: none;
}
.tw-cursor {
    animation: blink 1s step-end infinite;
    margin-left: 0.2rem;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.tut-slider-wrap {
    --tut-slide-pad-x: 2rem;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 3rem;
    position: relative;
    background: #2D1B17;
    background-image: 
        radial-gradient(circle at top left, rgba(255, 215, 0, 0.05), transparent 40%),
        radial-gradient(circle at bottom right, rgba(255, 215, 0, 0.03), transparent 40%);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.12);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: transform 0.3s ease;
}
/* Floating pill nav — séparé du corps carrousel */
.tut-nav-rail {
    padding: 0.65rem 0.75rem 0.35rem;
    display: flex;
    justify-content: center;
}
.tut-nav-rail__inner {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    max-width: 100%;
    background: linear-gradient(180deg, rgba(26, 18, 15, 0.98), rgba(12, 8, 7, 0.98));
    border: 1px solid rgba(255, 215, 0, 0.32);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tut-tab {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0.45rem 0.95rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(234, 220, 160, 0.82);
    font-family: var(--font-heading);
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.tut-tab:hover {
    color: var(--accent);
    border-color: rgba(255, 215, 0, 0.2);
    background: rgba(47, 29, 25, 0.55);
}
.tut-tab.active {
    color: #2f1d19;
    background: linear-gradient(180deg, #ffe566, #e6c200);
    border-color: rgba(255, 215, 0, 0.55);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* Corps carrousel (scroll horizontal + snap) */
.tut-carousel-shell {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}
.tut-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.3);
    background: rgba(10, 6, 5, 0.7);
    backdrop-filter: blur(12px);
    color: #FFD700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.tut-carousel__arrow--prev { left: 1rem; }
.tut-carousel__arrow--next { right: 1rem; }

.tut-carousel__arrow:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.1);
    border-color: #FFD700;
}
.tut-carousel__viewport {
    width: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tut-slide {
    flex: 0 0 100%;
    padding: 3rem var(--tut-slide-pad-x);
    box-sizing: border-box;
    scroll-snap-align: start;
    background: transparent;
}
.tut-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem 0.75rem;
}
.tut-carousel__dot {
    width: 0.45rem;
    height: 0.45rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.22);
    cursor: pointer;
    transition: width 0.25s ease, background 0.2s, opacity 0.2s;
}
.tut-carousel__dot:hover {
    background: rgba(255, 215, 0, 0.45);
}
.tut-carousel__dot.is-active {
    width: 1.35rem;
    background: var(--accent);
    opacity: 1;
}

/* Landing #home — quick links below tutorial carousel */
#page-home .home-quick-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding: 2rem 1.5rem 3rem;
    border-top: 1px solid rgba(255, 215, 0, 0.08);
}
#page-home .home-quick-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 1.35rem;
    border-radius: 10px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: #1a120f;
    background: linear-gradient(135deg, #ffd76a, #e6a317);
    border: 1px solid rgba(255, 215, 0, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
#page-home .home-quick-cta__btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}
#page-home .home-quick-cta__btn--secondary {
    color: var(--text-primary);
    background: rgba(56, 37, 33, 0.95);
    border-color: rgba(255, 215, 0, 0.18);
    box-shadow: none;
}

.tut-slide--bento .tut-bento {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tut-bento__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.tut-bento__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}
@media (max-width: 720px) {
    .tut-bento__split {
        grid-template-columns: 1fr;
    }
}
.tut-card {
    border-radius: 16px;
    padding: 2rem;
    background: #382521;
    border: 1px solid rgba(255, 215, 0, 0.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}
.tut-card:hover { transform: translateY(-3px); border-color: rgba(255, 215, 0, 0.2); }
.tut-card--panel {
    background: rgba(47, 29, 25, 0.92);
    color: var(--text-soft);
    border-color: rgba(255, 215, 0, 0.14);
}
    color: var(--text-soft);
    border-color: rgba(255, 215, 0, 0.1);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.tut-card--narrow {
    min-height: 100%;
}
.tut-card--panel p {
    margin: 0;
    line-height: 1.5;
    font-size: 0.92rem;
    color: rgba(234, 220, 160, 0.9);
}
.tut-kicker {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
    color: rgba(255, 215, 0, 0.55);
}
.tut-kicker--gold {
    color: rgba(255, 215, 0, 0.72);
}
.tut-title {
    margin: 0 0 0.55rem;
    font-size: 1.35rem;
    line-height: 1.15;
    color: var(--accent);
    font-family: var(--font-heading);
    letter-spacing: 0.03em;
}
.tut-title--sm {
    font-size: 1.15rem;
}
.tut-lead {
    margin: 0;
    line-height: 1.55;
    font-size: 0.95rem;
    color: rgba(234, 220, 160, 0.92);
}
.tut-muted {
    margin: 0;
    line-height: 1.5;
    font-size: 0.9rem;
    color: rgba(234, 220, 160, 0.78);
}
/* Full-width hi-hat strip (break out of slide horizontal padding) */
.tut-hihat-strip {
    margin: 0.5rem calc(-1 * var(--tut-slide-pad-x)) 0;
    width: calc(100% + 2 * var(--tut-slide-pad-x));
    padding: 0.85rem var(--tut-slide-pad-x) 1rem;
    background: rgba(10, 7, 6, 0.92);
    border-top: 1px solid rgba(255, 215, 0, 0.18);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    box-sizing: border-box;
}
.tut-hihat-strip__bar {
    width: 100%;
}
.tut-hihat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 215, 0, 0.45);
    margin-bottom: 0.5rem;
}
.tut-hihat-row {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    gap: clamp(0.15rem, 1vw, 0.35rem);
    width: 100%;
    align-items: stretch;
}
.tut-hihat-pad {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1;
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    background: rgba(34, 21, 18, 0.9);
    cursor: pointer;
    padding: 0;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
/* Hover uniquement sur les steps éteints — évite de masquer le jaune plein quand le step est ON */
.tut-hihat-pad:hover:not(.tut-hihat-pad--on) {
    background: rgba(62, 39, 35, 0.95);
    border-color: rgba(255, 215, 0, 0.28);
}
.tut-hihat-pad--on {
    background: #ffd700;
    border-color: #b8860b;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.tut-hihat-pad--on:hover {
    background: #ffd700;
    border-color: #b8860b;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.tut-hihat-pad--playhead {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    z-index: 1;
}
.tut-hihat-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
}
.tut-hihat-play {
    min-width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    background: linear-gradient(180deg, #ffe566, #d4a800);
    color: #2f1d19;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: filter 0.15s, transform 0.08s;
}
.tut-hihat-play:hover {
    filter: brightness(1.05);
}
.tut-hihat-play.is-tuto-playing {
    background: linear-gradient(180deg, #5a382f, #3d241f);
    color: var(--accent);
    border-color: rgba(255, 215, 0, 0.45);
}
.tut-hihat-hint {
    font-size: 0.78rem;
    color: rgba(234, 220, 160, 0.55);
}

/* --- STG-UX-014 : header label + page chip --- */
.tut-hihat-strip__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.tut-hihat-strip__header .tut-hihat-label {
    margin-bottom: 0;
}
.tut-page-chip {
    display: flex;
    gap: 0.2rem;
}
.tut-page-btn {
    padding: 0.15rem 0.55rem;
    border-radius: 5px;
    border: 1px solid rgba(196, 155, 80, 0.35);
    background: rgba(34, 21, 18, 0.8);
    color: rgba(196, 155, 80, 0.65);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tut-page-btn:hover {
    background: rgba(62, 39, 35, 0.95);
    border-color: rgba(196, 155, 80, 0.55);
    color: rgba(234, 200, 120, 0.9);
}
.tut-page-btn--active {
    background: rgba(196, 155, 80, 0.18);
    border-color: rgba(196, 155, 80, 0.6);
    color: rgba(234, 200, 120, 1);
}
.tut-page-btn:focus-visible {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}

@keyframes slideInFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pattern-card-actions-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pattern-card-more {
    background: transparent;
    border: none;
    color: var(--text-soft);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.5rem;
}
.pattern-card-more:hover { color: var(--accent); }
.pattern-card-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: rgba(20, 12, 10, 0.95);
    border: 1px solid var(--accent);
    border-radius: 6px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    min-width: 160px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.pattern-card-menu button {
    background: transparent;
    border: none;
    color: var(--text-soft);
    padding: 0.8rem 1rem;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}
.pattern-card-menu button:last-child { border-bottom: none; }
.pattern-card-menu button:hover {
    background: rgba(255, 215, 0, 0.15);
    color: var(--accent);
}
.menu-action-delete { color: #ff8a8a !important; }
.menu-action-delete:hover { background: rgba(120, 30, 30, 0.75) !important; color: #fff !important; }

.pattern-card-title-wrap {
    position: relative;
    min-height: 1.4rem;
    margin-bottom: 0.2rem;
}
.pattern-card-title-edit {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.pattern-card-title-input {
    flex: 1;
    min-width: 0;
    background: #1f1410;
    border: 1px solid var(--accent);
    color: #fff;
    padding: 0.2rem 0.4rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    border-radius: 4px;
}
.inline-cancel, .inline-save {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,215,0,0.3);
    color: var(--text-soft);
    border-radius: 4px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.inline-cancel:hover { background: rgba(255,100,100,0.2); color: #ff8a8a; border-color: #ff8a8a;}
.inline-save:hover { background: rgba(100,255,100,0.2); color: #8aff8a; border-color: #8aff8a;}

/* ─── Profile page — Gilded Vault shell (scoped) ─── */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#page-profile.page {
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: calc(100vh - 3.5rem);
}

.profile-page-shell {
    /* Align with global / sequencer page (body gradient) — warmer browns */
    --pf-bg-top: #4a332c;
    --pf-bg-bottom: #32221c;
    --pf-cream: #fff6df;
    --pf-cream-2: #f1e3a6;
    --pf-gold: #ffd700;
    --pf-gold-dim: #e9c400;
    --pf-ink: #1f0f0c;
    --pf-muted: #5c4038;
    --pf-on-dark: #fcdbd4;
    --pf-on-dark-soft: #d0c6ab;
    --pf-surface-high: #44302b;
    --pf-surface-mid: #382521;
    --pf-surface-low: #281713;
    --pf-surface-lowest: #190a07;
    --pf-radius-xl: 1.25rem;
    --pf-radius: 0.75rem;
    --pf-font-display: "Epilogue", "Bebas Neue", sans-serif;
    --pf-font-body: "Manrope", "Inter", sans-serif;
    min-height: calc(100vh - 3.5rem);
    background: linear-gradient(180deg, var(--pf-bg-top) 0%, #3a2620 22%, #2f1d19 50%, #261814 78%, var(--pf-bg-bottom) 100%);
    background-attachment: fixed;
    color: var(--pf-on-dark);
    font-family: var(--pf-font-body);
}

#page-profile .profile-container {
    /* Narrower than full HD so the profile reads centered with side breathing room. */
    max-width: min(1180px, 100%);
    margin: 0 auto;
    padding: 1.25rem clamp(1rem, 4vw, 2.25rem) 3rem;
}

.profile-guest-card {
    max-width: 28rem;
    margin: 2rem auto;
    padding: 1.75rem 1.5rem;
    background: var(--pf-cream);
    color: var(--pf-ink);
    border-radius: var(--pf-radius-xl);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 215, 0, 0.28);
}
.profile-guest-card__title {
    font-family: var(--pf-font-display);
    font-size: 1.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
    color: var(--pf-ink);
}
.profile-guest-card .profile-lead {
    color: var(--pf-muted);
}

.tm-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-family: var(--pf-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 8px;
    padding: 0.55rem 1.1rem;
    border: none;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.tm-profile-btn:active { transform: scale(0.98); }
.tm-profile-btn--primary {
    background: linear-gradient(90deg, var(--pf-gold), var(--pf-gold-dim));
    color: var(--pf-surface-lowest);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.tm-profile-btn--primary:hover { filter: brightness(1.05); }
.tm-profile-btn--ghost {
    background: transparent;
    color: var(--pf-gold);
    border: 1px solid rgba(255, 215, 0, 0.35);
}
.tm-profile-btn--ghost:hover { background: rgba(255, 215, 0, 0.08); }
.tm-profile-btn--follow {
    background: rgba(168, 85, 247, 0.18);
    color: #c084fc;
    border: 1.5px solid rgba(168, 85, 247, 0.45);
}
.tm-profile-btn--follow:hover { background: rgba(168, 85, 247, 0.28); }
.tm-profile-btn--follow.tm-profile-btn--following {
    background: rgba(168, 85, 247, 0.08);
    color: rgba(192, 132, 252, 0.65);
    border-color: rgba(168, 85, 247, 0.25);
}
.tm-profile-btn--follow.tm-profile-btn--following:hover { background: rgba(168, 85, 247, 0.14); }
.tm-profile-btn--sm { padding: 0.35rem 0.75rem; font-size: 0.68rem; }
.tm-profile-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.profile-api-error--banner {
    margin-bottom: 1rem;
    padding: 0.65rem 1rem;
    border-radius: var(--pf-radius);
    background: rgba(147, 0, 10, 0.35);
    border: 1px solid rgba(255, 180, 168, 0.45);
}

.profile-hero { position: relative; margin-bottom: 1.25rem; }
.profile-hero__row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0;
    padding: 0 0.5rem;
    position: relative;
    z-index: 2;
}
@media (min-width: 768px) {
    .profile-hero__row {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding: 0 1rem;
    }
}
.profile-hero__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .profile-hero__left {
        flex-direction: row;
        align-items: flex-end;
        gap: 1.25rem;
    }
}
.profile-hero__avatar {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    border: 6px solid var(--pf-bg-top);
    background: linear-gradient(145deg, var(--pf-surface-high), var(--pf-surface-lowest));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pf-font-display);
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--pf-gold);
    text-transform: uppercase;
    flex-shrink: 0;
}
.profile-signed-label--hero {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pf-on-dark-soft);
}
.profile-hero__pseudo {
    margin: 0.15rem 0 0;
    font-family: var(--pf-font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--pf-gold);
}
.profile-hero__email,
.profile-hero__member {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--pf-on-dark-soft);
}
.profile-hero__member {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.profile-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

/* Profile: Main ↔ Bio + Public / Private (single column main) */
.profile-page-switch {
    display: flex;
    gap: 0.25rem;
    padding: 0.35rem;
    margin: 1rem 0 0.75rem;
    max-width: min(100%, 38rem);
    flex-wrap: nowrap;
    background: var(--pf-surface-low);
    border-radius: var(--pf-radius-xl);
    border: 1px solid rgba(153, 144, 119, 0.15);
}
.profile-tab-nowrap {
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
}
.profile-page-switch__btn--privacy {
    flex: 0 1 auto;
    min-width: 0;
}
.profile-page-switch__btn {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: var(--pf-radius);
    background: transparent;
    color: var(--pf-on-dark-soft);
    font-family: var(--pf-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.profile-page-switch__btn:hover { color: var(--pf-cream); }
.profile-page-switch__btn[aria-selected="true"] {
    background: var(--pf-gold);
    color: var(--pf-surface-lowest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.profile-page-switch--tracks {
    max-width: min(48rem, 100%);
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.profile-page-switch--tracks .profile-page-switch__btn {
    font-size: 0.62rem;
    padding: 0.42rem 0.45rem;
    letter-spacing: 0.08em;
}

@keyframes profilePageSwitchBtnFlash {
    0%,
    100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.35), 0 2px 12px rgba(0, 0, 0, 0.32);
    }
}
.profile-page-switch__btn.profile-page-switch__btn--flash {
    animation: profilePageSwitchBtnFlash 0.42s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .profile-page-switch__btn.profile-page-switch__btn--flash {
        animation: none;
    }
}

.nav-profile-menu-wrap {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    z-index: 2;
}
.nav-profile-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 11rem;
    padding: 0.35rem;
    border-radius: var(--stg-r-lg, 12px);
    background: var(--stg-paper, #f4ede2);
    border: 1px solid var(--stg-rule-soft, #e8dac8);
    box-shadow: 0 8px 24px rgba(42,26,19,0.14);
    z-index: 80;
}
.nav-profile-dropdown__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.75rem;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--stg-ink-2, #6b4a3c);
    font-family: var(--font-ui, "Inter Tight", sans-serif);
    font-size: var(--fs-small, 0.8rem);
    font-weight: 500;
    cursor: pointer;
}
.nav-profile-dropdown__item:hover {
    background: var(--stg-hover, rgba(42,26,19,0.07));
    color: var(--stg-ink, #2a1a13);
}
.nav-profile-dropdown__item--danger:hover {
    background: rgba(220, 80, 70, 0.09);
    color: #c94040;
}

.profile-main-toolbar {
    margin: 0 0 1rem;
    padding: 0 0.15rem;
}

.profile-main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .profile-main-grid {
        grid-template-columns: minmax(0, 1fr) minmax(288px, 360px);
        gap: 0.85rem;
    }
    .profile-sidebar__sticky {
        position: sticky;
        top: 5.5rem;
    }
}
.profile-main-column {
    min-width: 0;
    max-width: 100%;
}

.profile-vis-toggle {
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.35rem;
    background: rgba(0, 0, 0, 0.18);
    border-radius: var(--pf-radius-xl);
    border: 1px solid rgba(255, 215, 0, 0.28);
}
.profile-vis-toggle__btn {
    padding: 0.48rem 1.15rem;
    border: 1px solid rgba(255, 215, 0, 0.32);
    border-radius: 8px;
    background: transparent;
    color: rgba(252, 244, 232, 0.78);
    font-family: var(--pf-font-body);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.profile-vis-toggle__btn:focus-visible {
    outline: none;
    border-color: rgba(255, 236, 180, 0.85);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.22);
}
.profile-vis-toggle__btn:hover {
    color: var(--pf-cream);
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.45);
}
.profile-vis-toggle__btn--active {
    background: linear-gradient(90deg, var(--pf-gold), var(--pf-gold-dim));
    color: var(--pf-surface-lowest);
    border: 1px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.profile-vis-toggle__btn--active:hover {
    color: var(--pf-surface-lowest);
    filter: brightness(1.05);
}
@keyframes profileVisToggleFlash {
    0%,
    100% {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.35), 0 2px 12px rgba(0, 0, 0, 0.32);
    }
}
.profile-vis-toggle__btn.profile-vis-toggle__btn--flash {
    animation: profileVisToggleFlash 0.42s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .profile-vis-toggle__btn {
        transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    }
    .profile-vis-toggle__btn.profile-vis-toggle__btn--flash {
        animation: none;
    }
}

.profile-view--bio {
    padding: 0.25rem 0.15rem 2rem;
}
.profile-bio-page-title {
    margin: 0 0 1rem;
    font-family: var(--pf-font-display);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--pf-gold);
}
.profile-bio-page-canvas {
    min-height: 6rem;
    border-radius: var(--pf-radius-xl);
    border: 1px dashed rgba(255, 215, 0, 0.18);
    background: rgba(0, 0, 0, 0.1);
    padding: 0.9rem;
}
.profile-bio-page-empty {
    margin: 0;
    color: var(--pf-on-dark-soft);
    font-size: 0.92rem;
}
.profile-bio-page-sheet {
    border-radius: var(--pf-radius-lg);
    border: 1px solid rgba(255, 215, 0, 0.18);
    background: rgba(11, 16, 24, 0.72);
    padding: 0.95rem 1rem;
}
.profile-bio-page-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.3rem 0.75rem;
    align-items: center;
}
.profile-bio-page-name {
    margin: 0;
    font-family: var(--pf-font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--pf-cream);
}
.profile-bio-page-role {
    margin: 0;
    font-size: 0.67rem;
    letter-spacing: 0.14em;
    color: var(--pf-gold);
}
.profile-bio-page-edit-btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    border: 1px solid rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.12);
    color: var(--pf-cream);
    border-radius: 999px;
    padding: 0.36rem 0.72rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.profile-bio-page-body {
    margin-top: 0.8rem;
}
.profile-bio-page-text {
    margin: 0;
    white-space: pre-wrap;
    color: #eadca0;
    font-family: "Manrope", "Inter", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.01em;
    max-width: 38rem;
}
.profile-bio-page-meta {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(120, 90, 70, 0.2);
}
.profile-bio-page-meta-row {
    margin: 0.2rem 0;
    color: #eadca0;
    opacity: 0.8;
    font-size: 0.85rem;
    font-family: "Manrope", "Inter", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-feed-card {
    border-radius: var(--pf-radius-xl);
    overflow: hidden;
    background: var(--pf-cream);
    color: var(--pf-ink);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}
.profile-feed-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    background: var(--pf-surface-lowest);
    border-bottom: 1px solid rgba(255, 215, 0, 0.12);
}
.profile-feed-card__head-title {
    font-family: var(--pf-font-display);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--pf-gold);
}
.profile-feed-card__head-icon { color: var(--pf-gold); font-size: 1.1rem; opacity: 0.85; }
.profile-feed-card__body {
    padding: 0;
}
.profile-feed-empty {
    margin: 0;
    padding: 1rem 1.25rem 1.25rem;
    font-size: 0.88rem;
    color: var(--pf-muted);
}

#page-profile .profile-patterns-sheet {
    gap: 0;
    margin: 0;
}
#page-profile .profile-pattern-row {
    border-bottom: 1px solid rgba(80, 55, 45, 0.12);
    padding: 0.2rem 0.45rem;
    margin: 0;
    align-items: center;
    background: var(--pf-cream);
    transition: background 0.12s ease;
    border-radius: 10px;
}
#page-profile .profile-pattern-row:last-child { border-bottom: none; }
#page-profile .profile-pattern-row:hover { background: rgba(0, 0, 0, 0.03); }
#page-profile .profile-pattern-row__main {
    color: var(--pf-ink);
}
#page-profile .profile-pattern-row__title {
    font-family: var(--pf-font-display);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--pf-ink);
}
#page-profile .profile-pattern-row__meta {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pf-muted);
}
#page-profile .profile-pattern-row__row2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.2rem;
}
#page-profile .tm-meta-pill {
    background: rgba(68, 48, 43, 0.12);
    color: var(--pf-ink);
    border: 1px solid rgba(80, 55, 45, 0.22);
    vertical-align: middle;
}
#page-profile .profile-pattern-thumb {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 10px;
}
#page-profile .profile-pattern-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
#page-profile .profile-pattern-badge--public {
    background: var(--pf-surface-lowest);
    color: var(--pf-gold);
}
#page-profile .profile-pattern-badge--private {
    background: rgba(68, 48, 43, 0.2);
    color: var(--pf-surface-high);
}
#page-profile .profile-pattern-preview-btn,
#page-profile .profile-pattern-more-btn {
    border-color: rgba(80, 55, 45, 0.25);
    background: rgba(255, 255, 255, 0.5);
    color: var(--pf-ink);
}
#page-profile .profile-pattern-dropdown {
    background: linear-gradient(165deg, #3e2723, #2a1814);
    border-color: rgba(255, 215, 0, 0.35);
}

.profile-side-card {
    border-radius: var(--pf-radius-xl);
    padding: 1.1rem 1.15rem;
    margin-bottom: 1rem;
}
.profile-side-card--stats {
    background: var(--pf-surface-high);
    border: 1px solid rgba(153, 144, 119, 0.12);
}
.profile-side-card--bio {
    padding: 0;
    overflow: hidden;
    background: var(--pf-cream);
    border: 1px solid rgba(153, 144, 119, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.profile-side-card__ribbon {
    padding: 0.45rem 1rem;
    background: var(--pf-surface-lowest);
}
.profile-side-card__ribbon-title {
    margin: 0;
    font-family: var(--pf-font-display);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--pf-gold);
}
.profile-side-card__bio-body {
    padding: 1rem 1.1rem 1.15rem;
}
.profile-side-card__label {
    margin: 0 0 0.75rem;
    font-family: var(--pf-font-display);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pf-gold);
}
.profile-side-card--likes-preview {
    background: var(--pf-surface-low);
    border: 1px solid rgba(153, 144, 119, 0.12);
}
.profile-side-card__likes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}
.profile-side-card__likes-head .profile-side-card__label { margin: 0; }
.profile-side-card__likes-head--row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.profile-side-card__likes-head--row .profile-see-all { flex-shrink: 0; }
.profile-side-card__label--inline {
    margin: 0;
    font-size: 0.62rem;
}
.profile-side-card--likes-sidebar {
    background: var(--pf-cream);
    color: var(--pf-ink);
    border: 1px solid rgba(80, 55, 45, 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    padding-top: 0.85rem;
}
.profile-liked-list--sidebar {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}
.profile-feed-empty--sidebar {
    padding: 0.65rem 0.5rem 0.85rem;
    margin: 0;
}
.profile-see-all {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pf-on-dark-soft);
    text-decoration: none;
}
.profile-see-all:hover { color: var(--pf-gold); }
.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}
.profile-stats-grid--sidebar {
    grid-template-columns: 1fr 1fr;
}
.profile-stats-span2 { grid-column: 1 / -1; }
.profile-stats-num {
    display: block;
    font-family: var(--pf-font-display);
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1;
    color: var(--pf-cream);
}
.profile-stats-cap {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pf-on-dark-soft);
}
.profile-side-muted {
    margin: 0;
    font-size: 0.8rem;
    color: var(--pf-on-dark-soft);
}
#page-profile .profile-bio-display {
    color: var(--pf-ink);
    font-size: 0.88rem;
    white-space: pre-wrap;
    margin: 0 0 0.75rem;
}

.profile-likes-preview-stack {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.profile-likes-preview-orb {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid var(--pf-surface-low);
    background: linear-gradient(135deg, #6b4d3e, #2a1814);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--pf-gold);
    text-transform: uppercase;
    margin-left: -0.5rem;
}
.profile-likes-preview-orb:first-child { margin-left: 0; }
.profile-likes-preview-more {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid var(--pf-surface-low);
    background: var(--pf-surface-high);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--pf-on-dark);
    margin-left: -0.5rem;
}

.profile-playlists-section {
    margin-top: 2.5rem;
}
.profile-playlists-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0 0.25rem;
}
.profile-playlists-head-spacer {
    flex: 1;
    min-width: 0.5rem;
}
.profile-playlists-view-all {
    flex-shrink: 0;
    align-self: center;
}
.profile-playlists-title {
    margin: 0;
    font-family: var(--pf-font-display);
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--pf-gold);
    line-height: 1;
}
.profile-pl-add-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    background: linear-gradient(145deg, var(--pf-gold), var(--pf-gold-dim));
    color: var(--pf-surface-lowest);
    font-size: 1.35rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.12s ease;
}
.profile-pl-add-btn:hover { filter: brightness(1.06); }
.profile-pl-add-btn:active { transform: scale(0.95); }

.profile-playlist-create-inline {
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: var(--pf-radius-xl);
    background: var(--pf-surface-low);
    border: 1px solid rgba(255, 215, 0, 0.15);
}
.profile-inline-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pf-on-dark-soft);
    margin-bottom: 0.4rem;
}
.profile-playlist-create-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.profile-playlist-create-input { flex: 1; min-width: 10rem; }

.profile-playlist-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    align-items: start;
}
@media (min-width: 520px) {
    .profile-playlist-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .profile-playlist-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Main column is narrow: cap at 2 columns so each playlist card has room (avoids crammed horizontal tiles). */
@media (min-width: 1100px) {
    #profilePlaylistsList.profile-playlist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.profile-pl-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding: 0.75rem 0.6rem 0.5rem;
    background: rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: var(--pf-radius);
    box-sizing: border-box;
}
.profile-pl-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    cursor: default;
}
.profile-pl-tile--interactive {
    cursor: pointer;
}
.profile-pl-tile__content {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.2rem;
}
.profile-pl-tile__mosaic {
    display: grid;
    flex: 0 0 auto;
    width: min(9.25rem, 100%);
    height: auto;
    min-width: 0;
    max-width: 9.25rem;
    aspect-ratio: 1;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    border-radius: var(--pf-radius-lg);
    overflow: hidden;
    background: var(--pf-surface-high);
    border: 1px solid rgba(153, 144, 119, 0.12);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    align-self: center;
}
.profile-pl-mosaic-cell {
    min-height: 0;
    min-width: 0;
    background: linear-gradient(145deg, #5c4038, #2a1814);
}
.profile-pl-mosaic-cell--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pf-surface-mid);
    color: var(--pf-on-dark-soft);
    font-size: 1.75rem;
}
.profile-pl-tile__content .profile-pl-tile__title {
    margin: 0.65rem 0 0.1rem;
}
.profile-pl-tile__title {
    margin: 0.55rem 0 0.1rem;
    font-family: var(--pf-font-display);
    font-size: 0.92rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--pf-gold);
}
.profile-pl-tile__meta {
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pf-on-dark-soft);
}
.profile-pl-tile__toggle {
    margin-top: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    background: transparent;
    color: var(--pf-gold);
    cursor: pointer;
    font-family: var(--pf-font-body);
}
.profile-pl-tile__toggle:hover { background: rgba(255, 215, 0, 0.08); }
.profile-pl-tile__link-full {
    margin-top: 0.4rem;
    padding: 0.2rem 0.35rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--pf-font-body);
    color: var(--pf-on-dark-soft);
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 215, 0, 0.22);
    cursor: pointer;
    text-decoration: none;
}
.profile-pl-tile__link-full:hover,
.profile-pl-tile__link-full:focus-visible {
    color: var(--pf-gold);
    border-bottom-color: rgba(255, 215, 0, 0.5);
    outline: none;
}
.profile-pl-tile__panel {
    margin-top: 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--pf-radius);
    background: var(--pf-surface-low);
    border: 1px solid rgba(255, 215, 0, 0.12);
}
.profile-pl-tile__drawer {
    margin-top: 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--pf-radius);
    background: var(--pf-surface-low);
    border: 1px solid rgba(255, 215, 0, 0.12);
    width: 100%;
    max-height: 22rem;
    overflow-y: auto;
    box-sizing: border-box;
}
.profile-pl-tile__panel.hidden,
.profile-pl-tile__drawer.hidden { display: none !important; }
.profile-pl-drawer__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin: 0 0 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}
.profile-pl-drawer__sort-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pf-on-dark-soft);
    margin: 0;
    cursor: default;
}
.profile-pl-sort {
    min-width: 7.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--pf-font-body);
    color: var(--pf-on-dark);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    padding: 0.28rem 0.4rem;
    cursor: pointer;
}
.profile-pl-sort:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.4);
    outline-offset: 1px;
}
#page-profile .profile-pl-tile__panel .profile-playlist-track-title,
#page-profile .profile-pl-tile__drawer .profile-playlist-track-title {
    color: var(--pf-on-dark);
}
#page-profile .profile-pl-tile__panel .profile-playlist-open-btn,
.profile-playlist-rem-btn,
#page-profile .profile-pl-tile__panel .profile-playlist-preview-btn,
#page-profile .profile-pl-tile__drawer .profile-playlist-open-btn,
#page-profile .profile-pl-tile__drawer .profile-playlist-preview-btn {
    border-color: rgba(255, 215, 0, 0.28);
    background: rgba(0, 0, 0, 0.22);
    color: var(--pf-on-dark);
}
.profile-playlists-empty {
    margin: 0.75rem 0 0;
    font-size: 0.88rem;
    color: var(--pf-on-dark-soft);
}

.profile-surface-card {
    margin-top: 1.75rem;
    border-radius: var(--pf-radius-xl);
    overflow: hidden;
    background: var(--pf-cream);
    color: var(--pf-ink);
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.profile-surface-card__head {
    padding: 0.55rem 1rem;
    background: var(--pf-surface-lowest);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}
.profile-surface-card__head-title {
    margin: 0;
    font-family: var(--pf-font-display);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pf-gold);
}
.profile-surface-card__body { padding: 1rem 1.1rem 1.2rem; }
.profile-import-lead {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: var(--pf-muted);
    line-height: 1.45;
}
#page-profile .profile-import-check {
    color: var(--pf-ink);
    margin: 0.4rem 0;
}

.profile-liked-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0 0;
}
.profile-liked-list li {
    margin: 0;
    padding: 0;
}
.profile-liked-list__btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.35rem;
    border-radius: var(--pf-radius);
    border: 1px solid rgba(80, 55, 45, 0.15);
    background: rgba(255, 255, 255, 0.45);
    color: var(--pf-ink);
    font-family: var(--pf-font-body);
    font-size: 0.86rem;
    cursor: pointer;
    transition: background 0.12s ease;
}
.profile-liked-list__btn:hover {
    background: var(--pf-cream-2);
}

#page-profile :focus-visible {
    outline: 2px solid var(--pf-gold);
    outline-offset: 2px;
}

/* ── Snap2Grid : inventory beige + dark liked sidebar + rename/vis controls ── */
#page-profile .profile-feed-card {
    background: var(--pf-cream);
    color: var(--pf-ink);
    border: 1px solid rgba(80, 55, 45, 0.12);
}
#page-profile .profile-feed-card__head {
    background: var(--pf-surface-lowest);
    border-bottom: 1px solid rgba(255, 215, 0, 0.12);
}
#page-profile .profile-feed-card__head-title {
    color: var(--pf-gold);
}
#page-profile .profile-feed-card--patterns-brown {
    background: linear-gradient(165deg, #6d4c41 0%, #4e342e 45%, #3e2723 100%);
    color: #fff8f0;
    border: 1px solid rgba(255, 200, 150, 0.14);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
    overflow: visible;
}
#page-profile .profile-feed-card--patterns-brown .profile-feed-card__head {
    background: rgba(0, 0, 0, 0.22);
    border-bottom-color: rgba(255, 213, 179, 0.15);
}
#page-profile .profile-feed-card--patterns-brown .profile-feed-card__head-title {
    color: #ffe0b2;
}
.profile-patterns-expand-wrap {
    padding: 0.45rem 0.75rem 0.6rem;
    text-align: center;
    border-top: 1px solid rgba(255, 213, 179, 0.2);
    background: rgba(0, 0, 0, 0.15);
}
#page-profile .profile-feed-card--patterns-brown .profile-pattern-row {
    background: rgba(255, 252, 247, 0.07);
    border-bottom-color: rgba(255, 236, 210, 0.14);
}
#page-profile .profile-feed-card--patterns-brown .profile-pattern-row:hover {
    background: rgba(255, 255, 255, 0.1);
}
#page-profile .profile-feed-card--patterns-brown .profile-pattern-row__main,
#page-profile .profile-feed-card--patterns-brown .profile-pattern-row__title,
#page-profile .profile-feed-card--patterns-brown .profile-pattern-row__meta {
    color: #fff8f0;
}
#page-profile .profile-feed-card--patterns-brown .profile-pattern-row__stats--icons {
    color: #ffccbc;
}
#page-profile .profile-feed-card--patterns-brown .profile-stat-ic .bi {
    color: rgba(255, 215, 160, 0.95);
}
.profile-pattern-row-actions--social {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
}
.profile-pattern-social-btn {
    border: 1px solid rgba(255, 220, 190, 0.35);
    background: rgba(0, 0, 0, 0.18);
    color: #fff8f0;
    border-radius: 10px;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.profile-pattern-social-btn:hover {
    background: rgba(255, 215, 160, 0.12);
    border-color: rgba(255, 236, 200, 0.45);
}
.profile-pattern-social-btn--liked,
.profile-pattern-social-btn.is-liked {
    border-color: rgba(255, 180, 170, 0.55);
    background: rgba(180, 60, 80, 0.25);
}
#page-profile .profile-pattern-thumb-wrap {
    width: 52px;
    height: 52px;
}
#page-profile .profile-pattern-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
}
.profile-sub-page {
    margin-top: 0.5rem;
    padding: 0.35rem 0.25rem 1.5rem;
}
.profile-sub-page__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}
.profile-sub-page__back {
    text-decoration: none;
}
.profile-sub-page__title {
    margin: 0;
    font-family: var(--pf-font-display);
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--pf-gold);
}
.profile-liked-grid--full {
    max-width: 40rem;
}
.profile-liked-card__inner--simple {
    grid-template-columns: 3rem 1fr auto;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
}
.profile-liked-card__inner--simple:hover {
    transform: none;
    border-color: rgba(255, 215, 0, 0.22);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.profile-liked-card__thumb--play {
    position: relative;
}
.profile-liked-card__thumb-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 1rem;
}
.profile-liked-card__thumb--play:hover .profile-liked-card__thumb-icon,
.profile-liked-card__thumb--play:focus-visible .profile-liked-card__thumb-icon,
.profile-liked-card__thumb--play.is-previewing .profile-liked-card__thumb-icon {
    opacity: 1;
}
.profile-liked-card__thumb--play.is-previewing .profile-liked-card__thumb-icon {
    background: rgba(255, 215, 0, 0.35);
    color: #2a1814;
}
.profile-liked-card__actions--simple {
    flex-direction: column;
    gap: 0.25rem;
}

/* Profile sidebar: stats + likes read as one quiet column (no heavy “cards”). */
#page-profile .profile-sidebar .profile-side-card--stats,
#page-profile .profile-sidebar .profile-side-card--likes-sidebar {
    background: transparent;
    border: none;
    box-shadow: none;
    color: inherit;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}
#page-profile .profile-sidebar .profile-side-card--stats {
    margin-bottom: 0.2rem;
    padding-top: 0.55rem;
    padding-bottom: 0.75rem;
}
#page-profile .profile-sidebar .profile-side-card--likes-sidebar {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#page-profile .profile-liked-rows--stream.profile-liked-grid {
    gap: 0.12rem;
    padding-top: 0.1rem;
}

#profilePlaylistEmptyOverlay .profile-liked-rows--stream.profile-liked-grid {
    gap: 0.12rem;
    padding-top: 0.35rem;
    max-height: min(52vh, 24rem);
    overflow-y: auto;
    margin: 0;
}

/* Stream rows: sidebar likes + playlist quick-add modal (shared layout). */
.profile-liked-rows--stream .profile-liked-card__inner--stream {
    grid-template-columns: 2.45rem 1fr auto;
    gap: 0.45rem 0.55rem;
    padding: 0.4rem 0;
    align-items: start;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease;
}
.profile-liked-rows--stream .profile-liked-card--stream:last-child .profile-liked-card__inner--stream {
    border-bottom: none;
}
.profile-liked-rows--stream .profile-liked-card__inner--stream:hover {
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.03);
}
.profile-liked-rows--stream .profile-liked-card__inner--stream .profile-liked-card__thumb {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 6px;
}
.profile-liked-rows--stream .profile-liked-card__inner--stream .profile-liked-card__thumb-icon {
    font-size: 0.82rem;
}
.profile-liked-rows--stream .profile-liked-card__title--stream {
    margin: 0.1rem 0 0;
    font-family: var(--pf-font-body, var(--font-heading));
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(252, 244, 232, 0.96);
    line-height: 1.25;
}
.profile-liked-rows--stream .profile-liked-card__creator--stream {
    margin: 0;
    font-size: 0.68rem;
    opacity: 0.55;
    color: rgba(252, 244, 232, 0.78);
}
.profile-liked-rows--stream .profile-liked-card__stream-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.22rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(252, 244, 232, 0.48);
}
.profile-liked-rows--stream .profile-liked-stream-stat .bi {
    margin-right: 0.18rem;
    opacity: 0.88;
    font-size: 0.72em;
    vertical-align: -0.05em;
}
.profile-liked-rows--stream .profile-liked-card__btn--stream-open {
    padding: 0.22rem 0.48rem;
    font-size: 0.58rem;
    border-radius: 6px;
    letter-spacing: 0.06em;
}
.profile-liked-rows--stream .profile-liked-card__actions--stream {
    align-self: center;
}

.profile-playlist-track-row--compact {
    align-items: center;
}
.profile-playlist-track-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}
.profile-pl-track-thumb-wrap {
    position: relative;
    width: 2.35rem;
    height: 2.35rem;
    flex-shrink: 0;
}
.profile-pl-track-thumb {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.profile-pl-track-thumb__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.32);
    color: #fff8f0;
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 0.85rem;
}
.profile-pl-track-thumb:hover .profile-pl-track-thumb__icon,
.profile-pl-track-thumb:focus-visible .profile-pl-track-thumb__icon,
.profile-pl-track-thumb.is-previewing .profile-pl-track-thumb__icon {
    opacity: 1;
}
.profile-pl-track-thumb.is-previewing .profile-pl-track-thumb__icon {
    background: rgba(255, 215, 0, 0.35);
    color: #2a1814;
}
.profile-playlist-track-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}
.profile-playlist-track-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: rgba(255, 248, 240, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-playlist-track-sub {
    font-size: 0.68rem;
    color: rgba(255, 248, 240, 0.55);
}
.profile-playlist-more-tracks {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
}
#page-profile .profile-playlist-track-row--compact,
#page-profile .profile-playlist-track-row--drawer {
    border-radius: 8px;
    padding: 0.32rem 0.25rem;
}
#page-profile .profile-playlist-track-row--compact:hover,
#page-profile .profile-playlist-track-row--drawer:hover {
    background: rgba(0, 0, 0, 0.04);
}
.profile-playlist-track-row--drawer {
    align-items: center;
}
#page-profile .profile-pattern-row__title {
    color: var(--pf-ink);
}
#page-profile .profile-pattern-row__main {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--pf-ink);
}
#page-profile .profile-pattern-row__stats {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pf-muted);
}
#page-profile .profile-pattern-row__stats--icons {
    color: var(--pf-muted);
}
#page-profile .profile-pattern-row__stats--icons .bi {
    color: rgba(74, 45, 39, 0.55);
}
.profile-pattern-title-block {
    min-width: 0;
    width: 100%;
    max-width: 22rem;
}
.profile-pattern-title-input {
    display: block;
    width: 100%;
    max-width: 22rem;
    box-sizing: border-box;
    font-family: var(--pf-font-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pf-ink);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(80, 55, 45, 0.22);
    border-radius: 8px;
    padding: 0.28rem 0.45rem;
}
.profile-inline-vis {
    display: inline-flex;
    gap: 0.28rem;
    margin-left: 0.35rem;
    padding: 0.2rem 0.25rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.12);
    box-shadow: none;
}
.profile-inline-vis-pill {
    border: 1px solid rgba(80, 55, 45, 0.35);
    border-radius: 8px;
    padding: 0.24rem 0.55rem;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.08);
    color: rgba(255, 248, 240, 0.7);
    font-family: var(--pf-font-body);
    transition:
        color 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease;
}
.profile-inline-vis-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.35);
}
.profile-inline-vis-pill:hover {
    color: #fff8f0;
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.3);
}
/* Actif = binaire : Public = jaune, Private = noir (pas de double halo doré) */
.profile-inline-vis-pill--active[data-vis="public"] {
    background: #e6c200;
    color: #0f0806;
    border: 1px solid #a89000;
    box-shadow: none;
    transform: none;
}
.profile-inline-vis-pill--active[data-vis="private"] {
    background: #0a0a0a;
    color: #e8ddc4;
    border: 1px solid #1f1f1f;
    box-shadow: none;
    transform: none;
}
@keyframes profileInlineVisFlash {
    0% {
        transform: scale(1.05);
    }
    45% {
        transform: scale(1.12);
        box-shadow:
            0 0 0 3px rgba(255, 215, 0, 0.55),
            0 0 18px rgba(255, 215, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    100% {
        transform: scale(1.05);
    }
}
.profile-inline-vis-pill.profile-inline-vis-pill--flash {
    animation: profileInlineVisFlash 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .profile-inline-vis-pill {
        transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    }
    .profile-inline-vis-pill.profile-inline-vis-pill--flash {
        animation: none;
    }
    .profile-inline-vis-pill:hover,
    .profile-inline-vis-pill--active[data-vis="public"],
    .profile-inline-vis-pill--active[data-vis="private"] {
        transform: none;
    }
}
.profile-side-card--likes-sidebar {
    background: var(--pf-surface-low);
    color: var(--pf-on-dark);
    border: 1px solid rgba(212, 184, 140, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.profile-liked-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0;
}
.profile-liked-card {
    margin: 0;
    padding: 0;
}
.profile-liked-card__inner {
    display: grid;
    grid-template-columns: 3.25rem 1fr auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    background: #2D1B17;
    border: 1px solid rgba(255, 215, 0, 0.12);
    transition: all 0.2s ease;
}
.profile-liked-card__inner:hover {
    border-color: rgba(255, 215, 0, 0.35);
    transform: translateX(4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}
.profile-liked-card__thumb {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.profile-liked-card__thumb::after {
    content: '▶';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s;
}
.profile-liked-card__thumb:hover::after {
    opacity: 1;
}
.profile-liked-card__thumb--play::after {
    content: none;
    display: none;
}
.profile-liked-card__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--accent);
    line-height: 1.2;
}
.profile-liked-card__creator {
    margin: 0.12rem 0 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-soft);
    opacity: 0.6;
}
.profile-liked-card__meta {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--text-soft);
    opacity: 0.5;
}
.profile-liked-card__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.profile-liked-card__btn {
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: rgba(255, 215, 0, 0.05);
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}
.profile-liked-card__btn:hover {
    background: rgba(255, 215, 0, 0.15);
    color: var(--accent);
    border-color: var(--accent);
}
.profile-bio-page-sheet {
    border: 1px solid rgba(255, 215, 0, 0.15);
    background: #2D1B17;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
}
.profile-bio-page-name {
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.profile-bio-page-role {
    color: var(--text-soft);
    opacity: 0.6;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.profile-bio-page-edit-btn {
    background: rgba(255, 215, 0, 0.1);
    color: var(--accent);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* --- GDPR & Privacy --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFD700;
    color: #261814;
    padding: 0.85rem 1.5rem;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
.cookie-banner__content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.cookie-banner__content p {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
}
.cookie-banner__content a {
    color: inherit;
    text-decoration: underline;
}
.cookie-banner__btn {
    background: #261814;
    color: #FFD700;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    text-transform: uppercase;
}

.profile-privacy-shell {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.profile-privacy-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
}
.profile-privacy-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: var(--accent);
}
.profile-privacy-desc {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.5;
}
.profile-privacy-card--danger {
    border-color: rgba(255, 82, 82, 0.3);
    background: rgba(255, 82, 82, 0.02);
}
.profile-privacy-card--danger h3 {
    color: #ff5252;
}
.danger-btn {
    border-color: rgba(255, 82, 82, 0.5) !important;
    color: #ff5252 !important;
}
.danger-btn:hover {
    background: rgba(255, 82, 82, 0.1) !important;
}

.tm-profile-btn--warning {
    border-color: rgba(255, 152, 0, 0.5) !important;
    color: #ffb74d !important;
}

.tm-profile-btn--warning:hover {
    background: rgba(255, 152, 0, 0.1) !important;
}

.tm-profile-btn--success {
    border-color: rgba(76, 175, 80, 0.5) !important;
    color: #81c784 !important;
}

.tm-profile-btn--success:hover {
    background: rgba(76, 175, 80, 0.1) !important;
}

/* --- Custom Modals: The Gilded Vault Style --- */
.tm-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--tm-modal-overlay-bg);
    backdrop-filter: blur(calc(var(--tm-modal-overlay-blur) * 2));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--tm-modal-overlay-z) + 800);
    transition: opacity 0.3s ease;
}
.tm-modal-overlay.tm-modal-overlay--pos-center {
    align-items: center;
}
.tm-modal-overlay.tm-modal-overlay--pos-bottom {
    align-items: flex-end;
    padding-bottom: var(--tm-modal-panel-bottom-gap);
}

.tm-modal-overlay.hidden {
    display: none;
    opacity: 0;
}

.tm-modal-panel {
    background: linear-gradient(165deg, #3E2723, #2a1814);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 24px;
    width: 90%;
    max-width: 500px;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    position: relative;
    animation: tm-modal-reveal 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tm-modal-panel.tm-modal-panel--size-sm {
    max-width: min(var(--tm-modal-panel-size-sm), 92vw);
}
.tm-modal-panel.tm-modal-panel--size-lg {
    max-width: min(var(--tm-modal-panel-size-lg), 96vw);
}

@keyframes tm-modal-reveal {
    from { transform: translateY(30px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.tm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.tm-modal-header h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--accent);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tm-modal-body {
    margin: 0;
    padding: 0;
}

.tm-modal-close {
    background: transparent;
    border: none;
    color: var(--text-soft);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}

.tm-modal-close:hover {
    color: #fff;
}

.tm-modal-desc {
    font-size: 1rem;
    color: var(--text-soft);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.tm-modal-field-group {
    margin-bottom: 1.5rem;
}

.tm-modal-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.tm-modal-textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    padding: 1rem;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    min-height: 100px;
    resize: vertical;
    transition: border-color 0.2s;
}

.tm-modal-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.tm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

.tm-modal-panel--mod {
    border-top: 4px solid var(--accent);
}

.tm-modal-panel--danger {
    border-top-color: #ff5252;
}

.tm-modal-panel--danger h3 {
    color: #ff5252;
}

.tm-modal-select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.25);
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 248, 240, 0.95);
    font-family: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}
.tm-modal-select:focus {
    outline: none;
    border-color: var(--accent);
}
.tm-modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.25);
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 248, 240, 0.95);
    font-family: inherit;
    font-size: 0.88rem;
}
.tm-modal-input:focus {
    outline: none;
    border-color: var(--accent);
}
.tm-modal-panel--report-user {
    max-width: min(32rem, 94vw);
}
.tm-modal-panel--pattern-comments {
    max-width: min(38rem, 96vw);
    width: 92%;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
}
.pattern-comments-modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding-right: 0.25rem;
    display: flex;
    flex-direction: column;
}
.pattern-comments-modal-body .pattern-comments-list {
    flex: 1;
    min-height: 0;
    margin-top: 0.75rem;
}
.pattern-comments-modal-lead {
    margin-bottom: 0.65rem;
}
#patternCommentsOverlay.tm-modal-overlay,
#profileReportUserOverlay.tm-modal-overlay {
    z-index: 455;
}

/* Account banned — optional moderator-facing reason */
.account-banned-reason-wrap {
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    background: linear-gradient(165deg, rgba(62, 39, 35, 0.55), rgba(26, 14, 10, 0.75));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.account-banned-reason-wrap.hidden {
    display: none;
}
.account-banned-reason-title {
    margin: 0 0 0.45rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}
.account-banned-reason-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 248, 240, 0.9);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Toasts */
.tm-toast-host {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    pointer-events: none;
    max-width: min(22rem, 92vw);
}
.tm-toast {
    pointer-events: none;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}
.tm-toast--in {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.tm-toast--out {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
}
.tm-toast--success {
    background: linear-gradient(165deg, #2e4a32, #1a2e1f);
    color: #e8f5e9;
    border-color: rgba(129, 199, 132, 0.45);
}
.tm-toast--error {
    background: linear-gradient(165deg, #4a2323, #2a1212);
    color: #ffebee;
    border-color: rgba(255, 138, 128, 0.45);
}
.tm-toast--info {
    background: linear-gradient(165deg, #3e2723, #221510);
    color: rgba(255, 248, 240, 0.95);
    border-color: rgba(255, 215, 0, 0.35);
}

/* Alpine.js (hybrid static UI): hide until initialized to avoid flash */
[x-cloak] {
    display: none !important;
}

/* ── Profile — Forum activity section ─────────────────────────────────────── */

.profile-forum-activity {
    margin-top: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    background: rgba(47, 29, 25, 0.4);
    overflow: hidden;
}

.profile-forum-activity__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.08);
}

.profile-forum-activity__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.profile-forum-activity__load-btn {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: transparent;
    color: var(--app-text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.profile-forum-activity__load-btn:hover {
    color: var(--text-primary);
    border-color: rgba(255, 215, 0, 0.45);
}

.profile-forum-activity__list {
    padding: 0.5rem 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 2rem;
}

.profile-forum-thread-row {
    font-size: 0.875rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.profile-forum-thread-row:last-child {
    border-bottom: none;
}

.profile-forum-thread-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-family: var(--font-body);
    font-size: inherit;
}

.profile-forum-thread-link:hover {
    text-decoration: underline;
    color: var(--accent);
}

.profile-forum-thread-meta {
    font-size: 0.75rem;
    color: var(--app-text-muted);
}

.profile-forum-empty {
    font-size: 0.875rem;
    color: var(--app-text-muted);
    padding: 0.5rem 0;
    margin: 0;
}

/* ── Pattern edit modal ─────────────────────────────────────────── */
.pattern-edit-panel {
    padding: 1.5rem;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pattern-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}
.pattern-edit-header .modal-title { margin: 0; }
.pattern-edit-body { flex: 1; }
.pattern-edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.pattern-edit-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 480px) {
    .pattern-edit-row,
    .pattern-edit-row--3 { grid-template-columns: 1fr; }
}
.pattern-edit-vis-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.pattern-edit-vis-pill {
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--text-soft);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.pattern-edit-vis-pill.is-active,
.pattern-edit-vis-pill[aria-pressed="true"] {
    background: var(--accent);
    color: #2c1b17;
}
.pattern-edit-remake-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-top: 1px solid rgba(255,215,0,0.15);
    margin-top: 0.5rem;
}
.pattern-edit-remake-label {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    letter-spacing: 1px;
    color: var(--text-soft);
    text-transform: uppercase;
    cursor: pointer;
}
.pattern-edit-remake-fields {
    padding: 0.75rem 0 0.25rem;
    border-bottom: 1px solid rgba(255,215,0,0.10);
    margin-bottom: 0.75rem;
}
.pattern-edit-remake-fields.hidden { display: none; }
.pattern-edit-status {
    font-size: 0.85rem;
    padding: 0.35rem 0;
    margin: 0.25rem 0 0;
}
.pattern-edit-status.hidden { display: none; }
.pattern-edit-status--error { color: #e57373; }
.pattern-edit-status--ok    { color: #81c784; }
.pattern-edit-required { color: #e57373; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   SEARCH PAGE  (#page-search)
   ═══════════════════════════════════════════════════════════════ */
.search-page-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}
.search-page-header {
    margin-bottom: 1.5rem;
}
.search-page-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.search-page-input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 6px;
    color: var(--app-text-body);
    font-size: 1rem;
    padding: 0.65rem 1rem;
    outline: none;
    transition: border-color 0.15s;
}
.search-page-input::placeholder { color: var(--app-text-muted); }
.search-page-input:focus { border-color: var(--accent); }
.search-page-btn {
    background: rgba(255,215,0,0.1);
    border: 1px solid rgba(255,215,0,0.25);
    border-radius: 6px;
    color: var(--accent);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.6rem 0.9rem;
    transition: background 0.15s;
}
.search-page-btn:hover { background: rgba(255,215,0,0.2); }

/* States */
.search-page-msg {
    color: var(--app-text-muted);
    font-size: 0.9rem;
    padding: 2rem 0;
    text-align: center;
}
.search-page-msg--error { color: #e0644a; }

/* Sections */
.search-section { margin-bottom: 1.75rem; }
.search-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255,215,0,0.12);
}
.search-section-title i { margin-right: 0.35rem; }
.search-section-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.search-item {
    border-radius: 6px;
    transition: background 0.12s;
}
.search-item:hover { background: rgba(255,255,255,0.05); }
.search-item-link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    color: inherit;
    width: 100%;
}
.search-item-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--app-text-body);
}
.search-item-meta {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-item--pattern { cursor: pointer; }
.search-item-link--btn {
    cursor: pointer;
    user-select: none;
}
.search-item-tag {
    display: inline-block;
    background: rgba(255,215,0,0.1);
    border: 1px solid rgba(255,215,0,0.18);
    border-radius: 3px;
    color: var(--accent);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Nav search icon */
.nav-search-btn {
    background: none;
    border: none;
    color: var(--app-text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
    transition: color 0.15s;
}
.nav-search-btn:hover { color: var(--accent); }