:root {
    --bg: #0F1117;
    --surface: rgba(255, 255, 255, 0.045);
    --surface-2: rgba(255, 255, 255, 0.065);
    --line: rgba(255, 255, 255, 0.065);
    --text: #FFFFFF;
    --muted: #B8BDC7;
    --green: #8BC53F;
    --pink: #EC008C;
    --yellow: #FFD400;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    --radius: 8px;
    --shell: min(1120px, calc(100% - 32px));
}

/* Chiveros Letras */
.lyrics-catalog,
.lyrics-detail,
.account-lyrics,
.lyric-form-page {
    background:
        radial-gradient(circle at 0 0, rgba(236, 0, 140, .18), transparent 34rem),
        radial-gradient(circle at 100% 0, rgba(139, 197, 63, .14), transparent 34rem),
        var(--bg, #0F1117);
    min-height: 80vh;
    padding: 4rem 0;
}

.lyrics-hero,
.lyric-detail-hero,
.account-lyrics-head,
.lyric-form-head {
    display: grid;
    gap: 1rem;
    max-width: 760px;
    margin-bottom: 2rem;
}

.lyrics-hero h1,
.lyric-detail-hero h1,
.account-lyrics-head h1,
.lyric-form-head h1 {
    margin: 0;
    font-size: clamp(2.25rem, 7vw, 4.9rem);
    line-height: .95;
    letter-spacing: -.06em;
}

.lyrics-hero p,
.lyric-detail-hero p,
.account-lyrics-head p,
.lyric-form-head p {
    color: rgba(255,255,255,.72);
    margin: 0;
    font-size: 1.05rem;
}

.lyrics-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(150px, 190px)) auto;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1.2rem;
    background: rgba(255,255,255,.045);
    margin-bottom: 2rem;
}

.lyrics-filters label,
.lyric-editor-form label {
    display: grid;
    gap: .45rem;
    color: rgba(255,255,255,.68);
    font-size: .78rem;
    font-weight: 700;
}

.lyrics-filters input,
.lyrics-filters select,
.lyric-editor-form input,
.lyric-editor-form select,
.lyric-editor-form textarea,
.admin-lyric-actions input {
    width: 100%;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: .8rem;
    background: rgba(8,10,16,.8);
    color: #fff;
    padding: .9rem 1rem;
    font: inherit;
    min-height: 46px;
}

.lyrics-filters .btn {
    align-self: end;
}

.mobile-filter-primary,
.mobile-filter-panel,
.mobile-filter-actions { display: contents; }
.mobile-filter-toggle,
.mobile-filter-clear { display: none; }

.lyrics-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lyrics-section-head h2 {
    margin: .2rem 0 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -.05em;
}

.lyrics-section-head span {
    color: rgba(255,255,255,.7);
    font-weight: 700;
}

.lyrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.lyric-card a {
    display: grid;
    gap: .65rem;
    min-height: 230px;
    padding: 1.15rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1.25rem;
    background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    color: #fff;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease;
}

.lyric-card a:hover {
    transform: translateY(-3px);
    border-color: rgba(139,197,63,.45);
}

.lyric-card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    background: rgba(139,197,63,.13);
    color: #8BC53F;
}

.lyric-card small,
.lyric-card p,
.lyric-card footer,
.muted {
    color: rgba(255,255,255,.66);
}

.lyric-card h3 {
    margin: .25rem 0 0;
    font-size: 1.25rem;
    line-height: 1.1;
}

.lyric-card p {
    margin: 0;
}

.lyric-card footer {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    font-size: .78rem;
}

.lyrics-detail-shell {
    max-width: 1180px;
}

.lyrics-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.35rem;
    color: rgba(255,255,255,.52);
    font-size: .78rem;
    line-height: 1.4;
}

.lyrics-breadcrumbs a {
    color: rgba(255,255,255,.68);
    text-decoration: none;
}

.lyrics-breadcrumbs a:hover {
    color: var(--green);
}

.lyrics-breadcrumbs span {
    color: rgba(255,255,255,.38);
}

.lyrics-breadcrumbs span:last-child {
    max-width: min(560px, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255,255,255,.56);
}

.lyric-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.25rem;
    align-items: start;
}

.lyric-main {
    display: grid;
    gap: 1rem;
}

.lyric-panel,
.lyric-cta-card {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1.25rem;
    background: rgba(255,255,255,.045);
    padding: 1.35rem;
}

.lyric-panel h2,
.lyric-cta-card h2 {
    margin: 0 0 1rem;
    letter-spacing: -.03em;
}

.lyrics-body {
    white-space: normal;
    color: rgba(255,255,255,.9);
    line-height: 1.85;
    font-size: 1.05rem;
}

.lyrics-contributor {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.25rem;
    color: rgba(255,255,255,.7);
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 1rem;
}

.lyrics-info-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin: 0;
}

.lyrics-info-list div {
    padding: .9rem;
    border-radius: .9rem;
    background: rgba(0,0,0,.22);
}

.lyrics-info-list dt {
    color: rgba(255,255,255,.55);
    font-size: .76rem;
    margin-bottom: .25rem;
}

.lyrics-info-list dd {
    margin: 0;
    font-weight: 700;
}

.lyrics-related-track {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.lyrics-related-track img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: .9rem;
}

.lyrics-related-track h3,
.lyrics-related-track p {
    margin: .1rem 0;
}

.lyric-sidebar {
    position: sticky;
    top: 6rem;
}

.lyric-cta-card {
    display: grid;
    gap: .8rem;
}

.lyric-cta-card > i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: rgba(255,212,0,.14);
    color: #FFD400;
    font-size: 1.5rem;
}

.lyrics-faq {
    display: grid;
    gap: .6rem;
}

.lyrics-faq details {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .9rem;
    padding: .9rem 1rem;
    background: rgba(0,0,0,.18);
}

.lyrics-faq summary {
    cursor: pointer;
    font-weight: 700;
}

.lyrics-faq p {
    color: rgba(255,255,255,.7);
    margin-bottom: 0;
}

.account-lyrics-head {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.lyrics-user-table {
    display: grid;
    gap: .8rem;
}

.lyrics-user-table article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px auto;
    gap: 1rem;
    align-items: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    padding: 1rem;
    background: rgba(255,255,255,.04);
}

.lyrics-user-table small,
.lyrics-user-table p {
    color: rgba(255,255,255,.62);
    margin: .25rem 0 0;
}

.lyric-status {
    justify-self: start;
    border-radius: 999px;
    padding: .35rem .65rem;
    font-size: .72rem;
    font-weight: 700;
    background: rgba(255,255,255,.09);
}

.status-approved { color: #8BC53F; }
.status-pending_review { color: #FFD400; }
.status-rejected { color: #ff6aa9; }
.status-draft { color: rgba(255,255,255,.75); }

.lyrics-user-actions,
.admin-lyric-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.lyrics-user-actions a,
.lyrics-user-actions button,
.admin-lyric-actions a,
.admin-lyric-actions button {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .7rem;
    background: rgba(255,255,255,.06);
    color: #fff;
    padding: .6rem .75rem;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.lyric-editor-form {
    display: grid;
    gap: 1rem;
    max-width: 980px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1.25rem;
    padding: 1.25rem;
    background: rgba(255,255,255,.045);
}

.form-grid.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.lyric-editor-form textarea {
    resize: vertical;
    min-height: 360px;
    line-height: 1.7;
}

.lyric-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
}

.form-error {
    border: 1px solid rgba(236,0,140,.35);
    border-radius: .9rem;
    background: rgba(236,0,140,.12);
    color: #ff8dc8;
    padding: .9rem 1rem;
    margin: 1rem 0;
    font-weight: 700;
}

.admin-edit-standalone .admin-main {
    max-width: 1040px;
    margin: 0 auto;
}

.admin-metrics.compact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.lyric-import-panel {
    margin-bottom: 1rem;
}

.lyric-import-panel .admin-panel-head p {
    margin: .35rem 0 0;
    color: rgba(255,255,255,.55);
    font-size: 10px;
    max-width: 760px;
}

.lyric-import-form {
    grid-template-columns: minmax(180px, 260px) auto;
    align-items: end;
    max-width: none;
    margin: .8rem 0 1rem;
}

.lyric-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    margin-bottom: 1rem;
}

.lyric-import-actions .lyric-import-form {
    margin: 0;
}

.lyric-fix-form {
    display: grid;
    gap: 6px;
    align-content: end;
}

.lyric-fix-form button {
    min-height: 42px;
    border: 1px solid rgba(255,212,0,.35);
    border-radius: 9px;
    padding: 0 12px;
    background: rgba(255,212,0,.09);
    color: var(--yellow);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.lyric-fix-form small {
    color: rgba(255,255,255,.45);
    font-size: 10px;
}

.lyric-import-form select {
    min-height: 42px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 9px;
    padding: 0 12px;
    background: #0f1117;
    color: #fff;
    font: inherit;
}

.lyric-import-preview {
    display: grid;
    gap: .5rem;
}

.lyric-import-preview article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: .75rem .9rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .8rem;
    background: rgba(255,255,255,.035);
}

.lyric-import-preview article.is-skipped {
    opacity: .58;
}

.lyric-import-preview strong,
.lyric-import-preview small {
    display: block;
}

.lyric-import-preview small,
.lyric-import-preview span {
    color: rgba(255,255,255,.55);
    font-size: 10px;
}

@media (max-width: 980px) {
    .lyrics-filters,
    .lyrics-grid,
    .lyric-detail-grid,
    .account-lyrics-head,
    .lyrics-user-table article {
        grid-template-columns: 1fr;
    }

    .lyrics-related-track {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .lyrics-related-track .btn {
        grid-column: 1 / -1;
    }

    .lyric-sidebar {
        position: static;
    }

    .admin-metrics.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .lyrics-catalog,
    .lyrics-detail,
    .account-lyrics,
    .lyric-form-page {
        padding: 1.8rem 0 2.4rem;
    }

    .lyrics-hero { gap: .8rem; margin-bottom: 1.35rem; }
    .lyrics-hero h1 { font-size: 2.3rem; letter-spacing: -.04em; }
    .lyrics-hero p { font-size: .95rem; }

    .form-grid.two,
    .lyrics-info-list {
        grid-template-columns: 1fr;
    }

    .lyric-form-actions,
    .lyrics-user-actions {
        justify-content: stretch;
    }

    .lyric-form-actions .btn,
    .lyrics-user-actions a,
    .lyrics-user-actions button {
        width: 100%;
    }
}

* {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(circle at 10% 0%, rgba(236, 0, 140, 0.18), transparent 28rem),
        radial-gradient(circle at 95% 8%, rgba(139, 197, 63, 0.16), transparent 22rem),
        var(--bg);
    color: var(--text);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 400;
    line-height: 1.58;
    letter-spacing: 0;
    padding-bottom: 86px;
}

body.checkout-mode {
    padding-bottom: 0;
}

body.library-mode {
    padding-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled,
input:disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

.shell {
    width: var(--shell);
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    padding: 10px 12px;
    background: var(--yellow);
    color: #0F1117;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background:
        linear-gradient(180deg, rgba(15, 17, 23, 0.94), rgba(15, 17, 23, 0.78));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(22px);
}

.checkout-minimal-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(15,17,23,.9);
    box-shadow: 0 16px 44px rgba(0,0,0,.14);
    backdrop-filter: blur(22px);
}

.library-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(15,17,23,.9);
    box-shadow: 0 16px 44px rgba(0,0,0,.14);
    backdrop-filter: blur(22px);
}

.library-header-shell {
    min-height: 68px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 16px;
}

.library-header-shell .brand {
    justify-self: start;
}

.library-header-title {
    display: none;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.7);
    font-size: 12px;
    font-weight: 600;
}

.library-header-title .ti {
    color: var(--green);
    font-size: 18px;
}

.library-user {
    display: inline-grid;
    grid-template-columns: 34px auto;
    align-items: center;
    gap: 8px;
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(255,255,255,.84);
}

.library-user > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--green));
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
}

.library-user strong,
.library-user > .ti {
    display: none;
}

.checkout-minimal-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
}

.checkout-minimal-shell {
    min-height: 70px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 18px;
    padding-block: 10px;
}

.checkout-minimal-shell .brand {
    justify-self: start;
}

.checkout-minimal-secure {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--green);
    font-size: 11px;
    font-weight: 600;
}

.checkout-minimal-shell > p {
    grid-column: 1 / -1;
    justify-self: end;
    margin-bottom: 0;
    color: rgba(255,255,255,.48);
    font-size: 10.5px;
}

.checkout-minimal-shell > p a {
    color: rgba(255,255,255,.86);
    font-weight: 600;
}

.checkout-minimal-shell > p a:hover {
    color: var(--green);
}

.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    pointer-events: none;
}

.header-shell {
    position: relative;
    min-height: 66px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

@media (max-width: 379px) {
    .header-shell .brand-logo { width: 102px; }
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 10px;
    min-width: 0;
}

.brand-logo {
    width: 150px;
    height: auto;
    display: block;
}

.header-shell .brand-logo { width: 116px; }
.library-header-shell .brand-logo { width: 136px; }
.checkout-minimal-shell .brand-logo { width: 150px; }
.footer-brand .brand-logo { width: 180px; }

.brand-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--green), var(--yellow));
    color: #0F1117;
    font-weight: 700;
    font-size: 12px;
}

.brand strong {
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.brand small {
    color: var(--muted);
    font-size: 12px;
}

.icon-button,
.cart-link {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text);
}

.menu-toggle {
    display: grid;
    place-content: center;
    font-size: 24px;
}

.cart-link {
    position: relative;
    display: grid;
    place-items: center;
}

.nav-actions {
    display: flex;
    justify-content: end;
}

.cart-link > .ti {
    font-size: 23px;
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--pink);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
}

.cart-count[hidden],
.mini-cart[hidden],
.mini-cart-footer[hidden],
.mini-cart-empty[hidden] {
    display: none !important;
}

.mini-cart-wrap {
    position: relative;
}

.mini-cart {
    position: absolute;
    z-index: 40;
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, calc(100vw - 24px));
    padding: 14px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: #171A22;
    box-shadow: 0 8px 8px rgba(0,0,0,.3);
}

.mini-cart-head,
.mini-cart-footer > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.mini-cart-head {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.mini-cart-head strong {
    font-size: 15px;
    font-weight: 600;
}

.mini-cart-head span,
.mini-cart-footer span {
    color: rgba(255,255,255,.52);
    font-size: 11px;
}

.mini-cart-items {
    display: grid;
    gap: 5px;
    padding: 8px 0;
}

.mini-cart-item {
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) 28px;
    align-items: center;
    gap: 9px;
    min-height: 54px;
}

.mini-cart-media {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background: rgba(139,197,63,.1);
    color: var(--green);
    font-size: 20px;
}

.mini-cart-media img,
.cart-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-cart-item > div:nth-child(2) {
    min-width: 0;
    display: grid;
}

.mini-cart-item strong {
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-cart-item span {
    color: rgba(255,255,255,.52);
    font-size: 11px;
}

.mini-cart-item button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,.5);
}

.mini-cart-item button:hover {
    background: rgba(236,0,140,.1);
    color: #ff6bba;
}

.mini-cart-empty {
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 130px;
    color: rgba(255,255,255,.5);
    text-align: center;
}

.mini-cart-empty .ti {
    color: var(--green);
    font-size: 30px;
}

.mini-cart-empty p {
    margin: 0;
    font-size: 12px;
}

.mini-cart-footer {
    display: grid;
    gap: 11px;
    padding-top: 11px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.mini-cart-footer strong {
    color: var(--yellow);
    font-size: 16px;
    font-weight: 600;
}

.site-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 40;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 16px;
    background: rgba(15, 17, 23, 0.94);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(22px);
}

.menu-open .site-menu {
    display: grid;
    gap: 6px;
}

.site-menu a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.site-menu .ti {
    font-size: 19px;
}

.site-menu a.is-active,
.site-menu a:hover {
    color: var(--text);
    background: transparent;
}

.site-menu a.is-active {
    color: var(--green);
    text-shadow: 0 0 18px rgba(139, 197, 63, 0.28);
}

.site-menu a:hover {
    transform: translateY(-1px);
}

.hero,
.page-hero {
    padding: 34px 0 28px;
}

.hero-grid,
.tool-layout,
.app-layout {
    display: grid;
    gap: 24px;
}

.hero-copy,
.page-hero .shell > div,
.tool-layout > div,
.app-layout > div {
    max-width: 680px;
}

.eyebrow,
.tag {
    margin: 0 0 9px;
    color: var(--green);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 22px;
    font-size: clamp(42px, 12vw, 78px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.04em;
}

h2 {
    margin-bottom: 18px;
    font-size: clamp(24px, 7vw, 42px);
    font-weight: 700;
    line-height: 1.05;
}

h3 {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
}

.product-card h2,
.directory-item h2,
.status-card h2 {
    font-size: 20px;
}

p {
    color: rgba(255,255,255,.75);
    font-weight: 400;
}

.hero-copy > p,
.page-hero p,
.tool-layout p,
.app-layout p {
    font-size: 17px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 16px;
    font-weight: 600;
    color: var(--text);
}

.btn .ti {
    font-size: 20px;
}

.btn.primary {
    background: var(--green);
    color: #0F1117;
}

.btn.secondary {
    background: rgba(255, 255, 255, 0.038);
    border-color: var(--line);
}

.btn.compact {
    min-height: 38px;
    padding-inline: 12px;
    font-size: 14px;
}

.btn.full {
    width: 100%;
}

.hero-panel,
.upload-box,
.phone-mockup,
.cart-summary,
.cart-empty {
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.024));
    box-shadow: var(--shadow);
}

.hero-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.pulse-card {
    padding: 18px;
    border-radius: 8px;
    background: var(--surface);
    border-left: 4px solid var(--green);
}

.pulse-card span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 13px;
}

.pulse-card strong {
    font-size: 22px;
}

.accent-pink {
    border-left-color: var(--pink);
}

.accent-yellow {
    border-left-color: var(--yellow);
}

.section {
    padding: 40px 0;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.section-head h2 {
    margin-bottom: 0;
}

.text-link {
    color: var(--yellow);
    font-weight: 600;
    white-space: nowrap;
}

.feature-grid,
.card-grid,
.status-grid {
    display: grid;
    gap: 14px;
}

.feature-card,
.product-card,
.status-card,
.directory-item {
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.034);
}

.feature-card {
    min-height: 158px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
}

.feature-card span {
    color: var(--yellow);
    font-weight: 600;
}

.product-card {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px;
}

.product-card .btn {
    grid-column: 1 / -1;
}

.cover-art {
    width: 76px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(236, 0, 140, 0.85), rgba(139, 197, 63, 0.84)),
        var(--surface-2);
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
}

.cover-art.product {
    background:
        linear-gradient(135deg, rgba(255, 212, 0, 0.86), rgba(236, 0, 140, 0.78)),
        var(--surface-2);
    color: #0F1117;
}

.price {
    margin-bottom: 0;
    color: var(--yellow);
    font-weight: 700;
}

.filter-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 6px;
}

.chip {
    flex: 0 0 auto;
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 999px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.034);
    color: var(--muted);
}

.chip.is-selected {
    background: var(--pink);
    color: var(--text);
}

.upload-box {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.upload-box label {
    font-weight: 600;
}

.upload-box input {
    width: 100%;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    padding: 18px;
    background: rgba(15, 17, 23, 0.7);
    color: var(--muted);
}

.status-card {
    padding: 18px;
}

.status-dot {
    width: 13px;
    height: 13px;
    display: block;
    margin-bottom: 14px;
    border-radius: 50%;
}

.status-dot.green {
    background: var(--green);
}

.status-dot.pink {
    background: var(--pink);
}

.status-dot.yellow {
    background: var(--yellow);
}

.directory-list {
    display: grid;
    gap: 12px;
}

.directory-item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px;
}

.directory-item .btn {
    grid-column: 1 / -1;
}

.avatar {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #0F1117;
    font-weight: 700;
}

.phone-mockup {
    min-height: 420px;
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 18px;
    border-radius: 28px;
    max-width: 280px;
    margin-inline: auto;
}

.phone-top {
    width: 82px;
    height: 6px;
    margin: 0 auto 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.22);
}

.now-playing {
    padding: 18px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(139, 197, 63, 0.18), rgba(236, 0, 140, 0.18));
}

.now-playing span {
    color: var(--muted);
    font-size: 12px;
}

.now-playing strong {
    display: block;
    margin-top: 8px;
    font-size: 22px;
}

.player-bars {
    display: flex;
    align-items: end;
    gap: 7px;
    height: 82px;
    margin-top: 18px;
}

.player-bars i {
    width: 100%;
    border-radius: 8px 8px 0 0;
    background: var(--yellow);
}

.player-bars i:nth-child(1) { height: 35%; }
.player-bars i:nth-child(2) { height: 78%; background: var(--green); }
.player-bars i:nth-child(3) { height: 52%; background: var(--pink); }
.player-bars i:nth-child(4) { height: 92%; background: var(--green); }
.player-bars i:nth-child(5) { height: 42%; }

.playlist-row {
    height: 56px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
}

.playlist-row.short {
    width: 72%;
}

.cart-layout {
    display: grid;
    gap: 14px;
}

.cart-empty,
.cart-summary {
    padding: 18px;
}

.cart-summary div {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.cart-summary .btn {
    margin-top: 16px;
}

.site-footer {
    padding: 34px 0 110px;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.18);
}

.footer-grid {
    display: grid;
    gap: 22px;
}

.footer-brand {
    justify-self: start;
    margin-bottom: 12px;
}

.footer-links {
    display: grid;
    gap: 10px;
}

.footer-links a {
    color: var(--muted);
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
    background:
        linear-gradient(180deg, rgba(15, 17, 23, 0.74), rgba(15, 17, 23, 0.96));
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(22px);
}

.bottom-nav a {
    min-height: 58px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.bottom-nav a.is-active {
    color: var(--green);
    background: rgba(139, 197, 63, 0.08);
}

.bottom-nav .ti {
    font-size: 23px;
}

.home-hero {
    padding: 22px 0 12px;
}

.home-hero-shell {
    display: grid;
    gap: 18px;
}

.home-hero-copy {
    max-width: 900px;
}

.home-hero h1 {
    max-width: min(900px, 12em);
    margin-bottom: 18px;
    font-size: clamp(2.55rem, 5.1vw, 4.25rem);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: -0.035em;
}

.home-hero p:not(.eyebrow) {
    max-width: 620px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.75;
}

.home-search {
    min-height: 58px;
    display: grid;
    grid-template-columns: 28px 1fr 44px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 16px;
    border: 1px solid rgba(139, 197, 63, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18);
}

.home-search .ti {
    color: var(--green);
    font-size: 24px;
}

.home-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 15px;
}

.home-search input::placeholder {
    color: rgba(184, 189, 199, 0.82);
}

.home-search button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #0F1117;
}

.home-search button .ti {
    color: inherit;
}

.home-section {
    padding: 30px 0;
}

.section-head.compact {
    align-items: center;
    margin-bottom: 20px;
}

.section-head.compact h2 {
    font-size: clamp(24px, 7vw, 36px);
    font-weight: 700;
}

.icon-link,
.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.quick-card {
    min-height: 94px;
    display: grid;
    align-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.036);
}

.quick-card .ti {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(139, 197, 63, 0.14);
    color: var(--green);
    font-size: 22px;
}

.quick-card span {
    font-weight: 600;
    line-height: 1.15;
}

.track-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(178px, 72%);
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 2px 0 12px;
}

.track-card {
    scroll-snap-align: start;
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.034);
}

.track-cover {
    position: relative;
    min-height: 112px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(236, 0, 140, 0.88), rgba(139, 197, 63, 0.74)),
        var(--surface-2);
}

.track-cover .ti {
    font-size: 40px;
}

.track-cover span {
    position: absolute;
    top: 10px;
    left: 10px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 600;
}

.track-info h3 {
    min-height: 44px;
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 600;
}

.track-info p {
    margin-bottom: 6px;
    font-size: 14px;
}

.track-info strong {
    color: var(--yellow);
    font-size: 20px;
    font-weight: 700;
}

.track-actions {
    display: flex;
    gap: 8px;
}

.round-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    font-size: 20px;
}

.round-button:first-child {
    background: var(--yellow);
    color: #0F1117;
}

.round-button.is-added {
    background: var(--green);
    color: #0F1117;
}

.voice-feature,
.app-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(236, 0, 140, 0.17), rgba(139, 197, 63, 0.11)),
        rgba(255, 255, 255, 0.034);
}

.voice-feature > div > .ti {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 8px;
    background: rgba(236, 0, 140, 0.16);
    color: var(--pink);
    font-size: 25px;
}

.voice-feature h2,
.app-card h2 {
    margin-bottom: 0;
    font-size: clamp(25px, 7vw, 38px);
    font-weight: 700;
}

.orchestra-list {
    display: grid;
    gap: 10px;
}

.orchestra-card {
    display: grid;
    grid-template-columns: 58px 1fr 46px;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.034);
}

.orchestra-photo {
    width: 58px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--surface-2), rgba(236, 0, 140, 0.5));
    color: var(--text);
    font-size: 25px;
}

.orchestra-card h3 {
    margin-bottom: 3px;
    font-size: 17px;
    font-weight: 600;
}

.orchestra-card p {
    margin-bottom: 0;
    font-size: 13px;
}

.whatsapp-button {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(139, 197, 63, 0.16);
    color: var(--green);
    font-size: 24px;
}

.marketplace-home {
    padding-top: 22px;
    padding-bottom: 22px;
    background: rgba(255, 255, 255, 0.014);
}

.marketplace-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.marketplace-chip {
    flex: 0 0 auto;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.036);
    color: var(--text);
    font-weight: 600;
}

.marketplace-chip .ti {
    color: var(--yellow);
    font-size: 21px;
}

.app-card {
    background:
        linear-gradient(135deg, rgba(255, 212, 0, 0.14), rgba(236, 0, 140, 0.12)),
        rgba(255, 255, 255, 0.034);
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.benefit-grid span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.034);
    color: var(--muted);
    font-weight: 600;
}

.benefit-grid .ti {
    color: var(--green);
    font-size: 20px;
}

.catalog-hero {
    padding: 34px 0 20px;
}

.catalog-hero-shell {
    display: grid;
    gap: 18px;
}

.catalog-hero h1 {
    max-width: 900px;
    margin-bottom: 14px;
    font-size: clamp(2.35rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 0.94;
    letter-spacing: -0.035em;
}

.catalog-hero p:not(.eyebrow) {
    max-width: 520px;
    margin-bottom: 0;
    color: #FFFFFF;
    opacity: 0.75;
}

.catalog-search {
    max-width: 760px;
}

.catalog-section {
    padding: 20px 0 44px;
}

.catalog-dynamic-sections {
    display: grid;
    gap: 22px;
    margin-bottom: 34px;
}

.catalog-dynamic-sections[hidden] {
    display: none;
}

.catalog-feature-section {
    display: grid;
    gap: 14px;
}

.catalog-feature-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.catalog-feature-head h2 {
    margin: 0 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(1.28rem, 3vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.035em;
}

.catalog-feature-head h2 .ti {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(139,197,63,.12);
    color: var(--green);
    font-size: 19px;
}

.catalog-feature-head p {
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 13px;
}

.catalog-feature-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 240px);
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 2px 2px 10px;
    scroll-padding-inline: max(16px, calc((100vw - var(--shell)) / 2));
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
}

.catalog-feature-rail::-webkit-scrollbar {
    display: none;
}

.catalog-feature-rail > .catalog-track-card {
    scroll-snap-align: start;
}

.catalog-filter-panel {
    margin-bottom: 30px;
}

.catalog-filter-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.catalog-filter,
.catalog-sort {
    flex: 0 0 auto;
    min-width: 164px;
    min-height: 54px;
    display: grid;
    align-content: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.034);
}

.catalog-filter span,
.catalog-sort {
    color: rgba(255,255,255,.75);
    font-size: 12px;
    font-weight: 500;
}

.catalog-filter span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.catalog-filter .ti,
.catalog-sort .ti {
    color: var(--green);
    font-size: 17px;
}

.catalog-filter select {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
}

.catalog-filter.is-enhanced select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.catalog-filter-trigger {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.catalog-filter-trigger > span {
    min-width: 0;
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-filter-trigger .ti {
    flex: 0 0 auto;
    color: rgba(255,255,255,.7);
    font-size: 15px;
    transition: transform 180ms cubic-bezier(.16,1,.3,1);
}

.catalog-filter-trigger[aria-expanded="true"] .ti {
    transform: rotate(180deg);
}

.catalog-filter:focus-within {
    border-color: rgba(139,197,63,.56);
    box-shadow: 0 0 0 3px rgba(139,197,63,.12);
}

.catalog-filter-menu {
    position: fixed;
    z-index: 50;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 6px;
    background: #171A22;
    box-shadow: 0 8px 8px rgba(0,0,0,.28);
}

.catalog-filter-menu[hidden] {
    display: none;
}

.catalog-filter-option {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    border: 0;
    border-radius: 8px;
    padding: 8px 10px;
    background: transparent;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}

.catalog-filter-option:hover,
.catalog-filter-option:focus-visible {
    outline: 0;
    background: rgba(255,255,255,.07);
    color: #fff;
}

.catalog-filter-option[aria-selected="true"] {
    background: rgba(139,197,63,.14);
    color: var(--green);
}

.catalog-sort {
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    color: var(--text);
}

.catalog-sort.is-active {
    background: rgba(139, 197, 63, 0.105);
}

.catalog-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.catalog-toolbar h2 {
    margin-bottom: 0;
    font-size: clamp(1.55rem, 4vw, 2.25rem);
    line-height: 1;
    letter-spacing: -0.035em;
}

.catalog-toolbar p:not(.eyebrow) {
    max-width: 520px;
    margin: 8px 0 0;
    color: rgba(255,255,255,.58);
    font-size: 13px;
}

.catalog-toolbar > span {
    flex: 0 0 auto;
    color: rgba(255,255,255,.75);
    font-size: 14px;
    font-weight: 500;
}

.catalog-toolbar b {
    font-weight: 600;
}

.tracks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.catalog-track-card {
    display: grid;
    gap: 11px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.032);
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.catalog-track-card:hover {
    transform: translateY(-3px);
    border-color: rgba(139, 197, 63, 0.22);
    background: rgba(255, 255, 255, 0.052);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.22);
}

.catalog-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    isolation: isolate;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,.34), transparent 22%),
        linear-gradient(135deg, rgba(236, 0, 140, 0.82), rgba(139, 197, 63, 0.72)),
        var(--surface-2);
}

.catalog-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.42)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 12px);
    opacity: 0.7;
}

.catalog-cover::after {
    content: "";
    position: absolute;
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15,17,23,.12), rgba(15,17,23,.54));
}

.catalog-cover.has-image::after {
    display: none;
}

.catalog-cover.has-image::before {
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(5, 7, 11, 0) 44%,
        rgba(5, 7, 11, 0.28) 64%,
        rgba(5, 7, 11, 0.9) 100%
    );
    opacity: 1;
}

.catalog-cover-image,
.detail-cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catalog-cover-image {
    z-index: 0;
}

.cover-variant-2 {
    background:
        radial-gradient(circle at 72% 20%, rgba(255,212,0,.32), transparent 24%),
        linear-gradient(135deg, rgba(139, 197, 63, 0.82), rgba(31, 36, 48, 0.9)),
        var(--surface-2);
}

.cover-variant-3 {
    background:
        radial-gradient(circle at 28% 78%, rgba(139,197,63,.28), transparent 26%),
        linear-gradient(135deg, rgba(236, 0, 140, 0.76), rgba(255, 212, 0, 0.66)),
        var(--surface-2);
}

.cover-variant-4 {
    background:
        radial-gradient(circle at 68% 70%, rgba(236,0,140,.34), transparent 24%),
        linear-gradient(135deg, rgba(31,36,48,.92), rgba(139,197,63,.68)),
        var(--surface-2);
}

.cover-variant-5 {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), transparent 22%),
        linear-gradient(135deg, rgba(255,212,0,.72), rgba(236,0,140,.72)),
        var(--surface-2);
}

.cover-variant-6 {
    background:
        radial-gradient(circle at 72% 25%, rgba(139,197,63,.34), transparent 25%),
        linear-gradient(135deg, rgba(15,17,23,.88), rgba(236,0,140,.76)),
        var(--surface-2);
}

.mock-cover-art {
    position: relative;
    z-index: 1;
    width: 46%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(15,17,23,.46);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.2);
}

.mock-cover-art > .ti {
    color: rgba(255,255,255,.86);
    font-size: 30px;
}

.cover-bars {
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 18%;
    display: flex;
    align-items: end;
    gap: 4px;
    height: 22px;
}

.track-badge {
    position: absolute;
    z-index: 4;
    top: 9px;
    left: 9px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0 9px;
    color: #0F1117;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.track-badge-stack {
    position: absolute;
    z-index: 4;
    top: 9px;
    left: 9px;
    right: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    pointer-events: none;
}

.track-badge-stack .track-badge {
    position: static;
}

.track-badge-new {
    background: var(--green);
}

.track-badge-premium {
    background: var(--yellow);
}

.track-badge-owned {
    gap: 4px;
    background: var(--green);
    color: #0F1117;
}

.track-badge-owned .ti {
    font-size: 13px;
}

.track-badge-bestseller {
    background: var(--pink);
    color: #FFFFFF;
}

.track-badge-trending {
    background: rgba(139,197,63,.96);
    color: #0F1117;
}

.track-badge-popular {
    background: rgba(255,255,255,.92);
    color: #0F1117;
}

.track-badge-classic {
    background: rgba(255,212,0,.96);
    color: #0F1117;
}

.cover-bars span {
    flex: 1;
    border-radius: 8px 8px 0 0;
    background: var(--green);
    opacity: 0.86;
}

.cover-bars span:nth-child(1) { height: 38%; }
.cover-bars span:nth-child(2) { height: 78%; background: var(--yellow); }
.cover-bars span:nth-child(3) { height: 56%; background: var(--pink); }
.cover-bars span:nth-child(4) { height: 92%; }

.cover-label {
    position: absolute;
    z-index: 2;
    left: 11px;
    right: 56px;
    bottom: 10px;
    display: grid;
    gap: 1px;
}

.cover-label span {
    color: rgba(255,255,255,.66);
    font-size: 10px;
    font-weight: 500;
}

.cover-label strong {
    color: rgba(255,255,255,.94);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.035em;
}

.play-float {
    position: absolute;
    right: 9px;
    bottom: 9px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--green);
    color: #0F1117;
    font-size: 20px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(15,17,23,.16);
    z-index: 5;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.play-float .ti {
    display: block;
    color: #0F1117;
    font-size: 20px;
    line-height: 1;
}

.play-float:disabled {
    cursor: not-allowed;
    opacity: .5;
    filter: grayscale(1);
}

.catalog-track-card:hover .play-float {
    transform: scale(1.07);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), 0 0 0 4px rgba(139,197,63,.18);
}

.catalog-track-card.is-previewing .play-float {
    background: var(--yellow);
    transform: scale(1.07);
}

.catalog-track-card.is-previewing {
    border-color: rgba(139, 197, 63, 0.32);
    background: rgba(139, 197, 63, 0.065);
}

.catalog-track-card.is-owned {
    border-color: rgba(139, 197, 63, 0.18);
    background:
        linear-gradient(180deg, rgba(139, 197, 63, 0.045), rgba(255,255,255,0.026)),
        rgba(255,255,255,0.026);
}

.catalog-track-body {
    display: grid;
    gap: 5px;
}

.track-genre,
.track-artist {
    margin-bottom: 0;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    font-weight: 400;
}

.track-artist {
    color: rgba(255,255,255,.9);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.catalog-track-body h3 {
    min-height: 42px;
    margin-bottom: 0;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

.track-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.track-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
    font-weight: 400;
}

.track-meta .ti {
    color: rgba(139, 197, 63, 0.56);
    font-size: 12px;
}

.track-owned-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0;
    color: rgba(139, 197, 63, 0.86);
    font-size: 10px;
    font-weight: 600;
}

.track-owned-date .ti {
    font-size: 13px;
}

.catalog-track-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
}

.catalog-track-footer strong {
    color: var(--yellow);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.catalog-cart-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 999px;
    padding: 0 12px;
    background: rgba(139, 197, 63, 0.16);
    color: var(--green);
    font-size: 12px;
    font-weight: 600;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.catalog-cart-button:hover,
.catalog-cart-button.is-added {
    background: var(--green);
    color: #0F1117;
    transform: translateY(-1px);
}

.catalog-owned-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.catalog-library-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    padding: 0 12px;
    background: var(--green);
    color: #0F1117;
    font-size: 12px;
    font-weight: 600;
}

.catalog-library-button:hover {
    color: #0F1117;
}

.catalog-rebuy-button {
    background: rgba(255, 255, 255, 0.052);
    color: rgba(255,255,255,.64);
}

.catalog-track-card[hidden] {
    display: none !important;
}

.catalog-load-more { display: grid; justify-items: center; gap: 8px; margin-top: 30px; }
.catalog-load-more[hidden] { display: none; }
.catalog-load-more .btn { min-width: 190px; min-height: 46px; border-color: rgba(139,197,63,.28); color: var(--green); }
.catalog-load-more .btn:hover { border-color: var(--green); background: rgba(139,197,63,.1); }
.catalog-load-more small { color: rgba(255,255,255,.45); font-size: 10px; }

.catalog-empty-state {
    min-height: 220px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    margin-top: 18px;
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(255,255,255,.026);
    text-align: center;
}

.catalog-empty-state[hidden] {
    display: none;
}

.catalog-empty-state .ti {
    color: var(--green);
    font-size: 32px;
}

.catalog-empty-state strong {
    font-size: 18px;
    font-weight: 600;
}

.catalog-empty-state p {
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 13px;
}

.detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-top: 18px;
    color: rgba(255,255,255,.5);
    font-size: 12px;
    white-space: nowrap;
}

.detail-breadcrumb a:hover {
    color: var(--green);
}

.detail-breadcrumb .ti {
    flex: 0 0 auto;
    font-size: 13px;
}

.detail-breadcrumb span {
    color: rgba(255,255,255,.78);
}

.track-detail-hero {
    padding: 22px 0 34px;
}

.track-detail-grid {
    display: grid;
    gap: 26px;
}

.detail-cover-wrap {
    width: min(100%, 430px);
    margin-inline: auto;
}

.detail-cover {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(circle at 20% 18%, rgba(255,255,255,.3), transparent 22%),
        linear-gradient(135deg, rgba(236,0,140,.86), rgba(139,197,63,.68));
    box-shadow: 0 32px 90px rgba(0,0,0,.32);
}

.detail-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 52%, rgba(0,0,0,.48)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 16px);
}

.detail-cover.has-image::before {
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(5, 7, 11, 0) 44%,
        rgba(5, 7, 11, 0.28) 64%,
        rgba(5, 7, 11, 0.9) 100%
    );
}

.detail-cover-image {
    z-index: 0;
}

.detail-disc {
    position: relative;
    z-index: 1;
    width: 62%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15,17,23,.3) 0 22%, rgba(15,17,23,.76) 23% 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 22px 60px rgba(0,0,0,.26);
}

.detail-disc > .ti {
    color: rgba(255,255,255,.9);
    font-size: 42px;
}

.detail-disc span {
    position: absolute;
    left: 16%;
    right: 16%;
    height: 1px;
    border-radius: 99px;
    background: rgba(255,255,255,.16);
}

.detail-disc span:nth-of-type(1) { top: 25%; }
.detail-disc span:nth-of-type(2) { top: 38%; }
.detail-disc span:nth-of-type(3) { bottom: 38%; }
.detail-disc span:nth-of-type(4) { bottom: 25%; }

.detail-cover-label {
    position: absolute;
    z-index: 2;
    left: 18px;
    bottom: 18px;
    display: grid;
    gap: 2px;
}

.detail-cover-label span {
    color: rgba(255,255,255,.62);
    font-size: 11px;
    font-weight: 500;
}

.detail-cover-label strong {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.detail-cover-play {
    position: absolute;
    z-index: 5;
    right: 18px;
    bottom: 18px;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--green);
    color: #0F1117;
    font-size: 27px;
    box-shadow: 0 18px 42px rgba(0,0,0,.34);
    transition: transform 180ms ease, background 180ms ease;
}

.catalog-cover-detail-link {
    position: absolute;
    z-index: 3;
    inset: 0;
}

.detail-cover-play:hover {
    transform: scale(1.06);
}

.detail-cover-play.is-playing {
    background: var(--yellow);
}

.detail-cover-play:disabled,
.preview-player.is-unavailable .preview-main-button {
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.36);
    cursor: not-allowed;
    box-shadow: none;
}

.detail-cover-play:disabled:hover {
    transform: none;
}

.detail-intro {
    display: grid;
    align-content: center;
}

.detail-genre {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: var(--green);
    font-size: 13px;
    font-weight: 500;
}

.detail-artist {
    margin-bottom: 8px;
    color: rgba(255,255,255,.88);
    font-size: 17px;
    font-weight: 600;
}

.detail-intro h1 {
    max-width: 720px;
    margin-bottom: 16px;
    font-size: clamp(2.4rem, 7vw, 4.7rem);
    font-weight: 600;
    line-height: .94;
    letter-spacing: -.055em;
}

.track-owned-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 680px;
    margin: 0 0 18px;
    border: 1px solid rgba(139, 197, 63, 0.22);
    border-radius: 12px;
    padding: 12px;
    background: rgba(139, 197, 63, 0.075);
}

.track-owned-notice > .ti {
    flex: 0 0 auto;
    color: var(--green);
    font-size: 24px;
}

.track-owned-notice div {
    min-width: 0;
    flex: 1;
}

.track-owned-notice strong,
.track-owned-notice span {
    display: block;
}

.track-owned-notice strong {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
}

.track-owned-notice span {
    margin-top: 2px;
    color: rgba(255,255,255,.56);
    font-size: 11px;
}

.track-owned-notice a {
    flex: 0 0 auto;
    color: var(--green);
    font-size: 12px;
    font-weight: 600;
}

.detail-description {
    max-width: 580px;
    margin-bottom: 22px;
    font-size: 16px;
}

.preview-player {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    max-width: 680px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

.preview-player.is-playing {
    border-color: rgba(139,197,63,.25);
    background: rgba(139,197,63,.055);
}

.preview-player.is-unavailable {
    border-style: dashed;
}

.preview-player.is-unavailable .preview-player-body p {
    margin: 0;
    color: rgba(255,255,255,.48);
    font-size: 12px;
}

.track-not-found {
    min-height: 62vh;
    display: grid;
    place-items: center;
    padding: 72px 0;
}

.track-not-found-card {
    max-width: 620px;
    text-align: center;
}

.track-not-found-card > span {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border: 1px solid rgba(139,197,63,.24);
    border-radius: 50%;
    background: rgba(139,197,63,.08);
    color: var(--green);
    font-size: 30px;
}

.track-not-found-card h1 {
    margin-bottom: 12px;
    font-size: clamp(2.2rem, 7vw, 4.4rem);
    font-weight: 600;
    letter-spacing: -.05em;
}

.track-not-found-card > p:not(.eyebrow) {
    max-width: 480px;
    margin: 0 auto 24px;
}

.preview-main-button {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--green);
    color: #0F1117;
    font-size: 23px;
}

.preview-player-body {
    min-width: 0;
}

.preview-player-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.preview-player-label span {
    color: var(--green);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.preview-player-label strong {
    overflow: hidden;
    color: rgba(255,255,255,.9);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-progress {
    width: 100%;
    height: 4px;
    display: block;
    margin: 0;
    accent-color: var(--green);
    cursor: pointer;
}

.preview-times {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: rgba(255,255,255,.46);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.technical-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.technical-chips span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 0 11px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.58);
    font-size: 11px;
    font-weight: 500;
}

.technical-chips .ti {
    color: rgba(139,197,63,.72);
    font-size: 15px;
}

.detail-content-section {
    padding: 20px 0 44px;
}

.detail-content-grid,
.detail-main-column {
    display: grid;
    gap: 16px;
}

.detail-panel,
.purchase-card {
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 14px;
    background: rgba(255,255,255,.032);
}

.detail-panel {
    padding: 18px;
}

.detail-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.detail-section-heading > .ti {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(139,197,63,.11);
    color: var(--green);
    font-size: 22px;
}

.detail-section-heading.plain {
    margin-bottom: 14px;
}

.detail-section-heading .eyebrow,
.detail-section-heading h2 {
    margin-bottom: 0;
}

.detail-section-heading h2,
.app-compatibility-card h2,
.faq-section h2 {
    font-size: clamp(1.45rem, 4vw, 2rem);
    letter-spacing: -.035em;
}

.included-list {
    display: grid;
    gap: 10px;
}

.included-list span {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.76);
    font-size: 14px;
    font-weight: 500;
}

.included-list .ti {
    color: var(--green);
    font-size: 20px;
}

.app-compatibility-card {
    display: grid;
    gap: 14px;
    background:
        linear-gradient(135deg, rgba(139,197,63,.075), rgba(236,0,140,.065)),
        rgba(255,255,255,.032);
}

.app-compatibility-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(139,197,63,.12);
    color: var(--green);
    font-size: 26px;
}

.app-compatibility-card h2 {
    margin-bottom: 9px;
}

.app-compatibility-card p:not(.eyebrow) {
    margin-bottom: 0;
}

.review-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 12px;
    color: var(--yellow);
    font-size: 18px;
}

.review-card blockquote {
    margin: 0 0 8px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.review-card p {
    margin-bottom: 0;
    font-size: 12px;
}

.faq-section {
    padding-top: 16px;
}

.faq-list {
    display: grid;
    gap: 8px;
}

.faq-list details {
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.faq-list summary {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: rgba(255,255,255,.88);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list details[open] summary .ti {
    transform: rotate(180deg);
}

.faq-list summary .ti {
    transition: transform 180ms ease;
}

.faq-list details p {
    max-width: 680px;
    padding-bottom: 16px;
    margin-bottom: 0;
    font-size: 13px;
}

.purchase-card {
    order: -1;
    align-self: start;
    display: grid;
    gap: 10px;
    padding: 18px;
    background: rgba(255,255,255,.045);
    box-shadow: 0 28px 80px rgba(0,0,0,.2);
}

.purchase-label {
    margin-bottom: 0;
    color: rgba(255,255,255,.55);
    font-size: 12px;
}

.purchase-price {
    color: #FFFFFF;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
}

.purchase-card > p:not(.purchase-label) {
    margin-bottom: 8px;
    font-size: 13px;
}

.purchase-trust {
    display: grid;
    gap: 8px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.purchase-trust span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.55);
    font-size: 11px;
}

.purchase-trust .ti {
    color: var(--green);
    font-size: 16px;
}

.related-section {
    padding: 32px 0 54px;
}

.related-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-controls {
    display: none;
    gap: 7px;
}

.slider-controls button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.82);
    font-size: 19px;
    transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
}

.slider-controls button:hover:not(:disabled) {
    background: var(--green);
    color: #0F1117;
}

.slider-controls button:disabled {
    cursor: default;
    opacity: .28;
}

.related-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(168px, 66%);
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.related-carousel::-webkit-scrollbar {
    display: none;
}

.related-track-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.032);
}

.related-cover {
    position: relative;
    aspect-ratio: 5 / 4;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 11px;
    border-radius: 10px;
    color: rgba(255,255,255,.75);
    font-size: 30px;
}

.related-cover button {
    position: absolute;
    right: 9px;
    bottom: 9px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--green);
    color: #0F1117;
    font-size: 17px;
}

.related-track-card p {
    margin-bottom: 4px;
    color: rgba(255,255,255,.5);
    font-size: 11px;
}

.related-track-card h3 {
    min-height: 38px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.25;
}

.related-track-card > strong {
    color: var(--yellow);
    font-size: 15px;
    font-weight: 700;
}

.cart-page-hero {
    padding: 34px 0 24px;
}

.cart-page-hero h1 {
    margin-bottom: 13px;
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    font-weight: 600;
    line-height: .94;
    letter-spacing: -.055em;
}

.cart-page-hero p:not(.eyebrow) {
    margin-bottom: 0;
    color: #FFFFFF;
    opacity: .75;
}

.ecosystem-cart-section {
    padding: 10px 0 54px;
}

.ecosystem-cart-layout,
.ecosystem-cart-main {
    display: grid;
    gap: 18px;
}

.cart-list-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.cart-list-heading h2 {
    margin-bottom: 0;
    font-size: clamp(1.4rem, 4vw, 2rem);
    letter-spacing: -.035em;
}

.cart-list-heading > span {
    flex: 0 0 auto;
    color: rgba(255,255,255,.5);
    font-size: 12px;
}

.cart-list-heading b {
    font-weight: 600;
}

.ecosystem-cart-list {
    display: grid;
    gap: 10px;
}

.ecosystem-cart-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 14px;
    background: rgba(255,255,255,.032);
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.ecosystem-cart-item:hover {
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.045);
}

.ecosystem-cart-item.is-removing {
    transform: translateX(12px);
    opacity: 0;
}

.cart-item-media {
    position: relative;
    width: 72px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 11px;
    color: rgba(255,255,255,.9);
    font-size: 28px;
}

.cart-single-license {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.54);
    font-size: 11px;
}

.cart-single-license .ti {
    color: var(--green);
}

.cart-media-track {
    background: linear-gradient(135deg, rgba(236,0,140,.84), rgba(139,197,63,.72));
}

.cart-media-product {
    background: linear-gradient(135deg, rgba(255,212,0,.8), rgba(236,0,140,.68));
    color: #0F1117;
}

.cart-media-credit {
    background: linear-gradient(135deg, rgba(31,36,48,.96), rgba(139,197,63,.68));
}

.cart-media-subscription {
    background: linear-gradient(135deg, rgba(236,0,140,.74), rgba(31,36,48,.96));
}

.cart-media-service {
    background: linear-gradient(135deg, rgba(139,197,63,.72), rgba(255,212,0,.66));
    color: #0F1117;
}

.cart-media-bars {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    height: 15px;
    display: flex;
    align-items: end;
    gap: 3px;
}

.cart-media-bars i {
    flex: 1;
    border-radius: 5px 5px 0 0;
    background: rgba(255,255,255,.72);
}

.cart-media-bars i:nth-child(1) { height: 40%; }
.cart-media-bars i:nth-child(2) { height: 85%; }
.cart-media-bars i:nth-child(3) { height: 58%; }
.cart-media-bars i:nth-child(4) { height: 100%; }

.cart-item-info {
    min-width: 0;
}

.cart-type-badge {
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 600;
}

.cart-type-track {
    background: rgba(139,197,63,.12);
    color: var(--green);
}

.cart-type-product {
    background: rgba(255,212,0,.12);
    color: var(--yellow);
}

.cart-type-credit {
    background: rgba(236,0,140,.12);
    color: #ff5dbb;
}

.cart-type-subscription,
.cart-type-service {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.76);
}

.cart-item-info h3 {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.02em;
}

.cart-unit-price {
    margin-bottom: 0;
    color: rgba(255,255,255,.46);
    font-size: 11px;
}

.cart-item-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding-top: 2px;
}

.quantity-control {
    height: 36px;
    display: inline-grid;
    grid-template-columns: 34px 34px 34px;
    align-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
}

.quantity-control button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.72);
    font-size: 16px;
}

.quantity-control span {
    text-align: center;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cart-line-price {
    justify-self: end;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cart-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    padding: 6px;
    background: transparent;
    color: rgba(255,255,255,.42);
    font-size: 11px;
}

.cart-remove:hover {
    color: #ff6b8f;
}

.ecosystem-cart-summary {
    align-self: start;
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 14px;
    background: rgba(255,255,255,.042);
    box-shadow: 0 28px 80px rgba(0,0,0,.2);
}

.ecosystem-cart-summary[hidden] {
    display: none;
}

.ecosystem-cart-summary h2 {
    margin-bottom: 5px;
    font-size: 22px;
    letter-spacing: -.035em;
}

.cart-summary-lines {
    display: grid;
    gap: 12px;
    padding: 10px 0 4px;
}

.cart-summary-lines > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: rgba(255,255,255,.55);
    font-size: 13px;
}

.cart-summary-lines strong {
    color: rgba(255,255,255,.86);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cart-summary-lines .cart-summary-total {
    margin-top: 3px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.07);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
}

.cart-summary-total strong {
    color: var(--yellow);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.04em;
}

.cart-trust-block {
    display: grid;
    gap: 9px;
    margin-top: 4px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.cart-trust-block span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.52);
    font-size: 11px;
}

.cart-trust-block .ti {
    color: var(--green);
    font-size: 17px;
}

.ecosystem-cart-empty {
    min-height: 360px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 32px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    text-align: center;
}

.ecosystem-cart-empty[hidden] {
    display: none;
}

.empty-cart-illustration {
    position: relative;
    width: 94px;
    height: 94px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    border-radius: 50%;
    background: rgba(139,197,63,.09);
    color: var(--green);
    font-size: 44px;
}

.empty-cart-illustration span {
    position: absolute;
    right: -2px;
    bottom: 3px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pink);
    color: #FFFFFF;
    font-size: 17px;
}

.ecosystem-cart-empty h2 {
    margin-bottom: 0;
    font-size: 24px;
}

.ecosystem-cart-empty p {
    max-width: 470px;
    margin-bottom: 6px;
}

.checkout-page-hero {
    padding: 34px 0 18px;
}

.checkout-secure-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: var(--green);
    font-size: 12px;
    font-weight: 600;
}

.checkout-page-hero h1 {
    margin-bottom: 13px;
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    font-weight: 600;
    line-height: .94;
    letter-spacing: -.055em;
}

.checkout-page-hero p:last-child {
    margin-bottom: 0;
    color: #FFFFFF;
    opacity: .75;
}

.checkout-form {
    padding: 12px 0 58px;
}

.checkout-layout,
.checkout-fields-column {
    display: grid;
    gap: 18px;
}

.checkout-step {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 14px;
    background: rgba(255,255,255,.026);
}

.checkout-step-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.checkout-step-heading > span {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(139,197,63,.12);
    color: var(--green);
    font-size: 12px;
    font-weight: 600;
}

.checkout-step-heading h2 {
    margin-bottom: 5px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.03em;
}

.checkout-step-heading p {
    margin-bottom: 0;
    font-size: 12px;
}

.checkout-field-grid {
    display: grid;
    gap: 13px;
}

.checkout-field {
    display: grid;
    gap: 7px;
}

.checkout-field > span {
    color: rgba(255,255,255,.68);
    font-size: 12px;
    font-weight: 500;
}

.checkout-field > div {
    min-height: 52px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    background: rgba(15,17,23,.58);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.checkout-field > div:focus-within {
    border-color: rgba(139,197,63,.54);
    background: rgba(15,17,23,.84);
    box-shadow: 0 0 0 3px rgba(139,197,63,.08);
}

.checkout-field .ti {
    color: rgba(255,255,255,.42);
    font-size: 19px;
}

.checkout-field input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #FFFFFF;
    font-size: 14px;
}

.checkout-field input::placeholder {
    color: rgba(255,255,255,.28);
}

.checkout-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.checkout-choice,
.payment-option {
    position: relative;
    cursor: pointer;
}

.checkout-choice input,
.payment-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-choice > span {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.66);
}

.checkout-choice b,
.payment-option b {
    font-size: 13px;
    font-weight: 600;
}

.checkout-choice input:checked + span {
    border-color: rgba(139,197,63,.4);
    background: rgba(139,197,63,.09);
    color: var(--green);
}

.company-fields {
    margin-top: 14px;
}

.company-fields[hidden] {
    display: none;
}

.delivery-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 11px;
    background: rgba(139,197,63,.075);
}

.delivery-status > .ti {
    flex: 0 0 auto;
    color: var(--green);
    font-size: 23px;
}

.delivery-status div {
    display: grid;
    gap: 3px;
}

.delivery-status strong {
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 600;
}

.delivery-status span {
    color: rgba(255,255,255,.52);
    font-size: 11px;
    line-height: 1.5;
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.payment-option > span {
    min-height: 64px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.7);
}

.payment-option > span > .ti:first-child {
    color: rgba(255,255,255,.58);
    font-size: 22px;
}

.payment-option .check {
    color: transparent;
    font-size: 18px;
}

.payment-option input:checked + span {
    border-color: rgba(139,197,63,.42);
    background: rgba(139,197,63,.085);
    color: #FFFFFF;
}

.payment-option input:checked + span > .ti:first-child,
.payment-option input:checked + span .check {
    color: var(--green);
}

.checkout-summary {
    align-self: start;
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    box-shadow: 0 28px 80px rgba(0,0,0,.2);
}

.checkout-summary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.checkout-summary-heading h2 {
    margin-bottom: 0;
    font-size: 21px;
    letter-spacing: -.035em;
}

.checkout-summary-heading span {
    color: rgba(255,255,255,.45);
    font-size: 11px;
}

.checkout-summary-products {
    display: grid;
    gap: 11px;
    padding: 13px 0;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.checkout-summary-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.checkout-summary-products.simplified .checkout-summary-item {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 30px;
}

.checkout-product-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(139,197,63,.09);
    color: var(--green);
    font-size: 18px;
}

.checkout-summary-item div {
    min-width: 0;
    display: grid;
}

.checkout-summary-item div strong {
    overflow: hidden;
    color: rgba(255,255,255,.84);
    font-size: 11.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-summary-item small {
    color: rgba(255,255,255,.4);
    font-size: 10px;
}

.checkout-summary-item > b {
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 600;
}

.checkout-totals {
    display: grid;
    gap: 10px;
}

.checkout-totals > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: rgba(255,255,255,.5);
    font-size: 12px;
}

.checkout-totals strong {
    color: rgba(255,255,255,.84);
    font-weight: 600;
}

.checkout-totals .checkout-total {
    margin-top: 3px;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.06);
    color: #FFFFFF;
    font-size: 15px;
}

.checkout-total strong {
    color: var(--yellow);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.04em;
}

.checkout-submit {
    min-height: 54px;
    margin-top: 2px;
}

.checkout-form-status {
    min-height: 20px;
    margin: 0;
    color: #ff8ebd;
    font-size: 11px;
    line-height: 1.5;
}

.checkout-empty-cart {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 20px 12px;
    color: rgba(255,255,255,.5);
    text-align: center;
}

.checkout-empty-cart[hidden] {
    display: none;
}

.checkout-empty-cart .ti {
    color: var(--green);
    font-size: 28px;
}

.checkout-empty-cart p {
    margin: 0;
    font-size: 12px;
}

.checkout-empty-cart a {
    color: var(--green);
    font-size: 11px;
    font-weight: 600;
}

.checkout-account-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 0;
    color: rgba(255,255,255,.5);
    font-size: 10.5px;
    line-height: 1.45;
}

.checkout-account-note .ti {
    flex: 0 0 auto;
    color: var(--green);
    font-size: 15px;
}

.checkout-trust {
    display: grid;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.checkout-trust span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.48);
    font-size: 10.5px;
}

.checkout-trust .ti {
    color: var(--green);
    font-size: 16px;
}

.success-page {
    padding: 42px 0 70px;
}

.success-shell {
    max-width: 760px;
    display: grid;
    justify-items: center;
    text-align: center;
}

.success-mark {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--green);
    color: #0F1117;
    font-size: 40px;
    box-shadow: 0 18px 54px rgba(139,197,63,.18);
}

.success-mark.is-pending {
    background: var(--yellow);
}

.success-mark.is-unavailable {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.68);
    box-shadow: none;
}

.success-shell h1 {
    max-width: 650px;
    margin-bottom: 16px;
    font-size: clamp(2.5rem, 7vw, 4.3rem);
    font-weight: 600;
    line-height: .94;
    letter-spacing: -.055em;
}

.success-shell > p:not(.eyebrow) {
    max-width: 600px;
    margin-bottom: 26px;
}

.success-order-meta {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-bottom: 16px;
    border-radius: 13px;
    background: rgba(255,255,255,.055);
}

.success-order-meta div {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 14px;
    background: #14171e;
    text-align: left;
}

.success-order-meta span {
    color: rgba(255,255,255,.4);
    font-size: 10px;
}

.success-order-meta strong {
    overflow-wrap: anywhere;
    color: rgba(255,255,255,.86);
    font-size: 12px;
    font-weight: 600;
}

.success-products {
    width: 100%;
    display: grid;
    gap: 9px;
    padding: 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    text-align: left;
}

.success-products h2 {
    margin-bottom: 5px;
    font-size: 18px;
}

.success-products article {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.success-products article > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(139,197,63,.09);
    color: var(--green);
    font-size: 19px;
}

.success-products article div {
    display: grid;
}

.success-products article strong {
    color: rgba(255,255,255,.88);
    font-size: 13px;
    font-weight: 600;
}

.success-products article small {
    color: rgba(255,255,255,.4);
    font-size: 10px;
}

.success-products article > b {
    color: rgba(255,255,255,.82);
    font-size: 12px;
    font-weight: 600;
}

.success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

.mock-payment-panel {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 18px;
    margin-bottom: 18px;
    border: 1px dashed rgba(139,197,63,.3);
    border-radius: 14px;
    background: rgba(139,197,63,.055);
}

.mock-payment-panel > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--green);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mock-payment-panel > strong {
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 500;
}

.mock-payment-panel > small {
    min-height: 1.2em;
    color: #ff78b8;
    font-size: 11px;
}

.mock-payment-panel .is-loading .ti {
    animation: mock-payment-spin .7s linear infinite;
}

@keyframes mock-payment-spin {
    to { transform: rotate(360deg); }
}

.compact-checkout-hero {
    padding: 28px 0 10px;
}

.compact-checkout-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.7rem);
}

.simplified-checkout {
    padding-top: 8px;
}

.simplified-checkout .checkout-fields-column {
    gap: 12px;
}

.simplified-checkout .checkout-step {
    padding: 16px;
    background: rgba(255,255,255,.022);
}

.simplified-checkout .checkout-step-heading {
    margin-bottom: 16px;
}

.checkout-buyer-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.checkout-delivery-card {
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.checkout-delivery-card[hidden] { display: none; }

.checkout-delivery-card > header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

.checkout-delivery-card > header > span {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(139,197,63,.1);
    color: var(--green);
    font-size: 19px;
}

.checkout-delivery-card h2 { margin: 0 0 2px; font-size: 16px; font-weight: 600; }
.checkout-delivery-card header p { margin: 0; color: rgba(255,255,255,.48); font-size: 10px; }
.checkout-delivery-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding: 16px; }
.checkout-delivery-grid .full { grid-column: 1 / -1; }
.checkout-delivery-grid .checkout-field > select { width: 100%; min-height: 46px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 0 12px; background: #10131a; color: rgba(255,255,255,.88); }
.checkout-delivery-grid .checkout-field > select:disabled { opacity: .48; }
.delivery-quote { display: flex; align-items: center; gap: 8px; margin: 0 16px 16px; padding: 11px 12px; border-radius: 9px; background: rgba(255,255,255,.035); color: rgba(255,255,255,.55); font-size: 10px; }
.delivery-quote .ti { color: var(--green); font-size: 17px; }
.delivery-quote.is-ready { background: rgba(139,197,63,.075); color: rgba(255,255,255,.82); }
.checkout-totals > div:not(.checkout-total) { display: flex; justify-content: space-between; gap: 12px; padding-block: 5px; color: rgba(255,255,255,.58); font-size: 11px; }
.checkout-totals > div:not(.checkout-total) strong { color: rgba(255,255,255,.82); font-weight: 600; }

.delivery-zone-form { grid-template-columns: repeat(4, minmax(0,1fr)); align-items: end; }
.delivery-zone-form .admin-check { align-self: center; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.delivery-zone-form .admin-check input { width: auto; }
.delivery-import-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.delivery-import-panel > div { min-width: 180px; }
.delivery-import-panel p { margin: 3px 0 0; color: rgba(255,255,255,.48); font-size: 10px; }
.delivery-import-panel form { display: flex; align-items: center; gap: 8px; }
.delivery-zone-table article { grid-template-columns: minmax(180px,1.3fr) minmax(90px,.5fr) minmax(150px,.8fr) 80px minmax(220px,1fr); }
.delivery-zone-table .is-active { color: var(--green); }

@media (max-width: 760px) {
    .checkout-delivery-grid { grid-template-columns: 1fr; }
    .checkout-delivery-grid .full { grid-column: auto; }
    .delivery-zone-form { grid-template-columns: 1fr; }
    .delivery-import-panel, .delivery-import-panel form { align-items: stretch; flex-direction: column; }
}

/* Marketplace delivery context */
.header-delivery-context { display:flex; align-items:center; gap:7px; border:0; padding:6px 8px; background:transparent; color:rgba(255,255,255,.82); text-align:left; cursor:pointer; }
.header-delivery-context > .ti { color:var(--green); font-size:18px; }
.header-delivery-context span { display:grid; gap:1px; }
.header-delivery-context small { color:rgba(255,255,255,.48); font-size:10px; }
.header-delivery-context strong { max-width:130px; overflow:hidden; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.delivery-context-banner { position:sticky; top:70px; z-index:40; background:#1b2029; border-bottom:1px solid rgba(139,197,63,.24); }
.delivery-context-banner[hidden] { display:none; }
.delivery-context-banner .shell { min-height:46px; display:flex; align-items:center; justify-content:center; gap:9px; color:rgba(255,255,255,.78); font-size:11px; }
.delivery-context-banner .ti { color:var(--green); font-size:17px; }
.delivery-context-banner button { border:0; padding:5px 8px; background:transparent; color:var(--green); font:inherit; font-weight:600; cursor:pointer; }
.delivery-context-dialog { width:min(560px,calc(100% - 28px)); max-height:min(720px,calc(100dvh - 28px)); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:0; background:#151820; color:#fff; }
.delivery-context-dialog::backdrop { background:rgba(5,7,11,.82); }
.delivery-context-panel { position:relative; display:grid; gap:16px; padding:26px; }
.delivery-dialog-close { position:absolute; top:12px; right:12px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.06); color:#fff; cursor:pointer; }
.delivery-context-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:rgba(139,197,63,.12); color:var(--green); font-size:23px; }
.delivery-context-panel h2 { margin:0 0 5px; font-size:22px; font-weight:600; letter-spacing:-.03em; }
.delivery-context-panel p { margin:0; color:rgba(255,255,255,.58); font-size:11px; line-height:1.55; }
.delivery-context-panel label { display:grid; gap:7px; color:rgba(255,255,255,.78); font-size:11px; font-weight:600; }
.delivery-context-panel input[type=search] { min-height:48px; border:1px solid rgba(255,255,255,.13); border-radius:9px; padding:0 13px; background:#0f1218; color:#fff; font:inherit; }
.delivery-search-results { max-height:270px; display:grid; gap:4px; overflow:auto; }
.delivery-search-results button { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid transparent; border-radius:8px; padding:10px 11px; background:rgba(255,255,255,.035); color:#fff; text-align:left; cursor:pointer; }
.delivery-search-results button:hover,.delivery-search-results button.is-selected { border-color:rgba(139,197,63,.42); background:rgba(139,197,63,.08); }
.delivery-search-results strong { font-size:12px; font-weight:600; }.delivery-search-results span { color:rgba(255,255,255,.48); font-size:10px; }
.marketplace-welcome { position:fixed; inset:70px 0 0; z-index:35; display:grid; place-items:center; padding:24px; background:#0f1117; }
.marketplace-welcome[hidden] { display:none; }
.marketplace-welcome > div { width:min(660px,100%); display:grid; justify-items:center; gap:16px; text-align:center; }
.marketplace-welcome > div > span { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:rgba(139,197,63,.12); color:var(--green); font-size:30px; }
.marketplace-welcome h1 { max-width:620px; margin:0; font-size:38px; font-weight:600; letter-spacing:-.04em; text-wrap:balance; }
.marketplace-welcome p { max-width:58ch; margin:0; color:rgba(255,255,255,.62); font-size:13px; line-height:1.6; }
.marketplace-welcome > div > p:first-of-type { color:var(--green); font-size:10px; font-weight:600; letter-spacing:.08em; }
.marketplace-welcome ul { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; margin:0; padding:0; list-style:none; color:rgba(255,255,255,.76); font-size:11px; }
.marketplace-welcome li { display:flex; align-items:center; gap:5px; }.marketplace-welcome li .ti { color:var(--green); }
.market-delivery-state { display:block; min-height:16px; margin-top:6px; color:rgba(255,255,255,.55); font-size:10px; }
.market-product-card.is-delivery-unavailable .market-delivery-state { color:#ff8bbc; }
.market-logistics-block { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.08); }
.market-logistics-block > div { display:grid; gap:4px; padding:12px; background:#171a22; }.market-logistics-block span { color:rgba(255,255,255,.45); font-size:10px; }.market-logistics-block strong { color:rgba(255,255,255,.86); font-size:11px; font-weight:600; }
.cart-seller-group { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:9px; background:rgba(139,197,63,.07); color:var(--green); }.cart-seller-group div { display:grid; gap:2px; }.cart-seller-group strong { color:rgba(255,255,255,.88); font-size:12px; font-weight:600; }.cart-seller-group span { color:rgba(255,255,255,.48); font-size:10px; }
.checkout-delivery-context { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-radius:9px; background:rgba(139,197,63,.07); }.checkout-delivery-context div { display:grid; gap:2px; }.checkout-delivery-context span { color:rgba(255,255,255,.45); font-size:10px; }.checkout-delivery-context strong { font-size:12px; font-weight:600; }.checkout-delivery-context a { color:var(--green); font-size:10px; font-weight:600; }
.checkout-seller-heading { display:flex; justify-content:space-between; gap:8px; margin:10px 0 2px; color:var(--green); font-size:10px; font-weight:600; }.checkout-seller-heading small{color:rgba(255,255,255,.48);font-size:10px;font-weight:400}
.seller-coverage-layout { display:grid; grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr); gap:18px; align-items:start; }.seller-zone-list { display:grid; gap:10px; }.seller-zone-list article { display:grid; grid-template-columns:minmax(0,1fr) 100px 60px auto; align-items:center; gap:10px; padding:12px; border-bottom:1px solid rgba(255,255,255,.07); }.seller-zone-list article > div { display:grid; gap:3px; }.seller-zone-list small { color:rgba(255,255,255,.45); font-size:10px; }.seller-zone-list article form { display:flex; gap:5px; }.seller-zone-list article button { border:0; border-radius:6px; padding:7px 8px; background:rgba(255,255,255,.06); color:#fff; font-size:10px; cursor:pointer; }
@media(max-width:900px){.header-delivery-context span{display:none}.seller-coverage-layout{grid-template-columns:1fr}.marketplace-welcome{inset:60px 0 64px}.marketplace-welcome h1{font-size:30px}.market-logistics-block{grid-template-columns:1fr}.delivery-context-banner{top:60px}.delivery-context-banner .shell{justify-content:flex-start;overflow:hidden}.delivery-context-banner span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seller-zone-list article{grid-template-columns:1fr auto}.seller-zone-list article form{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.delivery-context-dialog{scroll-behavior:auto}}

.checkout-buyer-card > header {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

.checkout-buyer-card > header > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkout-buyer-card > header > div > span {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(139,197,63,.1);
    color: var(--green);
    font-size: 19px;
}

.checkout-buyer-card h2 {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 600;
}

.checkout-buyer-card header p {
    margin: 0;
    color: rgba(255,255,255,.42);
    font-size: 10px;
}

.checkout-buyer-card header > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--green);
    font-size: 10px;
    font-weight: 600;
}

.checkout-buyer-data {
    display: grid;
    margin: 0;
    padding: 4px 16px;
}

.checkout-buyer-data div {
    min-width: 0;
    display: grid;
    grid-template-columns: 76px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    min-height: 46px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.checkout-buyer-data div:last-child { border-bottom: 0; }
.checkout-buyer-data dt { color: rgba(255,255,255,.38); font-size: 10px; }
.checkout-buyer-data dd { min-width: 0; overflow: hidden; margin: 0; color: rgba(255,255,255,.84); font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.checkout-missing-data {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,.065);
    background: rgba(139,197,63,.035);
}

.checkout-missing-data > div:first-child strong { color: rgba(255,255,255,.88); font-size: 11px; font-weight: 600; }
.checkout-missing-data > div:first-child p { margin: 2px 0 0; color: rgba(255,255,255,.42); font-size: 10px; }
.checkout-missing-data .checkout-field > span { font-size: 10px; }
.checkout-missing-data .checkout-field > div { min-height: 46px; border-radius: 8px; }

.checkout-single-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 10px 0 0;
    color: rgba(255,255,255,.38);
    font-size: 10px;
    text-align: center;
}

.checkout-single-trust .ti { color: var(--green); font-size: 13px; }

.compact-fields {
    gap: 10px;
}

.checkout-login-prompt {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(139,197,63,.055);
}

.checkout-login-prompt > div {
    display: grid;
    gap: 3px;
}

.checkout-login-prompt strong {
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 600;
}

.checkout-login-prompt p {
    margin-bottom: 0;
    color: rgba(255,255,255,.48);
    font-size: 11px;
}

.checkout-auth-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.checkout-auth-required { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 9px 0 0; color: rgba(255,255,255,.42); font-size: 10px; }
.checkout-auth-required .ti { color: var(--green); }

.checkout-login-prompt .btn {
    justify-self: start;
    min-height: 38px;
    padding-inline: 12px;
    font-size: 11px;
}

.checkout-identity-registered {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 15px;
    border-radius: 12px;
    background: rgba(139,197,63,.07);
}

.checkout-identity-registered > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(139,197,63,.12);
    color: var(--green);
    font-size: 21px;
}

.checkout-identity-registered div {
    display: grid;
    gap: 3px;
}

.checkout-identity-registered strong {
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 600;
}

.checkout-identity-registered p {
    margin-bottom: 0;
    font-size: 11px;
}

.checkout-identity-registered button {
    grid-column: 1 / -1;
    justify-self: start;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--green);
    font-size: 11px;
    font-weight: 600;
}

.digital-delivery-note {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border-radius: 11px;
    background: rgba(139,197,63,.055);
}

.digital-delivery-note > .ti {
    flex: 0 0 auto;
    color: var(--green);
    font-size: 23px;
}

.digital-delivery-note div {
    display: grid;
    gap: 2px;
}

.digital-delivery-note strong {
    color: rgba(255,255,255,.86);
    font-size: 12px;
    font-weight: 600;
}

.digital-delivery-note p {
    margin-bottom: 0;
    color: rgba(255,255,255,.45);
    font-size: 10.5px;
}

.simplified-summary .checkout-summary-products {
    padding-block: 10px;
}

.simplified-summary .checkout-summary-item {
    min-height: 28px;
}

.summary-total-only {
    padding-top: 2px;
}

.checkout-totals.summary-total-only .checkout-total {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.library-strategy-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 0;
    padding: 11px;
    border-radius: 9px;
    background: rgba(139,197,63,.065);
    color: rgba(255,255,255,.68);
    font-size: 10.5px;
    line-height: 1.5;
}

.library-strategy-message .ti {
    flex: 0 0 auto;
    color: var(--green);
    font-size: 17px;
}

.compact-trust {
    gap: 7px;
    padding-top: 12px;
}

.library-hero {
    padding: 34px 0 22px;
}

.library-hero h1 {
    max-width: 840px;
    margin-bottom: 14px;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 600;
    line-height: .94;
    letter-spacing: -.055em;
}

.library-hero p:not(.eyebrow) {
    max-width: 580px;
    margin-bottom: 0;
    color: #FFFFFF;
    opacity: .72;
}

.library-workspace {
    padding: 12px 0 64px;
}

.library-workspace > audio {
    display: none;
}

.library-layout,
.library-main {
    display: grid;
    gap: 18px;
}

.playlist-sidebar {
    min-width: 0;
}

.playlist-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.playlist-heading .eyebrow,
.playlist-heading h2 {
    margin-bottom: 0;
}

.playlist-heading h2 {
    font-size: 20px;
    letter-spacing: -.035em;
}

.playlist-heading button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.72);
    font-size: 18px;
}

.playlist-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 66%);
    gap: 9px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.playlist-list::-webkit-scrollbar {
    display: none;
}

.playlist-item {
    scroll-snap-align: start;
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 11px;
    padding: 9px;
    background: rgba(255,255,255,.032);
    color: rgba(255,255,255,.68);
    text-align: left;
}

.playlist-item.is-active {
    background: rgba(139,197,63,.085);
    color: #FFFFFF;
}

.playlist-item > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(139,197,63,.1);
    color: var(--green);
    font-size: 18px;
}

.playlist-item div {
    min-width: 0;
    display: grid;
}

.playlist-item strong {
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-item small {
    color: rgba(255,255,255,.38);
    font-size: 10px;
}

.playlist-item > .ti {
    font-size: 14px;
}

.library-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.library-summary-grid article {
    min-height: 94px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-content: center;
    gap: 4px 8px;
    padding: 13px;
    border-radius: 11px;
    background: rgba(255,255,255,.032);
}

.library-summary-grid .ti {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--green);
    font-size: 22px;
}

.library-summary-grid span {
    color: rgba(255,255,255,.44);
    font-size: 10px;
}

.library-summary-grid strong {
    color: rgba(255,255,255,.9);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.03em;
}

.library-tools {
    display: grid;
    gap: 10px;
}

.library-search {
    min-height: 50px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 11px;
    background: rgba(255,255,255,.032);
}

.library-search .ti {
    color: rgba(255,255,255,.4);
    font-size: 20px;
}

.library-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #FFFFFF;
    font-size: 13px;
}

.library-search input::placeholder {
    color: rgba(255,255,255,.32);
}

.library-filters {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

.library-filters::-webkit-scrollbar {
    display: none;
}

.library-filters button {
    flex: 0 0 auto;
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    padding: 0 12px;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.52);
    font-size: 10.5px;
    font-weight: 500;
}

.library-filters button.is-active {
    background: var(--green);
    color: #0F1117;
}

.library-track-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.library-track-card {
    min-width: 0;
    padding: 9px;
    border-radius: 12px;
    background: rgba(255,255,255,.032);
    transition: background 180ms ease, transform 180ms ease;
}

.library-track-card:hover,
.library-track-card.is-playing {
    background: rgba(255,255,255,.052);
    transform: translateY(-2px);
}

.library-cover {
    position: relative;
    aspect-ratio: 5 / 4;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 9px;
}

.library-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.36));
}

.library-disc {
    width: 52%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(15,17,23,.5);
    color: rgba(255,255,255,.76);
    font-size: 25px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 16px 36px rgba(0,0,0,.22);
}

.library-cover-play {
    position: absolute;
    z-index: 2;
    right: 8px;
    bottom: 8px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--green);
    color: #0F1117;
    font-size: 17px;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.library-track-info p {
    margin-bottom: 3px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
}

.library-track-info h3 {
    min-height: 36px;
    margin-bottom: 4px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.library-track-info strong {
    display: block;
    overflow: hidden;
    margin-bottom: 5px;
    color: rgba(255,255,255,.72);
    font-size: 10.5px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-track-info small {
    display: block;
    color: rgba(255,255,255,.32);
    font-size: 10px;
}

.library-track-actions {
    display: grid;
    grid-template-columns: repeat(4, 32px);
    justify-content: space-between;
    gap: 4px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.library-track-actions button,
.library-track-actions a {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,.48);
    font-size: 16px;
}

.library-track-actions button:hover,
.library-track-actions a:hover {
    background: rgba(255,255,255,.06);
    color: #FFFFFF;
}

.library-track-actions .is-favorite {
    color: var(--pink);
}

.library-empty {
    min-height: 380px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 11px;
    padding: 32px 18px;
    text-align: center;
}

.library-empty[hidden] {
    display: none;
}

.library-empty > div {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    margin-bottom: 3px;
    border-radius: 50%;
    background: rgba(139,197,63,.08);
    color: var(--green);
    font-size: 34px;
}

.library-empty h2,
.library-empty p {
    margin-bottom: 0;
}

@media (min-width: 720px) {
    body {
        padding-bottom: 0;
    }

    .header-shell {
        min-height: 72px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 28px;
    }

    .brand {
        justify-self: start;
    }

    .header-shell .brand-logo { width: 145px; }

    .menu-toggle {
        display: none;
    }

    .site-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 23px;
        position: static;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .site-menu a {
        padding: 8px 0;
        white-space: nowrap;
    }

    .nav-actions {
        justify-self: end;
    }

    .hero,
    .page-hero {
        padding: 58px 0 42px;
    }

    .home-hero {
        padding: 44px 0 26px;
    }

    .home-hero-shell {
        max-width: 820px;
        margin-inline: auto;
        text-align: center;
    }

    .home-hero-copy,
    .home-hero h1,
    .home-hero p:not(.eyebrow) {
        margin-inline: auto;
    }

    .home-search {
        max-width: 760px;
        width: 100%;
        margin-inline: auto;
    }

    .hero-grid,
    .tool-layout,
    .app-layout,
    .cart-layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
        align-items: center;
    }

    .feature-grid,
    .card-grid,
    .status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .track-carousel {
        grid-auto-columns: minmax(210px, 260px);
    }

    .voice-feature,
    .app-card {
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 22px;
    }

    .app-card .benefit-grid {
        grid-column: 1 / -1;
    }

    .orchestra-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .orchestra-card {
        grid-template-columns: 58px 1fr;
    }

    .orchestra-card .whatsapp-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .marketplace-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow: visible;
    }

    .marketplace-chip {
        justify-content: center;
        min-height: 68px;
        text-align: center;
    }

    .catalog-hero {
        padding: 46px 0 24px;
    }

    .catalog-hero-shell {
        grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.8fr);
        align-items: end;
    }

    .catalog-search {
        justify-self: end;
        width: 100%;
    }

    .tracks-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .track-detail-grid {
        grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
        align-items: center;
        gap: 42px;
    }

    .detail-cover-wrap {
        margin-inline: 0;
    }

    .included-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-compatibility-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    .related-carousel {
        grid-auto-columns: minmax(190px, 240px);
    }

    .slider-controls {
        display: flex;
    }

    .ecosystem-cart-item {
        grid-template-columns: 84px minmax(0, 1fr) auto;
        align-items: center;
        gap: 16px;
        padding: 14px;
    }

    .cart-item-media {
        width: 84px;
    }

    .cart-item-controls {
        grid-column: auto;
        grid-template-columns: auto 62px;
        justify-items: end;
    }

    .cart-remove {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .checkout-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .checkout-field.full {
        grid-column: 1 / -1;
    }

    .checkout-step {
        padding: 22px;
    }

    .checkout-login-prompt {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .checkout-login-prompt .btn {
        justify-self: end;
    }

    .checkout-identity-registered {
        grid-template-columns: 42px minmax(0, 1fr) auto;
    }

    .checkout-identity-registered button {
        grid-column: auto;
        justify-self: end;
    }

    .library-header-shell {
        grid-template-columns: 1fr auto 1fr;
    }

    .library-header-title {
        display: inline-flex;
        justify-self: center;
    }

    .library-user {
        grid-template-columns: 34px auto 16px;
        justify-self: end;
    }

    .library-user strong,
    .library-user > .ti {
        display: block;
    }

    .library-user strong {
        font-size: 11px;
        font-weight: 600;
    }

    .library-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .library-track-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 13px;
    }

    .checkout-minimal-shell {
        min-height: 72px;
        grid-template-columns: 1fr auto 1fr;
        padding-block: 0;
    }

    .checkout-minimal-secure {
        justify-self: center;
    }

    .checkout-minimal-shell > p {
        grid-column: auto;
        justify-self: end;
        font-size: 11px;
    }

    .product-card .btn,
    .directory-item .btn {
        grid-column: auto;
    }

    .product-card {
        grid-template-columns: 84px 1fr auto;
    }

    .cover-art {
        width: 84px;
    }

    .directory-item {
        grid-template-columns: 58px 1fr auto;
    }

    .bottom-nav {
        display: none;
    }

    .site-footer {
        padding-bottom: 42px;
    }

    .footer-grid {
        grid-template-columns: 1fr auto;
    }
}

@media (min-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-card {
        grid-template-columns: 1fr;
        align-content: start;
    }

    .product-card .btn {
        grid-column: auto;
        justify-self: start;
    }

    .cover-art {
        width: 100%;
    }

    .tracks-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .detail-content-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
        gap: 28px;
    }

    .purchase-card {
        order: 0;
        position: sticky;
        top: 92px;
    }

    .ecosystem-cart-layout {
        grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
        align-items: start;
        gap: 28px;
    }

    .ecosystem-cart-summary {
        position: sticky;
        top: 92px;
    }

    .checkout-layout {
        grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
        align-items: start;
        gap: 28px;
    }

    .checkout-summary {
        position: sticky;
        top: 92px;
    }

    .library-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
        gap: 24px;
    }

    .playlist-sidebar {
        position: sticky;
        top: 88px;
    }

    .playlist-list {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow: visible;
    }

    .library-track-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Mi cuenta: centro de identidad del ecosistema */
.nav-actions { display: flex; align-items: center; gap: 4px; }
.account-link,
.cart-link { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: rgba(255,255,255,.68); font-size: 21px; transition: color 180ms ease, background 180ms ease; }
.account-link:hover,
.account-link.is-active,
.cart-link:hover { color: var(--green); background: rgba(139,197,63,.08); }

.auth-menu { position: relative; }
.auth-menu > summary { list-style: none; cursor: pointer; }
.auth-menu > summary::-webkit-details-marker { display: none; }
.site-auth-menu .account-link { width: auto; min-width: 42px; grid-auto-flow: column; gap: 7px; padding: 0 9px; border: 0; background: transparent; }
.site-auth-menu .account-link > span,
.site-auth-menu .account-link > img { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--green)); color: #fff; object-fit: cover; font-size: 10px; font-weight: 700; }
.site-auth-menu .account-link strong { display: none; max-width: 118px; overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-login-link { width: auto; grid-auto-flow: column; gap: 6px; padding: 0 10px; border-radius: 8px; font-size: 15px; }
.account-login-link span { display: none; font-size: 10px; font-weight: 600; }
.library-user > img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.library-user-menu { justify-self: end; }
.library-login-link { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; justify-self: end; color: var(--green); font-size: 10px; font-weight: 600; }
.auth-menu-popover { position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; width: 190px; overflow: hidden; padding: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #171A22; box-shadow: 0 8px 8px rgba(0,0,0,.34); }
.auth-menu-popover a,
.auth-menu-popover button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 6px; padding: 0 10px; background: transparent; color: rgba(255,255,255,.72); font-size: 10px; text-align: left; }
.auth-menu-popover a:hover,
.auth-menu-popover button:hover { background: rgba(255,255,255,.055); color: #fff; }
.auth-menu-popover .ti { color: var(--green); font-size: 16px; }

/* Firebase Auth: acceso al ecosistema */
.auth-page {
    min-height: 100vh;
    display: grid;
    align-items: center;
    padding: 30px 20px 44px;
    background:
        radial-gradient(circle at 8% 55%, rgba(236,0,140,.14), transparent 30%),
        radial-gradient(circle at 94% 32%, rgba(139,197,63,.15), transparent 34%),
        linear-gradient(180deg, #0F1117 0%, #0B0D13 100%);
}
.auth-back {
    position: fixed;
    z-index: 3;
    top: 24px;
    left: 24px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.82);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
}
.auth-back .ti { color: var(--green); font-size: 20px; }
.auth-back:hover { color: var(--green); }
.auth-shell {
    width: min(100%, 460px);
    display: grid;
    justify-items: center;
    gap: 26px;
    margin: 0 auto;
}
.auth-logo img {
    width: min(310px, 72vw);
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 34px rgba(139,197,63,.13));
}
.auth-panel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: clamp(26px, 5vw, 42px);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(23,26,34,.84), rgba(17,20,28,.78));
    box-shadow: 0 28px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(18px);
}
.auth-panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 42%);
}
.auth-panel > * {
    position: relative;
    z-index: 1;
}
.auth-panel > header {
    margin-bottom: 28px;
    text-align: center;
}
.auth-panel h1 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(30px, 6vw, 38px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.045em;
}
.auth-panel header p {
    max-width: 340px;
    margin: 0 auto;
    color: #B8B8B8;
    font-size: 16px;
    line-height: 1.55;
}
.auth-form {
    display: grid;
    gap: 18px;
}
.auth-form[hidden],
.auth-switch[hidden],
.auth-phone[hidden],
.auth-phone form[hidden],
.auth-phone > button[hidden] { display: none; }
.auth-form label,
.auth-phone label {
    display: grid;
    gap: 9px;
    color: rgba(255,255,255,.78);
    font-size: 14px;
    font-weight: 600;
}
.auth-form label > div,
.auth-phone label > div {
    min-height: 58px;
    display: grid;
    grid-template-columns: 24px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 0 16px;
    background: rgba(15,17,23,.38);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.auth-form label > div:focus-within,
.auth-phone label > div:focus-within {
    border-color: #95D13C;
    background: rgba(15,17,23,.58);
    box-shadow: 0 0 0 3px rgba(149,209,60,.12);
}
.auth-form label .ti,
.auth-phone label .ti {
    color: rgba(255,255,255,.55);
    font-size: 22px;
}
.auth-form input,
.auth-phone input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.auth-form input::placeholder,
.auth-phone input::placeholder { color: #8A8A8A; }
.auth-form label > .phone-field,
.auth-phone label > .phone-field {
    grid-template-columns: 22px 118px minmax(0,1fr);
    gap: 10px;
}
.auth-form .phone-field select,
.auth-phone .phone-field select {
    width: 100%;
    height: 38px;
    border: 0;
    border-radius: 10px;
    padding: 0 10px;
    background: rgba(7,9,14,.45);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color-scheme: dark;
}
.auth-form [data-password-toggle] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,.58);
}
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}
.auth-check {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 10px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 14px !important;
    line-height: 1.45;
}
.auth-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.auth-check > span {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid #95D13C;
    border-radius: 5px;
    color: #95D13C;
    background: rgba(149,209,60,.08);
}
.auth-check input:not(:checked) + span .ti { opacity: 0; }
.auth-check a,
.auth-link,
.auth-switch button {
    border: 0;
    background: transparent;
    color: #95D13C;
    font: inherit;
    font-weight: 700;
}
.auth-link {
    padding: 0;
    white-space: nowrap;
}
.auth-primary {
    min-height: 58px;
    margin-top: 10px;
    border-radius: 11px;
    background: #95D13C;
    color: #07100D;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 20px 44px rgba(149,209,60,.16);
}
.auth-primary:hover {
    background: #A8E048;
    color: #07100D;
    transform: translateY(-1px);
}
.auth-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(15,17,23,.25);
    border-top-color: #07100D;
    border-radius: 50%;
    animation: auth-spin 800ms linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0 18px;
    color: rgba(255,255,255,.48);
    font-size: 14px;
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.10); }
.auth-provider-divider { margin-top: 20px; }
.auth-provider-button,
.auth-phone > button {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    font-weight: 600;
}
.auth-provider-button:hover,
.auth-phone > button:hover { border-color: rgba(149,209,60,.42); background: rgba(149,209,60,.045); }
.auth-provider-button .ti { color: #fff; font-size: 18px; }
.auth-switch {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}
.auth-switch p {
    margin: 0;
    color: #B8B8B8;
    font-size: 16px;
}
.auth-switch button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}
.auth-phone { display: grid; gap: 12px; margin-top: 10px; }
.auth-phone form { display: grid; gap: 11px; }
.auth-unavailable { display: grid; justify-items: center; gap: 7px; padding: 26px 16px; color: rgba(255,255,255,.5); text-align: center; }
.auth-unavailable .ti { color: var(--yellow); font-size: 28px; }
.auth-unavailable strong { color: rgba(255,255,255,.82); font-size: 12px; }
.auth-unavailable p { max-width: 280px; margin: 0; font-size: 10px; }
.auth-status {
    min-height: 20px;
    margin: 14px 0 0;
    color: #ff78b8;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
.auth-status.is-success { color: #95D13C; }
.auth-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255,255,255,.58);
    font-size: 14px;
    text-align: center;
}
.auth-privacy .ti { color: #95D13C; font-size: 18px; }
.auth-page.is-busy { cursor: progress; }

@media (max-width: 560px) {
    .auth-page {
        align-items: start;
        padding: 76px 20px 32px;
    }

    .auth-back {
        top: 18px;
        left: 18px;
    }

    .auth-shell {
        gap: 20px;
    }

    .auth-logo img {
        width: min(260px, 70vw);
    }

    .auth-panel {
        border-radius: 18px;
    }

    .auth-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .auth-form label > .phone-field {
        grid-template-columns: 22px 104px minmax(0,1fr);
    }
}

/* Seller Center */
.seller-center { min-height: 75vh; padding: 44px 0 82px; background: radial-gradient(circle at 0 0, rgba(236,0,140,.12), transparent 30%), radial-gradient(circle at 100% 20%, rgba(139,197,63,.12), transparent 28%), #0F1117; }
.seller-shell { display: grid; gap: 24px; }
.seller-hero { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.seller-hero h1 { max-width: 820px; margin: 5px 0 10px; font-size: clamp(40px, 7vw, 72px); font-weight: 700; line-height: .94; letter-spacing: -.055em; }
.seller-hero p:not(.eyebrow) { max-width: 660px; margin: 0; color: rgba(255,255,255,.62); font-size: 15px; line-height: 1.65; }
.seller-notice { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(139,197,63,.24); border-radius: 12px; padding: 14px 16px; background: rgba(139,197,63,.08); color: var(--green); font-size: 13px; font-weight: 700; }
.seller-landing-grid { display: grid; gap: 18px; align-items: start; }
.seller-value-card,
.seller-form,
.seller-state-card,
.seller-panel,
.seller-coming-grid article,
.seller-kpi-grid article {
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(23,26,34,.82), rgba(20,23,31,.66));
    box-shadow: 0 24px 64px rgba(0,0,0,.22);
}
.seller-value-card { padding: clamp(22px, 4vw, 34px); }
.seller-value-card > i { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 16px; background: rgba(139,197,63,.12); color: var(--green); font-size: 30px; }
.seller-value-card h2 { max-width: 500px; margin: 0 0 12px; font-size: clamp(28px, 4.4vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.seller-value-card p { max-width: 540px; margin: 0 0 22px; color: rgba(255,255,255,.62); line-height: 1.65; }
.seller-value-card ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.seller-value-card li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.78); font-size: 13px; }
.seller-value-card li .ti { color: var(--green); font-size: 18px; }
.seller-form { display: grid; gap: 14px; padding: clamp(20px, 4vw, 30px); }
.seller-form-head span { color: var(--green); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.seller-form-head h2 { margin: 6px 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -.035em; }
.seller-form-head p { margin: 0 0 8px; color: rgba(255,255,255,.5); font-size: 13px; }
.seller-form label { display: grid; gap: 7px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; }
.seller-form input,
.seller-form select,
.seller-form textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 13px 14px;
    background: rgba(8,10,16,.52);
    color: #fff;
    font: inherit;
    font-size: 13px;
    outline: 0;
    color-scheme: dark;
}
.seller-form textarea { resize: vertical; min-height: 120px; }
.seller-form input:focus,
.seller-form select:focus,
.seller-form textarea:focus { border-color: rgba(139,197,63,.66); box-shadow: 0 0 0 3px rgba(139,197,63,.11); }
.seller-field-grid { display: grid; gap: 12px; }
.seller-state-card { display: grid; justify-items: center; gap: 10px; padding: clamp(30px, 6vw, 58px); text-align: center; }
.seller-state-card > i { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: rgba(139,197,63,.1); color: var(--green); font-size: 34px; }
.seller-state-card.is-rejected > i,
.seller-state-card.is-suspended > i { background: rgba(236,0,140,.1); color: #ff73ad; }
.seller-state-card h2 { margin: 0; font-size: clamp(28px, 5vw, 46px); font-weight: 700; letter-spacing: -.045em; }
.seller-state-card p:not(.eyebrow) { max-width: 560px; margin: 0; color: rgba(255,255,255,.62); line-height: 1.65; }
.seller-state-card small { color: #ff9bc7; }
.seller-dashboard { display: grid; gap: 18px; }
.seller-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.seller-kpi-grid article { padding: 18px; }
.seller-kpi-grid span { color: rgba(255,255,255,.48); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.seller-kpi-grid strong { display: block; margin: 8px 0 4px; color: #fff; font-size: clamp(22px, 4vw, 32px); font-weight: 700; letter-spacing: -.04em; }
.seller-kpi-grid small { color: rgba(255,255,255,.48); font-size: 12px; }
.seller-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.seller-tabs::-webkit-scrollbar { display: none; }
.seller-tabs a { flex: 0 0 auto; min-height: 42px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; padding: 0 14px; color: rgba(255,255,255,.62); font-size: 12px; font-weight: 700; }
.seller-tabs a.is-active,
.seller-tabs a:hover { border-color: rgba(139,197,63,.36); background: rgba(139,197,63,.09); color: var(--green); }
.seller-panel { display: grid; gap: 18px; padding: clamp(20px, 4vw, 28px); }
.seller-panel h2 { margin: 4px 0 8px; font-size: 28px; font-weight: 700; letter-spacing: -.04em; }
.seller-panel p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.62); line-height: 1.7; }
.seller-business-list { display: grid; gap: 8px; }
.seller-business-list span { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font-size: 13px; }
.seller-business-list .ti { color: var(--green); font-size: 18px; }
.seller-coming-grid { display: grid; gap: 12px; }
.seller-coming-grid article { display: grid; gap: 8px; padding: 18px; }
.seller-coming-grid i { color: var(--green); font-size: 24px; }
.seller-coming-grid strong { font-size: 16px; }
.seller-coming-grid span { color: rgba(255,255,255,.44); font-size: 12px; }
.seller-coming-grid a { color: var(--green); font-weight: 700; }
.seller-products-head { align-items: center; }
.back-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; color: rgba(255,255,255,.58); font-size: 13px; font-weight: 700; }
.back-link:hover { color: var(--green); }
.seller-product-table { display: grid; gap: 10px; }
.seller-product-table article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;
    padding: 12px;
    background: rgba(20,23,31,.74);
}
.seller-product-table img,
.admin-product-table img,
.seller-product-preview {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(255,255,255,.06);
}
.seller-product-table strong { display: block; color: #fff; font-size: 14px; }
.seller-product-table small,
.seller-product-table em { display: block; color: rgba(255,255,255,.48); font-size: 11px; font-style: normal; }
.seller-product-table em { color: #ff9bc7; margin-top: 4px; }
.seller-product-table span { color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; }
.seller-product-table a { justify-self: end; min-height: 34px; display: inline-flex; align-items: center; border: 1px solid rgba(139,197,63,.28); border-radius: 10px; padding: 0 12px; color: var(--green); font-size: 12px; font-weight: 700; }
.seller-product-form { gap: 18px; }
.seller-product-form section { display: grid; gap: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: clamp(16px, 3vw, 22px); background: rgba(8,10,16,.22); }
.seller-check { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 10px !important; }
.seller-check input { width: 18px; height: 18px; accent-color: var(--green); }
.seller-product-preview { width: 96px; height: 96px; }
.seller-product-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.admin-seller-table article { grid-template-columns: minmax(220px, 1.2fr) minmax(130px,.7fr) 130px 132px minmax(240px, auto); }
.admin-seller-actions { grid-template-columns: minmax(160px,1fr) repeat(4, auto); }
.admin-seller-actions input { min-height: 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 0 10px; background: rgba(8,10,16,.58); color: #fff; font: inherit; font-size: 10px; }
.admin-product-table article { grid-template-columns: 52px minmax(220px, 1fr) 120px 120px minmax(240px, auto); }
.admin-product-table img { width: 52px; height: 52px; }
.admin-product-actions { grid-template-columns: minmax(160px,1fr) repeat(4, auto); }
.admin-product-actions input { min-height: 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 0 10px; background: rgba(8,10,16,.58); color: #fff; font: inherit; font-size: 10px; }
.admin-product-detail { display: grid; gap: 22px; }
.admin-product-detail > img { width: min(280px, 100%); aspect-ratio: 1; border-radius: 22px; object-fit: cover; background: rgba(255,255,255,.06); }
.admin-product-detail h2 { margin: 0 0 10px; font-size: clamp(28px,4vw,44px); font-weight: 700; letter-spacing: -.04em; }
.admin-product-detail p { color: rgba(255,255,255,.66); line-height: 1.7; }
.admin-product-detail dl { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 10px 18px; margin: 20px 0 0; }
.admin-product-detail dt { color: rgba(255,255,255,.44); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.admin-product-detail dd { margin: 0; color: #fff; font-size: 13px; }
.admin-empty { display: grid; justify-items: center; gap: 6px; padding: 34px; color: rgba(255,255,255,.5); text-align: center; }
.admin-empty .ti { color: var(--green); font-size: 30px; }
.admin-empty strong { color: #fff; font-size: 14px; }
.admin-empty p { margin: 0; font-size: 12px; }

@media (min-width: 760px) {
    .seller-landing-grid { grid-template-columns: minmax(0,.9fr) minmax(360px,.82fr); gap: 24px; }
    .seller-field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .seller-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .seller-panel { grid-template-columns: minmax(0, 1fr) 320px; }
    .seller-coming-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .admin-product-detail { grid-template-columns: 320px minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .seller-hero { align-items: flex-start; flex-direction: column; }
    .seller-product-table article {
        grid-template-columns: 58px minmax(0, 1fr);
    }
    .seller-product-table span,
    .seller-product-table a,
    .seller-product-table small:last-child { grid-column: 2; justify-self: start; }
}

@media (min-width: 720px) {
    .site-auth-menu .account-link strong,
    .account-login-link span { display: block; }
}

@media (min-width: 900px) {
    .auth-page { padding-block: 54px; }
}
.account-page { padding: 30px 0 64px; }
.account-shell { display: grid; gap: 22px; }
.account-sidebar { min-width: 0; }
.account-identity { display: flex; align-items: center; gap: 12px; padding: 2px 2px 18px; }
.account-avatar { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--green); border-radius: 50%; color: var(--green); font-size: 18px; font-weight: 700; box-shadow: inset 0 0 0 5px rgba(139,197,63,.035); }
.account-avatar.is-small { width: 48px; height: 48px; font-size: 14px; }
.account-identity div { min-width: 0; }
.account-identity strong,
.account-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity strong { font-size: 14px; font-weight: 600; }
.account-identity span { color: rgba(255,255,255,.45); font-size: 11px; }
.account-nav { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: none; }
.account-nav::-webkit-scrollbar { display: none; }
.account-nav button { flex: 0 0 auto; min-height: 42px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.055); border-radius: 8px; padding: 0 13px; background: rgba(255,255,255,.025); color: rgba(255,255,255,.58); font-size: 12px; font-weight: 500; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.account-nav button .ti { font-size: 18px; }
.account-nav button:hover { color: #fff; border-color: rgba(255,255,255,.12); }
.account-nav button.is-active { color: var(--green); border-color: rgba(139,197,63,.17); background: rgba(139,197,63,.09); }
.account-help { display: none; }
.account-content { min-width: 0; }
.account-panel[hidden] { display: none; }
.account-panel.is-active { animation: account-enter 260ms ease both; }
@keyframes account-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.account-welcome { display: grid; gap: 18px; padding: 6px 0 26px; border-bottom: 1px solid rgba(255,255,255,.08); }
.account-welcome h1,
.account-view-heading h1 { margin-bottom: 8px; font-size: clamp(32px, 7vw, 48px); line-height: 1; letter-spacing: -.04em; }
.account-welcome p,
.account-view-heading p { margin: 0; color: rgba(255,255,255,.56); font-size: 14px; }
.account-profile-shortcut { width: 100%; min-height: 64px; display: grid; grid-template-columns: 36px 1fr 18px; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px 13px; background: rgba(255,255,255,.025); color: #fff; text-align: left; }
.account-profile-shortcut > .ti:first-child { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(139,197,63,.5); border-radius: 50%; color: var(--green); font-size: 19px; }
.account-profile-shortcut span small,
.account-profile-shortcut span strong { display: block; }
.account-profile-shortcut span small { color: rgba(255,255,255,.4); font-size: 10px; }
.account-profile-shortcut span strong { font-size: 11px; font-weight: 600; }
.account-profile-shortcut > .ti:last-child { color: rgba(255,255,255,.34); }
.account-continuity { position: relative; display: grid; gap: 18px; padding-top: 26px; }
.account-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.account-section-heading > div { display: flex; align-items: center; gap: 9px; }
.account-section-heading > div > .ti { color: var(--green); font-size: 20px; }
.account-section-heading h2 { margin: 0; font-size: 18px; font-weight: 600; }
.account-section-heading a,
.account-section-heading button { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 0; background: transparent; color: var(--green); font-size: 11px; font-weight: 600; }
.account-track-list,
.account-purchase-list { border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018)); overflow: hidden; }
.account-inline-empty { margin: 0; padding: 24px 16px; color: rgba(255,255,255,.42); font-size: 10px; text-align: center; }
.account-track-row { min-height: 66px; display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto 36px; align-items: center; gap: 9px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.055); }
.account-track-row:last-child { border-bottom: 0; }
.account-track-number { color: rgba(255,255,255,.25); font-size: 10px; font-variant-numeric: tabular-nums; }
.account-track-row > div { min-width: 0; }
.account-track-row strong,
.account-track-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-track-row strong { font-size: 11px; font-weight: 600; }
.account-track-row small { color: rgba(255,255,255,.4); font-size: 10px; }
.account-track-duration { color: rgba(255,255,255,.48); font-size: 10px; }
.account-format { color: rgba(255,255,255,.38); font-size: 10px; font-weight: 600; }
.account-track-row button,
.account-track-row > a { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: transparent; color: rgba(255,255,255,.7); font-size: 14px; }
.account-track-row button:hover,
.account-track-row > a:hover { border-color: var(--green); color: var(--green); }
.account-app-ready { position: relative; min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 23px; border: 1px solid rgba(139,197,63,.48); border-radius: 10px; background: rgba(139,197,63,.025); overflow: hidden; }
.account-app-ready::before { content: ""; position: absolute; top: -1px; left: 36px; width: 1px; height: 64px; background: var(--green); opacity: .75; }
.account-phone-mark { position: absolute; top: 29px; right: 24px; color: rgba(255,255,255,.6); font-size: 52px; line-height: 1; }
.account-phone-mark span { position: absolute; right: -4px; bottom: -1px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--green); border-radius: 50%; background: var(--bg); color: var(--green); font-size: 14px; }
.account-app-ready h2 { max-width: 220px; margin-bottom: 9px; font-size: 24px; font-weight: 600; line-height: 1.05; }
.account-app-ready p { max-width: 260px; margin-bottom: 18px; color: rgba(255,255,255,.55); font-size: 12px; }
.account-app-ready a { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 11px; font-weight: 600; }
.account-purchases-preview { padding-top: 28px; }
.account-purchase-list article { min-height: 64px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto 30px; align-items: center; gap: 10px; padding: 8px 11px; border-bottom: 1px solid rgba(255,255,255,.055); }
.account-purchase-list article:last-child { border-bottom: 0; }
.account-purchase-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: rgba(255,255,255,.58); }
.account-purchase-list article div { min-width: 0; }
.account-purchase-list strong,
.account-purchase-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-purchase-list strong { font-size: 11px; font-weight: 600; }
.account-purchase-list small { color: rgba(255,255,255,.4); font-size: 10px; }
.account-purchase-list b { color: rgba(255,255,255,.65); font-size: 10px; font-weight: 500; }
.account-purchase-list article > a { width: 28px; height: 28px; display: grid; place-items: center; color: rgba(255,255,255,.4); }
.account-view-heading { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.account-view-heading > .ti { color: var(--green); font-size: 32px; }
.account-track-list.is-full,
.account-purchase-list.is-full { max-width: 760px; }
.account-empty-state { min-height: 380px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.account-empty-state > .ti { width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid rgba(236,0,140,.3); border-radius: 50%; color: var(--pink); font-size: 30px; }
.account-empty-state h2 { margin-bottom: 8px; font-size: 22px; }
.account-empty-state p { margin-bottom: 20px; font-size: 13px; }
.account-form { max-width: 620px; display: grid; gap: 17px; }
.account-form label { display: grid; gap: 7px; color: rgba(255,255,255,.62); font-size: 11px; font-weight: 600; }
.account-form input { width: 100%; min-height: 48px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 0 13px; background: rgba(255,255,255,.035); color: #fff; font-size: 13px; outline: 0; }
.account-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(139,197,63,.1); }
.account-form .btn { justify-self: start; }
.account-form-status { color: var(--green); font-size: 11px; }
.account-security-list { max-width: 760px; border-top: 1px solid rgba(255,255,255,.07); }
.account-security-list article { min-height: 82px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 13px; border-bottom: 1px solid rgba(255,255,255,.07); }
.account-security-list article > .ti { color: var(--green); font-size: 22px; }
.account-security-list strong { font-size: 12px; font-weight: 600; }
.account-security-list p { margin: 2px 0 0; color: rgba(255,255,255,.42); font-size: 10px; }
.account-security-list span,
.account-security-list button { border: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 600; }

@media (max-width: 719px) {
    .account-track-duration,
    .account-format { display: none; }
    .account-track-row { grid-template-columns: 24px minmax(0,1fr) 34px; }
}

@media (min-width: 720px) {
    .account-page { padding-top: 40px; }
    .account-welcome { grid-template-columns: minmax(0,1fr) 220px; align-items: center; }
    .account-profile-shortcut { justify-self: end; }
    .account-continuity { grid-template-columns: minmax(0,1.55fr) minmax(230px,.65fr); align-items: stretch; }
    .account-library-preview { min-width: 0; }
}

@media (min-width: 1024px) {
    .account-page { padding: 46px 0 80px; }
    .account-shell { grid-template-columns: 214px minmax(0,1fr); gap: 42px; align-items: start; }
    .account-sidebar { position: sticky; top: 104px; }
    .account-identity { display: grid; justify-items: center; padding: 4px 12px 26px; text-align: center; }
    .account-avatar { width: 72px; height: 72px; font-size: 22px; }
    .account-nav { display: grid; gap: 3px; overflow: visible; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
    .account-nav button { position: relative; width: 100%; min-height: 43px; border: 0; padding: 0 13px; background: transparent; }
    .account-nav button.is-active::before { content: ""; position: absolute; left: 0; width: 2px; height: 22px; background: var(--green); border-radius: 2px; }
    .account-help { display: grid; grid-template-columns: 24px 1fr 16px; align-items: center; gap: 8px; margin-top: 18px; padding: 13px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; color: rgba(255,255,255,.6); }
    .account-help > .ti:first-child { font-size: 20px; }
    .account-help strong,
    .account-help small { display: block; }
    .account-help strong { color: rgba(255,255,255,.75); font-size: 10px; font-weight: 600; }
    .account-help small { font-size: 10px; }
    .account-content { padding-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .account-panel.is-active { animation: none; }
}

/* Sprint 8: Biblioteca, playlists y repertorios */
.library-header { border-bottom: 1px solid rgba(255,255,255,.07); box-shadow: none; }
.library-header-shell { min-height: 66px; grid-template-columns: auto minmax(0,1fr) auto; gap: 18px; }
.library-private-nav { display: none; align-items: stretch; justify-content: center; align-self: stretch; gap: 4px; }
.library-private-nav a,
.library-private-nav span { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; color: rgba(255,255,255,.5); font-size: 11px; font-weight: 500; white-space: nowrap; }
.library-private-nav .ti { font-size: 17px; }
.library-private-nav a:hover,
.library-private-nav a.is-active { color: var(--green); }
.library-private-nav a.is-active::after { content: ""; position: absolute; right: 12px; bottom: 0; left: 12px; height: 2px; background: var(--green); }
.library-private-nav small { padding: 3px 5px; border-radius: 4px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.35); font-size: 10px; }
.library-app-sync { display: none; align-items: center; gap: 6px; color: var(--green); font-size: 10px; font-weight: 500; }
.library-user { color: inherit; }
.music-library,
.playlist-detail { min-height: calc(100vh - 66px); padding: 30px 0 72px; }
.music-library > audio,
.playlist-detail > audio { display: none; }
.music-shell { width: var(--shell); }
.music-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 34px; }
.music-page-head h1,
.playlist-hero h1 { margin-bottom: 8px; font-size: clamp(30px, 5.5vw, 48px); font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.music-page-head p,
.playlist-hero-copy > p { margin-bottom: 0; color: rgba(255,255,255,.55); font-size: 13px; }
.music-create-button { min-width: 154px; }
.music-playlists { margin-bottom: 38px; }
.music-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.music-section-head h2,
.setlist-toolbar h2 { margin-bottom: 3px; font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.music-section-head p,
.setlist-toolbar p { margin-bottom: 0; color: rgba(255,255,255,.38); font-size: 10px; }
.music-section-head > span,
.music-section-head > a { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 10px; white-space: nowrap; }
.playlist-rail { display: grid; grid-auto-columns: minmax(230px, 78%); grid-auto-flow: column; gap: 10px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; scrollbar-color: rgba(139,197,63,.35) transparent; scroll-snap-type: x mandatory; }
.playlist-tile { scroll-snap-align: start; min-width: 0; display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 11px; padding: 12px; border: 1px solid rgba(255,255,255,.075); border-radius: 9px; background: rgba(255,255,255,.02); transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.playlist-tile:hover { border-color: rgba(139,197,63,.3); background: rgba(255,255,255,.033); transform: translateY(-2px); }
.playlist-cover,
.playlist-hero-cover { position: relative; display: grid; place-items: center; overflow: hidden; color: #0F1117; }
.playlist-cover { width: 64px; aspect-ratio: 1; border-radius: 7px; font-size: 24px; }
.playlist-cover::before,
.playlist-hero-cover::before { content: ""; position: absolute; width: 70%; height: 150%; border: 7px solid currentColor; transform: rotate(35deg); opacity: .34; }
.playlist-cover .ti,
.playlist-hero-cover .ti { position: relative; z-index: 1; }
.playlist-cover-1 { background: var(--green); }
.playlist-cover-2 { background: var(--pink); }
.playlist-cover-3 { background: var(--yellow); }
.playlist-cover-4 { background: #9DD950; }
.playlist-cover-5 { background: #171A22; color: var(--pink); box-shadow: inset 0 0 0 1px rgba(236,0,140,.5); }
.playlist-tile-copy { min-width: 0; align-self: center; }
.playlist-tile h3 { overflow: hidden; margin-bottom: 5px; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.playlist-tile p,
.playlist-tile small { display: block; margin-bottom: 0; color: rgba(255,255,255,.43); font-size: 10px; }
.playlist-tile > a { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 5px; justify-self: start; color: var(--green); font-size: 10px; font-weight: 600; }
.music-tracks-head { margin-bottom: 12px; }
.music-tools { display: grid; gap: 9px; margin-bottom: 11px; }
.music-search { min-height: 44px; display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 0 12px; background: rgba(255,255,255,.018); color: rgba(255,255,255,.38); }
.music-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-size: 11px; }
.music-search input::placeholder { color: rgba(255,255,255,.3); }
.music-filters { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.music-filters::-webkit-scrollbar { display: none; }
.music-filters button { flex: 0 0 auto; min-height: 36px; border: 1px solid rgba(255,255,255,.07); border-radius: 7px; padding: 0 12px; background: transparent; color: rgba(255,255,255,.48); font-size: 10px; font-weight: 500; }
.music-filters button:hover { color: #fff; }
.music-filters button.is-active { border-color: var(--green); color: var(--green); background: rgba(139,197,63,.055); }
.music-table-wrap,
.setlist-table-wrap { border: 1px solid rgba(255,255,255,.075); border-radius: 9px; overflow: hidden; background: rgba(4,6,10,.14); }
.music-table-head { display: none; }
.music-track-row { min-width: 0; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 66px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.055); transition: background 160ms ease; }
.music-track-row:last-child { border-bottom: 0; }
.music-track-row:hover,
.music-track-row.is-playing { background: rgba(139,197,63,.045); }
.music-track-row.is-playing .music-track-index,
.music-track-row.is-playing .music-track-title strong { color: var(--green); }
.music-track-index { color: rgba(255,255,255,.35); font-size: 10px; font-variant-numeric: tabular-nums; }
.music-track-title { min-width: 0; overflow: hidden; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 9px; }
.music-cover { position: relative; width: 38px; min-width: 38px; max-width: 38px; height: 38px; max-height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; color: #0F1117; font-size: 15px; }
.music-cover img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.music-cover-1 { background: var(--green); }.music-cover-2 { background: var(--pink); }.music-cover-3 { background: var(--yellow); }.music-cover-4 { background: #58C4C8; }.music-cover-5 { background: #9DD950; }.music-cover-6 { background: #B26DDB; }
.music-track-title > div { min-width: 0; }
.music-track-title strong,
.music-track-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-track-title strong { font-size: 10.5px; font-weight: 600; }
.music-track-title small { color: rgba(255,255,255,.36); font-size: 10px; }
.music-track-artist,
.music-track-genre,
.music-track-bpm,
.music-track-key,
.music-track-duration { display: none; color: rgba(255,255,255,.55); font-size: 10px; }
.music-row-actions { display: flex; align-items: center; gap: 2px; }
.music-row-actions button,
.setlist-actions button { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 6px; padding: 0 8px; background: transparent; color: rgba(255,255,255,.48); font-size: 15px; }
.music-row-actions button:hover,
.setlist-actions button:hover { background: rgba(255,255,255,.055); color: #fff; }
.music-row-actions .is-favorite { color: var(--pink); }
.music-add-action span { display: none; font-size: 10px; font-weight: 600; }
.music-no-results { min-height: 230px; display: grid; justify-items: center; align-content: center; gap: 7px; color: rgba(255,255,255,.42); text-align: center; }
.music-no-results[hidden] { display: none; }
.music-no-results .ti { color: var(--green); font-size: 30px; }
.music-no-results strong { color: rgba(255,255,255,.8); font-size: 13px; }
.music-no-results span { font-size: 10px; }
.music-no-results .btn { margin-top: 7px; }
.music-row-actions button:disabled { cursor: not-allowed; opacity: .3; }
.music-dialog { width: min(460px, calc(100% - 30px)); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 0; background: #151820; color: #fff; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.music-dialog::backdrop { background: rgba(5,7,10,.76); backdrop-filter: blur(5px); }
.music-dialog form { display: grid; gap: 18px; padding: 20px; }
.music-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.music-dialog h2 { margin-bottom: 5px; font-size: 20px; font-weight: 600; }
.music-dialog p { margin-bottom: 0; font-size: 10px; }
.music-dialog-head button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: rgba(255,255,255,.5); font-size: 18px; }
.music-dialog label { display: grid; gap: 7px; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 600; }
.music-dialog input { min-height: 46px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 0 12px; outline: 0; background: #0F1117; color: #fff; font-size: 12px; }
.music-dialog input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(139,197,63,.09); }
.music-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.music-dialog-status { color: var(--green); }
.music-toast { position: fixed; right: 18px; bottom: 18px; z-index: 60; max-width: min(360px, calc(100% - 36px)); padding: 11px 14px; border: 1px solid rgba(139,197,63,.28); border-radius: 8px; background: #171A22; color: #fff; font-size: 10px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.music-toast.is-visible { opacity: 1; transform: translateY(0); }

.playlist-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; color: rgba(255,255,255,.58); font-size: 10px; }
.playlist-back:hover { color: var(--green); }
.playlist-hero { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; gap: 18px; margin-bottom: 24px; }
.playlist-hero-cover { width: 112px; aspect-ratio: 1; border-radius: 9px; font-size: 38px; }
.playlist-title-line { display: flex; align-items: center; gap: 8px; }
.playlist-title-line h1 { margin-bottom: 8px; }
.playlist-title-line button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: rgba(255,255,255,.56); font-size: 17px; }
.playlist-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.playlist-meta span { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.5); font-size: 10px; }
.playlist-app-state { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--green); font-size: 10px; }
.playlist-event-context { width: min(560px,100%); display: grid; grid-template-columns: 30px minmax(0,1fr) 18px; align-items: center; gap: 9px; margin-top: 14px; border: 1px solid rgba(139,197,63,.22); border-radius: 8px; padding: 9px 11px; background: rgba(139,197,63,.045); color: #fff; }
.playlist-event-context > i:first-child { color: var(--green); font-size: 20px; }
.playlist-event-context > i:last-child { color: rgba(255,255,255,.36); }
.playlist-event-context span,
.playlist-event-context small,
.playlist-event-context strong,
.playlist-event-context em { display: block; min-width: 0; font-style: normal; }
.playlist-event-context small { color: var(--green); font-size: 10px; text-transform: uppercase; }
.playlist-event-context strong { overflow: hidden; margin: 2px 0; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.playlist-event-context em { color: rgba(255,255,255,.45); font-size: 10px; }
.playlist-insights { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; margin-bottom: 18px; border: 1px solid rgba(255,255,255,.075); border-radius: 9px; background: rgba(255,255,255,.018); }
.playlist-insights > div { min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px; min-height: 70px; padding: 11px 13px; border-right: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.playlist-insights > div:nth-child(2n) { border-right: 0; }
.playlist-insights > div:nth-last-child(-n+2) { border-bottom: 0; }
.playlist-insights > div > i { color: var(--green); font-size: 19px; }
.playlist-insights strong,
.playlist-insights small { display: block; }
.playlist-insights strong { font-size: 15px; font-weight: 600; }
.playlist-insights small { margin-top: 3px; color: rgba(255,255,255,.38); font-size: 10px; }
.playlist-genres strong { display: flex; flex-wrap: wrap; gap: 4px; font-size: 10px; }
.playlist-genres em { border-radius: 4px; padding: 3px 5px; background: rgba(255,255,255,.06); font-style: normal; font-weight: 500; }
.playlist-duplicate-warning { display: flex; align-items: flex-start; gap: 10px; margin: -2px 0 18px; border: 1px solid rgba(255,212,0,.22); border-radius: 8px; padding: 11px 13px; background: rgba(255,212,0,.05); }
.playlist-duplicate-warning > i { color: var(--yellow); font-size: 19px; }
.playlist-duplicate-warning strong { font-size: 10px; font-weight: 600; }
.playlist-duplicate-warning p { margin: 3px 0 0; color: rgba(255,255,255,.46); font-size: 10px; }
.playlist-actions { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 28px; padding-bottom: 6px; scrollbar-width: none; }
.playlist-actions::-webkit-scrollbar { display: none; }
.playlist-actions .btn { flex: 0 0 auto; min-height: 42px; font-size: 10px; }
.playlist-event-action span { display: grid; text-align: left; line-height: 1.2; }
.playlist-event-action small { color: rgba(255,255,255,.35); font-size: 10px; }
.setlist-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.setlist-order-actions { display: flex; gap: 7px; }
.setlist-order-actions[hidden] { display: none; }
.setlist-order-actions button { min-height: 34px; border: 1px solid rgba(255,255,255,.09); border-radius: 6px; padding: 0 11px; background: transparent; color: rgba(255,255,255,.6); font-size: 10px; }
.setlist-order-actions button:last-child { border-color: var(--green); background: var(--green); color: #0F1117; font-weight: 600; }
.setlist-table-head { display: none; }
.setlist-row { display: grid; grid-template-columns: 28px 22px minmax(0,1fr) auto; align-items: center; gap: 6px; min-height: 62px; padding: 7px 9px; border-bottom: 1px solid rgba(255,255,255,.055); transition: background 160ms ease, opacity 160ms ease, transform 160ms ease; }
.setlist-row:last-child { border-bottom: 0; }
.setlist-row:hover,
.setlist-row.is-playing { background: rgba(139,197,63,.045); }
.setlist-row.is-playing .setlist-title strong { color: var(--green); }
.setlist-drag { width: 28px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px; padding: 0; background: transparent; color: rgba(255,255,255,.32); font-size: 17px; cursor: grab; touch-action: none; }
.setlist-drag:hover,
.setlist-drag:focus-visible { background: rgba(139,197,63,.1); color: var(--green); outline: 0; }
.setlist-drag:active { cursor: grabbing; }
.setlist-row.is-dragging { z-index: 2; border-radius: 7px; background: #1b1f27; box-shadow: 0 10px 28px rgba(0,0,0,.3); transform: scale(1.006); }
.playlist-detail.is-saving-order .setlist-drag { cursor: wait; opacity: .45; }
.setlist-save-state { min-height: 16px; color: rgba(255,255,255,.42); font-size: 10px; }
.setlist-save-state[data-state="saving"] { color: rgba(255,255,255,.58); }
.setlist-save-state[data-state="saved"] { color: var(--green); }
.setlist-save-state[data-state="error"] { color: #ff73ad; }
.setlist-index { color: rgba(255,255,255,.4); font-size: 10px; }
.setlist-title { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 9px; }
.setlist-title strong { overflow: hidden; font-size: 10.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.setlist-row > span:not(.setlist-index) { display: none; color: rgba(255,255,255,.52); font-size: 10px; }
.setlist-actions { display: flex; }
.setlist-row.is-reorderable { background: rgba(139,197,63,.025); }
.setlist-row.is-removing { opacity: 0; transform: translateX(8px); }
.add-track-options { display: grid; gap: 8px; }
.add-track-options button { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 11px; background: transparent; color: #fff; text-align: left; }
.add-track-options button > .ti { color: var(--green); font-size: 21px; }
.add-track-options strong,
.add-track-options small { display: block; }
.add-track-options strong { font-size: 11px; font-weight: 600; }
.add-track-options small { color: rgba(255,255,255,.4); font-size: 10px; }

/* Playlists and events workspace */
.library-events-preview { margin: 30px 0 36px; }
.library-event-rail { display: grid; gap: 8px; }
.library-event-rail .event-row { min-height: 84px; }
.library-event-empty { display: flex; align-items: center; gap: 14px; border: 1px dashed rgba(139,197,63,.24); border-radius: 9px; padding: 16px; background: rgba(139,197,63,.035); }
.library-event-empty > i { color: var(--green); font-size: 24px; }
.library-event-empty div { min-width: 0; flex: 1; }
.library-event-empty strong,
.library-event-empty span { display: block; }
.library-event-empty strong { margin-bottom: 3px; font-size: 11px; }
.library-event-empty span { color: rgba(255,255,255,.44); font-size: 10px; }
.library-event-empty a { color: var(--green); font-size: 10px; font-weight: 600; }
.library-event-rail a { display: grid; grid-template-columns: 58px minmax(0,1fr) minmax(130px,.6fr); align-items: center; gap: 12px; min-height: 64px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; padding: 10px 13px; background: rgba(255,255,255,.018); color: #fff; }
.library-event-rail time { color: var(--green); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.library-event-rail strong { overflow: hidden; font-size: 10.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.library-event-rail span { display: flex; align-items: center; gap: 4px; color: rgba(255,255,255,.4); font-size: 10px; }
.playlist-empty-tile { min-height: 96px; border: 1px dashed rgba(255,255,255,.12); border-radius: 9px; padding: 14px; background: rgba(255,255,255,.018); }
.playlist-empty-tile strong,
.playlist-empty-tile span { display: block; }
.playlist-empty-tile strong { margin: 8px 0 3px; font-size: 11px; }
.playlist-empty-tile span { color: rgba(255,255,255,.42); font-size: 10px; }
.playlist-empty-tile i { color: var(--green); font-size: 20px; }
.music-dialog textarea { width: 100%; resize: vertical; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 11px 12px; outline: 0; background: #0F1117; color: #fff; font: inherit; font-size: 11px; }
.music-dialog textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(139,197,63,.09); }
.playlist-picker { display: grid; gap: 7px; max-height: 260px; overflow-y: auto; padding-right: 3px; }
.playlist-picker label { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 10px; cursor: pointer; }
.playlist-picker label:has(input:checked) { border-color: rgba(139,197,63,.55); background: rgba(139,197,63,.055); }
.playlist-picker input { min-height: auto; accent-color: var(--green); }
.playlist-picker strong,
.playlist-picker small { display: block; }
.playlist-picker strong { color: #fff; font-size: 10px; }
.playlist-picker small { margin-top: 2px; color: rgba(255,255,255,.4); font-size: 10px; }
.dialog-empty { border: 1px dashed rgba(255,255,255,.11); border-radius: 8px; padding: 14px; text-align: center; }

.events-workspace,
.event-detail,
.event-not-found { min-height: calc(100vh - 58px); padding: 34px 0 70px; background: radial-gradient(circle at 3% 0%, rgba(236,0,140,.12), transparent 30%), radial-gradient(circle at 100% 6%, rgba(139,197,63,.1), transparent 31%), #0f1117; }
.events-page-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 38px; }
.events-page-head p,
.event-detail-hero > div > p { margin-bottom: 8px; color: var(--green); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.events-page-head h1 { margin: 0 0 7px; font-size: clamp(32px,5vw,52px); font-weight: 600; letter-spacing: -.055em; }
.events-page-head span { color: rgba(255,255,255,.52); font-size: 11px; }
.events-upcoming { margin-bottom: 42px; }
.events-list { overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(20,23,30,.7); }
.event-row { display: grid; grid-template-columns: 52px minmax(0,1.25fr) minmax(150px,.8fr) auto; align-items: center; gap: 14px; min-height: 88px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.event-row:last-child { border-bottom: 0; }
.event-row > time { width: 48px; aspect-ratio: 1; display: grid; place-content: center; border: 1px solid rgba(139,197,63,.28); border-radius: 8px; background: rgba(139,197,63,.06); text-align: center; }
.event-row > time strong,
.event-row > time span { display: block; }
.event-row > time strong { color: #fff; font-size: 17px; line-height: 1; }
.event-row > time span { margin-top: 3px; color: var(--green); font-size: 10px; text-transform: uppercase; }
.event-row-main h3 { margin: 0 0 5px; font-size: 12px; font-weight: 600; }
.event-row-main p { display: flex; align-items: center; gap: 4px; margin: 0; color: rgba(255,255,255,.42); font-size: 10px; }
.event-row-playlist span,
.event-row-playlist strong,
.event-row-playlist small { display: block; }
.event-row-playlist span { color: rgba(255,255,255,.34); font-size: 10px; text-transform: uppercase; }
.event-row-playlist strong { margin: 4px 0 2px; font-size: 10px; font-weight: 600; }
.event-row-playlist small { color: rgba(255,255,255,.38); font-size: 10px; }
.event-row > a { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 10px; font-weight: 600; }
.events-empty { display: grid; justify-items: center; border: 1px dashed rgba(255,255,255,.11); border-radius: 10px; padding: 38px 20px; background: rgba(255,255,255,.018); text-align: center; }
.events-empty > i { margin-bottom: 11px; color: var(--green); font-size: 28px; }
.events-empty strong { font-size: 13px; }
.events-empty p { max-width: 360px; margin: 7px 0 12px; font-size: 10px; }
.events-empty a { color: var(--green); font-size: 10px; font-weight: 600; }
.events-empty.is-compact { padding: 26px 16px; }
.event-create { display: grid; grid-template-columns: minmax(190px,.62fr) minmax(0,1.38fr); gap: 34px; scroll-margin-top: 90px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 38px; }
.event-create-copy > span { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 50%; background: var(--green); color: #0f1117; font-size: 20px; }
.event-create-copy h2 { margin-bottom: 8px; font-size: 22px; font-weight: 600; }
.event-create-copy p { max-width: 330px; font-size: 10px; }
.event-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.event-form label { display: grid; gap: 7px; color: rgba(255,255,255,.58); font-size: 10px; font-weight: 600; }
.event-form .full { grid-column: 1 / -1; }
.event-form input,
.event-form select,
.event-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; outline: 0; background: #151820; color: #fff; font: inherit; font-size: 10px; }
.event-form input,
.event-form select { min-height: 44px; padding: 0 11px; }
.event-form textarea { resize: vertical; padding: 11px; }
.event-form input:focus,
.event-form select:focus,
.event-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(139,197,63,.08); }
.event-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.event-form-actions p { margin: 0; color: #ff73ad; font-size: 10px; }
.event-needs-playlist { border: 1px dashed rgba(139,197,63,.25); border-radius: 9px; padding: 22px; }
.event-needs-playlist strong { font-size: 13px; }
.event-needs-playlist p { margin: 5px 0 15px; font-size: 10px; }
.events-history { margin-top: 48px; }
.events-history-list { border-top: 1px solid rgba(255,255,255,.07); }
.events-history-list a { display: grid; grid-template-columns: 90px minmax(0,1fr) minmax(120px,.5fr) 18px; align-items: center; gap: 12px; min-height: 58px; border-bottom: 1px solid rgba(255,255,255,.06); color: #fff; }
.events-history-list span,
.events-history-list small { color: rgba(255,255,255,.4); font-size: 10px; }
.events-history-list strong { font-size: 10px; font-weight: 600; }

.event-detail-hero { display: grid; grid-template-columns: 82px minmax(0,1fr); align-items: center; gap: 20px; margin-bottom: 30px; }
.event-detail-hero > time { width: 82px; aspect-ratio: 1; display: grid; place-content: center; border-radius: 12px; background: var(--green); color: #0f1117; text-align: center; }
.event-detail-hero > time strong { display: block; font-size: 30px; line-height: 1; }
.event-detail-hero > time span { display: block; margin-top: 5px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.event-detail-hero h1 { margin: 0 0 10px; font-size: clamp(29px,4.5vw,48px); font-weight: 600; letter-spacing: -.05em; }
.event-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.event-detail-meta span { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.5); font-size: 10px; }
.event-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 240px; align-items: start; gap: 18px; }
.event-detail-main { min-width: 0; }
.event-playlist-card { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 14px; background: #151820; }
.event-playlist-card .playlist-hero-cover { width: 72px; }
.event-playlist-card > div:nth-child(2) > span { color: var(--green); font-size: 10px; text-transform: uppercase; }
.event-playlist-card h2 { margin: 4px 0 3px; font-size: 15px; font-weight: 600; }
.event-playlist-card p { margin: 0 0 8px; font-size: 10px; }
.event-playlist-card > div:nth-child(2) > div { display: flex; align-items: baseline; gap: 4px 10px; }
.event-playlist-card > div:nth-child(2) > div strong { font-size: 10px; }
.event-playlist-card > div:nth-child(2) > div small { color: rgba(255,255,255,.38); font-size: 10px; }
.event-setlist { margin-top: 28px; }
.event-track-list { overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; }
.event-track-list > article { display: grid; grid-template-columns: 24px minmax(0,1fr) 48px 30px; align-items: center; gap: 8px; min-height: 62px; padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.055); }
.event-track-list > article:last-child { border-bottom: 0; }
.event-track-list > article > span { color: rgba(255,255,255,.36); font-size: 10px; }
.event-track-list button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(139,197,63,.3); border-radius: 50%; background: rgba(139,197,63,.08); color: var(--green); }
.event-track-list button:disabled { opacity: .28; }
.event-notes { position: sticky; top: 76px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 16px; background: #151820; }
.event-notes > span { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.5); font-size: 10px; text-transform: uppercase; }
.event-notes > p { min-height: 82px; margin: 12px 0 16px; color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.7; }
.event-notes > div { display: grid; grid-template-columns: 24px 1fr; gap: 3px 8px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 14px; }
.event-notes > div > i { grid-row: 1 / 3; color: var(--green); font-size: 20px; }
.event-notes > div strong { font-size: 10px; }
.event-notes > div small { color: rgba(255,255,255,.38); font-size: 10px; line-height: 1.45; }
.event-not-found { display: grid; place-items: center; text-align: center; }
.event-not-found > div { display: grid; justify-items: center; }
.event-not-found i { color: var(--green); font-size: 40px; }
.event-not-found h1 { margin: 14px 0 7px; font-size: 34px; font-weight: 600; }
.event-not-found p { margin-bottom: 18px; font-size: 10px; }
.account-events-preview { margin-top: 18px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 16px; background: rgba(255,255,255,.014); }
.account-event-list { display: grid; margin-top: 10px; }
.account-event-list > a { display: grid; grid-template-columns: 46px minmax(0,1fr) 18px; align-items: center; gap: 10px; min-height: 54px; border-top: 1px solid rgba(255,255,255,.055); color: #fff; }
.account-event-list time { color: var(--green); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.account-event-list strong,
.account-event-list small { display: block; }
.account-event-list strong { font-size: 10px; font-weight: 600; }
.account-event-list small { margin-top: 3px; color: rgba(255,255,255,.4); font-size: 10px; }
.account-event-list > a > i { color: rgba(255,255,255,.34); }
.account-event-list .account-event-empty { display: flex; justify-content: space-between; color: rgba(255,255,255,.5); font-size: 10px; }

/* Modo Ensayo */
.rehearsal-mode { min-height: calc(100vh - 58px); padding: 26px 0 70px; background: radial-gradient(circle at 90% 0%, rgba(139,197,63,.08), transparent 28%), #0f1117; }
.rehearsal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; }
.rehearsal-topbar a,
.rehearsal-topbar span { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; }
.rehearsal-topbar a { color: rgba(255,255,255,.55); }
.rehearsal-topbar span { color: var(--green); font-weight: 600; }
.rehearsal-hero { display: grid; grid-template-columns: 96px minmax(0,1fr) auto; align-items: center; gap: 20px; margin-bottom: 30px; }
.rehearsal-hero .playlist-hero-cover { width: 96px; }
.rehearsal-hero p { margin: 0 0 5px; color: var(--green); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.rehearsal-hero h1 { margin: 0 0 10px; font-size: clamp(28px,4.5vw,44px); font-weight: 600; letter-spacing: -.045em; }
.rehearsal-summary { display: flex; flex-wrap: wrap; gap: 7px 14px; }
.rehearsal-summary span { color: rgba(255,255,255,.48); font-size: 10px; }
.rehearsal-hero > div:nth-child(2) > a { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--green); font-size: 10px; }
.rehearsal-list { overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; background: rgba(15,17,23,.82); }
.rehearsal-list-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.07); }
.rehearsal-list-head h2 { margin: 0; font-size: 13px; font-weight: 600; }
.rehearsal-list-head span { color: rgba(255,255,255,.34); font-size: 10px; }
.rehearsal-row { display: grid; grid-template-columns: 28px 52px minmax(180px,1fr) 64px 64px 76px 36px; align-items: center; gap: 10px; min-height: 72px; padding: 8px 13px; border-bottom: 1px solid rgba(255,255,255,.055); }
.rehearsal-row:last-child { border-bottom: 0; }
.rehearsal-row.is-playing { background: rgba(139,197,63,.045); }
.rehearsal-position { color: rgba(255,255,255,.3); font-size: 10px; font-variant-numeric: tabular-nums; }
.rehearsal-cover { width: 52px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.05); color: var(--green); }
.rehearsal-cover img { width: 100%; height: 100%; object-fit: cover; }
.rehearsal-track { min-width: 0; }
.rehearsal-track strong,
.rehearsal-track small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rehearsal-track strong { font-size: 10.5px; font-weight: 600; }
.rehearsal-track small { margin-top: 4px; color: rgba(255,255,255,.4); font-size: 10px; }
.rehearsal-stat small,
.rehearsal-stat strong { display: block; }
.rehearsal-stat small { margin-bottom: 3px; color: rgba(255,255,255,.3); font-size: 10px; text-transform: uppercase; }
.rehearsal-stat strong { font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rehearsal-row > button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(139,197,63,.25); border-radius: 50%; background: rgba(139,197,63,.06); color: var(--green); }
.rehearsal-row > button:disabled { cursor: not-allowed; opacity: .25; }

@media (min-width: 720px) {
    .library-private-nav { display: flex; }
    .library-header-shell { grid-template-columns: auto minmax(0,1fr) auto; }
    .library-user { display: none; }
    .playlist-rail { grid-auto-columns: minmax(250px, 32%); }
    .music-tools { grid-template-columns: minmax(280px, 1fr) auto; align-items: center; }
    .music-filters { justify-content: flex-end; }
    .music-track-row { grid-template-columns: 28px minmax(240px,1.6fr) minmax(100px,.8fr) 70px 46px 46px 62px minmax(132px,.8fr); }
    .music-table-head { display: grid; grid-template-columns: 28px minmax(240px,1.6fr) minmax(100px,.8fr) 70px 46px 46px 62px minmax(132px,.8fr); gap: 8px; min-height: 38px; align-items: center; padding: 0 10px; border-bottom: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.35); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
    .music-track-artist,
    .music-track-genre,
    .music-track-bpm,
    .music-track-key,
    .music-track-duration { display: block; }
    .music-track-title small { display: none; }
    .music-add-action span { display: inline; }
    .playlist-hero { grid-template-columns: 160px minmax(0,1fr); gap: 26px; }
    .playlist-hero-cover { width: 160px; font-size: 52px; }
    .setlist-table-head { display: grid; grid-template-columns: 28px 24px minmax(220px,1.45fr) minmax(110px,.9fr) 72px 48px 48px 60px 76px; gap: 6px; min-height: 38px; align-items: center; padding: 0 9px; border-bottom: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.35); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
    .setlist-row { grid-template-columns: 28px 24px minmax(220px,1.45fr) minmax(110px,.9fr) 72px 48px 48px 60px 76px; }
    .setlist-row > span:not(.setlist-index) { display: block; }
    .playlist-insights { grid-template-columns: .72fr .9fr .9fr 1.5fr; }
    .playlist-insights > div { border-bottom: 0; }
    .playlist-insights > div:nth-child(2n) { border-right: 1px solid rgba(255,255,255,.06); }
    .playlist-insights > div:last-child { border-right: 0; }
}

@media (max-width: 719px) {
    .library-event-rail a { grid-template-columns: 50px minmax(0,1fr); }
    .library-event-rail span { grid-column: 2; }
    .events-page-head { align-items: flex-start; flex-direction: column; }
    .event-row { grid-template-columns: 48px minmax(0,1fr) auto; }
    .event-row-playlist { grid-column: 2 / -1; }
    .event-create { grid-template-columns: 1fr; gap: 22px; }
    .event-form { grid-template-columns: 1fr; }
    .event-form .full { grid-column: auto; }
    .event-form-actions { align-items: stretch; flex-direction: column; }
    .event-detail-grid { grid-template-columns: 1fr; }
    .event-notes { position: static; }
    .event-playlist-card { grid-template-columns: 58px minmax(0,1fr); }
    .event-playlist-card .playlist-hero-cover { width: 58px; }
    .event-playlist-card > a { grid-column: 1 / -1; }
    .events-history-list a { grid-template-columns: 72px minmax(0,1fr) 16px; }
    .events-history-list small { display: none; }
    .rehearsal-hero { grid-template-columns: 72px minmax(0,1fr); gap: 14px; }
    .rehearsal-hero .playlist-hero-cover { width: 72px; }
    .rehearsal-hero > .btn { grid-column: 1 / -1; }
    .rehearsal-row { grid-template-columns: 24px 44px minmax(0,1fr) 34px; gap: 8px; min-height: 64px; padding: 7px 9px; }
    .rehearsal-cover { width: 44px; }
    .rehearsal-stat { display: none; }
    .rehearsal-list-head span { display: none; }
}

@media (min-width: 1120px) {
    .library-app-sync { display: inline-flex; }
    .library-header-shell { grid-template-columns: auto minmax(0,1fr) auto auto; }
    .library-user { display: inline-grid; }
    .playlist-rail { grid-template-columns: repeat(5, minmax(0,1fr)); grid-auto-flow: row; overflow: visible; }
    .playlist-tile { grid-template-columns: 76px minmax(0,1fr); }
    .playlist-cover { width: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    .playlist-tile,
    .music-track-row,
    .music-toast { transition: none; }
}

/* Directorio Musical */
.artist-directory { min-height: 70vh; padding-bottom: 72px; background: radial-gradient(circle at 4% 0%, rgba(236,0,140,.12), transparent 28%), radial-gradient(circle at 100% 8%, rgba(139,197,63,.09), transparent 30%), #0f1117; }
.artist-directory-hero { padding: 54px 0 34px; }
.artist-directory-hero .shell { max-width: 1180px; }
.artist-directory-hero h1 { max-width: 820px; margin-bottom: 15px; font-size: clamp(42px,7vw,72px); font-weight: 600; letter-spacing: -.055em; }
.artist-directory-hero p:last-child { max-width: 620px; margin: 0; color: rgba(255,255,255,.57); font-size: 15px; }
.artist-directory-shell { max-width: 1180px; }
.artist-directory-filters { display: grid; grid-template-columns: minmax(0,1fr); gap: 9px; margin-bottom: 38px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px; background: rgba(20,23,30,.84); }
.artist-directory-filters label { min-width: 0; display: grid; gap: 5px; }
.artist-directory-filters label > span { color: rgba(255,255,255,.42); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.artist-directory-filters input,
.artist-directory-filters select { width: 100%; min-height: 43px; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; padding: 0 11px; outline: 0; background: #0f1117; color: #fff; font: inherit; font-size: 10px; }
.artist-directory-filters input:focus,
.artist-directory-filters select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(139,197,63,.08); }
.artist-directory-search { position: relative; }
.artist-directory-search > i { position: absolute; bottom: 12px; left: 12px; z-index: 1; color: var(--green); font-size: 18px; }
.artist-directory-search input { padding-left: 39px; }
.artist-directory-filters .btn { min-height: 43px; align-self: end; font-size: 10px; }
.artist-directory-results-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.artist-directory-results-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.artist-directory-results-head p { margin: 0; color: rgba(255,255,255,.4); font-size: 10px; }
.artist-directory-results-head p strong { color: #fff; font-weight: 600; }
.artist-directory-results-head button { display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 0; background: transparent; color: var(--green); font: inherit; font-size: 10px; font-weight: 600; }
.artist-directory-results-head button[hidden] { display: none; }
.artist-directory-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.artist-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; background: #151820; transition: transform 180ms ease, border-color 180ms ease; }
.artist-card:hover { border-color: rgba(139,197,63,.28); transform: translateY(-2px); }
.artist-card[hidden] { display: none; }
.artist-card-photo { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, rgba(236,0,140,.42), rgba(139,197,63,.33)), #20242d; color: #fff; }
.artist-card-photo::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(to bottom, transparent, rgba(7,8,11,.68)); pointer-events: none; }
.artist-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.artist-card-photo > span { font-size: 48px; font-weight: 600; }
.artist-card-photo > em,
.artist-profile-photo > em { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 8px; background: var(--yellow); color: #0f1117; font-size: 10px; font-style: normal; font-weight: 600; }
.artist-card-body { padding: 14px; }
.artist-card-body > span { color: var(--green); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.artist-card-body h3 { overflow: hidden; margin: 5px 0 7px; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.artist-card-body h3 a { color: #fff; }
.artist-card-body p { display: flex; align-items: center; gap: 5px; overflow: hidden; margin: 0 0 13px; color: rgba(255,255,255,.42); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.artist-card-open { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 10px; font-weight: 600; }
.artist-directory-empty { min-height: 260px; display: grid; justify-items: center; align-content: center; gap: 8px; border: 1px dashed rgba(255,255,255,.1); border-radius: 10px; text-align: center; }
.artist-directory-empty[hidden] { display: none; }
.artist-directory-empty > i { color: var(--green); font-size: 34px; }
.artist-directory-empty h2 { margin: 5px 0 0; font-size: 17px; font-weight: 600; }
.artist-directory-empty p { margin: 0; font-size: 10px; }

.artist-profile { min-height: calc(100vh - 72px); padding: 28px 0 74px; background: radial-gradient(circle at 100% 0%, rgba(139,197,63,.1), transparent 30%), radial-gradient(circle at 0% 30%, rgba(236,0,140,.09), transparent 28%), #0f1117; }
.artist-profile > .shell { max-width: 1120px; }
.artist-breadcrumb { display: flex; align-items: center; gap: 7px; overflow: hidden; margin-bottom: 24px; color: rgba(255,255,255,.4); font-size: 10px; white-space: nowrap; }
.artist-breadcrumb a { color: rgba(255,255,255,.55); }
.artist-breadcrumb span { overflow: hidden; text-overflow: ellipsis; }
.artist-breadcrumb i { font-size: 12px; }
.artist-profile-grid { display: grid; gap: 26px; align-items: center; }
.artist-profile-photo { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: linear-gradient(135deg, rgba(236,0,140,.45), rgba(139,197,63,.34)), #20242d; }
.artist-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.artist-profile-photo > span { font-size: clamp(70px,14vw,130px); font-weight: 600; }
.artist-profile-copy { min-width: 0; }
.artist-profile-copy .eyebrow { margin-bottom: 10px; }
.artist-profile-copy h1 { margin-bottom: 12px; font-size: clamp(38px,6vw,68px); font-weight: 600; letter-spacing: -.055em; }
.artist-profile-location { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; color: rgba(255,255,255,.52); font-size: 10px; }
.artist-profile-location i { color: var(--green); font-size: 17px; }
.artist-profile-description { max-width: 650px; margin-bottom: 25px; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.75; }
.artist-profile-description p { margin: 0; }
.artist-whatsapp { width: 100%; max-width: 310px; background: #25D366; color: #07110a; }
.artist-contact-note { margin: 8px 0 0; color: rgba(255,255,255,.34); font-size: 10px; }
.artist-contact-unavailable { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.4); font-size: 10px; }
.artist-profile-missing { min-height: 68vh; display: grid; place-items: center; padding: 60px 0; text-align: center; }
.artist-profile-missing .shell { display: grid; justify-items: center; }
.artist-profile-missing i { color: var(--green); font-size: 42px; }
.artist-profile-missing p { margin: 13px 0 5px; color: var(--green); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.artist-profile-missing h1 { max-width: 700px; margin-bottom: 22px; font-size: clamp(34px,6vw,62px); font-weight: 600; }

@media (min-width: 640px) {
    .artist-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .artist-directory-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .artist-directory-search { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
    .artist-directory-filters { grid-template-columns: minmax(240px,1.4fr) repeat(3,minmax(135px,.7fr)) auto; align-items: end; }
    .artist-directory-search { grid-column: auto; }
    .artist-directory-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
    .artist-profile-grid { grid-template-columns: minmax(320px,.86fr) minmax(0,1.14fr); gap: 54px; }
}

@media (min-width: 1180px) {
    .artist-directory-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .artist-card,
    .artist-card-photo img { transition: none; }
}

/* Marketplace de servicios */
.service-marketplace-filters { grid-template-columns: minmax(0,1fr); }
.service-card .artist-card-photo > b { z-index: 2; }
.service-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.service-card-tags span { border: 1px solid rgba(139,197,63,.2); border-radius: 999px; padding: 4px 7px; background: rgba(139,197,63,.06); color: rgba(255,255,255,.7); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.artist-card-body .service-card-location { margin: 0 0 9px; }
.artist-card-body .service-card-description { min-height: 42px; display: block; overflow: visible; margin: 0 0 12px; color: rgba(255,255,255,.54); line-height: 1.6; white-space: normal; }
.service-card-price { display: block; margin-bottom: 12px; color: #fff; font-size: 11px; font-weight: 600; }

.service-profile-hero { overflow: hidden; margin-bottom: 28px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: #151820; }
.service-cover { position: relative; height: clamp(190px,32vw,360px); overflow: hidden; background: radial-gradient(circle at 20% 10%, rgba(236,0,140,.55), transparent 44%), radial-gradient(circle at 85% 80%, rgba(139,197,63,.45), transparent 44%), #181b23; }
.service-cover img { width: 100%; height: 100%; object-fit: cover; }
.service-cover > span { position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(9,10,14,.9)); }
.service-profile-identity { position: relative; display: grid; gap: 14px; padding: 0 18px 22px; }
.service-profile-avatar { width: 92px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; margin-top: -46px; z-index: 1; border: 4px solid #151820; border-radius: 18px; background: linear-gradient(135deg,var(--pink),var(--green)); font-size: 36px; font-weight: 600; }
.service-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.service-profile-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--green); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.service-verified,.service-featured { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 7px; }
.service-verified { background: rgba(24,119,242,.14); color: #7ab6ff; }
.service-verified-certificate { gap: 7px; border: 1px solid rgba(122,182,255,.42); padding: 7px 10px; background: linear-gradient(180deg, rgba(24,119,242,.26), rgba(24,119,242,.13)); color: #d9ebff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); letter-spacing: .01em; text-transform: none; }
.service-featured { background: var(--yellow); color: #0f1117; }
.verified-badge { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #1877F2; color: #fff; vertical-align: middle; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.verified-badge .ti { color: currentColor; stroke-width: 3; }
.verified-badge.is-card { position: absolute; right: 10px; bottom: 10px; width: 20px; height: 20px; font-size: 14px; }
.verified-badge.is-inline { width: 16px; height: 16px; margin-left: 5px; font-size: 11px; }
.verified-badge.is-kicker { width: 18px; height: 18px; font-size: 12px; box-shadow: none; }
.verified-badge.is-name { width: 22px; height: 22px; margin-left: 8px; transform: translateY(-.12em); font-size: 14px; box-shadow: 0 0 0 2px rgba(15,17,23,.8), 0 0 0 3px rgba(122,182,255,.22); }
.verified-admin-mini { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; border-radius: 999px; padding: 3px 6px; background: rgba(24,119,242,.14); color: #7ab6ff; font-size: 10px; font-weight: 700; }
.service-verification-note { max-width: 600px; margin: -4px 0 14px; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.65; }
.service-verification-note strong { color: #7ab6ff; }
.service-verification-note-below { max-width: none; margin: -4px 0 14px; border: 1px solid rgba(122,182,255,.16); border-radius: 10px; padding: 10px 12px; background: rgba(24,119,242,.065); }
.service-hero-description { max-width: 640px; margin: 0 0 18px; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.7; text-wrap: pretty; }
.service-profile-title h1 { margin: 0 0 7px; font-size: clamp(28px,5vw,48px); font-weight: 600; letter-spacing: -.045em; }
.service-profile-title > p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: rgba(255,255,255,.5); font-size: 10px; }
.service-profile-title > p i { color: var(--green); font-size: 15px; }
.service-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.service-profile-actions .btn { width: auto; min-height: 42px; }
.service-profile-actions [data-share-status] { color: var(--green); font-size: 10px; }
.service-share { border: 1px solid rgba(255,255,255,.12); background: #1b1e26; color: #fff; }
.service-profile-layout { display: grid; gap: 20px; }
.service-profile-main { display: grid; gap: 18px; }
.service-profile-section,.service-profile-summary { border: 1px solid rgba(255,255,255,.075); border-radius: 12px; padding: clamp(18px,3vw,28px); background: rgba(21,24,32,.78); }
.service-profile-section h2 { margin: 5px 0 14px; font-size: clamp(19px,3vw,26px); font-weight: 600; }
.service-profile-description { max-width: 780px; margin: 0; color: rgba(255,255,255,.65); font-size: 11px; line-height: 1.8; }
.service-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.service-gallery a,
.service-gallery button { overflow: hidden; aspect-ratio: 1; border: 0; border-radius: 8px; padding: 0; background: #0f1117; cursor: pointer; }
.service-gallery img { width: 100%; height: 100%; object-fit: cover; }
.service-gallery button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.service-videos { display: grid; gap: 10px; }
.service-videos iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 8px; background: #090a0d; }
.service-videos > a { min-height: 80px; display: grid; place-items: center; border-radius: 8px; background: #0f1117; color: var(--green); font-size: 10px; }
.service-audio audio { width: 100%; color-scheme: dark; }
.service-profile-summary { align-self: start; }
.service-profile-summary > strong { display: block; margin: 7px 0 20px; font-size: 20px; font-weight: 600; }
.service-profile-summary dl { margin: 0 0 20px; }
.service-profile-summary dl div { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255,255,255,.07); padding: 11px 0; font-size: 10px; }
.service-profile-summary dt { color: rgba(255,255,255,.4); }
.service-profile-summary dd { margin: 0; color: #fff; text-align: right; }
.service-profile-summary .btn { max-width: none; }
.service-profile-summary small { display: block; margin-top: 9px; color: rgba(255,255,255,.36); font-size: 10px; text-align: center; }

.service-landing {
    min-height: calc(100vh - 72px);
    padding: 28px 0 74px;
    background:
        radial-gradient(circle at 6% 0%, rgba(236,0,140,.13), transparent 30%),
        radial-gradient(circle at 100% 4%, rgba(139,197,63,.12), transparent 28%),
        #0f1117;
}

.service-landing-shell {
    max-width: 1180px;
}

.service-landing-breadcrumb {
    margin-bottom: 16px;
}

.service-landing-hero {
    position: relative;
    min-height: min(560px, calc(100vh - 140px));
    display: flex;
    align-items: end;
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    padding: clamp(24px, 4.5vw, 44px);
    background:
        radial-gradient(circle at 20% 20%, rgba(236,0,140,.44), transparent 34%),
        radial-gradient(circle at 82% 12%, rgba(139,197,63,.32), transparent 30%),
        #151820;
}

.service-landing-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-landing-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7,8,12,.94) 0%, rgba(7,8,12,.74) 42%, rgba(7,8,12,.18) 78%),
        linear-gradient(0deg, rgba(7,8,12,.92), rgba(7,8,12,.04) 52%);
}

.service-landing-copy {
    position: relative;
    z-index: 2;
    max-width: 780px;
}

.service-landing-copy h1 {
    max-width: 760px;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(42px, 7vw, 74px);
    font-weight: 600;
    line-height: .96;
    letter-spacing: -.04em;
}

.service-landing-rating,
.service-landing-facts,
.service-genre-pills,
.service-landing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.service-landing-rating {
    margin-bottom: 16px;
}

.service-landing-rating span {
    color: var(--yellow);
    letter-spacing: .04em;
}

.service-landing-rating strong,
.service-landing-rating a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.service-landing-rating strong .ti {
    color: var(--green);
    font-size: 16px;
}

.service-landing-rating a {
    color: rgba(255,255,255,.76);
}

.service-landing-facts {
    margin-bottom: 14px;
}

.service-landing-facts span,
.service-genre-pills span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.84);
    font-size: 13px;
    font-weight: 500;
}

.service-landing-facts .ti {
    color: var(--green);
    font-size: 18px;
}

.service-genre-pills {
    margin-bottom: 24px;
}

.service-genre-pills span {
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    padding: 8px 11px;
    background: rgba(15,17,23,.42);
    font-size: 11px;
}

.service-genre-pills .ti {
    color: var(--pink);
    font-size: 15px;
}

.service-landing-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 22px;
}

.service-landing-price span,
.service-landing-price em {
    color: rgba(255,255,255,.76);
    font-size: 13px;
    font-style: normal;
}

.service-landing-price strong {
    color: var(--green);
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.035em;
}

.service-landing-actions .btn {
    min-width: 180px;
    min-height: 52px;
}

.service-main-whatsapp {
    background: #25D366;
}

.service-share-status {
    display: block;
    min-height: 16px;
    margin-top: 10px;
    color: var(--green);
    font-size: 10px;
}

.service-proof-strip {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 14px;
    background: rgba(21,24,32,.72);
}

.service-proof-strip article {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 10px;
}

.service-proof-strip article > i {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(139,197,63,.1);
    color: var(--green);
    font-size: 22px;
}

.service-proof-strip strong,
.service-proof-strip span {
    display: block;
}

.service-proof-strip strong {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.service-proof-strip span {
    margin-top: 2px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
}

.service-landing-grid,
.service-commerce-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.service-landing-panel,
.service-landing-reviews {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: clamp(18px, 3vw, 28px);
    background:
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.018)),
        #151820;
}

.service-landing-panel h2,
.service-landing-reviews h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(19px, 3vw, 25px);
    font-weight: 600;
    letter-spacing: -.025em;
}

.service-seo-about {
    margin-bottom: 14px;
}

.service-seo-about p,
.service-seo-about details div,
.service-faq-list p {
    max-width: 78ch;
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: 12px;
    line-height: 1.85;
    text-wrap: pretty;
}

.service-seo-about details {
    margin-top: 12px;
}

.service-seo-about summary,
.service-faq-list summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--green);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.service-seo-about summary::-webkit-details-marker,
.service-faq-list summary::-webkit-details-marker {
    display: none;
}

.service-seo-about summary::after,
.service-faq-list summary::after {
    content: "+";
    font-weight: 700;
}

.service-seo-about details[open] summary::after,
.service-faq-list details[open] summary::after {
    content: "−";
}

.service-seo-about details div {
    margin-top: 10px;
}

.service-faq-section {
    margin: 14px 0;
}

.service-faq-list {
    display: grid;
    gap: 8px;
}

.service-faq-list details {
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 10px;
    padding: 13px 14px;
    background: rgba(255,255,255,.025);
}

.service-faq-list summary {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 12px;
}

.service-faq-list p {
    margin-top: 9px;
    font-size: 11px;
}

.service-video-panel iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 10px;
    background: #090a0d;
}

.service-included-list {
    display: grid;
    gap: 12px;
}

.service-included-list span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
}

.service-included-list .ti {
    color: var(--green);
    font-size: 18px;
}

.service-section-empty {
    max-width: 58ch;
    margin: 0;
    color: rgba(255,255,255,.54);
    font-size: 11px;
    line-height: 1.7;
}

.service-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.service-panel-head h2,
.service-panel-head p {
    margin: 0;
}

.service-panel-head p {
    margin-top: 4px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
}

.service-panel-head a,
.service-panel-head button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--green);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.service-landing-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-landing-gallery a {
    aspect-ratio: 1;
}

.service-landing-gallery button {
    aspect-ratio: 1;
}

.service-landing-gallery .is-extra {
    display: none;
}

.service-gallery-lightbox {
    position: fixed;
    inset: 0;
    width: min(94vw, 1060px);
    max-height: 92vh;
    margin: auto;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    padding: 0;
    background: rgba(10,12,17,.98);
    color: #fff;
    overflow: hidden;
}

.service-gallery-lightbox::backdrop {
    background: rgba(3,4,8,.78);
    backdrop-filter: blur(8px);
}

.service-gallery-lightbox[open] {
    display: grid;
    grid-template-columns: 56px minmax(0,1fr) 56px;
    align-items: center;
}

.service-gallery-lightbox figure {
    min-width: 0;
    margin: 0;
    padding: clamp(16px, 3vw, 28px) 0;
}

.service-gallery-lightbox img {
    width: 100%;
    max-height: 76vh;
    display: block;
    object-fit: contain;
    border-radius: 12px;
    background: #050609;
}

.service-gallery-lightbox figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
}

.service-gallery-lightbox figcaption small {
    color: rgba(255,255,255,.42);
    font-size: 10px;
}

.service-gallery-close,
.service-gallery-nav {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.055);
    color: #fff;
    cursor: pointer;
}

.service-gallery-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.service-gallery-nav {
    width: 42px;
    height: 42px;
    justify-self: center;
    border-radius: 50%;
}

.service-gallery-close .ti,
.service-gallery-nav .ti {
    font-size: 20px;
}

.service-music-genres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.service-music-genres span {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    text-align: center;
}

.service-music-genres .ti {
    color: var(--pink);
    font-size: 30px;
}

.service-commercial-panel dl {
    display: grid;
    gap: 4px;
    margin: 0 0 16px;
}

.service-commercial-panel dl div {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
    gap: 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 10px 0;
}

.service-commercial-panel dt,
.service-commercial-panel dd {
    margin: 0;
    font-size: 12px;
}

.service-commercial-panel dt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.55);
}

.service-commercial-panel dt .ti {
    color: var(--green);
    font-size: 16px;
}

.service-commercial-panel dd {
    color: #fff;
    font-weight: 600;
    text-align: right;
}

.service-commercial-panel small,
.service-availability-card small {
    color: rgba(255,255,255,.38);
    font-size: 10px;
}

.service-availability-card {
    align-self: stretch;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.service-availability-card > i {
    color: var(--yellow);
    font-size: 32px;
}

.service-availability-card h2 {
    margin: 10px 0 4px;
}

.service-availability-card p {
    margin: 0 0 14px;
    color: rgba(255,255,255,.65);
}

.service-availability-card input {
    width: 100%;
    min-height: 46px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    padding: 0 12px;
    background: rgba(15,17,23,.8);
    color: #fff;
    color-scheme: dark;
    font: inherit;
    font-size: 12px;
}

.service-availability-card .btn {
    max-width: none;
}

.service-landing-reviews {
    margin: 14px 0;
}

.service-reviews-grid {
    display: grid;
    gap: 14px;
}

.service-rating-card,
.service-review-card {
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 10px;
    padding: 18px;
    background: rgba(255,255,255,.035);
}

.service-rating-card > strong {
    display: block;
    color: var(--yellow);
    font-size: 42px;
    line-height: 1;
    letter-spacing: -.05em;
}

.service-rating-card > span {
    display: block;
    margin: 6px 0 2px;
    color: var(--yellow);
}

.service-rating-card small {
    display: block;
    margin-bottom: 14px;
    color: rgba(255,255,255,.62);
}

.service-rating-card > p {
    margin: 8px 0 0;
    color: rgba(255,255,255,.56);
    font-size: 10px;
    line-height: 1.6;
}

.service-rating-card div {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr) 24px;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.6);
    font-size: 10px;
}

.service-rating-card div span {
    height: 4px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255,255,255,.12);
}

.service-rating-card div i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--yellow);
}

.service-review-card header {
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    gap: 9px;
    align-items: center;
    margin-bottom: 12px;
}

.service-review-card header strong,
.service-review-card header small {
    display: block;
}

.service-review-card header small {
    margin-top: 2px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
}

.service-review-card > b {
    display: block;
    color: var(--yellow);
    margin-bottom: 12px;
}

.service-review-card h3 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
}

.service-review-card p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 11px;
    line-height: 1.7;
}

.service-review-compose {
    min-height: 100%;
    border-color: rgba(139,197,63,.18);
    background: linear-gradient(180deg, rgba(139,197,63,.06), rgba(255,255,255,.03));
}

.service-final-cta {
    position: relative;
    display: grid;
    gap: 20px;
    overflow: hidden;
    border: 1px solid rgba(236,0,140,.24);
    border-radius: 14px;
    padding: clamp(24px, 4vw, 38px);
    background:
        linear-gradient(90deg, rgba(15,17,23,.96), rgba(15,17,23,.68)),
        radial-gradient(circle at 90% 20%, rgba(236,0,140,.5), transparent 38%),
        #151820;
}

.service-final-cta > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .22;
}

.service-final-cta > div,
.service-final-cta > a {
    position: relative;
    z-index: 1;
}

.service-final-cta h2 {
    max-width: 760px;
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 600;
    letter-spacing: -.04em;
}

.service-final-cta p {
    max-width: 640px;
    color: rgba(255,255,255,.7);
}

.service-cta-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.service-cta-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.7);
    font-size: 12px;
}

.service-cta-benefits .ti {
    color: var(--green);
    font-size: 18px;
}

@media (min-width: 700px) {
    .service-proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-music-genres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .service-reviews-grid { grid-template-columns: 260px repeat(2, minmax(0, 1fr)); }
    .service-review-compose { grid-column: 1 / -1; }
    .service-final-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .service-final-cta > a { min-width: 280px; justify-self: end; }
}

@media (min-width: 980px) {
    .service-proof-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .service-proof-strip article:not(:last-child) { border-right: 1px solid rgba(255,255,255,.06); }
    .service-landing-grid { grid-template-columns: minmax(0, 1.12fr) minmax(260px, .66fr) minmax(300px, .86fr); }
    .service-video-panel { grid-column: span 1; }
    .service-commerce-grid { grid-template-columns: minmax(260px,.8fr) minmax(0,1.1fr) minmax(260px,.72fr); align-items: stretch; }
    .service-music-genres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .service-reviews-grid { grid-template-columns: 280px repeat(3, minmax(0, 1fr)); }
    .service-review-compose { grid-column: auto; }
}

@media (max-width: 699px) {
    .service-landing { padding-top: 12px; }
    .service-landing-breadcrumb { margin-bottom: 10px; }
    .service-landing-hero {
        min-height: 430px;
        align-items: end;
        margin-bottom: 12px;
        border-radius: 12px;
        padding: 18px;
    }
    .service-landing-hero-overlay { background: linear-gradient(0deg, rgba(7,8,12,.96) 0%, rgba(7,8,12,.72) 44%, rgba(7,8,12,.14) 100%); }
    .service-profile-kicker .service-featured,
    .service-landing-rating,
    .service-landing-facts span:not(:first-child),
    .service-genre-pills,
    .service-landing-price,
    .service-landing-actions a[href="#video"] { display: none; }
    .service-profile-kicker {
        margin-bottom: 8px;
        text-transform: none;
    }
    .service-verified {
        padding: 5px 8px;
        font-size: 10px;
    }
    .service-verified-certificate {
        padding: 6px 9px;
        font-size: 10px;
    }
    .service-landing-copy h1 {
        margin-bottom: 8px;
        font-size: 34px;
        line-height: 1;
        letter-spacing: -.035em;
    }
    .verified-badge.is-name { width: 19px; height: 19px; margin-left: 6px; font-size: 12px; }
    .service-verification-note {
        margin: 0 0 10px;
        font-size: 10px;
    }
    .service-hero-description {
        margin-bottom: 13px;
        font-size: 11px;
        line-height: 1.55;
    }
    .service-landing-facts {
        margin: 0 0 14px;
    }
    .service-landing-facts span {
        font-size: 12px;
    }
    .service-landing-actions {
        display: grid;
        gap: 8px;
    }
    .service-landing-actions .btn { width: 100%; min-width: 0; }
    .service-quick-facts {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 10px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .service-quick-facts article {
        min-width: 190px;
        scroll-snap-align: start;
        padding: 9px;
    }
    .service-proof-strip article > i {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }
    .service-proof-strip strong {
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .service-proof-strip span {
        font-size: 10px;
    }
    .service-landing-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-gallery-lightbox[open] { grid-template-columns: 1fr; padding: 54px 14px 16px; }
    .service-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); }
    .service-gallery-nav.is-prev { left: 12px; }
    .service-gallery-nav.is-next { right: 12px; }
    .service-gallery-lightbox figure { padding: 0 36px; }
    .service-commercial-panel dl div { grid-template-columns: 1fr; gap: 4px; }
    .service-commercial-panel dd { text-align: left; }
}

.service-manager,.service-form-page { min-height: 72vh; padding: 52px 0 80px; background: radial-gradient(circle at 0 0,rgba(236,0,140,.11),transparent 28%),radial-gradient(circle at 100% 5%,rgba(139,197,63,.09),transparent 28%),#0f1117; }
.service-manager-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.service-manager-head h1,.service-form-page h1 { margin: 5px 0 8px; font-size: clamp(34px,6vw,58px); font-weight: 600; letter-spacing: -.05em; }
.service-manager-head p:last-child,.service-form-page header > p:last-child { margin: 0; color: rgba(255,255,255,.5); font-size: 11px; }
.service-manager-notice { display: flex; gap: 12px; margin-bottom: 18px; border: 1px solid rgba(139,197,63,.22); border-radius: 9px; padding: 14px; background: rgba(139,197,63,.06); }
.service-manager-notice > i { color: var(--green); font-size: 22px; }
.service-manager-notice strong,.service-manager-notice p { display: block; margin: 0; font-size: 10px; }
.service-manager-notice p { margin-top: 3px; color: rgba(255,255,255,.45); font-size: 10px; }
.service-manager-grid { display: grid; gap: 10px; }
.service-manager-card { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px; background: #151820; }
.service-manager-thumb { width: 64px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: linear-gradient(135deg,var(--pink),var(--green)); font-size: 22px; font-weight: 600; }
.service-manager-thumb img { width: 100%; height: 100%; object-fit: cover; }
.service-manager-card h2 { margin: 5px 0 3px; font-size: 13px; font-weight: 600; }
.service-manager-card p { margin: 0; font-size: 10px; }
.service-status { border-radius: 999px; padding: 3px 6px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.65); font-size: 10px; text-transform: uppercase; }
.service-status.is-active,.service-status.is-approved { color: var(--green); }.service-status.is-verified { color: #7ab6ff; }.service-status.is-pending_review { color: var(--yellow); }.service-status.is-suspended,.service-status.is-rejected { color: #ff73ad; }
.service-manager-metrics { display: flex; gap: 12px; margin-top: 9px; color: rgba(255,255,255,.42); font-size: 10px; }
.service-manager-card > .btn,.service-review-note,.service-manager-actions { grid-column: 1/-1; justify-self: start; }
.service-manager-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.service-review-note { color: rgba(255,255,255,.35); font-size: 10px; }
.service-manager-empty { min-height: 340px; display: grid; justify-items: center; align-content: center; text-align: center; border: 1px dashed rgba(255,255,255,.11); border-radius: 12px; }
.service-manager-empty > i { color: var(--green); font-size: 36px; }.service-manager-empty h2 { margin: 12px 0 7px; font-size: 20px; font-weight: 600; }.service-manager-empty p { max-width: 420px; margin: 0 0 16px; font-size: 10px; }
.service-form-shell { max-width: 940px; }.service-form-page header { margin-bottom: 28px; }.service-form-page header > a { color: rgba(255,255,255,.6); font-size: 10px; }
.service-form { display: grid; gap: 12px; }.service-form > section { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: clamp(18px,3vw,28px); background: #151820; }
.service-form > section > div { grid-column: 1/-1; display: flex; align-items: center; gap: 10px; }.service-form > section > div span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(139,197,63,.1); color: var(--green); font-size: 10px; }.service-form h2 { margin: 0; font-size: 16px; font-weight: 600; }
.service-form label { display: grid; gap: 6px; color: rgba(255,255,255,.58); font-size: 10px; }.service-form .wide { grid-column: 1/-1; }
.service-form input,.service-form select,.service-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; outline: 0; padding: 11px; background: #0f1117; color: #fff; font: inherit; font-size: 10px; }.service-form input,.service-form select { min-height: 44px; }.service-form textarea { resize: vertical; }.service-form input:focus,.service-form select:focus,.service-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(139,197,63,.08); }
.phone-field { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 8px; }
.phone-field select { padding-right: 8px; font-size: 11px; }
.upload-card { position: relative; min-height: 126px; align-content: start; border: 1px dashed rgba(139,197,63,.36); border-radius: 12px; padding: 16px; background: radial-gradient(circle at 100% 0,rgba(139,197,63,.08),transparent 38%),rgba(255,255,255,.025); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.upload-card:hover { border-color: rgba(139,197,63,.8); background: radial-gradient(circle at 100% 0,rgba(139,197,63,.14),transparent 40%),rgba(255,255,255,.035); transform: translateY(-1px); }
.upload-card::before { content: ""; width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 10px; background-color: rgba(139,197,63,.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238bc53f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M9.5 13.5l2.5 -2.5l2.5 2.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 22px 22px; }
.upload-card > span { color: #fff; font-size: 12px; font-weight: 600; }
.upload-card small { max-width: 520px; color: rgba(255,255,255,.44); line-height: 1.55; }
.upload-card input[type=file] { min-height: auto; margin-top: 9px; border: 0; padding: 0; background: transparent; color: rgba(255,255,255,.7); }
.upload-card input[type=file]::file-selector-button { margin-right: 10px; border: 0; border-radius: 999px; padding: 9px 12px; background: var(--green); color: #0f1117; font: inherit; font-weight: 700; cursor: pointer; }
.upload-card.is-filled { border-style: solid; border-color: rgba(139,197,63,.72); }
.upload-current { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: rgba(255,255,255,.5); font-size: 10px; }
.upload-current img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.upload-current a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.service-form.is-submitting { cursor: progress; }
.service-form.is-submitting input,
.service-form.is-submitting select,
.service-form.is-submitting textarea,
.service-form.is-submitting .upload-card { pointer-events: none; opacity: .72; }
.service-form.is-submitting button[type=submit] { opacity: .9; cursor: wait; }
.service-form.is-submitting button[type=submit] .ti-loader-2 { animation: mock-payment-spin .75s linear infinite; }
.service-form-status { min-height: 20px; margin: -2px 4px 0; color: var(--green); font-size: 10px; }
.service-form footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 4px; }.service-form footer > div { display: flex; align-items: center; gap: 10px; }.service-form footer i { color: var(--green); font-size: 22px; }.service-form footer strong,.service-form footer span { display: block; font-size: 10px; }.service-form footer span { margin-top: 3px; color: rgba(255,255,255,.42); font-size: 10px; }.service-form-error { margin-bottom: 12px; color: #ff73ad; font-size: 10px; }

@media (min-width: 700px) { .service-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); }.service-manager-card { grid-template-columns: 72px minmax(0,1fr) auto; }.service-manager-card > .btn,.service-review-note,.service-manager-actions { grid-column: auto; justify-self: end; } }
@media (min-width: 900px) { .service-marketplace-filters { grid-template-columns: minmax(240px,1.5fr) repeat(5,minmax(115px,.7fr)) auto; }.service-profile-identity { grid-template-columns: auto minmax(0,1fr) auto; align-items: end; padding: 0 24px 24px; }.service-profile-layout { grid-template-columns: minmax(0,1fr) 300px; }.service-profile-summary { position: sticky; top: 88px; }.service-videos { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 639px) { .service-manager-head,.service-form footer { align-items: stretch; flex-direction: column; }.service-form > section { grid-template-columns: minmax(0,1fr); }.service-form .wide,.service-form > section > div { grid-column: auto; } }

@media (max-width: 639px) {
    .mobile-filter-form { display: block; margin-bottom: 20px; border: 0; padding: 0; background: transparent; }
    .mobile-filter-primary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: end; }
    .mobile-filter-primary > label { position: relative; display: block; }
    .mobile-filter-primary > label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .mobile-filter-primary input { min-height: 46px; }
    .mobile-filter-toggle { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; padding: 0 12px; background: #191c24; color: #fff; font: inherit; font-size: 10px; font-weight: 700; white-space: nowrap; }
    .mobile-filter-toggle i { color: var(--green); font-size: 17px; }
    .mobile-filter-toggle[aria-expanded="true"] { border-color: rgba(139,197,63,.5); background: rgba(139,197,63,.1); }
    .mobile-filter-panel { display: none; margin-top: 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 12px; background: #171a22; }
    .mobile-filter-form.is-filter-open .mobile-filter-panel { display: grid; gap: 10px; }
    .mobile-filter-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; margin-top: 2px; }
    .mobile-filter-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0 10px; font-size: 10px; }
    .mobile-filter-clear { display: inline-flex; }
    .lyrics-filters label { font-size: 10px; }
    .lyrics-filters input,.lyrics-filters select { border-radius: 8px; padding: .75rem .85rem; }
    .lyrics-section-head { margin-top: 1.4rem; }
    .lyrics-section-head h2 { font-size: 1.65rem; letter-spacing: -.04em; }
    .artist-directory-hero { padding: 36px 0 22px; }
    .artist-directory-hero h1 { margin-bottom: 10px; font-size: 40px; letter-spacing: -.04em; line-height: 1.02; }
    .artist-directory-hero p:last-child { font-size: 13px; line-height: 1.55; }
    .artist-directory-search > i { bottom: 13px; }
    .artist-directory-results-head { margin-top: 24px; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
    .mobile-filter-panel { animation: mobile-filter-reveal 180ms cubic-bezier(.22,1,.36,1); }
}
@keyframes mobile-filter-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* Contenido institucional y eventos públicos */
.institutional-page,.public-event { min-height: 70vh; padding: 58px 0 82px; background: radial-gradient(circle at 0 0,rgba(236,0,140,.1),transparent 28%),radial-gradient(circle at 100% 6%,rgba(139,197,63,.08),transparent 28%),#0f1117; }
.institutional-shell { max-width: 980px; }.institutional-page header { max-width: 760px; margin-bottom: 42px; }.institutional-page h1 { margin: 7px 0 16px; font-size: clamp(38px,7vw,68px); font-weight: 600; letter-spacing: -.055em; line-height: 1.03; }.institutional-page header > p:last-child { color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.75; }
.institutional-grid { display: grid; gap: 10px; }.institutional-grid section { border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: clamp(18px,3vw,28px); background: rgba(21,24,32,.78); }.institutional-grid h2 { margin: 0 0 9px; font-size: 17px; font-weight: 600; }.institutional-grid p { margin: 0 0 12px; color: rgba(255,255,255,.58); font-size: 10px; line-height: 1.75; }.institutional-updated { margin-top: 18px; color: rgba(255,255,255,.35); font-size: 10px; }
.public-event > .shell { max-width: 1050px; }.public-event-hero { position: relative; min-height: 390px; display: flex; align-items: end; overflow: hidden; margin-bottom: 18px; border-radius: 14px; padding: clamp(22px,5vw,48px); background: linear-gradient(135deg,rgba(236,0,140,.4),rgba(139,197,63,.3)),#181b23; }.public-event-hero::after { content:""; position:absolute; inset:30% 0 0; background:linear-gradient(transparent,rgba(8,9,12,.92)); }.public-event-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.public-event-hero > div { position:relative; z-index:1; }.public-event-hero h1 { max-width:780px; margin:7px 0 14px; font-size:clamp(36px,7vw,70px); font-weight:600; letter-spacing:-.055em; }.public-event-hero div > p:not(.eyebrow) { display:flex; align-items:center; gap:6px; margin:5px 0; color:rgba(255,255,255,.7); font-size:10px; }.public-event-hero div > p i { color:var(--green); font-size:16px; }
.home-seo-faq .faq-list { max-width:900px; }
@media (min-width:760px) { .institutional-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width: 768px) { .footer-grid { grid-template-columns: minmax(260px,1fr) auto auto; } }

/* Reputación y reviews */
.reputation-inline { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 14px; font-size: 10px; }.reputation-inline > span { color:var(--yellow); letter-spacing:.04em; }.reputation-inline strong { color:#fff; font-size:10px; }.reputation-inline a { color:rgba(255,255,255,.52); text-decoration:underline; text-underline-offset:3px; }.reputation-inline em { border-radius:999px; padding:4px 7px; background:rgba(139,197,63,.1); color:var(--green); font-size: 10px; font-style:normal; font-weight:600; text-transform:uppercase; }
.card-reputation { display:flex; align-items:center; gap:4px; margin:4px 0 7px; }.card-reputation span { color:var(--yellow); font-size:11px; }.card-reputation strong { color:#fff; font-size: 10px; }.card-reputation small { color:rgba(255,255,255,.38); font-size: 10px; }
.reviews-section { padding:56px 0 72px; border-top:1px solid rgba(255,255,255,.07); background:#0f1117; scroll-margin-top:80px; }.service-reviews { margin-top:22px; border:1px solid rgba(255,255,255,.075); border-radius:12px; padding:clamp(20px,3vw,30px); background:rgba(21,24,32,.78); }.reviews-shell { max-width:1120px; }.reviews-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }.reviews-heading h2 { margin:5px 0 7px; font-size:clamp(24px,4vw,36px); font-weight:600; letter-spacing:-.035em; }.reviews-heading p:last-child { margin:0; color:rgba(255,255,255,.45); font-size: 10px; }.reviews-heading > strong { display:grid; justify-items:end; color:var(--yellow); font-size:15px; letter-spacing:.05em; }.reviews-heading > strong span { color:#fff; font-size:30px; letter-spacing:-.04em; }.reviews-layout { display:grid; gap:18px; }.reviews-feed { min-width:0; }.reviews-sort { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }.reviews-sort a { border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:7px 10px; color:rgba(255,255,255,.5); font-size: 10px; }.reviews-sort a.is-active { border-color:rgba(139,197,63,.35); background:rgba(139,197,63,.08); color:var(--green); }
.review-item { border:1px solid rgba(255,255,255,.075); border-radius:10px; padding:18px; background:#151820; }.review-item + .review-item { margin-top:9px; }.review-item header { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:9px; }.review-avatar { width:36px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--pink),var(--green)); font-size:12px; font-weight:600; }.review-item header strong,.review-item header small { display:block; }.review-item header strong { font-size: 10px; }.review-item header small { margin-top:2px; color:rgba(255,255,255,.35); font-size: 10px; }.review-item header b { color:var(--yellow); font-size:10px; letter-spacing:.03em; }.review-item h3 { margin:14px 0 6px; font-size:12px; font-weight:600; }.review-item > p { margin:0; color:rgba(255,255,255,.6); font-size: 10px; line-height:1.7; }.review-verified { display:inline-flex; align-items:center; gap:4px; margin-top:12px; color:var(--green); font-size: 10px; font-weight:600; }.review-verified i { font-size:13px; }
.reviews-empty { min-height:190px; display:grid; justify-items:center; align-content:center; border:1px dashed rgba(255,255,255,.1); border-radius:10px; padding:24px; text-align:center; }.reviews-empty > i { color:var(--green); font-size:28px; }.reviews-empty strong { margin:9px 0 4px; font-size:12px; }.reviews-empty p { margin:0; font-size: 10px; }
.review-compose { align-self:start; border:1px solid rgba(255,255,255,.08); border-radius:11px; padding:20px; background:#181b23; }.review-compose > i { color:var(--green); font-size:26px; }.review-compose h3 { margin:0 0 7px; font-size:16px; font-weight:600; }.review-compose > i + h3 { margin-top:10px; }.review-compose > p { margin:0 0 15px; font-size: 10px; }.review-compose form { display:grid; gap:12px; }.review-compose form > label { display:grid; gap:6px; color:rgba(255,255,255,.55); font-size: 10px; }.review-compose input[type="text"],.review-compose input:not([type]),.review-compose textarea { width:100%; border:1px solid rgba(255,255,255,.1); border-radius:7px; padding:10px; outline:0; background:#0f1117; color:#fff; font:inherit; font-size: 10px; }.review-compose textarea { resize:vertical; }.review-compose input:focus,.review-compose textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(139,197,63,.08); }.review-rating { display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:2px; margin:0; border:0; padding:0; }.review-rating legend { margin-bottom:5px; color:rgba(255,255,255,.55); font-size: 10px; }.review-rating input { position:absolute; opacity:0; pointer-events:none; }.review-rating label { color:rgba(255,255,255,.16); font-size:25px; cursor:pointer; }.review-rating label:hover,.review-rating label:hover ~ label,.review-rating input:checked ~ label { color:var(--yellow); }.review-form-status { min-height:14px; color:var(--green); font-size: 10px; line-height:1.5; }.review-compose form.is-saved { opacity:.82; }
.reviews-admin { min-height:75vh; padding:52px 0 80px; background:radial-gradient(circle at 0 0,rgba(236,0,140,.1),transparent 28%),#0f1117; }.reviews-admin-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:28px; }.reviews-admin-head h1 { margin:5px 0 7px; font-size:clamp(34px,6vw,56px); font-weight:600; letter-spacing:-.05em; }.reviews-admin-head p:last-child { margin:0; font-size: 10px; }.reviews-admin-head > a { color:var(--green); font-size: 10px; }.reviews-admin-list { display:grid; gap:10px; }.reviews-admin-list > article { display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:18px; align-items:start; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:18px; background:#151820; }.reviews-admin-rating span,.reviews-admin-rating b { display:block; }.reviews-admin-rating span { color:var(--yellow); font-size:13px; }.reviews-admin-rating b { margin-top:5px; font-size: 10px; }.reviews-admin-list article > div:nth-child(2) > span,.reviews-admin-list small { color:rgba(255,255,255,.38); font-size: 10px; }.reviews-admin-list h2 { margin:5px 0 7px; font-size:13px; font-weight:600; }.reviews-admin-list p { margin:0 0 10px; color:rgba(255,255,255,.6); font-size: 10px; line-height:1.65; }.reviews-admin-actions { display:grid; gap:6px; min-width:100px; }.reviews-admin-actions button { min-height:34px; border:1px solid rgba(255,255,255,.1); border-radius:7px; background:#1b1e26; color:#fff; font:inherit; font-size: 10px; }.reviews-admin-actions .btn { background:var(--green); color:#0f1117; }.reviews-admin-actions span { color:#ff73ad; font-size: 10px; }.reviews-admin-denied { min-height:60vh; display:grid; justify-items:center; align-content:center; text-align:center; }.reviews-admin-denied > i { color:var(--pink); font-size:38px; }.reviews-admin-denied h1 { margin:12px 0 7px; font-size:28px; font-weight:600; }.reviews-admin-denied p { margin:0 0 16px; font-size: 10px; }
.reviews-admin-tabs { display:flex; flex-wrap:wrap; gap:7px; margin:-12px 0 18px; }.reviews-admin-tabs a { border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:8px 11px; color:rgba(255,255,255,.48); font-size: 10px; }.reviews-admin-tabs a.is-active { border-color:rgba(139,197,63,.35); background:rgba(139,197,63,.08); color:var(--green); }
@media (min-width:900px) { .reviews-layout { grid-template-columns:minmax(0,1fr) 320px; }.review-compose { position:sticky; top:88px; } }
@media (max-width:700px) { .reviews-heading { align-items:start; flex-direction:column; }.reviews-heading > strong { justify-items:start; }.reviews-admin-list > article { grid-template-columns:1fr; }.reviews-admin-actions { display:flex; flex-wrap:wrap; }.reviews-admin-actions button { padding:0 10px; } }

/* Home ecosistema Chiveros */
.ecosystem-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 6vw, 86px) 0 30px;
    background:
        radial-gradient(circle at 12% 12%, rgba(236, 0, 140, .22), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(139, 197, 63, .18), transparent 32%),
        linear-gradient(180deg, rgba(15, 17, 23, .1), rgba(15, 17, 23, .98));
}

.ecosystem-hero::after {
    content: "";
    position: absolute;
    inset: auto -12% -36% 24%;
    height: 240px;
    background: radial-gradient(circle, rgba(255, 212, 0, .16), transparent 62%);
    pointer-events: none;
}

.ecosystem-hero .home-hero-shell {
    position: relative;
    z-index: 1;
    max-width: 1120px;
}

.home-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ecosystem-hero h1 {
    max-width: 980px;
    margin-bottom: 18px;
    font-size: clamp(42px, 8vw, 86px);
    line-height: .92;
    letter-spacing: -.035em;
}

.ecosystem-hero .home-hero-copy > p:last-child {
    max-width: 720px;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.65;
}

.ecosystem-search {
    max-width: 920px;
    min-height: 66px;
    grid-template-columns: 30px minmax(0, 1fr) 52px;
    border-color: rgba(139, 197, 63, .34);
    background: rgba(255, 255, 255, .075);
    box-shadow: 0 26px 90px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.ecosystem-search input {
    font-size: 16px;
}

.ecosystem-search button {
    width: 52px;
    height: 52px;
}

.home-access {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.home-access a,
.home-lyric-card,
.home-tool-card,
.home-why-grid article {
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025)),
        #151820;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.home-access a {
    min-height: 112px;
    display: grid;
    align-content: space-between;
    gap: 8px;
    padding: 16px;
    color: #fff;
}

.home-access i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(139, 197, 63, .14);
    color: var(--green);
    font-size: 22px;
}

.home-access span {
    font-size: 15px;
    font-weight: 700;
}

.home-access small {
    color: rgba(255, 255, 255, .54);
    font-size: 11px;
    line-height: 1.45;
}

.home-featured-tracks {
    padding-top: 42px;
}

.home-track-strip {
    grid-auto-columns: minmax(220px, 282px);
}

.home-track-card {
    padding: 0;
    overflow: hidden;
    background: #171a22;
}

.home-track-card > a {
    display: grid;
    gap: 12px;
    padding: 12px;
    color: inherit;
}

.home-track-card .track-cover {
    min-height: auto;
    aspect-ratio: 1;
    overflow: hidden;
}

.home-track-card .track-cover::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 54%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .72), transparent);
}

.home-track-card .track-cover img,
.verified-service-card .orchestra-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-track-card .track-cover span {
    z-index: 1;
}

.home-inline-empty {
    margin: 0;
    padding: 18px;
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 14px;
    color: rgba(255, 255, 255, .56);
    font-size: 13px;
}

.home-lyrics-grid,
.home-tools-grid,
.home-why-grid {
    display: grid;
    gap: 12px;
}

.home-lyric-card,
.home-tool-card {
    min-height: 128px;
    display: grid;
    align-content: space-between;
    gap: 14px;
    padding: 18px;
    color: #fff;
}

.home-lyric-card span,
.home-tool-card i {
    color: var(--green);
}

.home-lyric-card span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
}

.home-lyric-card strong,
.home-tool-card strong,
.home-why-grid strong {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
}

.home-lyric-card small,
.home-tool-card span,
.home-why-grid p {
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
    line-height: 1.55;
}

.verified-services-list {
    gap: 12px;
}

.verified-service-card {
    grid-template-columns: 1fr;
    padding: 0;
    overflow: hidden;
}

.verified-service-card > a {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 14px;
    color: inherit;
}

.verified-service-card .orchestra-photo {
    width: 66px;
}

.verified-service-card h3 {
    display: flex;
    align-items: center;
    gap: 7px;
}

.verified-service-card h3 span {
    color: #2d9cff;
    font-size: 17px;
}

.home-tools-section {
    background:
        radial-gradient(circle at 0 50%, rgba(236, 0, 140, .11), transparent 32%),
        rgba(255, 255, 255, .012);
}

.home-tool-card i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(139, 197, 63, .13);
    font-size: 24px;
}

.home-app-workbench {
    border-radius: 18px;
}

.home-app-workbench .btn {
    justify-self: start;
}

.home-why-grid article {
    padding: 18px;
}

.home-why-grid p {
    margin: 8px 0 0;
}

@media (min-width: 720px) {
    .ecosystem-hero .home-hero-shell {
        max-width: 1120px;
        text-align: left;
    }

    .ecosystem-hero .home-hero-copy,
    .ecosystem-hero h1,
    .ecosystem-hero p:not(.eyebrow),
    .ecosystem-search {
        margin-inline: 0;
    }

    .home-access {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-lyrics-grid,
    .home-tools-grid,
    .home-why-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-tools-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .verified-service-card > a {
        min-height: 96px;
    }
}

@media (min-width: 1024px) {
    .home-access {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ecosystem-search {
        min-height: 58px;
        grid-template-columns: 24px minmax(0, 1fr) 46px;
        padding-left: 13px;
    }

    .ecosystem-search input {
        font-size: 13px;
    }

    .ecosystem-search button {
        width: 46px;
        height: 46px;
    }

    .home-access a {
        min-height: 102px;
        padding: 14px;
    }

    .home-section {
        padding-block: 24px;
    }
}

.premium-carousel {
    position: relative;
}

.premium-carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 76%);
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-padding-inline: 2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0 14px;
}

.premium-carousel-track::-webkit-scrollbar {
    display: none;
}

.premium-carousel-track > * {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.premium-carousel-track:focus-visible {
    outline: 2px solid rgba(139, 197, 63, .75);
    outline-offset: 6px;
    border-radius: 14px;
}

.premium-carousel::before,
.premium-carousel::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 14px;
    width: clamp(34px, 7vw, 96px);
    pointer-events: none;
    opacity: 0;
    transition: opacity .22s ease;
}

.premium-carousel::before {
    left: 0;
    background: linear-gradient(90deg, #0F1117, rgba(15, 17, 23, 0));
}

.premium-carousel::after {
    right: 0;
    background: linear-gradient(270deg, #0F1117, rgba(15, 17, 23, 0));
}

.premium-carousel.is-scrollable:not(.is-at-start)::before,
.premium-carousel.is-scrollable:not(.is-at-end)::after {
    opacity: 1;
}

.premium-carousel-controls {
    display: none;
}

.premium-carousel-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #0F1117;
    font: inherit;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, opacity .18s ease;
}

.premium-carousel-button:hover {
    transform: translateY(-1px);
    background: var(--green);
}

.premium-carousel-button:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}

.premium-carousel-button:disabled {
    opacity: 0;
    pointer-events: none;
}

.premium-carousel-track .home-track-card,
.premium-carousel-track .home-lyric-card,
.premium-carousel-track .verified-service-card,
.premium-carousel-track .marketplace-chip {
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.premium-carousel-track .home-track-card:hover,
.premium-carousel-track .home-lyric-card:hover,
.premium-carousel-track .verified-service-card:hover,
.premium-carousel-track .marketplace-chip:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 197, 63, .34);
    background-color: rgba(255, 255, 255, .06);
}

.premium-carousel-track.marketplace-grid {
    display: grid;
    padding-bottom: 14px;
}

@media (min-width: 720px) {
    .premium-carousel-track {
        grid-auto-columns: minmax(220px, 282px);
        gap: 14px;
        padding-inline: 2px;
    }

    .premium-carousel-track.home-lyrics-grid,
    .premium-carousel-track.verified-services-list {
        grid-auto-columns: minmax(286px, 360px);
    }

    .premium-carousel-track.marketplace-grid {
        grid-auto-columns: minmax(170px, 208px);
        overflow: auto;
    }

    .premium-carousel-controls {
        position: absolute;
        z-index: 3;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        pointer-events: none;
    }

    .premium-carousel-button {
        pointer-events: auto;
    }

    .premium-carousel-button:first-child {
        transform: translateX(-18px);
    }

    .premium-carousel-button:last-child {
        transform: translateX(18px);
    }

    .premium-carousel-button:first-child:hover {
        transform: translateX(-18px) translateY(-1px);
    }

    .premium-carousel-button:last-child:hover {
        transform: translateX(18px) translateY(-1px);
    }
}

@media (min-width: 1024px) {
    .premium-carousel-track.home-track-strip {
        grid-auto-columns: minmax(240px, 292px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .premium-carousel-track {
        scroll-behavior: auto;
    }

    .premium-carousel-button,
    .premium-carousel-track .home-track-card,
    .premium-carousel-track .home-lyric-card,
    .premium-carousel-track .verified-service-card,
    .premium-carousel-track .marketplace-chip {
        transition: none;
    }
}

/* Home 2.0 Discovery Hub */
.discovery-hero {
    padding: clamp(28px, 6vw, 78px) 0 clamp(18px, 4vw, 34px);
}

.discovery-hero-shell {
    display: grid;
    gap: clamp(22px, 4vw, 48px);
}

.discovery-hero-copy {
    max-width: 780px;
}

.discovery-hero h1 {
    max-width: 930px;
    margin-bottom: 18px;
    font-size: clamp(42px, 7.6vw, 88px);
    font-weight: 600;
    line-height: .92;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.discovery-hero h1 span,
.discovery-hero h1 em {
    font-style: normal;
}

.mobile-title-tail {
    display: none;
}

.discovery-hero-copy > p:not(.home-kicker) {
    max-width: 720px;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(15px, 1.8vw, 19px);
    line-height: 1.65;
    text-wrap: pretty;
}

.discovery-search {
    margin-top: clamp(18px, 3vw, 28px);
}

.discovery-search button {
    width: auto;
    min-width: 112px;
    padding-inline: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
}

.discovery-hero-visual {
    display: none;
}

.visual-stage {
    position: relative;
    min-height: 440px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 34% 28%, rgba(236, 0, 140, .38), transparent 26%),
        radial-gradient(circle at 72% 22%, rgba(139, 197, 63, .34), transparent 24%),
        linear-gradient(145deg, #181b23, #090b10 74%);
}

.visual-stage::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, .1) 50%, transparent 52%),
        radial-gradient(circle, rgba(255, 255, 255, .14), transparent 58%);
    opacity: .66;
}

.visual-disc {
    position: absolute;
    top: 86px;
    right: 50px;
    width: 174px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 212, 0, .96) 0 22%, rgba(15, 17, 23, .92) 23% 32%, rgba(139, 197, 63, .92) 33% 100%);
    box-shadow: 0 20px 80px rgba(139, 197, 63, .2);
    color: #0F1117;
    font-size: 42px;
}

.visual-orchestra-card,
.visual-track-card {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(15, 17, 23, .82);
}

.visual-orchestra-card {
    left: 24px;
    top: 32px;
    width: min(260px, 68%);
    padding: 18px;
}

.visual-orchestra-card span,
.visual-track-card small {
    color: var(--green);
    font-size: 11px;
    font-weight: 700;
}

.visual-orchestra-card strong,
.visual-track-card strong {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: 19px;
    line-height: 1.25;
}

.visual-wave {
    position: absolute;
    left: 42px;
    right: 42px;
    bottom: 106px;
    display: flex;
    align-items: end;
    gap: 12px;
    height: 86px;
}

.visual-wave span {
    flex: 1;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--pink), var(--green));
}

.visual-wave span:nth-child(1) { height: 38%; }
.visual-wave span:nth-child(2) { height: 74%; }
.visual-wave span:nth-child(3) { height: 48%; }
.visual-wave span:nth-child(4) { height: 100%; }
.visual-wave span:nth-child(5) { height: 58%; }
.visual-wave span:nth-child(6) { height: 82%; }

.visual-track-card {
    right: 22px;
    bottom: 28px;
    min-width: 226px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.visual-track-card > i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #0F1117;
    font-size: 20px;
}

.quick-access-section {
    padding-top: 20px;
}

.discovery-access {
    display: grid;
}

.home-track-card {
    position: relative;
}

.home-track-card .track-cover b {
    position: absolute;
    z-index: 1;
    left: 10px;
    bottom: 10px;
    color: rgba(255, 255, 255, .76);
    font-size: 12px;
}

.home-card-actions {
    padding: 0 12px 12px;
}

.home-mini-cta {
    min-height: 38px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 10px;
    padding: 0 12px;
    background: rgba(139, 197, 63, .15);
    color: var(--green);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.home-mini-cta:hover {
    background: var(--green);
    color: #0F1117;
}

.home-mini-cta:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.verified-service-card small {
    display: inline-flex;
    margin-top: 7px;
    color: var(--yellow);
    font-size: 11px;
    font-weight: 700;
}

.home-lyric-card span b {
    color: var(--yellow);
    font-size: 13px;
}

.home-product-card {
    scroll-snap-align: start;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025)),
        #151820;
}

.home-product-card > a {
    display: grid;
    gap: 10px;
    padding: 12px;
    color: inherit;
}

.home-product-media {
    aspect-ratio: 1.05;
    display: grid;
    place-items: center;
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 22%, rgba(255, 212, 0, .18), transparent 30%),
        linear-gradient(135deg, rgba(236, 0, 140, .38), rgba(139, 197, 63, .2));
    color: var(--yellow);
    font-size: 34px;
}

.home-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-product-card span {
    color: rgba(255, 255, 255, .56);
    font-size: 11px;
    font-weight: 700;
}

.home-product-card strong {
    min-height: 38px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.home-product-card b {
    color: var(--yellow);
    font-size: 18px;
}

.app-discovery-card {
    overflow: hidden;
    position: relative;
}

.app-discovery-copy {
    position: relative;
    z-index: 1;
    max-width: 620px;
}

.app-banner-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    opacity: .95;
}

.app-discovery-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 17, 23, .92) 0 42%, rgba(15, 17, 23, .4) 64%, rgba(15, 17, 23, .08));
    pointer-events: none;
}

.app-download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.app-phone-mock {
    justify-self: center;
    width: min(220px, 100%);
    min-height: 330px;
    display: grid;
    align-content: end;
    gap: 8px;
    border: 7px solid rgba(255, 255, 255, .1);
    border-radius: 30px;
    padding: 18px;
    background:
        radial-gradient(circle at 50% 28%, rgba(139, 197, 63, .28), transparent 28%),
        linear-gradient(180deg, #222632, #0F1117);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.app-phone-mock > div {
    height: 120px;
    display: grid;
    place-items: center;
}

.app-phone-mock > div span {
    width: 92px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 120deg, var(--green), var(--pink), var(--yellow), var(--green));
}

.app-phone-mock strong {
    color: #fff;
    font-size: 18px;
}

.app-phone-mock p {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
}

.app-phone-mock i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #0F1117;
}

.trust-grid article b {
    display: block;
    margin-bottom: 8px;
    color: var(--yellow);
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    letter-spacing: -.03em;
}

.premium-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}

.premium-carousel-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    transition: width .2s ease, background-color .2s ease;
}

.premium-carousel-dots span.is-active {
    width: 18px;
    background: var(--green);
}

@media (min-width: 720px) {
    .discovery-hero-shell {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr);
        align-items: center;
    }

    .discovery-hero-visual {
        display: block;
    }

    .premium-carousel-dots {
        display: none;
    }

    .premium-carousel-track {
        grid-auto-columns: minmax(220px, 24%);
    }

    .premium-carousel-track.home-track-strip {
        grid-auto-columns: minmax(232px, 23%);
    }

    .premium-carousel-track.home-lyrics-grid,
    .premium-carousel-track.verified-services-list {
        grid-auto-columns: minmax(282px, 30%);
    }

    .premium-carousel-track.home-product-carousel {
        grid-auto-columns: minmax(190px, 21%);
    }

    .app-discovery-card {
        min-height: 360px;
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
    }
}

@media (max-width: 719px) {
    .discovery-hero {
        padding-top: 26px;
    }

    .discovery-hero h1 {
        max-width: 12em;
        font-size: clamp(38px, 13vw, 54px);
        line-height: .94;
    }

    .desktop-title-tail {
        display: none;
    }

    .mobile-title-tail {
        display: inline;
    }

    .discovery-hero-copy > p:not(.home-kicker) {
        max-width: 34ch;
        font-size: 14px;
        line-height: 1.55;
    }

    .discovery-search {
        grid-template-columns: 24px minmax(0, 1fr) 48px;
        margin-top: 16px;
    }

    .discovery-search button {
        min-width: 48px;
        padding-inline: 0;
    }

    .discovery-search button span {
        display: none;
    }

    .discovery-access a:nth-child(n+5) {
        display: none;
    }

    .premium-carousel-track {
        grid-auto-columns: minmax(0, 76%);
    }

    .premium-carousel-track.home-product-carousel,
    .premium-carousel-track.home-lyrics-grid,
    .premium-carousel-track.verified-services-list {
        grid-auto-columns: minmax(0, 78%);
    }

    .app-download-actions .btn {
        width: 100%;
    }

    .app-phone-mock {
        display: none;
    }

    .app-discovery-card {
        min-height: 420px;
        align-content: end;
    }

    .app-banner-art {
        object-position: center top;
    }

    .app-discovery-card::after {
        background: linear-gradient(180deg, rgba(15, 17, 23, .1), rgba(15, 17, 23, .92) 54%, rgba(15, 17, 23, .98));
    }
}

/* Home visual reference refinement */
.site-menu {
    gap: clamp(10px, 1.35vw, 18px);
}

.site-menu a {
    font-size: 12px;
}

.discovery-hero {
    position: relative;
    overflow: hidden;
    padding-top: clamp(38px, 6vw, 72px);
    background:
        radial-gradient(circle at 72% 18%, rgba(236, 0, 140, .2), transparent 28%),
        radial-gradient(circle at 92% 26%, rgba(139, 197, 63, .16), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(15, 17, 23, 0));
}

.discovery-hero h1 .desktop-title-tail,
.discovery-hero h1 .mobile-title-tail {
    color: var(--green);
}

.discovery-search {
    max-width: 610px;
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .055);
}

.discovery-search button {
    min-width: 52px;
    background: var(--green);
    box-shadow: 0 0 0 1px rgba(15, 17, 23, .22), 0 10px 24px rgba(139, 197, 63, .18);
}

.discovery-search button span {
    display: none;
}

.discovery-access {
    max-width: 960px;
    margin-top: 22px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.discovery-access a {
    min-height: 66px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    align-content: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
}

.discovery-access i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.discovery-access span {
    align-self: end;
    font-size: 12px;
}

.discovery-access small {
    align-self: start;
    overflow: hidden;
    color: rgba(255, 255, 255, .5);
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.visual-stage {
    min-height: 520px;
    border-color: transparent;
    background:
        radial-gradient(circle at 58% 22%, rgba(236, 0, 140, .46), transparent 24%),
        radial-gradient(circle at 92% 18%, rgba(139, 197, 63, .32), transparent 24%),
        linear-gradient(145deg, rgba(31, 35, 45, .42), rgba(10, 12, 18, .96));
}

.visual-stage::before {
    inset: 22% 8% 10% 28%;
    background:
        radial-gradient(ellipse at 60% 42%, rgba(255, 255, 255, .16), transparent 18%),
        linear-gradient(90deg, transparent 42%, rgba(139, 197, 63, .32) 44% 47%, transparent 49% 53%, rgba(139, 197, 63, .28) 55% 58%, transparent 60%);
    filter: blur(.2px);
}

.visual-hero-image {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.visual-disc {
    display: none;
}

.visual-wave {
    left: 32px;
    right: auto;
    top: 154px;
    bottom: auto;
    width: 108px;
    height: 104px;
}

.visual-orchestra-card {
    left: auto;
    right: 0;
    top: auto;
    bottom: 70px;
    width: 230px;
    background: rgba(20, 23, 30, .88);
}

.visual-track-card {
    left: 32px;
    right: auto;
    bottom: 38px;
}

.discovery-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 16px;
    padding: clamp(18px, 2.6vw, 26px);
    background:
        radial-gradient(circle at 0 0, rgba(236, 0, 140, .08), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
        #12151c;
}

.discovery-panel .section-head.compact {
    margin-bottom: 18px;
}

.home-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    color: var(--green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-section-kicker i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(139, 197, 63, .12);
    color: var(--green);
    font-size: 17px;
    letter-spacing: 0;
}

.home-featured-tracks,
.home-services-section,
.home-lyrics-section,
.home-tools-section,
.marketplace-home {
    padding-block: 10px;
    background: transparent;
}

.premium-carousel-controls {
    inset-inline: -16px;
}

.premium-carousel-track.home-track-strip {
    grid-auto-columns: minmax(168px, 19.2%);
}

.home-track-card .track-cover {
    aspect-ratio: 1.05;
}

.home-track-card .track-info h3 {
    min-height: 38px;
    font-size: 14px;
}

.home-track-card .track-info p {
    font-size: 11px;
}

.home-track-card .track-info strong {
    font-size: 15px;
}

.home-card-actions {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 0;
}

.home-card-actions .home-mini-cta {
    width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 9px;
    background: var(--green);
    color: #0F1117;
    font-size: 0;
}

.home-card-actions .home-mini-cta i {
    font-size: 17px;
}

.verified-services-list .verified-service-card > a {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
}

.verified-service-card .orchestra-photo {
    width: 100%;
    aspect-ratio: 1.5;
}

.verified-service-card .orchestra-photo img {
    border-radius: inherit;
}

.verified-service-card h3 {
    font-size: 13px;
}

.verified-service-card p,
.verified-service-card small {
    font-size: 10px;
}

.home-lyric-card {
    min-height: 92px;
    padding: 14px;
}

.home-lyric-card strong {
    font-size: 13px;
}

.home-lyric-card small {
    font-size: 10px;
}

.home-tool-card {
    min-height: 92px;
    grid-template-columns: 54px minmax(0, 1fr) 18px;
    align-items: center;
    align-content: center;
    padding: 14px;
}

.home-tool-card::after {
    content: "\203A";
    color: var(--green);
    font-size: 24px;
}

.home-tool-card strong,
.home-tool-card span {
    grid-column: 2;
}

.home-tool-card strong {
    font-size: 13px;
}

.home-tool-card span {
    font-size: 10px;
}

.home-product-card > a {
    padding: 10px;
}

.home-product-media {
    aspect-ratio: 1.45;
}

.home-product-card strong {
    min-height: 32px;
    font-size: 12px;
}

.home-product-card b {
    font-size: 14px;
}

.app-discovery-card {
    border-radius: 16px;
    background:
        radial-gradient(circle at 68% 42%, rgba(139, 197, 63, .28), transparent 30%),
        radial-gradient(circle at 0 0, rgba(236, 0, 140, .28), transparent 34%),
        #151820;
}

@media (min-width: 1180px) {
    .discovery-hero-shell {
        grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr);
    }
}

@media (max-width: 920px) {
    .site-menu a[href*="voice-remover"],
    .site-menu a[href*="marketplace"] {
        display: none;
    }
}

@media (max-width: 719px) {
    .discovery-access {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 16px;
    }

    .discovery-access a {
        min-height: 58px;
    }

    .discovery-panel {
        border-radius: 14px;
        padding: 16px 12px;
    }

    .home-section-kicker {
        font-size: 10px;
        letter-spacing: .08em;
    }

    .premium-carousel-track.home-track-strip,
    .premium-carousel-track.home-product-carousel,
    .premium-carousel-track.home-lyrics-grid,
    .premium-carousel-track.verified-services-list {
        grid-auto-columns: minmax(0, 78%);
    }

    .home-tools-grid {
        grid-template-columns: 1fr;
    }
}

/* Hotfix carruseles Home: anchos sanos desktop/mobile */
.discovery-panel {
    overflow: hidden;
}

.discovery-panel .premium-carousel {
    min-width: 0;
}

.discovery-panel .premium-carousel-track {
    grid-auto-columns: 78%;
    gap: 12px;
}

.discovery-panel .home-track-card,
.discovery-panel .home-lyric-card,
.discovery-panel .verified-service-card,
.discovery-panel .home-product-card {
    min-width: 0;
}

.home-track-card .track-info h3,
.home-track-card .track-info p,
.home-lyric-card strong,
.home-lyric-card small,
.home-product-card strong,
.verified-service-card h3,
.verified-service-card p {
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-track-card .track-info h3,
.home-lyric-card strong,
.home-product-card strong,
.verified-service-card h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-track-card .track-info p,
.home-lyric-card small,
.verified-service-card p {
    white-space: nowrap;
}

.home-track-card .track-info {
    padding-bottom: 38px;
}

.home-track-card .track-info strong {
    display: block;
    margin-top: 6px;
}

.home-lyric-card {
    min-height: 126px;
}

.home-product-card strong {
    min-height: 42px;
}

@media (min-width: 720px) {
    .discovery-panel .premium-carousel-track.home-track-strip,
    .discovery-panel .premium-carousel-track.home-product-carousel {
        grid-auto-columns: clamp(180px, calc((100% - 56px) / 5), 230px);
    }

    .discovery-panel .premium-carousel-track.home-lyrics-grid,
    .discovery-panel .premium-carousel-track.verified-services-list {
        grid-auto-columns: clamp(220px, calc((100% - 42px) / 4), 300px);
    }

    .discovery-access {
        grid-template-columns: repeat(6, minmax(112px, 1fr));
    }

    .discovery-access small {
        white-space: normal;
    }
}

@media (max-width: 719px) {
    .discovery-panel .section-head.compact {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 10px;
    }

    .discovery-panel .section-head.compact .text-link {
        justify-self: start;
    }

    .discovery-panel .section-head.compact h2 {
        font-size: clamp(28px, 8vw, 38px);
        line-height: 1.05;
        letter-spacing: -.03em;
    }

    .discovery-panel .premium-carousel-track.home-track-strip,
    .discovery-panel .premium-carousel-track.home-product-carousel,
    .discovery-panel .premium-carousel-track.home-lyrics-grid,
    .discovery-panel .premium-carousel-track.verified-services-list {
        grid-auto-columns: 78%;
    }

    .home-track-card .track-cover {
        aspect-ratio: 1.12;
    }

    .verified-service-card .orchestra-photo,
    .home-product-media {
        aspect-ratio: 1.25;
    }
}

/* Discovery quick access limpio */
.discovery-hero-shell > .discovery-access {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.discovery-hero-shell > .discovery-access a {
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    padding: 12px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)),
        rgba(22, 25, 33, .92);
    color: #fff;
}

.discovery-hero-shell > .discovery-access i {
    grid-row: 1 / 3;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(139, 197, 63, .14);
    color: var(--green);
    font-size: 25px;
}

.discovery-hero-shell > .discovery-access span,
.discovery-hero-shell > .discovery-access small {
    min-width: 0;
    overflow: hidden;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.discovery-hero-shell > .discovery-access span {
    align-self: end;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.discovery-hero-shell > .discovery-access small {
    align-self: start;
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 719px) {
    .discovery-hero-shell > .discovery-access {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .discovery-hero-shell > .discovery-access a {
        min-height: 70px;
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 10px;
    }

    .discovery-hero-shell > .discovery-access i {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .discovery-hero-shell > .discovery-access a:nth-child(n+5) {
        display: none;
    }
}

/* Home Orquestas destacadas */
.verified-services-list .verified-service-card {
    position: relative;
    overflow: hidden;
    padding: 0;
    border-radius: 12px;
    background: #151820;
}

.verified-services-list .verified-service-link {
    min-height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    padding: 0;
    color: inherit;
}

.verified-services-list .orchestra-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1.55;
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(236, 0, 140, .28), rgba(139, 197, 63, .18)), #10131a;
}

.verified-services-list .orchestra-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-verified-ribbon {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 4px 8px;
    background: #147bff;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.service-verified-ribbon i {
    font-size: 12px;
}

.verified-service-body {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 13px;
}

.verified-service-body h3 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.verified-service-body p,
.verified-service-body small {
    display: block;
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: 11px;
    line-height: 1.35;
}

.verified-service-body small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .72);
}

.service-whatsapp-visual {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--green);
    color: #0F1117;
    font-size: 20px;
}

.verified-service-card:hover .service-whatsapp-visual {
    background: #a1e34b;
}

/* Backoffice administrativo */
.admin-mode { background: #0b0d13; }
.admin-mode #contenido { min-height: 100vh; }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0,1fr); background: radial-gradient(circle at 100% 0,rgba(139,197,63,.08),transparent 30%), #0b0d13; color: #fff; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr auto; gap: 22px; border-right: 1px solid rgba(255,255,255,.08); padding: 20px 14px; background: rgba(15,17,23,.96); }
.admin-brand { display: flex; align-items: center; gap: 10px; padding: 8px 8px 16px; color: #fff; }
.admin-brand span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--green); color: #0f1117; font-size: 10px; font-weight: 700; }
.admin-brand strong { font-size: 13px; font-weight: 700; }
.admin-sidebar nav { display: grid; align-content: start; gap: 5px; }
.admin-sidebar nav a,.admin-exit { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 11px 12px; color: rgba(255,255,255,.58); font-size: 11px; font-weight: 600; }
.admin-sidebar nav a i,.admin-exit i { color: var(--green); font-size: 17px; }
.admin-sidebar nav a.is-active { background: rgba(139,197,63,.12); color: var(--green); }
.admin-exit { border: 1px solid rgba(255,255,255,.08); }
.admin-main { min-width: 0; padding: 28px clamp(18px,3vw,38px) 70px; }
.admin-topbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.admin-topbar h1 { margin: 4px 0 0; font-size: clamp(34px,5vw,58px); font-weight: 600; letter-spacing: -.055em; }
.admin-topbar form { width: min(420px,100%); min-height: 48px; display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 0 14px; background: #151820; }
.admin-topbar form i { color: var(--green); font-size: 18px; }
.admin-topbar input { border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 11px; }
.admin-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.admin-metrics article,.admin-panel,.admin-notice { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: #151820; }
.admin-metrics article { padding: 18px; }
.admin-metrics span { color: rgba(255,255,255,.48); font-size: 10px; }
.admin-metrics strong { display: block; margin-top: 8px; font-size: 30px; font-weight: 600; letter-spacing: -.04em; }
.admin-panel { padding: clamp(16px,2.5vw,24px); }
.admin-panel + .admin-panel { margin-top: 16px; }
.admin-panel h2 { margin: 0 0 14px; font-size: 20px; font-weight: 600; }
.admin-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.admin-panel-head h2 { margin: 0; }
.admin-panel-head > span { color: rgba(255,255,255,.42); font-size: 10px; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.admin-tabs a { border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 7px 10px; color: rgba(255,255,255,.55); font-size: 10px; }
.admin-quick-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.admin-quick-grid a { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 18px; background: rgba(255,255,255,.025); color: #fff; }
.admin-quick-grid i { color: var(--green); font-size: 24px; }
.admin-quick-grid strong,.admin-quick-grid span { display: block; }
.admin-quick-grid strong { margin: 10px 0 5px; font-size: 14px; }
.admin-quick-grid span { color: rgba(255,255,255,.48); font-size: 10px; }
.admin-table { display: grid; gap: 8px; }
.admin-table article { display: grid; grid-template-columns: minmax(220px,1.6fr) repeat(3,minmax(90px,.55fr)) auto; gap: 12px; align-items: center; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 12px; background: rgba(255,255,255,.02); }
.admin-table strong { display: block; font-size: 12px; font-weight: 700; }
.admin-table small,.admin-table span,.admin-table p { color: rgba(255,255,255,.48); font-size: 10px; }
.admin-table p { max-width: 560px; margin: 7px 0 0; line-height: 1.55; }
.admin-service-cell { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 10px; align-items: center; }
.admin-service-cell img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-actions button,.admin-actions a { min-height: 30px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 0 9px; background: #1d212b; color: #fff; font: inherit; font-size: 10px; cursor: pointer; }
.admin-actions button:first-of-type { background: var(--green); color: #0f1117; border-color: var(--green); font-weight: 700; }
.admin-actions a { display: inline-flex; align-items: center; }
.admin-bulk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.025); }
.admin-bulk-toolbar button { min-height: 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 0 11px; background: #1d212b; color: #fff; font: inherit; font-size: 10px; cursor: pointer; }
.admin-bulk-toolbar button.is-primary { background: var(--green); color: #0f1117; border-color: var(--green); font-weight: 700; }
.admin-bulk-toolbar span { margin-left: auto; color: rgba(255,255,255,.5); font-size: 10px; }
.admin-lyrics-table article.admin-lyric-row { grid-template-columns: 28px minmax(260px,1.6fr) minmax(90px,.35fr) auto; }
.admin-lyric-check { display: grid; place-items: center; cursor: pointer; }
.admin-lyric-check input { position: absolute; opacity: 0; pointer-events: none; }
.admin-lyric-check span { width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; background: rgba(15,17,23,.8); }
.admin-lyric-check input:checked + span { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 4px #0f1117; }
.admin-lyric-check input:disabled + span { opacity: .25; cursor: not-allowed; }
.admin-config { display: grid; gap: 12px; max-width: 520px; }
.admin-config label { display: grid; gap: 6px; color: rgba(255,255,255,.56); font-size: 10px; }
.admin-config input { min-height: 42px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 0 12px; background: #0f1117; color: #fff; font: inherit; }
.admin-notice { margin-bottom: 14px; padding: 12px 14px; color: var(--green); font-size: 10px; }
.admin-performance-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-performance-note a { border-bottom: 1px solid currentColor; color: var(--green); font-weight: 700; }
.admin-performance-note code { color: #fff; }
.admin-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.admin-pagination a,.admin-pagination span { border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 8px 12px; color: rgba(255,255,255,.58); font-size: 10px; }
.admin-pagination a:not(.is-disabled) { color: var(--green); }
.lyric-json-import .ti-loader-2 { animation: mock-payment-spin .75s linear infinite; }
.admin-pagination .is-disabled { opacity: .38; pointer-events: none; }
.admin-denied { min-height: 70vh; display: grid; place-items: center; background: #0f1117; }
.admin-denied > div { display: grid; justify-items: center; text-align: center; }
.admin-denied i { color: var(--pink); font-size: 42px; }
.admin-denied h1 { margin: 10px 0; font-size: 54px; font-weight: 600; }
@media (max-width: 1020px) { .admin-shell { grid-template-columns: 1fr; }.admin-sidebar { position: static; height: auto; }.admin-sidebar nav { grid-template-columns: repeat(2,minmax(0,1fr)); }.admin-metrics,.admin-quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.admin-table article { grid-template-columns: 1fr; align-items: start; }.admin-actions { justify-content: flex-start; } }
@media (max-width: 640px) { .admin-main { padding: 20px 12px 60px; }.admin-topbar { align-items: stretch; flex-direction: column; }.admin-metrics,.admin-quick-grid,.admin-sidebar nav { grid-template-columns: 1fr; } }

/* Seller Center — carga masiva de productos */
.seller-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.seller-import-upload { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 20px; background: #151820; }
.seller-import-upload .upload-card { min-height: 118px; margin: 0; }
.seller-import-upload .upload-card > i { color: var(--green); font-size: 26px; }
.seller-import-upload .btn { min-height: 48px; }
.seller-import-guide { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 14px 0 24px; }
.seller-import-guide > div { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px; background: rgba(255,255,255,.025); }
.seller-import-guide i { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(139,197,63,.12); color: var(--green); font-size: 19px; }
.seller-import-guide strong { font-size: 12px; }
.seller-import-guide span { margin-top: 4px; color: rgba(255,255,255,.52); font-size: 10px; line-height: 1.45; }
.seller-import-preview { overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: #151820; }
.seller-import-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.seller-import-preview h2 { margin: 3px 0 0; font-size: 22px; font-weight: 600; }
.seller-import-summary { display: flex; gap: 8px; }
.seller-import-summary span { min-width: 92px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 9px 11px; color: rgba(255,255,255,.56); font-size: 10px; }
.seller-import-summary strong { display: block; color: #fff; font-size: 18px; font-weight: 600; }
.seller-import-summary .is-valid { border-color: rgba(139,197,63,.28); }
.seller-import-summary .is-error { border-color: rgba(236,0,140,.35); }
.seller-import-table-wrap { overflow-x: auto; }
.seller-import-table { width: 100%; min-width: 880px; border-collapse: collapse; }
.seller-import-table th,.seller-import-table td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); text-align: left; vertical-align: top; font-size: 10px; }
.seller-import-table th { color: rgba(255,255,255,.42); font-weight: 600; }
.seller-import-table td { color: rgba(255,255,255,.62); }
.seller-import-table td strong { color: #fff; font-size: 11px; }
.seller-import-table tr.is-error { background: rgba(236,0,140,.045); }
.seller-import-table td:last-child span { display: inline-flex; align-items: center; gap: 5px; color: var(--green); }
.seller-import-table ul { max-width: 260px; margin: 0; padding-left: 16px; color: #ff8bcf; line-height: 1.55; }
.seller-import-preview > footer { display: flex; justify-content: flex-end; padding: 16px 20px; }
.seller-import-preview > footer p { margin: 0; color: #ff8bcf; font-size: 11px; }
.seller-product-media-empty { width: 58px; height: 58px; display: grid; place-items: center; align-content: center; gap: 2px; border: 1px dashed rgba(139,197,63,.3); border-radius: 11px; background: rgba(139,197,63,.06); color: var(--green); }
.seller-product-media-empty i { font-size: 19px; }
.seller-product-media-empty small { color: rgba(255,255,255,.45); font-size: 10px; }
.admin-actions button:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 720px) { .seller-head-actions,.seller-products-head { align-items: stretch; }.seller-head-actions .btn { flex: 1; }.seller-import-upload { grid-template-columns: 1fr; }.seller-import-guide { grid-template-columns: 1fr; }.seller-import-preview > header { align-items: stretch; flex-direction: column; }.seller-import-summary span { flex: 1; }.seller-import-preview > footer,.seller-import-preview > footer form,.seller-import-preview > footer .btn { width: 100%; } }

/* Marketplace público de productos */
.market-public-hero { position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.07); background: radial-gradient(circle at 15% 20%,rgba(236,0,140,.13),transparent 34%),radial-gradient(circle at 86% 30%,rgba(139,197,63,.13),transparent 30%),#0f1117; }
.market-public-hero .shell { min-height: 270px; display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-top: 54px; padding-bottom: 44px; }
.market-public-hero h1 { max-width: 760px; margin: 7px 0 10px; color: #fff; font-size: clamp(40px,6vw,72px); font-weight: 600; letter-spacing: -.055em; line-height: .98; }
.market-public-hero p:not(.eyebrow) { max-width: 660px; margin: 0; color: rgba(255,255,255,.66); font-size: 15px; line-height: 1.6; }
.market-public-hero .shell > span { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; border: 1px solid rgba(139,197,63,.22); border-radius: 999px; padding: 10px 13px; background: rgba(139,197,63,.08); color: var(--green); font-size: 10px; }
.market-public-hero .shell > span i { font-size: 17px; }
.market-public-section { padding: 28px 0 80px; background: #0f1117; }
.market-filters { display: grid; grid-template-columns: minmax(210px,1.5fr) repeat(5,minmax(120px,.65fr)) auto; gap: 9px; align-items: end; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; background: #171a22; }
.market-filters label { display: grid; gap: 6px; min-width: 0; color: rgba(255,255,255,.48); font-size: 10px; }
.market-filters input,.market-filters select,.market-search > div { width: 100%; min-width: 0; min-height: 44px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; padding: 0 11px; outline: 0; background: #0f1117; color: #fff; font: inherit; font-size: 11px; }
.market-filters input:focus,.market-filters select:focus,.market-search > div:focus-within { border-color: var(--green); }
.market-search > div { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 7px; padding: 0 11px; }
.market-search > div i { color: var(--green); font-size: 17px; }
.market-search > div input { min-height: 40px; border: 0; padding: 0; background: transparent; }
.market-filters .btn { min-height: 44px; white-space: nowrap; }
.market-results-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 34px 0 15px; }
.market-results-head h2 { margin: 3px 0 0; color: #fff; font-size: 28px; font-weight: 600; letter-spacing: -.035em; }
.market-results-head > a { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 11px; }
.market-product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.market-product-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #181b23; transition: transform .22s ease,border-color .22s ease; }
.market-product-card:hover { transform: translateY(-4px); border-color: rgba(139,197,63,.28); }
.market-product-media { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%,rgba(139,197,63,.14),transparent 52%),#101219; color: rgba(255,255,255,.25); }
.market-product-media > i,.market-detail-media > i { font-size: 52px; }
.market-product-media img,.market-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.market-offer-badge { position: absolute; z-index: 2; top: 12px; left: 12px; border-radius: 999px; padding: 6px 9px; background: var(--yellow); color: #0f1117; font-size: 10px; font-weight: 700; }
.market-product-body { display: grid; align-content: start; padding: 15px; }
.market-product-category { color: var(--green); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.market-product-card h2 { min-height: 44px; margin: 6px 0 7px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.market-product-card h2 a { color: #fff; }
.market-product-seller { min-height: 18px; display: flex; align-items: center; gap: 5px; margin: 0 0 12px; overflow: hidden; color: rgba(255,255,255,.5); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.market-product-seller .ti-rosette-discount-check-filled,.market-detail-seller .ti-rosette-discount-check-filled { color: #2398ff; }
.market-product-price { min-height: 50px; display: flex; flex-direction: column; align-items: flex-start; justify-content: end; }
.market-product-price del { color: rgba(255,255,255,.4); font-size: 10px; }
.market-product-price strong { color: var(--yellow); font-size: 22px; font-weight: 700; letter-spacing: -.035em; }
.market-stock { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 10px; }
.market-stock i { font-size: 7px; }.market-stock.is-available { color: var(--green); }.market-stock.is-unavailable { color: #ff7aaa; }
.market-card-actions { display: grid; grid-template-columns: 1fr 46px; gap: 8px; margin-top: 14px; }
.market-card-actions .btn { min-height: 42px; padding: 0 12px; }
.market-card-actions button span { display: none; }
.market-empty { min-height: 360px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.02); }
.market-empty > i { color: var(--green); font-size: 42px; }.market-empty h2 { margin: 12px 0 5px; font-size: 26px; font-weight: 600; }.market-empty p { margin: 0 0 16px; color: rgba(255,255,255,.5); }
.market-detail { padding: 8px 0 55px; background: radial-gradient(circle at 85% 10%,rgba(139,197,63,.08),transparent 28%),#0f1117; }
.market-detail-grid { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(380px,1.1fr); gap: clamp(34px,6vw,86px); align-items: center; }
.market-detail-media { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: #171a22; color: rgba(255,255,255,.28); }
.market-detail-info { max-width: 650px; }.market-detail-info h1 { margin: 10px 0 10px; color: #fff; font-size: clamp(38px,5vw,64px); font-weight: 600; letter-spacing: -.055em; line-height: 1.02; }
.market-detail-seller { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: rgba(255,255,255,.54); font-size: 11px; }.market-detail-seller strong { color: #fff; }
.market-detail-description { margin: 22px 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.75; }
.market-detail-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 15px 0 4px; }.market-detail-price del { color: rgba(255,255,255,.4); font-size: 14px; }.market-detail-price strong { color: var(--yellow); font-size: 36px; font-weight: 700; letter-spacing: -.045em; }.market-detail-price span { color: var(--green); font-size: 10px; }
.market-purchase { display: grid; grid-template-columns: auto 82px minmax(220px,1fr); align-items: center; gap: 9px; margin-top: 22px; }.market-purchase label { color: rgba(255,255,255,.55); font-size: 10px; }.market-purchase select { min-height: 48px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; padding: 0 12px; background: #171a22; color: #fff; font: inherit; }.market-purchase .btn { min-height: 48px; }
.market-secure-note { display: flex; align-items: center; gap: 7px; margin: 13px 0 0; color: rgba(255,255,255,.42); font-size: 10px; }.market-secure-note i { color: var(--green); }
.market-detail-policies { padding: 0 0 80px; background: #0f1117; }.market-detail-policies .shell { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.market-detail-policies article { display: grid; grid-template-columns: 44px 1fr; gap: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 20px; background: #171a22; }.market-detail-policies article > i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(139,197,63,.1); color: var(--green); font-size: 22px; }.market-detail-policies h2 { margin: 0 0 7px; font-size: 16px; font-weight: 600; }.market-detail-policies p { margin: 0; color: rgba(255,255,255,.54); font-size: 11px; line-height: 1.65; }
.cart-delivery-note { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; color: var(--green); font-size: 10px; }
@media (max-width: 1120px) { .market-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }.market-search { grid-column: span 2; }.market-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 780px) { .market-public-hero .shell { min-height: 230px; align-items: start; flex-direction: column; justify-content: end; }.market-public-hero .shell > span { align-self: flex-start; }.market-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }.market-search { grid-column: 1 / -1; }.market-filters .btn { grid-column: 1 / -1; }.market-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.market-detail-grid { grid-template-columns: 1fr; gap: 26px; }.market-detail-media { max-width: 560px; }.market-detail-policies .shell { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .market-public-hero .shell { padding-top: 34px; padding-bottom: 30px; }.market-public-hero h1 { font-size: 42px; }.market-filters { grid-template-columns: 1fr; }.market-search,.market-filters .btn { grid-column: auto; }.market-product-grid { gap: 9px; }.market-product-body { padding: 12px; }.market-product-card h2 { min-height: 57px; font-size: 13px; }.market-product-price strong { font-size: 18px; }.market-card-actions { grid-template-columns: 1fr 42px; }.market-card-actions .btn { min-height: 40px; padding: 0 9px; font-size: 10px; }.market-detail-info h1 { font-size: 38px; }.market-purchase { grid-template-columns: auto 1fr; }.market-purchase .btn { grid-column: 1 / -1; }.market-detail-policies article { padding: 16px; } }
.checkout-phone-field {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.checkout-phone-field select {
    min-width: 118px;
    height: 100%;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.1);
    padding: 0 28px 0 12px;
    background: #141820;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
}

.checkout-phone-field input[type="tel"] {
    min-width: 0;
    padding-left: 13px !important;
}

.cart-delivery-later {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 13px 14px;
    border-radius: 10px;
    background: rgba(139,197,63,.07);
    color: var(--green);
}

.cart-delivery-later[hidden] { display: none; }
.cart-delivery-later > .ti { flex: 0 0 auto; margin-top: 1px; font-size: 19px; }
.cart-delivery-later div { display: grid; gap: 3px; }
.cart-delivery-later strong { color: rgba(255,255,255,.86); font-size: 11px; font-weight: 600; }
.cart-delivery-later p { margin: 0; color: rgba(255,255,255,.5); font-size: 10px; line-height: 1.5; }

.market-filter-sheet,
.market-filter-toolbar {
    display: contents;
}

.market-filter-sheet > header,
.market-sheet-actions,
.market-filter-toggle {
    display: none;
}

.market-filter-backdrop { display: none; }

@media (max-width: 780px) {
    body.market-filters-open { overflow: hidden; }
    .market-public-section { padding-top: 14px; }
    .market-filters { display: grid; grid-template-columns: 1fr; gap: 9px; border: 0; padding: 0; background: transparent; }
    .market-search { grid-column: auto; }
    .market-search > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .market-search > div { min-height: 48px; background: #171a22; }
    .market-filter-toolbar { display: grid; grid-template-columns: minmax(120px,.8fr) minmax(170px,1.2fr); gap: 8px; }
    .market-filter-toggle { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #171a22; color: rgba(255,255,255,.86); font: inherit; font-size: 11px; font-weight: 600; }
    .market-filter-toggle .ti { color: var(--green); font-size: 17px; }
    .market-sort { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 7px; min-height: 44px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding-left: 10px; background: #171a22; }
    .market-sort > span { color: rgba(255,255,255,.48); font-size: 10px; }
    .market-filters .market-sort select { min-height: 42px; border: 0; padding-left: 2px; background: transparent; }
    .market-filter-desktop-submit { display: none; }
    .market-filter-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 72; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; max-height: min(78dvh,680px); overflow-y: auto; border-radius: 15px 15px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); background: #171a22; transform: translateY(105%); visibility: hidden; transition: transform 210ms cubic-bezier(.22,1,.36,1),visibility 210ms; }
    .is-sheet-open .market-filter-sheet { transform: translateY(0); visibility: visible; }
    .market-filter-sheet > header { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 4px; }
    .market-filter-sheet > header > div { display: grid; gap: 2px; }
    .market-filter-sheet > header strong { font-size: 17px; font-weight: 600; }
    .market-filter-sheet > header span { color: rgba(255,255,255,.48); font-size: 10px; }
    .market-filter-sheet > header button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; font-size: 18px; }
    .market-sheet-actions { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); grid-column: 1/-1; display: grid; grid-template-columns: .7fr 1.3fr; gap: 8px; margin: 4px -16px calc(-18px - env(safe-area-inset-bottom)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.08); background: #171a22; }
    .market-sheet-actions > a { min-height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; color: rgba(255,255,255,.8); font-size: 11px; font-weight: 600; }
    .market-filter-backdrop { position: fixed; inset: 0; z-index: 71; display: block; border: 0; background: rgba(5,7,11,.78); }
    .market-filter-backdrop[hidden] { display: none; }
    .market-results-head { margin-top: 20px; }
}

@media (max-width: 430px) {
    .market-filter-sheet { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .market-filter-sheet { transition: none; }
}