/* The Mix Machine compiled stylesheet. Source files remain in public/assets/css/. */

/* ---- variables.css ---- */
:root{

    --tm-bg:#101214;

    --tm-surface:#191d22;

    --tm-surface-2:#232930;

    --tm-border:#323841;

    --tm-primary:#ff7a18;

    --tm-primary-hover:#ff9444;

    --tm-text:#f5f7fa;

    --tm-text-muted:#9ca7b3;

    --tm-success:#32c86a;

    --tm-danger:#dd4c4c;

    --tm-radius:14px;

    --tm-shadow:
        0 8px 30px rgba(0,0,0,.35);

    --tm-transition:.18s ease;
}

/* ---- reboot.css ---- */
html{

    scroll-behavior:smooth;

}


body{

    background:var(--tm-bg);

    color:var(--tm-text);

    font-family:var(--tm-font-family,Inter,sans-serif);

}

/* ---- layout.css ---- */
/*
|--------------------------------------------------------------------------
| Global Layout
|--------------------------------------------------------------------------
*/


body {

    background:
    var(--tm-bg);

    color:
    var(--tm-text);

    min-height:
    100vh;

    font-family:
    var(--tm-font-family, 'Inter', sans-serif);

    padding-bottom:
    0;

}



/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/


a {

    color:
    var(--tm-text);

    text-decoration:
    none;

    transition:
    var(--tm-transition);

}


a:hover {

    color:
    var(--tm-primary);

}



/*
|--------------------------------------------------------------------------
| Main Content
|--------------------------------------------------------------------------
*/


.tm-content {

    padding-top:
    40px;

    padding-bottom:
    80px;

}

.dj-icon{
    position:relative;
    display:inline-flex;
    font-size:2rem;
    line-height:1;
}

.dj-icon .note{
    position:absolute;
    top:-4px;
    right:-10px;
    font-size:.7em;
    color:var(--bs-primary);
}

.dj-deck{
    position:relative;
    display:inline-block;
    width:2.5rem;
    height:2.5rem;
}

.dj-deck i{
    position:absolute;
}

.platter{
    font-size:2.4rem;
    color:#2b2b2b;
}

.record{
    font-size:2rem;
    top:.18rem;
    left:.18rem;
    color:var(--bs-primary);
}

.spindle{
    font-size:.3rem;
    top:1.05rem;
    left:1.05rem;
    color:#fff;
}

.dj-logo{
    position:relative;
    display:inline-block;
    width:3rem;
    height:3rem;
}

.dj-logo i{
    position:absolute;
    transition:.3s;
}

.record{
    font-size:2.8rem;
    color:var(--bs-primary);
}

.phones{
    font-size:1.8rem;
    top:.45rem;
    left:.5rem;
    color:#fff;
}

.note{
    right:-.2rem;
    top:-.1rem;
    font-size:1rem;
    color:#ffc107;
}

.dj-logo:hover .record{
    transform:rotate(180deg);
}

.dj-logo:hover .note{
    transform:translateY(-4px);
}

/*
|--------------------------------------------------------------------------
| Containers
|--------------------------------------------------------------------------
*/


.container {

    max-width:
    var(--tm-content-max, 1200px);

}



/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/


::-webkit-scrollbar {

    width:
    10px;

}


::-webkit-scrollbar-track {

    background:
    var(--tm-bg);

}


::-webkit-scrollbar-thumb {

    background:
    var(--tm-surface-2);

    border-radius:
    10px;

}


::-webkit-scrollbar-thumb:hover {

    background:
    var(--tm-primary);

}

/* ---- navbar.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Compact Navbar
|--------------------------------------------------------------------------
*/

/* Nested Social fly-out inside the Account dropdown. */
.tm-nav-nested-dropdown {
    position: relative;
    width: 100%;
}

.tm-nav-nested-toggle {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.tm-nav-nested-toggle > i:first-child {
    width: 1.25rem;
    color: var(--tm-primary);
    text-align: center;
}

.tm-nav-nested-toggle > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tm-nav-nested-toggle strong {
    color: #fff;
    font-weight: 600;
}

.tm-nav-nested-toggle small {
    margin-top: 0.1rem;
    color: var(--tm-text-muted);
    font-size: 0.75rem;
    line-height: 1.3;
}

.tm-nav-nested-chevron {
    color: var(--tm-text-muted);
    font-size: 0.75rem;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.tm-nav-nested-toggle:hover,
.tm-nav-nested-toggle:focus-visible,
.tm-nav-nested-dropdown.is-open > .tm-nav-nested-toggle {
    background: rgba(255, 255, 255, 0.06);
}

.tm-nav-nested-toggle:hover strong,
.tm-nav-nested-toggle:focus-visible strong,
.tm-nav-nested-dropdown.is-open > .tm-nav-nested-toggle strong,
.tm-nav-nested-toggle:hover .tm-nav-nested-chevron,
.tm-nav-nested-toggle:focus-visible .tm-nav-nested-chevron,
.tm-nav-nested-dropdown.is-open .tm-nav-nested-chevron {
    color: var(--tm-primary);
}

.tm-nav-nested-toggle:focus-visible {
    outline: 2px solid var(--tm-primary);
    outline-offset: -2px;
}

.tm-nav-nested-menu {
    display: none;
    position: absolute;
    top: -0.5rem;
    right: calc(100% + 0.5rem);
    left: auto;
    width: max-content;
    min-width: 280px;
    max-width: 320px;
    z-index: 1200;
}

.tm-nav-nested-dropdown.is-open > .tm-nav-nested-menu {
    display: block;
}

.tm-nav-account > .tm-nav-dropdown-menu {
    overflow: visible;
}

.tm-nav-nested-menu > a > i {
    color: var(--tm-primary);
}

@media (max-width: 991.98px) {
    .tm-nav-nested-chevron {
        transform: rotate(-90deg);
    }

    .tm-nav-nested-dropdown.is-open .tm-nav-nested-chevron {
        transform: rotate(0deg);
    }

    .tm-nav-nested-menu {
        position: static;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0 0.5rem 0.5rem 1rem;
        padding-left: 0.5rem;
        border-left: 2px solid rgba(255, 255, 255, 0.1);
    }
}

.tm-navbar {

    position:
    sticky;

    top:
    0;

    z-index:
    1000;

    border-bottom:
    1px solid var(--tm-border);

    background:
    rgba(16, 18, 20, .94);

    backdrop-filter:
    blur(14px);

}


.tm-navbar-inner {

    position:
    relative;

    display:
    flex;

    min-height:
    70px;

    align-items:
    center;

    gap:
    1rem;

}


.tm-brand {

    display:
    inline-flex;

    flex-shrink:
    0;

    align-items:
    center;

    gap:
    .45rem;

    color:
    var(--tm-text);

    font-size:
    1.16rem;

    font-weight:
    800;

    letter-spacing:
    -.025em;

    text-decoration:
    none;

    white-space:
    nowrap;

}


.tm-brand:hover {

    color:
    var(--tm-primary);

}


.tm-nav-links {

    display:
    flex;

    min-width:
    0;

    flex:
    1;

    align-items:
    center;

    gap:
    .85rem;

}


.tm-nav-primary,
.tm-nav-actions {

    display:
    flex;

    flex-shrink:
    0;

    align-items:
    center;

    gap:
    .25rem;

}


.tm-nav-actions {

    justify-content:
    flex-end;

}


.tm-nav-link,
.tm-nav-dropdown-toggle,
.tm-nav-icon-link,
.tm-nav-auth-link {

    position:
    relative;

    display:
    inline-flex;

    min-height:
    42px;

    align-items:
    center;

    justify-content:
    center;

    gap:
    .45rem;

    padding:
    .55rem .72rem;

    border:
    1px solid transparent;

    border-radius:
    9px;

    background:
    transparent;

    color:
    var(--tm-text-muted);

    font:
    inherit;

    font-size:
    .9rem;

    font-weight:
    650;

    line-height:
    1;

    text-decoration:
    none;

    white-space:
    nowrap;

    cursor:
    pointer;

    transition:
    var(--tm-transition);

}


.tm-nav-link:hover,
.tm-nav-dropdown-toggle:hover,
.tm-nav-icon-link:hover,
.tm-nav-auth-link:hover,
.tm-nav-dropdown.is-open > .tm-nav-dropdown-toggle {

    border-color:
    var(--tm-border);

    background:
    var(--tm-surface);

    color:
    var(--tm-text);

}


.tm-nav-link > i,
.tm-nav-dropdown-toggle > i:first-child,
.tm-nav-icon-link > i {

    color:
    var(--tm-primary);

}


.tm-nav-dropdown {

    position:
    relative;

}


.tm-nav-chevron {

    margin-left:
    .08rem;

    color:
    var(--tm-text-muted) !important;

    font-size:
    .7rem;

    transition:
    transform .18s ease;

}


.tm-nav-dropdown.is-open .tm-nav-chevron {

    transform:
    rotate(180deg);

}


.tm-nav-dropdown-menu {

    position:
    absolute;

    top:
    calc(100% + .65rem);

    left:
    0;

    z-index:
    1100;

    display:
    none;

    width:
    max-content;

    min-width:
    255px;

    max-width:
    310px;

    padding:
    .55rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    13px;

    background:
    rgba(25, 29, 34, .985);

    box-shadow:
    0 18px 55px rgba(0, 0, 0, .45);

    backdrop-filter:
    blur(16px);

}


.tm-nav-dropdown.is-open > .tm-nav-dropdown-menu {

    display:
    grid;

    gap:
    .15rem;

}


.tm-nav-dropdown-menu-end {

    right:
    0;

    left:
    auto;

}


.tm-nav-dropdown-menu a {

    display:
    grid;

    grid-template-columns:
    32px minmax(0, 1fr);

    gap:
    .65rem;

    align-items:
    center;

    width:
    100%;

    padding:
    .68rem .72rem;

    border:
    0;

    border-radius:
    9px;

    color:
    var(--tm-text);

    text-decoration:
    none;

    white-space:
    normal;

    transition:
    var(--tm-transition);

}


.tm-nav-dropdown-menu a:hover {

    background:
    var(--tm-surface-2);

    color:
    var(--tm-text);

}


.tm-nav-dropdown-menu a > i {

    color:
    var(--tm-primary);

    font-size:
    1rem;

    text-align:
    center;

}


.tm-nav-dropdown-menu a span,
.tm-nav-dropdown-menu a strong,
.tm-nav-dropdown-menu a small {

    display:
    block;

}


.tm-nav-dropdown-menu a strong {

    font-size:
    .86rem;

    font-weight:
    750;

}


.tm-nav-dropdown-menu a small {

    margin-top:
    .18rem;

    color:
    var(--tm-text-muted);

    font-size:
    .7rem;

    line-height:
    1.35;

}


.tm-nav-dropdown-menu .tm-nav-danger-link > i,
.tm-nav-dropdown-menu .tm-nav-danger-link strong {

    color:
    var(--tm-danger);

}


.tm-nav-dropdown-divider {

    height:
    1px;

    margin:
    .4rem .35rem;

    background:
    var(--tm-border);

}


.tm-nav-search {

    display:
    flex;

    min-width:
    220px;

    max-width:
    470px;

    flex:
    1 1 380px;

    align-items:
    stretch;

    gap:
    .45rem;

    margin:
    0 auto;

}


.tm-nav-search-field {

    position:
    relative;

    display:
    flex;

    min-width:
    0;

    flex:
    1;

    align-items:
    center;

}


.tm-nav-search-field > i {

    position:
    absolute;

    left:
    .85rem;

    z-index:
    1;

    color:
    var(--tm-text-muted);

    pointer-events:
    none;

}


.tm-nav-search input {

    width:
    100%;

    min-width:
    0;

    height:
    42px;

    padding:
    .55rem .8rem .55rem 2.35rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    10px;

    outline:
    0;

    background:
    var(--tm-surface);

    color:
    var(--tm-text);

    font:
    inherit;

    font-size:
    .85rem;

    transition:
    var(--tm-transition);

}


.tm-nav-search input::placeholder {

    color:
    var(--tm-text-muted);

    opacity:
    .8;

}


.tm-nav-search input:focus {

    border-color:
    var(--tm-primary);

    box-shadow:
    0 0 0 3px rgba(255, 122, 24, .14);

}


.tm-nav-search .btn {

    display:
    inline-flex;

    min-width:
    42px;

    align-items:
    center;

    justify-content:
    center;

    gap:
    .4rem;

    padding:
    .55rem .75rem;

}


.tm-nav-search-button-label {

    display:
    none;

}


.tm-nav-icon-link {

    width:
    42px;

    padding:
    0;

}


.tm-nav-icon-link > i {

    font-size:
    1rem;

}


.tm-nav-icon-label {

    display:
    none;

}


.tm-nav-icon-link .tm-message-nav-badge,
.tm-nav-icon-link .tm-notification-nav-badge {

    position:
    absolute;

    top:
    -4px;

    right:
    -5px;

    min-width:
    18px;

    height:
    18px;

    padding:
    0 .28rem;

    border:
    2px solid rgba(16, 18, 20, .96);

    font-size:
    .6rem;

}


.tm-nav-account-toggle {

    padding-right:
    .62rem;

    padding-left:
    .68rem;

}


.tm-nav-login {

    display:
    inline-flex;

    min-height:
    42px;

    align-items:
    center;

    gap:
    .4rem;

    white-space:
    nowrap;

}


.tm-mobile-toggle {

    display:
    none;

    width:
    42px;

    height:
    42px;

    flex-shrink:
    0;

    align-items:
    center;

    justify-content:
    center;

    padding:
    0;

    border:
    1px solid var(--tm-border);

    border-radius:
    9px;

    background:
    var(--tm-surface);

    color:
    var(--tm-text);

    font-size:
    1.45rem;

    cursor:
    pointer;

}


.tm-mobile-toggle:hover {

    border-color:
    var(--tm-primary);

    color:
    var(--tm-primary);

}


/*
|--------------------------------------------------------------------------
| Collapsed navigation
|--------------------------------------------------------------------------
*/


@media(max-width: 1199px) {

    .tm-navbar-inner {

        flex-wrap:
        wrap;

    }


    .tm-mobile-toggle {

        display:
        inline-flex;

        margin-left:
        auto;

    }


    .tm-nav-links {

        display:
        none;

        width:
        100%;

        max-height:
        calc(100vh - 82px);

        flex:
        0 0 100%;

        flex-direction:
        column;

        align-items:
        stretch;

        gap:
        .8rem;

        padding:
        .75rem 0 1rem;

        overflow-y:
        auto;

    }


    .tm-nav-links.is-open {

        display:
        flex;

    }


    .tm-nav-primary,
    .tm-nav-actions {

        width:
        100%;

        flex-direction:
        column;

        align-items:
        stretch;

        gap:
        .25rem;

    }


    .tm-nav-link,
    .tm-nav-dropdown-toggle,
    .tm-nav-icon-link,
    .tm-nav-auth-link,
    .tm-nav-login {

        width:
        100%;

        justify-content:
        flex-start;

        min-height:
        46px;

        padding:
        .72rem .8rem;

    }


    .tm-nav-dropdown {

        width:
        100%;

    }


    .tm-nav-dropdown-toggle {

        justify-content:
        flex-start;

    }


    .tm-nav-dropdown-toggle .tm-nav-chevron {

        margin-left:
        auto;

    }


    .tm-nav-dropdown-menu,
    .tm-nav-dropdown-menu-end {

        position:
        static;

        width:
        auto;

        min-width:
        0;

        max-width:
        none;

        margin:
        .2rem 0 .5rem 1rem;

        padding:
        .35rem;

        border-radius:
        10px;

        box-shadow:
        none;

    }


    .tm-nav-dropdown-menu a {

        padding:
        .62rem .7rem;

    }


    .tm-nav-search {

        order:
        -1;

        width:
        100%;

        max-width:
        none;

        min-width:
        0;

        flex:
        0 0 auto;

        margin:
        0;

    }


    .tm-nav-search-button-label {

        display:
        inline;

    }


    .tm-nav-icon-link {

        position:
        relative;

        gap:
        .55rem;

    }


    .tm-nav-icon-label {

        display:
        inline;

    }


    .tm-nav-icon-link .tm-message-nav-badge,
    .tm-nav-icon-link .tm-notification-nav-badge {

        position:
        static;

        margin-left:
        auto;

        border:
        0;

    }


    .tm-nav-account-toggle {

        width:
        100%;

    }


    /*
    |--------------------------------------------------------------------------
    | Signed-in mobile actions
    |--------------------------------------------------------------------------
    | Messages, notifications and account share one balanced row. The account
    | menu expands below the full row rather than being constrained to one cell.
    */

    .tm-nav-actions-authenticated {

        display:
        grid;

        grid-template-columns:
        repeat(3, minmax(0, 1fr));

        align-items:
        stretch;

        gap:
        .4rem;

    }


    .tm-nav-actions-authenticated > .tm-nav-link {

        grid-column:
        1 / -1;

    }


    .tm-nav-actions-authenticated > .tm-nav-messages > .tm-message-nav-link,
    .tm-nav-actions-authenticated > .tm-nav-notifications > .tm-notification-nav-link,
    .tm-nav-actions-authenticated > .tm-nav-account > .tm-nav-account-toggle {

        width:
        100%;

        min-width:
        0;

        min-height:
        58px;

        flex-direction:
        column;

        justify-content:
        center;

        gap:
        .18rem;

        padding:
        .5rem .2rem;

        text-align:
        center;

    }


    .tm-nav-actions-authenticated > .tm-nav-messages > .tm-message-nav-link .tm-nav-icon-label,
    .tm-nav-actions-authenticated > .tm-nav-notifications > .tm-notification-nav-link .tm-nav-icon-label,
    .tm-nav-actions-authenticated > .tm-nav-account > .tm-nav-account-toggle span {

        display:
        block;

        max-width:
        100%;

        overflow:
        hidden;

        font-size:
        .72rem;

        line-height:
        1.1;

        text-overflow:
        ellipsis;

        white-space:
        nowrap;

    }


    .tm-nav-actions-authenticated > .tm-nav-messages > .tm-message-nav-link .tm-message-nav-badge,
    .tm-nav-actions-authenticated > .tm-nav-notifications > .tm-notification-nav-link .tm-notification-nav-badge {

        position:
        absolute;

        top:
        .22rem;

        right:
        calc(50% - 1.45rem);

        margin:
        0;

        border:
        2px solid rgba(16, 18, 20, .96);

    }


    /*
    | Keep the three action buttons fixed while message/notification previews
    | float underneath as overlays. Account keeps its normal full-width panel.
    */

    .tm-nav-actions-authenticated {

        position:
        relative;

        overflow:
        visible;

    }


    .tm-nav-actions-authenticated > .tm-nav-messages,
    .tm-nav-actions-authenticated > .tm-nav-notifications {

        position:
        static;

        display:
        block;

        min-width:
        0;

    }


    .tm-nav-actions-authenticated > .tm-nav-messages {

        grid-column:
        1;

    }


    .tm-nav-actions-authenticated > .tm-nav-notifications {

        grid-column:
        2;

    }


    .tm-nav-actions-authenticated > .tm-nav-account {

        display:
        contents;

    }


    .tm-nav-actions-authenticated > .tm-nav-account > .tm-nav-account-toggle {

        grid-column:
        3;

    }


    .tm-nav-actions-authenticated > .tm-nav-account > .tm-nav-account-toggle .tm-nav-chevron {

        display:
        none;

    }


    .tm-nav-actions-authenticated > .tm-nav-messages > .tm-nav-dropdown-menu,
    .tm-nav-actions-authenticated > .tm-nav-notifications > .tm-nav-dropdown-menu {

        position:
        absolute;

        top:
        calc(100% + .35rem);

        right:
        0;

        left:
        0;

        z-index:
        1350;

        grid-column:
        auto;

        width:
        100%;

        min-width:
        0;

        max-width:
        none;

        margin:
        0;

        box-shadow:
        0 18px 55px rgba(0, 0, 0, .5);

    }


    .tm-nav-actions-authenticated > .tm-nav-account > .tm-nav-dropdown-menu {

        grid-column:
        1 / -1;

        width:
        100%;

        margin:
        .05rem 0 .5rem;

    }

}


@media(max-width: 575px) {

    .tm-brand {

        font-size:
        1.03rem;

    }


    .tm-nav-search {

        display:
        grid;

        grid-template-columns:
        minmax(0, 1fr) auto;

    }


    .tm-nav-search-button-label {

        display:
        none;

    }

}


.tm-nav-logout-form {

    margin:
    0;

}


.tm-nav-logout-button {

    display:
    grid;

    grid-template-columns:
    32px minmax(0, 1fr);

    gap:
    .65rem;

    align-items:
    center;

    width:
    100%;

    padding:
    .68rem .72rem;

    border:
    0;

    border-radius:
    9px;

    background:
    transparent;

    color:
    var(--tm-text);

    font:
    inherit;

    text-align:
    left;

    white-space:
    normal;

    cursor:
    pointer;

    transition:
    var(--tm-transition);

}


.tm-nav-logout-button:hover,
.tm-nav-logout-button:focus-visible {

    background:
    var(--tm-surface-2);

    color:
    var(--tm-text);

}


.tm-nav-logout-button > i {

    color:
    var(--tm-danger, #dc3545);

    font-size:
    1rem;

    text-align:
    center;

}


.tm-nav-logout-button span,
.tm-nav-logout-button strong,
.tm-nav-logout-button small {

    display:
    block;

}


.tm-nav-logout-button strong {

    color:
    var(--tm-danger, #dc3545);

    font-size:
    .86rem;

    font-weight:
    750;

}


.tm-nav-logout-button small {

    margin-top:
    .12rem;

    color:
    var(--tm-text-muted);

    font-size:
    .72rem;

}

/* ---- buttons.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Buttons
|--------------------------------------------------------------------------
*/


.btn {

    border-radius:
    var(--tm-radius);

    font-weight:
    600;

    padding:
    .55rem 1.2rem;

    transition:
    var(--tm-transition);

}



/*
|--------------------------------------------------------------------------
| Primary
|--------------------------------------------------------------------------
*/


.btn-primary {

    background:
    var(--tm-primary);

    border-color:
    var(--tm-primary);

    color:
    #111;

}



.btn-primary:hover,
.btn-primary:focus {

    background:
    var(--tm-primary-hover);

    border-color:
    var(--tm-primary-hover);

    color:
    #111;

}



/*
|--------------------------------------------------------------------------
| Outline
|--------------------------------------------------------------------------
*/


.btn-outline-light {

    border-color:
    var(--tm-border);

    color:
    var(--tm-text);

}



.btn-outline-light:hover {

    background:
    var(--tm-surface-2);

    border-color:
    var(--tm-primary);

    color:
    var(--tm-primary);

}



/*
|--------------------------------------------------------------------------
| Secondary
|--------------------------------------------------------------------------
*/


.btn-secondary {

    background:
    var(--tm-surface-2);

    border-color:
    var(--tm-border);

    color:
    var(--tm-text);

}



.btn-secondary:hover {

    background:
    var(--tm-border);

    color:
    var(--tm-text);

}



/*
|--------------------------------------------------------------------------
| Button Hover
|--------------------------------------------------------------------------
*/


.btn:hover {

    transform:
    translateY(-1px);

}

/* ---- cards.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Cards
|--------------------------------------------------------------------------
*/


.tm-card {

    background:
    var(--tm-surface);

    border:
    1px solid var(--tm-border);

    border-radius:
    var(--tm-radius);

    padding:
    1.5rem;

    box-shadow:
    var(--tm-shadow);

    transition:
    var(--tm-transition);

}



.tm-card:hover {

    transform:
    translateY(-4px);

    border-color:
    rgba(255,122,24,.5);

}



/*
|--------------------------------------------------------------------------
| Card Titles
|--------------------------------------------------------------------------
*/


.tm-card-title {

    font-size:
    1.1rem;

    font-weight:
    700;

    color:
    var(--tm-text);

    margin-bottom:
    .5rem;

}



.tm-card-meta {

    color:
    var(--tm-text-muted);

    font-size:
    .9rem;

}



/*
|--------------------------------------------------------------------------
| DJ Cards
|--------------------------------------------------------------------------
*/


.tm-dj-card {

    text-align:
    center;

}



.tm-dj-avatar {

    width:
    90px;

    height:
    90px;

    border-radius:
    50%;

    object-fit:
    cover;

    margin:
    0 auto 1rem;

    border:
    3px solid var(--tm-border);

}



.tm-dj-card:hover .tm-dj-avatar {

    border-color:
    var(--tm-primary);

}



/*
|--------------------------------------------------------------------------
| Track Cards
|--------------------------------------------------------------------------
*/


.tm-track-card {

    display:
    flex;

    align-items:
    center;

    gap:
    1rem;

    text-align:
    left;

}


.tm-track-icon {

    width:
    55px;

    height:
    55px;

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    background:
    var(--tm-surface-2);

    border-radius:
    12px;

    color:
    var(--tm-primary);

    font-size:
    1.4rem;

}



.tm-track-info {

    flex:
    1;

}



/*
|--------------------------------------------------------------------------
| Statistics
|--------------------------------------------------------------------------
*/


.tm-stat {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .4rem;

    padding:
    .35rem .7rem;

    background:
    var(--tm-surface-2);

    border-radius:
    999px;

    color:
    var(--tm-text-muted);

    font-size:
    .85rem;

}



.tm-stat i {

    color:
    var(--tm-primary);

}

/* ---- forms.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Forms
|--------------------------------------------------------------------------
*/


.form-label {

    color:
    var(--tm-text);

    font-weight:
    600;

}



/*
|--------------------------------------------------------------------------
| Inputs
|--------------------------------------------------------------------------
*/


.form-control,
.form-select {

    background:
    var(--tm-surface);

    border:
    1px solid var(--tm-border);

    color:
    var(--tm-text);

    border-radius:
    var(--tm-radius);

    padding:
    .75rem 1rem;

}



.form-control::placeholder {

    color:
    var(--tm-text-muted);

}



.form-control:focus,
.form-select:focus {

    background:
    var(--tm-surface);

    color:
    var(--tm-text);

    border-color:
    var(--tm-primary);

    box-shadow:
    0 0 0 .2rem rgba(255,122,24,.15);

}



/*
|--------------------------------------------------------------------------
| File Upload
|--------------------------------------------------------------------------
*/


input[type="file"] {

    background:
    var(--tm-surface);

    color:
    var(--tm-text);

}



input[type="file"]::file-selector-button {

    background:
    var(--tm-primary);

    border:
    none;

    color:
    #111;

    padding:
    .5rem 1rem;

    margin-right:
    1rem;

    font-weight:
    600;

}



/*
|--------------------------------------------------------------------------
| Form Container
|--------------------------------------------------------------------------
*/


.tm-form-card {

    background:
    var(--tm-surface);

    border:
    1px solid var(--tm-border);

    border-radius:
    var(--tm-radius);

    padding:
    2rem;

    box-shadow:
    var(--tm-shadow);

}



/*
|--------------------------------------------------------------------------
| Headings
|--------------------------------------------------------------------------
*/


.tm-form-title {

    font-weight:
    800;

    margin-bottom:
    .5rem;

}



.tm-form-subtitle {

    color:
    var(--tm-text-muted);

    margin-bottom:
    2rem;

}

/* ---- player.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Smart Player
|--------------------------------------------------------------------------
*/


#mix-player {

    position:
    fixed;

    right:
    0;

    bottom:
    calc(12px + env(safe-area-inset-bottom, 0px));

    left:
    0;

    z-index:
    2000;

    width:
    min(
        calc(100% - 24px),
        1180px
    );

    margin:
    0 auto;

    color:
    var(--tm-text);

    transition:
    width .18s ease,
    right .18s ease,
    bottom .18s ease;

}


.tm-player-collapse-toggle {

    position:
    absolute;

    top:
    -14px;

    right:
    16px;

    z-index:
    3;

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    width:
    38px;

    height:
    30px;

    padding:
    0;

    border:
    1px solid var(--tm-border);

    border-radius:
    999px;

    background:
    rgba(25, 29, 34, .98);

    color:
    var(--tm-text-muted);

    box-shadow:
    0 8px 24px rgba(0, 0, 0, .34);

    cursor:
    pointer;

    transition:
    color .16s ease,
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;

}


.tm-player-collapse-icons {

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    line-height:
    1;

}


.tm-player-collapse-radio {

    display:
    none;

}


.tm-player-collapse-toggle:hover,
.tm-player-collapse-toggle:focus-visible {

    border-color:
    rgba(255, 122, 24, .62);

    background:
    var(--tm-primary);

    color:
    #fff;

    outline:
    none;

    transform:
    translateY(-2px);

}


#mix-player.is-collapsed {

    right:
    12px;

    bottom:
    calc(10px + env(safe-area-inset-bottom, 0px));

    left:
    auto;

    width:
    44px;

    margin:
    0;

}


#mix-player.is-collapsed .tm-player-shell {

    display:
    none;

}


#mix-player.is-collapsed .tm-player-collapse-toggle {

    position:
    static;

    width:
    44px;

    height:
    52px;

    border-radius:
    16px;

    color:
    var(--tm-text);

}


#mix-player.is-collapsed .tm-player-collapse-icons {

    flex-direction:
    column;

    gap:
    2px;

}


#mix-player.is-collapsed .tm-player-collapse-chevron {

    font-size:
    .78rem;

}


#mix-player.is-collapsed .tm-player-collapse-radio {

    display:
    inline-block;

    font-size:
    .78rem;

    color:
    var(--tm-primary);

}


#mix-player.is-collapsed .tm-player-collapse-toggle:hover .tm-player-collapse-radio,
#mix-player.is-collapsed .tm-player-collapse-toggle:focus-visible .tm-player-collapse-radio {

    color:
    #fff;

}


.tm-player-shell {

    overflow:
    hidden;

    border:
    1px solid var(--tm-border);

    border-radius:
    18px;

    background:
    rgba(25, 29, 34, .96);

    box-shadow:
    0 18px 55px rgba(0, 0, 0, .5);

    backdrop-filter:
    blur(18px);

}


.tm-player-main {

    display:
    grid;

    grid-template-columns:
    auto
    minmax(220px, 1fr)
    auto
    minmax(135px, .35fr)
    auto;

    gap:
    1rem;

    align-items:
    center;

    padding:
    .8rem 1rem;

}


.tm-player-artwork-link {

    display:
    block;

    border-radius:
    12px;

    outline:
    none;

}


.tm-player-artwork-link:focus-visible {

    box-shadow:
    0 0 0 3px rgba(255, 122, 24, .35);

}


.player-cover {

    display:
    block;

    width:
    68px;

    height:
    68px;

    border:
    1px solid var(--tm-border);

    border-radius:
    12px;

    object-fit:
    cover;

    background:
    var(--tm-surface-2);

}


.tm-player-details {

    min-width:
    0;

}


.tm-player-title {

    display:
    block;

    overflow:
    hidden;

    color:
    var(--tm-text);

    font-weight:
    750;

    line-height:
    1.25;

    text-overflow:
    ellipsis;

    white-space:
    nowrap;

}


.tm-player-title:hover {

    color:
    var(--tm-primary);

}


.tm-player-title[tabindex="-1"] {

    pointer-events:
    none;

}


.tm-player-artist {

    overflow:
    hidden;

    margin-top:
    .15rem;

    color:
    var(--tm-text-muted);

    font-size:
    .86rem;

    text-overflow:
    ellipsis;

    white-space:
    nowrap;

}


.tm-player-progress-track {

    position:
    relative;

    display:
    block;

    width:
    100%;

    height:
    8px;

    margin-top:
    .65rem;

    padding:
    0;

    overflow:
    hidden;

    border:
    0;

    border-radius:
    999px;

    background:
    var(--tm-surface-2);

    cursor:
    pointer;

}


.tm-player-progress-track:disabled {

    cursor:
    default;

    opacity:
    .65;

}


.tm-player-progress {

    position:
    absolute;

    top:
    0;

    bottom:
    0;

    left:
    0;

    width:
    0;

    border-radius:
    inherit;

    background:
    var(--tm-primary);

    transition:
    width .12s linear;

}


.tm-player-time-row {

    display:
    flex;

    justify-content:
    space-between;

    margin-top:
    .3rem;

    color:
    var(--tm-text-muted);

    font-size:
    .72rem;

    font-variant-numeric:
    tabular-nums;

}


.tm-player-controls {

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    gap:
    .55rem;

}


.tm-player-control-button,
.tm-player-toggle,
.tm-player-queue-toggle,
.tm-player-drawer-close {

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid var(--tm-border);

    color:
    var(--tm-text);

    transition:
    var(--tm-transition);

}


.tm-player-control-button {

    width:
    39px;

    height:
    39px;

    border-radius:
    50%;

    background:
    var(--tm-surface-2);

}


.tm-player-toggle {

    width:
    50px;

    height:
    50px;

    border:
    0;

    border-radius:
    50%;

    background:
    var(--tm-primary);

    color:
    #111;

    font-size:
    1.35rem;

}


.tm-player-control-button:hover:not(:disabled),
.tm-player-queue-toggle:hover,
.tm-player-drawer-close:hover {

    border-color:
    var(--tm-primary);

    color:
    var(--tm-primary);

}


.tm-player-toggle:hover:not(:disabled) {

    background:
    var(--tm-primary-hover);

}


.tm-player-control-button:disabled,
.tm-player-toggle:disabled {

    cursor:
    default;

    opacity:
    .45;

}


.tm-player-volume {

    display:
    flex;

    align-items:
    center;

    gap:
    .55rem;

    min-width:
    0;

    color:
    var(--tm-text-muted);

}


#player-volume {

    width:
    100%;

    min-width:
    80px;

    accent-color:
    var(--tm-primary);

}


.tm-player-queue-toggle {

    position:
    relative;

    min-width:
    82px;

    min-height:
    42px;

    gap:
    .45rem;

    padding:
    .55rem .7rem;

    border-radius:
    11px;

    background:
    var(--tm-surface-2);

}


.tm-player-queue-count {

    display:
    inline-flex;

    min-width:
    21px;

    height:
    21px;

    align-items:
    center;

    justify-content:
    center;

    padding:
    0 .35rem;

    border-radius:
    999px;

    background:
    var(--tm-primary);

    color:
    #111;

    font-size:
    .72rem;

    font-weight:
    800;

}


.tm-player-drawer {

    max-height:
    min(58vh, 520px);

    overflow:
    hidden;

    border-top:
    1px solid var(--tm-border);

    background:
    rgba(16, 18, 20, .98);

}


.tm-player-drawer[hidden] {

    display:
    none;

}


.tm-player-drawer-header {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1rem;

    padding:
    .75rem 1rem;

    border-bottom:
    1px solid var(--tm-border);

}


.tm-player-tabs {

    display:
    flex;

    gap:
    .4rem;

}


.tm-player-tab {

    padding:
    .45rem .75rem;

    border:
    0;

    border-radius:
    9px;

    background:
    transparent;

    color:
    var(--tm-text-muted);

    font-weight:
    650;

}


.tm-player-tab:hover,
.tm-player-tab.is-active {

    background:
    var(--tm-surface-2);

    color:
    var(--tm-primary);

}


.tm-player-drawer-close {

    width:
    36px;

    height:
    36px;

    border-radius:
    9px;

    background:
    var(--tm-surface-2);

}


.tm-player-panel {

    max-height:
    min(50vh, 440px);

    padding:
    1rem;

    overflow-y:
    auto;

}


.tm-player-panel[hidden] {

    display:
    none;

}


.tm-player-panel-toolbar {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1rem;

    margin-bottom:
    .8rem;

}


.tm-player-panel-summary {

    margin-top:
    .15rem;

    color:
    var(--tm-text-muted);

    font-size:
    .8rem;

}


.tm-player-list {

    display:
    grid;

    gap:
    .55rem;

    margin:
    0;

    padding:
    0;

    list-style:
    none;

}


.tm-player-list-item {

    display:
    grid;

    grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

    gap:
    .75rem;

    align-items:
    center;

    padding:
    .65rem;

    border:
    1px solid transparent;

    border-radius:
    11px;

    background:
    var(--tm-surface);

}


.tm-player-list-item:hover {

    border-color:
    var(--tm-border);

    background:
    var(--tm-surface-2);

}


.tm-player-list-cover {

    width:
    44px;

    height:
    44px;

    border-radius:
    8px;

    object-fit:
    cover;

    background:
    var(--tm-surface-2);

}


.tm-player-list-copy {

    min-width:
    0;

}


.tm-player-list-title,
.tm-player-list-artist {

    overflow:
    hidden;

    text-overflow:
    ellipsis;

    white-space:
    nowrap;

}


.tm-player-list-title {

    color:
    var(--tm-text);

    font-size:
    .9rem;

    font-weight:
    700;

}


.tm-player-list-artist {

    color:
    var(--tm-text-muted);

    font-size:
    .78rem;

}


.tm-player-list-actions {

    display:
    flex;

    align-items:
    center;

    gap:
    .35rem;

}


.tm-player-list-action {

    display:
    inline-flex;

    width:
    32px;

    height:
    32px;

    align-items:
    center;

    justify-content:
    center;

    padding:
    0;

    border:
    1px solid var(--tm-border);

    border-radius:
    8px;

    background:
    transparent;

    color:
    var(--tm-text-muted);

}


.tm-player-list-action:hover:not(:disabled) {

    border-color:
    var(--tm-primary);

    color:
    var(--tm-primary);

}


.tm-player-list-action:disabled {

    opacity:
    .35;

}


.tm-player-empty {

    display:
    grid;

    justify-items:
    center;

    gap:
    .35rem;

    padding:
    2rem 1rem;

    color:
    var(--tm-text-muted);

    text-align:
    center;

}


.tm-player-empty i {

    margin-bottom:
    .25rem;

    color:
    var(--tm-primary);

    font-size:
    1.8rem;

}


.tm-player-empty strong {

    color:
    var(--tm-text);

}


.tm-player-empty span {

    max-width:
    470px;

    font-size:
    .82rem;

}


.tm-add-queue {

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

}


.tm-add-queue.is-added {

    border-color:
    var(--tm-success);

    color:
    var(--tm-success);

}


@media(max-width: 991px) {

    .tm-player-main {

        grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

        gap:
        .7rem;

    }


    .tm-player-controls {

        grid-column:
        1 / 3;

        justify-content:
        flex-start;

    }


    .tm-player-volume {

        grid-column:
        3;

        grid-row:
        2;

        width:
        125px;

    }


    .tm-player-queue-toggle {

        grid-column:
        3;

        grid-row:
        1;

    }

}


@media(max-width: 575px) {

    #mix-player {

        bottom:
        calc(6px + env(safe-area-inset-bottom, 0px));

        width:
        calc(100% - 12px);

    }


    #mix-player.is-collapsed {

        right:
        8px;

        bottom:
        calc(8px + env(safe-area-inset-bottom, 0px));

        width:
        44px;

    }


    .tm-player-collapse-toggle {

        right:
        10px;

    }


    .tm-player-main {

        grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

        padding:
        .65rem;

    }


    .player-cover {

        width:
        52px;

        height:
        52px;

    }


    .tm-player-details {

        align-self:
        stretch;

    }


    .tm-player-title {

        font-size:
        .88rem;

    }


    .tm-player-artist {

        font-size:
        .76rem;

    }


    .tm-player-progress-track {

        margin-top:
        .42rem;

    }


    .tm-player-controls {

        grid-column:
        1 / 4;

        justify-content:
        center;

    }


    .tm-player-volume {

        display:
        none;

    }


    .tm-player-queue-toggle {

        min-width:
        44px;

        width:
        44px;

        min-height:
        40px;

        padding:
        .45rem;

    }


    .tm-player-queue-label {

        display:
        none;

    }


    .tm-player-queue-count {

        position:
        absolute;

        top:
        -6px;

        right:
        -5px;

        min-width:
        18px;

        height:
        18px;

        padding:
        0 .25rem;

        font-size:
        .64rem;

    }


    .tm-player-drawer {

        max-height:
        64vh;

    }


    .tm-player-panel {

        max-height:
        54vh;

        padding:
        .75rem;

    }


    .tm-player-panel-toolbar {

        align-items:
        flex-start;

    }


    .tm-player-list-item {

        grid-template-columns:
        auto
        minmax(0, 1fr);

    }


    .tm-player-list-actions {

        grid-column:
        1 / 3;

        justify-content:
        flex-end;

    }


    .tm-player-tabs {

        overflow-x:
        auto;

    }

}


/*
|--------------------------------------------------------------------------
| Playback Status
|--------------------------------------------------------------------------
*/


.tm-player-message {

    margin-top:
    .45rem;

    padding:
    .4rem .55rem;

    border-radius:
    7px;

    font-size:
    .76rem;

    line-height:
    1.35;

}


.tm-player-message[hidden] {

    display:
    none;

}


.tm-player-message.is-danger {

    border:
    1px solid rgba(220, 53, 69, .45);

    background:
    rgba(220, 53, 69, .12);

    color:
    #ffadb6;

}


.tm-player-message.is-warning {

    border:
    1px solid rgba(255, 193, 7, .42);

    background:
    rgba(255, 193, 7, .1);

    color:
    #ffe18b;

}


@media (prefers-reduced-motion: reduce) {

    #mix-player,
    .tm-player-collapse-toggle {

        transition:
        none;

    }

}

/* ---- dashboard.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Dashboard
|--------------------------------------------------------------------------
*/


.tm-dashboard-header {

    margin-bottom:
    2.5rem;

}



.tm-dashboard-title {

    font-size:
    2rem;

    font-weight:
    800;

}



.tm-dashboard-subtitle {

    color:
    var(--tm-text-muted);

}



/*
|--------------------------------------------------------------------------
| Stats
|--------------------------------------------------------------------------
*/


.tm-stats-grid {

    display:
    grid;

    grid-template-columns:
    repeat(3, 1fr);

    gap:
    1.25rem;

    margin-bottom:
    2.5rem;

}



.tm-stat-card {

    background:
    var(--tm-surface);

    border:
    1px solid var(--tm-border);

    border-radius:
    var(--tm-radius);

    padding:
    1.5rem;

    transition:
    var(--tm-transition);

}



.tm-stat-card:hover {

    border-color:
    var(--tm-primary);

    transform:
    translateY(-3px);

}



.tm-stat-icon {

    width:
    45px;

    height:
    45px;

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    background:
    var(--tm-surface-2);

    border-radius:
    12px;

    color:
    var(--tm-primary);

    margin-bottom:
    1rem;

}



.tm-stat-number {

    font-size:
    2rem;

    font-weight:
    800;

}



.tm-stat-label {

    color:
    var(--tm-text-muted);

}



/*
|--------------------------------------------------------------------------
| Dashboard Sections
|--------------------------------------------------------------------------
*/


.tm-dashboard-section {

    margin-bottom:
    2.5rem;

}



.tm-section-title {

    font-size:
    1.3rem;

    font-weight:
    700;

    margin-bottom:
    1rem;

}



/*
|--------------------------------------------------------------------------
| Quick Actions
|--------------------------------------------------------------------------
*/


.tm-action-grid {

    display:
    grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:
    1rem;

}



.tm-action-card {

    background:
    var(--tm-surface);

    border:
    1px solid var(--tm-border);

    padding:
    1.25rem;

    border-radius:
    var(--tm-radius);

    text-align:
    center;

}



.tm-action-card i {

    font-size:
    2rem;

    color:
    var(--tm-primary);

    display:
    block;

    margin-bottom:
    .75rem;

}



/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/


@media(max-width:768px){


.tm-stats-grid {

    grid-template-columns:
    1fr;

}


.tm-action-grid {

    grid-template-columns:
    1fr;

}


}

/*
|--------------------------------------------------------------------------
| Dashboard Welcome & Navigation
|--------------------------------------------------------------------------
*/


.tm-dashboard-header {

    position:
    relative;

    overflow:
    visible;

    background:
    var(--tm-surface);

    background:
    linear-gradient(
        135deg,
        color-mix(in srgb, var(--tm-primary) 14%, var(--tm-surface)),
        var(--tm-surface) 58%
    );

    border:
    1px solid var(--tm-border);

    border-radius:
    calc(var(--tm-radius) + 4px);

    box-shadow:
    0 18px 45px rgba(0, 0, 0, .14);

}


.tm-dashboard-welcome {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1.5rem;

    padding:
    1.65rem 1.75rem 1.4rem;

}


.tm-dashboard-eyebrow {

    margin-bottom:
    .35rem;

    color:
    var(--tm-primary);

    font-size:
    .72rem;

    font-weight:
    800;

    letter-spacing:
    .13em;

    text-transform:
    uppercase;

}


.tm-dashboard-primary-action {

    display:
    inline-flex;

    flex:
    0 0 auto;

    align-items:
    center;

    gap:
    .55rem;

    min-height:
    42px;

    padding-inline:
    1.15rem;

    border-radius:
    999px;

    font-weight:
    700;

}


.tm-dashboard-nav {

    display:
    flex;

    align-items:
    center;

    gap:
    .35rem;

    min-width:
    0;

    padding:
    .55rem .7rem;

    border-top:
    1px solid var(--tm-border);

    background:
    color-mix(in srgb, var(--tm-surface-2) 72%, transparent);

    border-radius:
    0 0 calc(var(--tm-radius) + 4px) calc(var(--tm-radius) + 4px);

}


.tm-dashboard-nav-link {

    position:
    relative;

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    gap:
    .5rem;

    min-height:
    40px;

    padding:
    .58rem .82rem;

    color:
    var(--tm-text-muted);

    background:
    transparent;

    border:
    0;

    border-radius:
    10px;

    font-size:
    .88rem;

    font-weight:
    700;

    line-height:
    1;

    text-decoration:
    none;

    white-space:
    nowrap;

    transition:
    var(--tm-transition);

}


.tm-dashboard-nav-link:hover,
.tm-dashboard-nav-link:focus-visible,
.tm-dashboard-nav-link[aria-expanded="true"] {

    color:
    var(--tm-text);

    background:
    var(--tm-surface);

}


.tm-dashboard-nav-link.is-active {

    color:
    #fff;

    background:
    var(--tm-primary);

    box-shadow:
    0 8px 22px color-mix(in srgb, var(--tm-primary) 25%, transparent);

}


.tm-dashboard-nav-link.is-setup {

    color:
    var(--tm-success, #20c997);

}


.tm-dashboard-nav-link.is-setup:hover,
.tm-dashboard-nav-link.is-setup:focus-visible {

    color:
    #fff;

    background:
    var(--tm-success, #198754);

}


.tm-dashboard-nav-link.dropdown-toggle::after {

    margin-left:
    .1rem;

    opacity:
    .65;

}


.tm-dashboard-nav-badge {

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    min-width:
    20px;

    height:
    20px;

    padding-inline:
    .32rem;

    color:
    #fff;

    background:
    var(--bs-danger);

    border-radius:
    999px;

    font-size:
    .68rem;

    font-weight:
    800;

}


.tm-dashboard-nav > .dropdown {

    position:
    relative;

}


.tm-dashboard-nav > .dropdown > .tm-dashboard-dropdown {

    top:
    calc(100% + .45rem);

    right:
    auto;

    left:
    0;

    margin:
    0;

    z-index:
    1080;

}


.tm-dashboard-nav > .dropdown > .tm-dashboard-dropdown.dropdown-menu-end {

    right:
    0;

    left:
    auto;

}



.tm-dashboard-dropdown {

    min-width:
    220px;

    padding:
    .45rem;

    background:
    var(--tm-surface);

    border:
    1px solid var(--tm-border);

    border-radius:
    12px;

    box-shadow:
    0 18px 45px rgba(0, 0, 0, .22);

}


.tm-dashboard-dropdown .dropdown-item {

    display:
    flex;

    align-items:
    center;

    gap:
    .7rem;

    padding:
    .72rem .78rem;

    color:
    var(--tm-text);

    border-radius:
    8px;

    font-size:
    .9rem;

}


.tm-dashboard-dropdown .dropdown-item i {

    width:
    1.1rem;

    color:
    var(--tm-primary);

    text-align:
    center;

}


.tm-dashboard-dropdown .dropdown-item:hover,
.tm-dashboard-dropdown .dropdown-item:focus {

    color:
    var(--tm-text);

    background:
    var(--tm-surface-2);

}


@media(max-width:991.98px) {

    .tm-dashboard-nav {

        flex-wrap:
        wrap;

        justify-content:
        flex-start;

    }


    .tm-dashboard-nav > .ms-lg-auto {

        margin-left:
        0 !important;

    }

}


@media(max-width:575.98px) {

    .tm-dashboard-welcome {

        align-items:
        flex-start;

        flex-direction:
        column;

        padding:
        1.25rem;

    }


    .tm-dashboard-title {

        font-size:
        1.55rem;

    }


    .tm-dashboard-primary-action {

        width:
        100%;

        justify-content:
        center;

    }


    .tm-dashboard-nav {

        padding:
        .5rem;

    }


    .tm-dashboard-nav-link {

        min-height:
        42px;

        padding-inline:
        .7rem;

    }

}

/*
|--------------------------------------------------------------------------
| In-page dashboard navigation
|--------------------------------------------------------------------------
*/

.tm-dashboard-section-anchor {

    scroll-margin-top:
    7rem;

}


/*
|--------------------------------------------------------------------------
| Dashboard readiness and profile summary
|--------------------------------------------------------------------------
*/

.tm-dashboard-next-steps {

    padding:
    1.35rem;

    background:
    linear-gradient(
        135deg,
        color-mix(in srgb, var(--tm-primary) 9%, var(--tm-surface)),
        var(--tm-surface) 68%
    );

}


.tm-dashboard-next-steps-heading {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1rem;

    margin-bottom:
    1rem;

}


.tm-dashboard-readiness {

    display:
    flex;

    flex-direction:
    column;

    align-items:
    flex-end;

    flex:
    0 0 auto;

}


.tm-dashboard-readiness strong {

    color:
    var(--tm-primary);

    font-size:
    1.35rem;

    line-height:
    1;

}


.tm-dashboard-readiness span {

    margin-top:
    .2rem;

    color:
    var(--tm-text-muted);

    font-size:
    .76rem;

    font-weight:
    700;

    text-transform:
    uppercase;

    letter-spacing:
    .07em;

}


.tm-dashboard-readiness-progress {

    height:
    6px;

    margin-bottom:
    1rem;

    background:
    var(--tm-surface-2);

}


.tm-dashboard-next-step-grid {

    display:
    grid;

    grid-template-columns:
    repeat(2, minmax(0, 1fr));

    gap:
    .75rem;

}


.tm-dashboard-next-step {

    display:
    grid;

    grid-template-columns:
    auto minmax(0, 1fr) auto;

    align-items:
    center;

    gap:
    .85rem;

    min-width:
    0;

    padding:
    .9rem;

    color:
    var(--tm-text);

    background:
    color-mix(in srgb, var(--tm-surface-2) 78%, transparent);

    border:
    1px solid var(--tm-border);

    border-radius:
    12px;

    transition:
    var(--tm-transition);

}


.tm-dashboard-next-step:hover,
.tm-dashboard-next-step:focus-visible {

    color:
    var(--tm-text);

    border-color:
    color-mix(in srgb, var(--tm-primary) 60%, var(--tm-border));

    transform:
    translateY(-2px);

}


.tm-dashboard-next-step-icon {

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    width:
    42px;

    height:
    42px;

    border-radius:
    10px;

    font-size:
    1.05rem;

}


.tm-dashboard-next-step-copy {

    display:
    block;

    min-width:
    0;

}


.tm-dashboard-next-step-copy strong,
.tm-dashboard-next-step-copy span {

    display:
    block;

}


.tm-dashboard-next-step-copy span {

    margin-top:
    .2rem;

    color:
    var(--tm-text-muted);

    font-size:
    .82rem;

    line-height:
    1.35;

}


.tm-dashboard-next-step-action {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .35rem;

    color:
    var(--tm-primary);

    font-size:
    .78rem;

    font-weight:
    800;

    white-space:
    nowrap;

}


.tm-dashboard-profile-summary {

    padding:
    1.35rem;

}


.tm-dashboard-profile-main {

    display:
    flex;

    align-items:
    center;

    gap:
    1.2rem;

}


.tm-dashboard-profile-avatar {

    flex:
    0 0 auto;

    object-fit:
    cover;

    border:
    3px solid color-mix(in srgb, var(--tm-primary) 35%, var(--tm-border));

    border-radius:
    22px;

    background:
    var(--tm-surface-2);

}


.tm-dashboard-profile-copy {

    min-width:
    0;

}


.tm-dashboard-profile-bio {

    display:
    -webkit-box;

    overflow:
    hidden;

    -webkit-box-orient:
    vertical;

    -webkit-line-clamp:
    3;

}


.tm-dashboard-profile-stats {

    margin:
    1.25rem 0 0;

}


@media(max-width:991.98px) {

    .tm-dashboard-next-step-grid {

        grid-template-columns:
        1fr;

    }

}


@media(max-width:575.98px) {

    .tm-dashboard-next-steps-heading,
    .tm-dashboard-profile-main {

        align-items:
        flex-start;

        flex-direction:
        column;

    }


    .tm-dashboard-readiness {

        align-items:
        flex-start;

    }


    .tm-dashboard-next-step {

        grid-template-columns:
        auto minmax(0, 1fr);

    }


    .tm-dashboard-next-step-action {

        grid-column:
        2;

    }


    .tm-dashboard-profile-avatar {

        width:
        88px;

        height:
        88px;

    }

}

/* ---- dj.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine DJ Profiles
|--------------------------------------------------------------------------
*/


.tm-dj-header {

    background:
    linear-gradient(
        135deg,
        var(--tm-surface),
        var(--tm-bg)
    );

    border:
    1px solid var(--tm-border);

    border-radius:
    var(--tm-radius);

    padding:
    2.5rem;

    margin-bottom:
    2rem;

}

.tm-avatar
{
    width:140px;
    height:140px;
    object-fit:cover;
    border-radius:50%;
    margin-bottom:20px;
}

.tm-track-cover
{
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:12px;
}

/*
|--------------------------------------------------------------------------
| DJ Identity
|--------------------------------------------------------------------------
*/


.tm-dj-name {

    font-size:
    2.4rem;

    font-weight:
    800;

}



.tm-dj-location {

    color:
    var(--tm-text-muted);

}



.tm-dj-bio {

    color:
    var(--tm-text-muted);

}



/*
|--------------------------------------------------------------------------
| DJ Stats
|--------------------------------------------------------------------------
*/


.tm-dj-stats {
	
    justify-content:
    center;

    display:
    flex;

    gap:
    1rem;

    flex-wrap:
    wrap;

    margin-top:
    1.5rem;

}



.tm-dj-stat {

    background:
    var(--tm-surface-2);

    padding:
    .75rem 1.2rem;

    border-radius:
    999px;

}



.tm-dj-stat strong {

    color:
    var(--tm-primary);

}



/*
|--------------------------------------------------------------------------
| Track List
|--------------------------------------------------------------------------
*/


.tm-release-list {

    display:
    flex;

    flex-direction:
    column;

    gap:
    1rem;

}



/*
|--------------------------------------------------------------------------
| Profile Actions
|--------------------------------------------------------------------------
*/


.tm-profile-actions {

    margin-top:
    1.5rem;

}

/* ---- animations.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Animations
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Page Load
|--------------------------------------------------------------------------
*/


body {

    animation:
    tmFadeIn .25s ease;

}


@keyframes tmFadeIn {

    from {

        opacity:
        0;

        transform:
        translateY(8px);

    }


    to {

        opacity:
        1;

        transform:
        translateY(0);

    }

}



/*
|--------------------------------------------------------------------------
| Cards
|--------------------------------------------------------------------------
*/


.tm-card,
.tm-stat-card,
.tm-action-card {

    animation:
    tmCardIn .3s ease;

}



@keyframes tmCardIn {


    from {

        opacity:
        0;

        transform:
        translateY(12px);

    }


    to {

        opacity:
        1;

        transform:
        translateY(0);

    }

}



/*
|--------------------------------------------------------------------------
| Pulse
|--------------------------------------------------------------------------
*/


.tm-playing {

    animation:
    tmPulse 1.8s infinite;

}



@keyframes tmPulse {


    0% {

        box-shadow:
        0 0 0 0 rgba(255,122,24,.4);

    }


    70% {

        box-shadow:
        0 0 0 12px rgba(255,122,24,0);

    }


    100% {

        box-shadow:
        0 0 0 0 rgba(255,122,24,0);

    }

}

/* ---- utilities.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Utilities
|--------------------------------------------------------------------------
*/


.text-tm-muted {

    color:
    var(--tm-text-muted)!important;

}



.bg-tm-surface {

    background:
    var(--tm-surface)!important;

}



.bg-tm-surface-2 {

    background:
    var(--tm-surface-2)!important;

}



.border-tm {

    border-color:
    var(--tm-border)!important;

}



.rounded-tm {

    border-radius:
    var(--tm-radius)!important;

}



.shadow-tm {

    box-shadow:
    var(--tm-shadow)!important;

}



/*
|--------------------------------------------------------------------------
| Music Helpers
|--------------------------------------------------------------------------
*/


.tm-flex-center {

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

}



.tm-gap-1 {

    gap:
    .5rem;

}



.tm-gap-2 {

    gap:
    1rem;

}

/* ---- playlists.css ---- */
/*
|--------------------------------------------------------------------------
| Playlist Cards
|--------------------------------------------------------------------------
*/


.tm-playlist-cover {

    width:
    100%;

    aspect-ratio:
    1 / 1;

    object-fit:
    cover;

    background:
    var(--tm-surface-2);

}


.tm-playlist-card {

    transition:
    var(--tm-transition);

}


.tm-playlist-card:hover .tm-playlist-cover {

    filter:
    brightness(1.08);

}



/*
|--------------------------------------------------------------------------
| Native Playlist Dialog
|--------------------------------------------------------------------------
*/


.tm-playlist-dialog {

    width:
    min(
        560px,
        calc(100% - 2rem)
    );

    max-height:
    min(
        720px,
        calc(100vh - 2rem)
    );

    overflow:
    auto;

    color:
    var(--tm-text);

    background:
    var(--tm-surface);

    border:
    1px solid var(--tm-border);

    border-radius:
    var(--tm-radius);

    padding:
    1.5rem;

    box-shadow:
    0 24px 80px rgba(0,0,0,.55);

}


.tm-playlist-dialog::backdrop {

    background:
    rgba(0,0,0,.72);

    backdrop-filter:
    blur(4px);

}


.tm-playlist-dialog-header {

    display:
    flex;

    align-items:
    flex-start;

    justify-content:
    space-between;

    gap:
    1rem;

    margin-bottom:
    1rem;

}


.tm-playlist-options {

    display:
    grid;

    gap:
    .75rem;

}


.tm-playlist-option {

    width:
    100%;

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1rem;

    text-align:
    left;

    padding:
    .9rem 1rem;

    color:
    var(--tm-text);

    background:
    var(--tm-surface-2);

    border:
    1px solid var(--tm-border);

    border-radius:
    calc(
        var(--tm-radius) * .8
    );

    transition:
    var(--tm-transition);

}


.tm-playlist-option:hover {

    border-color:
    var(--tm-primary);

    transform:
    translateY(-1px);

}


.tm-playlist-option.is-added {

    border-color:
    var(--bs-success);

    background:
    rgba(0, 188, 140, .12);

}


.tm-playlist-option-name {

    display:
    block;

    color:
    var(--tm-text);

    font-weight:
    700;

}


.tm-playlist-option-meta {

    display:
    block;

    color:
    var(--tm-text-muted);

    font-size:
    .82rem;

}


.tm-playlist-dialog-loading {

    padding:
    1.5rem;

    text-align:
    center;

    color:
    var(--tm-text-muted);

}


@media(max-width: 767.98px) {

    .tm-playlist-dialog {

        padding:
        1rem;

    }

}

/* ---- follows.css ---- */
.tm-follow-card {
    display: flex;
    flex-direction: column;
}

.tm-follow-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.08);
}

.tm-follow-avatar-sm {
    width: 64px;
    height: 64px;
}

.tm-follow-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.tm-follow-stats span {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .78rem;
    color: var(--tm-text-muted, #9ca3af);
}

.tm-follow-stats strong {
    color: var(--tm-text, #fff);
    font-size: 1rem;
}

.tm-dj-profile-avatar {
    width: min(210px, 55vw);
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.08);
}

.tm-dj-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: .75rem;
}

.tm-follow-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .75rem .4rem .4rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: inherit;
}

.tm-follow-chip img {
    border-radius: 50%;
    object-fit: cover;
}

.tm-follow-feed {
    display: grid;
    gap: 1rem;
}

.tm-feed-card {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
}

.tm-feed-cover {
    width: 150px;
    height: 100%;
    min-height: 150px;
    object-fit: cover;
}

.tm-feed-content {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.25rem;
}

.tm-feed-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .tm-dj-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tm-feed-cover {
        width: 110px;
        min-height: 140px;
    }
}

@media (max-width: 575.98px) {
    .tm-feed-card {
        display: block;
    }

    .tm-feed-cover {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .tm-dj-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* DJ profile identity and banner */
.tm-dj-profile-card {
    padding: 0;
    overflow: hidden;
}

.tm-dj-profile-card:hover {
    transform: none;
}

.tm-dj-profile-banner {
    position: relative;
    min-height: 190px;
    aspect-ratio: 4 / 1;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 30%, rgba(228, 87, 46, .34), transparent 34%),
        radial-gradient(circle at 80% 20%, rgba(89, 75, 255, .22), transparent 30%),
        linear-gradient(135deg, #211b1b, #11151d 55%, #1d1722);
}

.tm-dj-profile-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(8, 10, 14, .02), rgba(8, 10, 14, .28));
}

.tm-dj-profile-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tm-dj-profile-banner-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .12);
    font-size: clamp(3rem, 9vw, 7rem);
}

.tm-dj-profile-body {
    position: relative;
}

.tm-profile-edit-form {
    padding: 0;
    overflow: hidden;
}

.tm-profile-edit-form:hover {
    transform: none;
}

.tm-profile-edit-banner-preview {
    position: relative;
    min-height: 170px;
    aspect-ratio: 4 / 1;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 30%, rgba(228, 87, 46, .28), transparent 34%),
        linear-gradient(135deg, #211b1b, #11151d 58%, #1d1722);
}

.tm-profile-edit-banner-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tm-profile-edit-banner-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    color: rgba(255, 255, 255, .52);
}

.tm-profile-edit-banner-placeholder i {
    font-size: 2rem;
    color: rgba(228, 87, 46, .82);
}

.tm-profile-edit-banner-placeholder span {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.tm-profile-media-field {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .025);
}

.tm-profile-media-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tm-profile-media-heading h2 {
    margin: 0 0 .2rem;
    font-size: 1rem;
}

.tm-profile-media-heading p {
    margin: 0;
    color: var(--tm-text-muted, #9ca3af);
    font-size: .78rem;
}

.tm-profile-edit-avatar-preview {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border: 3px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    object-fit: cover;
}

.tm-profile-media-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: .85rem;
    color: #ff9d7f;
    background: rgba(228, 87, 46, .12);
    font-size: 1.3rem;
}

@media (max-width: 767.98px) {
    .tm-dj-profile-banner,
    .tm-profile-edit-banner-preview {
        min-height: 150px;
        aspect-ratio: 16 / 7;
    }
}

/* Personal DJ profile badges */
.tm-profile-badge-settings {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.tm-profile-badge-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.tm-profile-badge-option {
    --profile-badge-bg: #2b3038;
    --profile-badge-text: #fff;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .9rem;
    min-height: 84px;
    padding: .9rem 1rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.tm-profile-badge-option:hover {
    border-color: rgba(228, 87, 46, .38);
    background: rgba(255, 255, 255, .045);
    transform: translateY(-1px);
}

.tm-profile-badge-option:has(input:focus-visible) {
    outline: 3px solid rgba(228, 87, 46, .28);
    outline-offset: 2px;
}

.tm-profile-badge-option:has(input:checked) {
    border-color: rgba(228, 87, 46, .72);
    box-shadow: 0 0 0 2px rgba(228, 87, 46, .14);
    background: rgba(228, 87, 46, .06);
}

.tm-profile-badge-option > input[type="radio"] {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--tm-primary);
}

.tm-profile-badge-option-visual {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    overflow: hidden;
    border-radius: .9rem;
    color: var(--profile-badge-text);
    background: var(--profile-badge-bg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.tm-profile-badge-option-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tm-profile-badge-option-visual i {
    font-size: 1.45rem;
}

.tm-profile-badge-option > span:last-child {
    display: grid;
    min-width: 0;
    padding-right: 1.2rem;
}

.tm-profile-badge-option strong {
    color: #fff;
    font-size: .92rem;
}

.tm-profile-badge-option small {
    margin-top: .2rem;
    color: var(--tm-text-muted, #9ca3af);
    font-size: .76rem;
    line-height: 1.4;
}

.tm-profile-badge-option.is-none .tm-profile-badge-option-visual {
    color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .05);
}

.tm-profile-badge-option.is-custom .tm-profile-badge-option-visual {
    background: rgba(255, 255, 255, .06);
}

.tm-profile-custom-badge-upload,
.tm-profile-badge-community-note {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .025);
}

.tm-profile-badge-community-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

.tm-profile-badge-community-note > i {
    color: #f4d95f;
    font-size: 1.35rem;
}

.tm-profile-badge-community-note p {
    color: var(--tm-text-muted, #9ca3af);
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .tm-profile-badge-picker {
        grid-template-columns: 1fr;
    }
}

/* ---- home.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Home
|--------------------------------------------------------------------------
*/


.tm-home-hero {

    position:
    relative;

    display:
    grid;

    grid-template-columns:
    minmax(0, 1.5fr)
    minmax(260px, .5fr);

    gap:
    2rem;

    align-items:
    center;

    overflow:
    hidden;

    min-height:
    420px;

    margin-bottom:
    2rem;

    padding:
    clamp(2rem, 6vw, 4.5rem);

    border:
    1px solid var(--tm-border);

    border-radius:
    calc(var(--tm-radius) + 8px);

    background:
    radial-gradient(
        circle at 82% 22%,
        rgba(255, 122, 24, .22),
        transparent 32%
    ),
    linear-gradient(
        135deg,
        var(--tm-surface),
        #11151a
    );

    box-shadow:
    var(--tm-shadow);

}


.tm-home-hero-member {

    background:
    radial-gradient(
        circle at 82% 22%,
        rgba(50, 200, 106, .17),
        transparent 32%
    ),
    radial-gradient(
        circle at 12% 100%,
        rgba(255, 122, 24, .16),
        transparent 34%
    ),
    linear-gradient(
        135deg,
        var(--tm-surface),
        #11151a
    );

}


.tm-home-hero-content {

    position:
    relative;

    z-index:
    2;

}


.tm-home-eyebrow {

    display:
    inline-flex;

    align-items:
    center;

    margin-bottom:
    1rem;

    padding:
    .45rem .8rem;

    border:
    1px solid rgba(255, 122, 24, .4);

    border-radius:
    999px;

    background:
    rgba(255, 122, 24, .1);

    color:
    var(--tm-primary);

    font-size:
    .82rem;

    font-weight:
    700;

    letter-spacing:
    .06em;

    text-transform:
    uppercase;

}


.tm-home-title {

    max-width:
    850px;

    margin-bottom:
    1rem;

    font-size:
    clamp(2.4rem, 6vw, 4.9rem);

    font-weight:
    800;

    line-height:
    1.02;

    letter-spacing:
    -.05em;

}


.tm-home-lead {

    max-width:
    720px;

    margin-bottom:
    1.75rem;

    color:
    var(--tm-text-muted);

    font-size:
    clamp(1rem, 2vw, 1.2rem);

    line-height:
    1.75;

}


.tm-home-hero-visual {

    position:
    relative;

    display:
    flex;

    min-height:
    260px;

    align-items:
    center;

    justify-content:
    center;

}


.tm-home-record {

    display:
    flex;

    width:
    min(230px, 70vw);

    aspect-ratio:
    1;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid rgba(255, 255, 255, .08);

    border-radius:
    50%;

    background:
    radial-gradient(
        circle,
        var(--tm-primary) 0 5%,
        #1e2329 6% 20%,
        #0d0f12 21% 48%,
        #20252b 49% 51%,
        #0d0f12 52%
    );

    box-shadow:
    0 30px 70px rgba(0, 0, 0, .5);

    animation:
    tm-home-record-spin 18s linear infinite;

}


.tm-home-record i {

    color:
    rgba(255, 255, 255, .08);

    font-size:
    10rem;

}


.tm-home-wave {

    position:
    absolute;

    right:
    0;

    bottom:
    1rem;

    left:
    0;

    display:
    flex;

    height:
    60px;

    align-items:
    end;

    justify-content:
    center;

    gap:
    .45rem;

}


.tm-home-wave span {

    width:
    7px;

    height:
    25%;

    border-radius:
    999px;

    background:
    var(--tm-primary);

    animation:
    tm-home-wave 1.1s ease-in-out infinite alternate;

}


.tm-home-wave span:nth-child(2),
.tm-home-wave span:nth-child(6) {

    animation-delay:
    -.2s;

}


.tm-home-wave span:nth-child(3),
.tm-home-wave span:nth-child(5) {

    animation-delay:
    -.45s;

}


.tm-home-wave span:nth-child(4) {

    animation-delay:
    -.7s;

}


.tm-home-stat-grid {

    display:
    grid;

    grid-template-columns:
    repeat(4, minmax(0, 1fr));

    gap:
    1rem;

}


.tm-home-stat-card {

    display:
    grid;

    grid-template-columns:
    auto 1fr;

    grid-template-rows:
    auto auto;

    column-gap:
    .9rem;

    padding:
    1.25rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    var(--tm-radius);

    background:
    var(--tm-surface);

    box-shadow:
    var(--tm-shadow);

}


.tm-home-stat-card:hover {

    border-color:
    var(--tm-primary);

    transform:
    translateY(-3px);

}


.tm-home-stat-card i {

    grid-row:
    1 / 3;

    align-self:
    center;

    color:
    var(--tm-primary);

    font-size:
    1.75rem;

}


.tm-home-stat-card strong {

    color:
    var(--tm-text);

    font-size:
    1.65rem;

    line-height:
    1;

}


.tm-home-stat-card span {

    color:
    var(--tm-text-muted);

    font-size:
    .88rem;

}


.tm-home-member-banner {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1rem;

    background:
    linear-gradient(
        120deg,
        var(--tm-surface),
        rgba(255, 122, 24, .08)
    );

}


.tm-home-feature-grid {

    display:
    grid;

    grid-template-columns:
    repeat(3, minmax(0, 1fr));

    gap:
    1rem;

}


.tm-home-feature-card {

    display:
    block;

    height:
    100%;

}


.tm-home-feature-card > i {

    display:
    inline-flex;

    width:
    50px;

    height:
    50px;

    margin-bottom:
    1rem;

    align-items:
    center;

    justify-content:
    center;

    border-radius:
    13px;

    background:
    var(--tm-surface-2);

    color:
    var(--tm-primary);

    font-size:
    1.4rem;

}


.tm-home-feature-card p {

    margin-bottom:
    0;

    color:
    var(--tm-text-muted);

    line-height:
    1.65;

}


.tm-home-track-list {

    display:
    grid;

    gap:
    1rem;

}


.tm-home-dj-card {

    display:
    flex;

    flex-direction:
    column;

    text-align:
    center;

}


.tm-home-dj-avatar {

    width:
    105px;

    height:
    105px;

    margin:
    0 auto 1rem;

    border:
    3px solid var(--tm-border);

    border-radius:
    50%;

    object-fit:
    cover;

    transition:
    var(--tm-transition);

}


.tm-home-dj-card:hover .tm-home-dj-avatar {

    border-color:
    var(--tm-primary);

}


@keyframes tm-home-record-spin {

    to {

        transform:
        rotate(360deg);

    }

}


@keyframes tm-home-wave {

    from {

        height:
        18%;

        opacity:
        .55;

    }


    to {

        height:
        100%;

        opacity:
        1;

    }

}


@media(max-width: 991px) {

    .tm-home-hero {

        grid-template-columns:
        1fr;

    }


    .tm-home-hero-visual {

        display:
        none;

    }


    .tm-home-stat-grid {

        grid-template-columns:
        repeat(2, minmax(0, 1fr));

    }

}


@media(max-width: 767px) {

    .tm-home-hero {

        min-height:
        auto;

        padding:
        2rem 1.35rem;

    }


    .tm-home-title {

        font-size:
        2.35rem;

    }


    .tm-home-feature-grid {

        grid-template-columns:
        1fr;

    }


    .tm-home-member-banner {

        align-items:
        flex-start;

        flex-direction:
        column;

    }


    .tm-home-stat-grid {

        grid-template-columns:
        1fr;

    }


    .tm-home-stat-card {

        grid-template-columns:
        45px 1fr;

    }

}


@media(prefers-reduced-motion: reduce) {

    .tm-home-record,
    .tm-home-wave span {

        animation:
        none;

    }

}

/* Phase 31 compact homepage discovery */
.tm-home-discovery {
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border: 1px solid rgba(25, 225, 105, .18);
    border-radius: 1.25rem;
    background: linear-gradient(145deg, rgba(25, 225, 105, .045), rgba(255, 255, 255, .015));
}

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

@media (max-width: 991.98px) {
    .tm-home-discovery-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- notifications.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Notifications
|--------------------------------------------------------------------------
*/


.tm-notification-nav-link {

    position:
    relative;

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .4rem;

}


.tm-notification-nav-badge {

    display:
    inline-flex;

    min-width:
    20px;

    height:
    20px;

    align-items:
    center;

    justify-content:
    center;

    padding:
    0 .35rem;

    border-radius:
    999px;

    background:
    var(--tm-primary);

    color:
    #111;

    font-size:
    .68rem;

    font-weight:
    800;

    line-height:
    1;

}


.tm-notification-list {

    display:
    grid;

    gap:
    .85rem;

}


.tm-notification-item {

    position:
    relative;

    padding:
    0;

    overflow:
    hidden;

}


.tm-notification-unread {

    border-color:
    rgba(255, 122, 24, .65);

    background:
    linear-gradient(
        120deg,
        rgba(255, 122, 24, .12),
        var(--tm-surface) 45%
    );

}


.tm-notification-main {

    display:
    grid;

    grid-template-columns:
    auto minmax(0, 1fr) auto;

    gap:
    1rem;

    align-items:
    center;

    width:
    100%;

    padding:
    1.15rem 1.25rem;

}


.tm-notification-main:hover {

    background:
    rgba(255, 255, 255, .025);

}


.tm-notification-icon {

    display:
    inline-flex;

    width:
    46px;

    height:
    46px;

    flex-shrink:
    0;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid var(--tm-border);

    border-radius:
    13px;

    background:
    var(--tm-surface-2);

    color:
    var(--tm-primary);

    font-size:
    1.2rem;

}


.tm-notification-content {

    min-width:
    0;

}


.tm-notification-message {

    margin:
    .18rem 0;

    color:
    var(--tm-text-muted);

    line-height:
    1.5;

}


.tm-notification-arrow {

    color:
    var(--tm-text-muted);

}


.tm-notification-read-form {

    display:
    flex;

    justify-content:
    flex-end;

    padding:
    0 1.25rem 1rem;

}


.tm-notification-list-compact {

    gap:
    .65rem;

}


.tm-notification-list-compact .tm-notification-main {

    grid-template-columns:
    auto minmax(0, 1fr) auto;

    padding:
    .9rem 1rem;

}


.tm-notification-list-compact .tm-notification-icon {

    width:
    40px;

    height:
    40px;

    border-radius:
    11px;

}


.tm-notification-dot {

    width:
    9px;

    height:
    9px;

    border-radius:
    50%;

    background:
    var(--tm-primary);

    box-shadow:
    0 0 0 4px rgba(255, 122, 24, .12);

}


@media(max-width: 575px) {

    .tm-notification-main {

        grid-template-columns:
        auto minmax(0, 1fr);

    }


    .tm-notification-arrow {

        display:
        none;

    }


    .tm-notification-read-form {

        justify-content:
        stretch;

    }


    .tm-notification-read-form .btn {

        width:
        100%;

    }

}



.tm-notification-actions {

    display:
    flex;

    flex-wrap:
    wrap;

    justify-content:
    flex-end;

    gap:
    .5rem;

    padding:
    0 1.25rem 1rem;

}


@media(max-width: 575px) {

    .tm-notification-actions {

        display:
        grid;

        grid-template-columns:
        1fr;

    }


    .tm-notification-actions .btn {

        width:
        100%;

    }

}


/* Navbar notification preview */
.tm-notification-preview-menu {
    width: min(380px, calc(100vw - 2rem));
    min-width: 340px;
    max-width: 380px;
    max-height: min(72vh, 540px);
    overflow-y: auto;
}

.tm-notification-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .58rem .72rem .7rem;
    border-bottom: 1px solid var(--tm-border);
}

.tm-notification-preview-heading strong {
    color: var(--tm-text);
    font-size: .9rem;
}

.tm-notification-preview-heading span {
    color: var(--tm-text-muted);
    font-size: .72rem;
}

.tm-notification-preview-empty {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: 1rem .72rem;
    color: var(--tm-text);
}

.tm-notification-preview-empty > i {
    color: var(--tm-primary);
    font-size: 1rem;
    text-align: center;
}

.tm-notification-preview-empty span,
.tm-notification-preview-empty strong,
.tm-notification-preview-empty small {
    display: block;
}

.tm-notification-preview-empty small {
    margin-top: .18rem;
    color: var(--tm-text-muted);
    font-size: .7rem;
}

.tm-notification-preview-item .tm-notification-preview-message {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tm-notification-preview-item .tm-notification-preview-date {
    margin-top: .28rem;
    color: color-mix(in srgb, var(--tm-text-muted) 78%, transparent);
    font-size: .66rem;
}

.tm-notification-preview-all {
    margin-top: .05rem;
}

@media(max-width: 1199px) {
    .tm-notification-preview-menu {
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: 55vh;
    }
}

/* ---- comments.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Track Comments
|--------------------------------------------------------------------------
*/


.tm-track-comments {

    scroll-margin-top:
    110px;

}


.tm-comment-form {

    padding:
    1.25rem;

}


.tm-comment-form textarea {

    min-height:
    120px;

    resize:
    vertical;

}


.tm-comment-login {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1rem;

}


.tm-comment-list {

    display:
    grid;

    gap:
    .9rem;

}


.tm-comment {

    display:
    grid;

    grid-template-columns:
    auto minmax(0, 1fr);

    gap:
    1rem;

    scroll-margin-top:
    110px;

}


.tm-comment-avatar {

    width:
    48px;

    height:
    48px;

    border:
    2px solid var(--tm-border);

    border-radius:
    50%;

    object-fit:
    cover;

}


.tm-comment-content {

    min-width:
    0;

}


.tm-comment-body {

    margin-top:
    .8rem;

    color:
    var(--tm-text);

    line-height:
    1.7;

    overflow-wrap:
    anywhere;

}


@media(max-width: 575px) {

    .tm-comment-login {

        align-items:
        stretch;

        flex-direction:
        column;

    }


    .tm-comment-login .btn {

        width:
        100%;

    }


    .tm-comment {

        grid-template-columns:
        1fr;

    }


    .tm-comment-avatar {

        width:
        42px;

        height:
        42px;

    }

}

/* ---- messages.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Private Messages
|--------------------------------------------------------------------------
*/


.tm-message-nav-link {

    position:
    relative;

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .4rem;

}


.tm-message-nav-badge {

    display:
    inline-flex;

    min-width:
    20px;

    height:
    20px;

    align-items:
    center;

    justify-content:
    center;

    padding:
    0 .35rem;

    border-radius:
    999px;

    background:
    var(--tm-primary);

    color:
    #111;

    font-size:
    .68rem;

    font-weight:
    800;

    line-height:
    1;

}


.tm-conversation-list,
.tm-message-preview-list {

    display:
    grid;

    gap:
    .8rem;

}


.tm-conversation-card {

    display:
    grid;

    grid-template-columns:
    auto minmax(0, 1fr) auto;

    gap:
    1rem;

    align-items:
    center;

    padding:
    1rem 1.15rem;

}


.tm-conversation-card:hover,
.tm-message-preview:hover {

    border-color:
    var(--tm-primary);

    transform:
    translateY(-2px);

}


.tm-conversation-unread,
.tm-message-preview-unread {

    border-color:
    rgba(255, 122, 24, .65);

    background:
    linear-gradient(
        120deg,
        rgba(255, 122, 24, .12),
        var(--tm-surface) 50%
    );

}


.tm-conversation-avatar,
.tm-message-preview-avatar,
.tm-message-thread-avatar,
.tm-message-compose-avatar {

    flex-shrink:
    0;

    border:
    2px solid var(--tm-border);

    border-radius:
    50%;

    object-fit:
    cover;

}


.tm-conversation-content,
.tm-message-preview-content {

    min-width:
    0;

}


.tm-conversation-preview {

    margin-top:
    .35rem;

    color:
    var(--tm-text-muted);

    line-height:
    1.5;

    overflow:
    hidden;

    text-overflow:
    ellipsis;

    white-space:
    nowrap;

}


.tm-conversation-count {

    display:
    inline-flex;

    min-width:
    30px;

    height:
    30px;

    align-items:
    center;

    justify-content:
    center;

    padding:
    0 .5rem;

    border-radius:
    999px;

    background:
    var(--tm-primary);

    color:
    #111;

    font-size:
    .78rem;

    font-weight:
    800;

}


.tm-conversation-arrow {

    color:
    var(--tm-text-muted);

}


.tm-message-preview {

    display:
    grid;

    grid-template-columns:
    auto minmax(0, 1fr);

    gap:
    .85rem;

    align-items:
    center;

    padding:
    .85rem 1rem;

}


.tm-message-compose-card {

    max-width:
    820px;

    margin:
    0 auto;

    padding:
    clamp(1.25rem, 4vw, 2rem);

}


.tm-message-compose-recipient {

    display:
    flex;

    align-items:
    center;

    gap:
    1rem;

    margin-bottom:
    1.5rem;

    padding-bottom:
    1.5rem;

    border-bottom:
    1px solid var(--tm-border);

}


.tm-message-thread-header {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1rem;

}


.tm-message-thread-person {

    display:
    flex;

    align-items:
    center;

    gap:
    .85rem;

    text-align:
    right;

}


.tm-message-thread {

    max-width:
    960px;

    margin:
    0 auto;

    padding:
    0;

    overflow:
    hidden;

}


.tm-message-bubbles {

    display:
    grid;

    gap:
    1rem;

    max-height:
    65vh;

    padding:
    clamp(1rem, 3vw, 1.75rem);

    overflow-y:
    auto;

    scroll-behavior:
    smooth;

}


.tm-message-row {

    display:
    flex;

    scroll-margin-top:
    110px;

}


.tm-message-row-own {

    justify-content:
    flex-end;

}


.tm-message-row-other {

    justify-content:
    flex-start;

}


.tm-message-bubble {

    max-width:
    min(78%, 680px);

    padding:
    .85rem 1rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    16px;

    background:
    var(--tm-surface-2);

    box-shadow:
    0 8px 22px rgba(0, 0, 0, .16);

}


.tm-message-row-own .tm-message-bubble {

    border-color:
    rgba(255, 122, 24, .45);

    border-bottom-right-radius:
    4px;

    background:
    rgba(255, 122, 24, .15);

}


.tm-message-row-other .tm-message-bubble {

    border-bottom-left-radius:
    4px;

}


.tm-message-sender {

    margin-bottom:
    .35rem;

    color:
    var(--tm-primary);

    font-size:
    .78rem;

    font-weight:
    700;

}


.tm-message-body {

    line-height:
    1.65;

    overflow-wrap:
    anywhere;

}


.tm-message-time {

    display:
    block;

    margin-top:
    .45rem;

    color:
    var(--tm-text-muted);

    font-size:
    .72rem;

    text-align:
    right;

}


.tm-message-reply-form {

    display:
    grid;

    grid-template-columns:
    minmax(0, 1fr) auto;

    gap:
    .75rem;

    align-items:
    end;

    padding:
    1rem;

    border-top:
    1px solid var(--tm-border);

    background:
    rgba(0, 0, 0, .14);

}


.tm-message-reply-form textarea {

    min-height:
    74px;

    resize:
    vertical;

}


@media(max-width: 767px) {

    .tm-conversation-card {

        grid-template-columns:
        auto minmax(0, 1fr);

    }


    .tm-conversation-count,
    .tm-conversation-arrow {

        grid-column:
        2;

        justify-self:
        start;

    }


    .tm-message-thread-header {

        align-items:
        flex-start;

        flex-direction:
        column;

    }


    .tm-message-thread-person {

        text-align:
        left;

    }


    .tm-message-bubble {

        max-width:
        92%;

    }


    .tm-message-reply-form {

        grid-template-columns:
        1fr;

    }


    .tm-message-reply-form .btn {

        width:
        100%;

    }

}



.tm-conversation-card {

    grid-template-columns:
    minmax(0, 1fr) auto;

    gap:
    .55rem;

    padding:
    .45rem;

}


.tm-conversation-card-main {

    display:
    grid;

    grid-template-columns:
    auto minmax(0, 1fr) auto;

    gap:
    1rem;

    align-items:
    center;

    min-width:
    0;

    padding:
    .65rem .7rem;

    border-radius:
    10px;

}


.tm-conversation-card-main:hover {

    background:
    rgba(255, 255, 255, .025);

}


.tm-conversation-delete-form {

    display:
    flex;

    align-items:
    center;

}


.tm-message-thread-controls {

    display:
    flex;

    flex-wrap:
    wrap;

    justify-content:
    flex-end;

    gap:
    .5rem;

}


.tm-message-item-actions {

    display:
    flex;

    flex-wrap:
    wrap;

    align-items:
    center;

    gap:
    .8rem;

    margin-top:
    .55rem;

    font-size:
    .74rem;

}


.tm-message-item-actions .tm-report-inline {

    margin:
    0;

}


.tm-blocked-user-list {

    display:
    grid;

    gap:
    .8rem;

}


.tm-blocked-user-card {

    display:
    grid;

    grid-template-columns:
    auto minmax(0, 1fr) auto;

    gap:
    1rem;

    align-items:
    center;

    padding:
    1rem 1.15rem;

}


.tm-blocked-user-card > img {

    border:
    2px solid var(--tm-border);

    border-radius:
    50%;

    object-fit:
    cover;

}


@media(max-width: 767px) {

    .tm-conversation-card {

        grid-template-columns:
        1fr;

    }


    .tm-conversation-delete-form {

        justify-content:
        flex-end;

        padding:
        0 .7rem .5rem;

    }


    .tm-message-thread-controls {

        width:
        100%;

        justify-content:
        flex-start;

    }


    .tm-blocked-user-card {

        grid-template-columns:
        auto minmax(0, 1fr);

    }


    .tm-blocked-user-card > div:last-child {

        grid-column:
        1 / 3;

        justify-content:
        flex-start !important;

    }

}


/* Navbar message preview */
.tm-message-preview-menu {
    width: min(380px, calc(100vw - 2rem));
    min-width: 340px;
    max-width: 380px;
    max-height: min(72vh, 540px);
    overflow-y: auto;
}

.tm-message-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .58rem .72rem .7rem;
    border-bottom: 1px solid var(--tm-border);
}

.tm-message-preview-heading strong {
    color: var(--tm-text);
    font-size: .9rem;
}

.tm-message-preview-heading span {
    color: var(--tm-text-muted);
    font-size: .72rem;
}

.tm-message-preview-empty {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: 1rem .72rem;
    color: var(--tm-text);
}

.tm-message-preview-empty > i {
    color: var(--tm-primary);
    font-size: 1rem;
    text-align: center;
}

.tm-message-preview-empty span,
.tm-message-preview-empty strong,
.tm-message-preview-empty small {
    display: block;
}

.tm-message-preview-empty small {
    margin-top: .18rem;
    color: var(--tm-text-muted);
    font-size: .7rem;
}

.tm-nav-dropdown-menu .tm-message-preview-item {
    position: relative;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
}

.tm-message-preview-avatar {
    width: 38px;
    height: 38px;
    border: 1px solid var(--tm-border);
    border-radius: 50%;
    object-fit: cover;
}

.tm-message-preview-item .tm-message-preview-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tm-message-preview-item .tm-message-preview-date {
    margin-top: .28rem;
    color: color-mix(in srgb, var(--tm-text-muted) 78%, transparent);
    font-size: .66rem;
}

.tm-message-preview-count {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--tm-primary);
    color: #111;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
}

.tm-message-preview-all {
    margin-top: .05rem;
}

@media(max-width: 1199px) {
    .tm-message-preview-menu {
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: 55vh;
    }
}

/* ---- account.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Account Settings
|--------------------------------------------------------------------------
*/


.tm-settings-layout {

    display:
    grid;

    grid-template-columns:
    minmax(220px, 280px)
    minmax(0, 1fr);

    gap:
    1.25rem;

    align-items:
    start;

}


.tm-settings-summary {

    position:
    sticky;

    top:
    100px;

    display:
    flex;

    flex-direction:
    column;

    align-items:
    center;

    padding:
    1.5rem;

    text-align:
    center;

}


.tm-settings-avatar {

    width:
    112px;

    height:
    112px;

    margin-bottom:
    1rem;

    border:
    3px solid var(--tm-border);

    border-radius:
    50%;

    object-fit:
    cover;

}


.tm-settings-sections {

    display:
    grid;

    gap:
    1.25rem;

}


.tm-settings-section-heading {

    display:
    flex;

    gap:
    1rem;

    align-items:
    center;

}


.tm-settings-section-icon {

    display:
    inline-flex;

    width:
    48px;

    height:
    48px;

    flex-shrink:
    0;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid var(--tm-border);

    border-radius:
    13px;

    background:
    var(--tm-surface-2);

    color:
    var(--tm-primary);

    font-size:
    1.25rem;

}


.tm-settings-toggle {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1.5rem;

    padding:
    1.15rem 0;

    border-bottom:
    1px solid var(--tm-border);

}


.tm-settings-toggle:first-child {

    padding-top:
    0;

}


.tm-settings-toggle:last-of-type {

    border-bottom:
    0;

}


.tm-settings-toggle .form-check-input {

    width:
    3rem;

    height:
    1.5rem;

    cursor:
    pointer;

}


.tm-settings-danger {

    border-color:
    rgba(220, 53, 69, .55);

    background:
    linear-gradient(
        120deg,
        rgba(220, 53, 69, .08),
        var(--tm-surface) 45%
    );

}


.tm-settings-danger .tm-settings-section-icon {

    border-color:
    rgba(220, 53, 69, .4);

    color:
    var(--bs-danger);

}


@media(max-width: 991px) {

    .tm-settings-layout {

        grid-template-columns:
        1fr;

    }


    .tm-settings-summary {

        position:
        static;

    }

}


@media(max-width: 575px) {

    .tm-settings-section-heading {

        align-items:
        flex-start;

    }


    .tm-settings-toggle {

        align-items:
        flex-start;

    }

}

/* ---- admin.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Administration and Reporting
|--------------------------------------------------------------------------
*/


.tm-admin-nav {

    position:
    relative;

    z-index:
    30;

    display:
    flex;

    align-items:
    center;

    gap:
    .65rem;

    padding:
    .75rem;

    overflow:
    visible;

    border:
    1px solid var(--tm-border);

    border-radius:
    var(--tm-radius);

    background:
    var(--tm-surface);

}


.tm-admin-nav-overview,
.tm-admin-nav-group > summary,
.tm-admin-nav-menu a {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .5rem;

    border-radius:
    9px;

    color:
    var(--tm-text-muted);

    text-decoration:
    none;

    transition:
    var(--tm-transition);

}


.tm-admin-nav-overview,
.tm-admin-nav-group > summary {

    min-height:
    42px;

    padding:
    .65rem .85rem;

}


.tm-admin-nav-overview:hover,
.tm-admin-nav-group > summary:hover,
.tm-admin-nav-group[open] > summary,
.tm-admin-nav-group.is-active > summary,
.tm-admin-nav-overview.is-active {

    background:
    var(--tm-surface-2);

    color:
    var(--tm-primary);

}


.tm-admin-nav-groups {

    display:
    flex;

    flex:
    1 1 auto;

    flex-wrap:
    wrap;

    gap:
    .45rem;

}


.tm-admin-nav-group {

    position:
    relative;

}


.tm-admin-nav-group > summary {

    cursor:
    pointer;

    list-style:
    none;

    user-select:
    none;

}


.tm-admin-nav-group > summary::-webkit-details-marker {

    display:
    none;

}


.tm-admin-nav-chevron {

    margin-left:
    .15rem;

    font-size:
    .72rem;

    transition:
    transform .18s ease;

}


.tm-admin-nav-group[open] .tm-admin-nav-chevron {

    transform:
    rotate(180deg);

}


.tm-admin-nav-menu {

    position:
    absolute;

    top:
    calc(100% + .55rem);

    left:
    0;

    z-index:
    120;

    display:
    grid;

    min-width:
    250px;

    gap:
    .2rem;

    padding:
    .55rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    12px;

    background:
    rgba(18, 22, 27, .98);

    box-shadow:
    var(--tm-shadow);

    backdrop-filter:
    blur(16px);

}


.tm-admin-nav-group:last-child .tm-admin-nav-menu {

    right:
    0;

    left:
    auto;

}


.tm-admin-nav-menu a {

    width:
    100%;

    padding:
    .7rem .75rem;

}


.tm-admin-nav-menu a:hover,
.tm-admin-nav-menu a.is-active {

    background:
    var(--tm-surface-2);

    color:
    var(--tm-primary);

}


.tm-admin-nav-menu a.is-active {

    box-shadow:
    inset 3px 0 0 var(--tm-primary);

}


@media (max-width: 767.98px) {

    .tm-admin-nav {

        align-items:
        stretch;

        flex-direction:
        column;

    }


    .tm-admin-nav-overview {

        width:
        100%;

    }


    .tm-admin-nav-groups {

        display:
        grid;

        grid-template-columns:
        1fr;

    }


    .tm-admin-nav-group > summary {

        width:
        100%;

        justify-content:
        space-between;

    }


    .tm-admin-nav-group > summary > i:first-child {

        margin-right:
        .1rem;

    }


    .tm-admin-nav-group > summary > span {

        margin-right:
        auto;

    }


    .tm-admin-nav-menu,
    .tm-admin-nav-group:last-child .tm-admin-nav-menu {

        position:
        static;

        width:
        100%;

        min-width:
        0;

        margin-top:
        .35rem;

        box-shadow:
        none;

    }

}


.tm-admin-stat-grid {

    display:
    grid;

    grid-template-columns:
    repeat(5, minmax(0, 1fr));

    gap:
    1rem;

}


.tm-admin-stat {

    display:
    grid;

    grid-template-columns:
    auto 1fr;

    grid-template-rows:
    auto auto;

    column-gap:
    .85rem;

    align-items:
    center;

    text-decoration:
    none;

}


.tm-admin-stat > i {

    grid-row:
    1 / 3;

    color:
    var(--tm-primary);

    font-size:
    1.7rem;

}


.tm-admin-stat strong {

    color:
    var(--tm-text);

    font-size:
    1.55rem;

    line-height:
    1;

}


.tm-admin-stat span {

    color:
    var(--tm-text-muted);

    font-size:
    .82rem;

}


.tm-admin-list {

    display:
    grid;

    gap:
    .6rem;

}


.tm-admin-list-item {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1rem;

    padding:
    .85rem 0;

    border-bottom:
    1px solid var(--tm-border);

    color:
    var(--tm-text);

    text-decoration:
    none;

}


.tm-admin-list-item:last-child {

    border-bottom:
    0;

}


.tm-admin-list-item:hover {

    color:
    var(--tm-primary);

}


.tm-admin-empty {

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    gap:
    .65rem;

    min-height:
    180px;

    color:
    var(--tm-text-muted);

}


.tm-admin-empty i {

    color:
    var(--bs-success);

    font-size:
    1.3rem;

}


.tm-admin-filter {

    display:
    grid;

    grid-template-columns:
    minmax(0, 1.6fr)
    minmax(180px, .5fr)
    auto;

    gap:
    1rem;

    align-items:
    end;

}


.tm-admin-filter-single {

    grid-template-columns:
    minmax(0, 1fr)
    auto;

}


.tm-admin-table-wrap {

    padding:
    0;

    overflow-x:
    auto;

}


.tm-admin-table-wrap table {

    min-width:
    850px;

}


.tm-admin-action-details {

    position:
    relative;

    display:
    inline-block;

}


.tm-admin-action-details summary {

    list-style:
    none;

    cursor:
    pointer;

}


.tm-admin-action-details summary::-webkit-details-marker {

    display:
    none;

}


.tm-admin-action-popover {

    position:
    absolute;

    z-index:
    20;

    right:
    0;

    width:
    min(330px, 85vw);

    margin-top:
    .5rem;

    padding:
    1rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    12px;

    background:
    var(--tm-surface-2);

    box-shadow:
    var(--tm-shadow);

    text-align:
    left;

}


.tm-admin-content-list {

    display:
    grid;

    gap:
    1rem;

}


.tm-admin-content-card {

    display:
    grid;

    grid-template-columns:
    125px minmax(0, 1fr);

    gap:
    1.1rem;

    align-items:
    start;

    width:
    100%;

    min-width:
    0;

}


.tm-admin-content-card > a {

    width:
    125px;

    max-width:
    100%;

}


.tm-admin-content-cover {

    width:
    125px;

    height:
    125px;

    border-radius:
    10px;

    object-fit:
    cover;

}


.tm-admin-content-main {

    display:
    flex;

    min-width:
    0;

    flex-direction:
    column;

    justify-content:
    space-between;

    gap:
    .8rem;

}


.tm-admin-content-stats {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    1rem;

    color:
    var(--tm-text-muted);

    font-size:
    .88rem;

}


.tm-admin-comment-card {

    padding:
    1.25rem;

}


.tm-admin-comment-body {

    margin-top:
    1rem;

    padding:
    1rem;

    border-radius:
    10px;

    background:
    var(--tm-surface-2);

    line-height:
    1.65;

}


.tm-admin-report-meta {

    display:
    grid;

    grid-template-columns:
    repeat(2, minmax(0, 1fr));

    gap:
    1rem;

}


.tm-admin-report-meta > div {

    display:
    flex;

    min-width:
    0;

    flex-direction:
    column;

    padding:
    .9rem;

    border-radius:
    10px;

    background:
    var(--tm-surface-2);

}


.tm-admin-report-meta span,
.tm-admin-report-meta small {

    color:
    var(--tm-text-muted);

}


.tm-admin-report-copy,
.tm-admin-report-content {

    padding:
    1rem;

    border-radius:
    10px;

    background:
    var(--tm-surface-2);

    line-height:
    1.7;

    overflow-wrap:
    anywhere;

}


.tm-report-panel {

    margin-top:
    1rem;

    padding:
    .85rem 1rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    10px;

    background:
    rgba(255, 255, 255, .02);

}


.tm-report-panel > summary {

    width:
    fit-content;

    color:
    var(--tm-text-muted);

    cursor:
    pointer;

    list-style:
    none;

}


.tm-report-panel > summary::-webkit-details-marker {

    display:
    none;

}


.tm-report-panel[open] > summary {

    margin-bottom:
    1rem;

    color:
    var(--bs-warning);

}


.tm-report-form {

    display:
    grid;

    gap:
    .85rem;

}


.tm-report-inline {

    margin-top:
    .75rem;

}


.tm-report-inline > summary {

    font-size:
    .8rem;

}


@media(max-width: 1199px) {

    .tm-admin-stat-grid {

        grid-template-columns:
        repeat(3, minmax(0, 1fr));

    }

}


@media(max-width: 767px) {

    .tm-admin-stat-grid {

        grid-template-columns:
        repeat(2, minmax(0, 1fr));

    }


    .tm-admin-filter,
    .tm-admin-filter-single {

        grid-template-columns:
        1fr;

    }


    .tm-admin-filter .btn {

        width:
        100%;

    }


    .tm-admin-content-card {

        grid-template-columns:
        82px minmax(0, 1fr);

    }


    .tm-admin-content-card > a,
    .tm-admin-content-cover {

        width:
        82px;

        height:
        82px;

    }


    .tm-admin-report-meta {

        grid-template-columns:
        1fr;

    }

}


@media(max-width: 479px) {

    .tm-admin-stat-grid {

        grid-template-columns:
        1fr;

    }


    .tm-admin-content-card {

        grid-template-columns:
        1fr;

    }


    .tm-admin-content-card > a,
    .tm-admin-content-cover {

        width:
        100%;

        height:
        auto;

        aspect-ratio:
        16 / 9;

    }


    .tm-admin-action-popover {

        position:
        fixed;

        right:
        1rem;

        bottom:
        1rem;

        left:
        1rem;

        width:
        auto;

    }

}

/* Phase 31 discovery section manager */
.tm-admin-discovery-sections {
    display: grid;
    gap: .8rem;
}

.tm-admin-discovery-section-row {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(180px, 1fr) minmax(220px, 1.4fr) 90px 90px minmax(140px, .7fr) auto;
    gap: .85rem;
    align-items: end;
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .02);
}

.tm-admin-discovery-section-key {
    display: flex;
    align-items: center;
    gap: .7rem;
    align-self: center;
}

.tm-admin-discovery-section-key > i {
    color: var(--tm-text-muted);
    font-size: 1.15rem;
}

.tm-admin-discovery-section-key strong,
.tm-admin-discovery-section-key code {
    display: block;
}

.tm-admin-discovery-section-key code {
    margin-top: .15rem;
    color: var(--tm-primary);
    font-size: .72rem;
}

.tm-admin-discovery-section-enabled {
    align-self: center;
    margin-bottom: .45rem;
}

@media (max-width: 1399.98px) {
    .tm-admin-discovery-section-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .tm-admin-discovery-section-row {
        grid-template-columns: 1fr;
    }
}

/* Phase 31.1 reliable discovery ordering */
.tm-admin-discovery-section-row.is-dragging {
    opacity: .55;
    border-color: var(--tm-primary);
    box-shadow: 0 0 0 .15rem rgba(25, 225, 105, .12);
}

.tm-admin-discovery-drag-handle {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .55rem;
    background: transparent;
    color: var(--tm-text-muted);
    cursor: grab;
}

.tm-admin-discovery-drag-handle:hover,
.tm-admin-discovery-drag-handle:focus-visible {
    border-color: var(--tm-border);
    background: rgba(255, 255, 255, .05);
    color: var(--tm-primary);
}

.tm-admin-discovery-drag-handle:active {
    cursor: grabbing;
}

.tm-admin-discovery-order-buttons {
    display: flex;
    gap: .35rem;
    margin-left: auto;
}

.tm-admin-discovery-order-buttons .btn {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
}

@media (max-width: 1399.98px) {
    .tm-admin-discovery-section-key {
        grid-column: 1 / -1;
    }
}

/* Profile badge administration */
.tm-admin-profile-badge-create {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.tm-admin-profile-badge-grid,
.tm-admin-custom-badge-list {
    display: grid;
    gap: .85rem;
}

.tm-admin-profile-badge-card {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .025);
}

.tm-admin-profile-badge-card > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    cursor: pointer;
    list-style: none;
}

.tm-admin-profile-badge-card > summary::-webkit-details-marker {
    display: none;
}

.tm-admin-profile-badge-card > summary > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.tm-admin-profile-badge-card > summary small {
    color: var(--tm-text-muted, #9ca3af);
}

.tm-admin-profile-badge-preview {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: .85rem;
    color: var(--badge-text, #fff);
    background: var(--badge-bg, #2b3038);
}

.tm-admin-profile-badge-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tm-admin-profile-badge-preview i {
    font-size: 1.35rem;
}

.tm-admin-custom-badge-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(260px, .8fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .025);
}

.tm-admin-custom-badge-image {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    overflow: hidden;
    border-radius: .9rem;
    color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .05);
}

.tm-admin-custom-badge-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tm-admin-custom-badge-copy,
.tm-admin-custom-badge-actions {
    display: grid;
    gap: .35rem;
}

.tm-admin-custom-badge-copy span,
.tm-admin-custom-badge-copy small {
    color: var(--tm-text-muted, #9ca3af);
}

@media (max-width: 991.98px) {
    .tm-admin-custom-badge-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .tm-admin-custom-badge-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .tm-admin-custom-badge-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tm-admin-custom-badge-row > .badge {
        grid-column: 2;
        justify-self: start;
    }
}

/*
|--------------------------------------------------------------------------
| Shared admin page section navigation
|--------------------------------------------------------------------------
*/

.tm-admin-page-tools {
    position: sticky;
    top: calc(76px + env(safe-area-inset-top, 0px));
    z-index: 18;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .85rem;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    background: rgba(18, 22, 27, .96);
    box-shadow: var(--tm-shadow);
    backdrop-filter: blur(14px);
}

.tm-admin-page-tools-intro {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: max-content;
}

.tm-admin-page-tools-intro > i {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: .75rem;
    color: var(--tm-primary);
    background: rgba(25, 225, 105, .1);
}

.tm-admin-page-tools-intro > span {
    display: grid;
    gap: .05rem;
}

.tm-admin-page-tools-intro strong {
    font-size: .9rem;
}

.tm-admin-page-tools-intro small {
    color: var(--tm-text-muted);
    font-size: .72rem;
}

.tm-admin-page-tools-links {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    overflow-x: auto;
    padding: .15rem .05rem .3rem;
    scrollbar-width: thin;
}

.tm-admin-page-tools-links a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .42rem;
    min-height: 36px;
    padding: .45rem .65rem;
    border: 1px solid transparent;
    border-radius: .7rem;
    color: var(--tm-text-muted);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--tm-transition);
}

.tm-admin-page-tools-links a:hover,
.tm-admin-page-tools-links a:focus-visible,
.tm-admin-page-tools-links a.is-active {
    border-color: rgba(25, 225, 105, .28);
    background: rgba(25, 225, 105, .08);
    color: var(--tm-primary);
}

.tm-admin-page-tools-links a:focus-visible {
    outline: 2px solid var(--tm-primary);
    outline-offset: 2px;
}

.tm-admin-page-tools-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
}

.tm-admin-page-tools-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.tm-admin-page-section {
    position: relative;
    scroll-margin-top: 1.25rem;
}

.tm-admin-page-section-control {
    display: flex;
    justify-content: flex-end;
    margin: -.2rem 0 .75rem;
}

.tm-admin-page-section-control .btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 92px;
    justify-content: center;
}

.tm-admin-page-section.is-collapsed {
    min-height: 0;
}

.tm-admin-page-section.is-collapsed > :not(.tm-admin-page-section-control) {
    display: none !important;
}

.tm-admin-page-section.is-collapsed .tm-admin-page-section-control {
    margin-bottom: 0;
}

.tm-admin-page-section.is-collapsed .tm-admin-page-section-control .btn {
    width: 100%;
    justify-content: space-between;
    border-style: dashed;
}

@media (max-width: 1199.98px) {
    .tm-admin-page-tools {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tm-admin-page-tools-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .tm-admin-page-tools {
        grid-template-columns: 1fr;
        gap: .7rem;
    }

    .tm-admin-page-tools-intro {
        min-width: 0;
    }

    .tm-admin-page-tools-links {
        width: 100%;
    }

    .tm-admin-page-tools-actions {
        grid-column: auto;
    }

    .tm-admin-page-tools-actions .btn {
        flex: 1 1 150px;
        justify-content: center;
    }

    .tm-admin-page-section-control .btn span {
        max-width: min(58vw, 340px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-admin-page-tools-links a {
        transition: none;
    }
}

/* ---- analytics.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine DJ Analytics
|--------------------------------------------------------------------------
*/


.tm-analytics-page {

    --tm-chart-plays:
    #ff7a18;

    --tm-chart-downloads:
    #4dabf7;

    --tm-chart-favourites:
    #f06595;

    --tm-chart-comments:
    #be4bdb;

    --tm-chart-followers-added:
    #32c86a;

    --tm-chart-followers-removed:
    #dd4c4c;

    --tm-chart-followers-net:
    #ffd43b;

}


.tm-analytics-filter {

    display:
    grid;

    grid-template-columns:
    minmax(180px, .45fr)
    minmax(240px, 1fr)
    auto;

    gap:
    1rem;

    align-items:
    end;

}


.tm-analytics-tracking-note {

    display:
    flex;

    align-items:
    flex-start;

    gap:
    .75rem;

    padding:
    .9rem 1rem;

    border:
    1px solid rgba(77, 171, 247, .28);

    border-radius:
    12px;

    background:
    rgba(77, 171, 247, .08);

    color:
    var(--tm-text-muted);

    font-size:
    .88rem;

    line-height:
    1.55;

}


.tm-analytics-tracking-note > i {

    margin-top:
    .15rem;

    color:
    var(--tm-chart-downloads);

}


.tm-analytics-lifetime-grid,
.tm-analytics-period-grid {

    display:
    grid;

    gap:
    1rem;

}


.tm-analytics-lifetime-grid {

    grid-template-columns:
    repeat(6, minmax(0, 1fr));

}


.tm-analytics-period-grid {

    grid-template-columns:
    repeat(5, minmax(0, 1fr));

}


.tm-analytics-lifetime-card {

    display:
    flex;

    align-items:
    center;

    gap:
    .8rem;

    min-width:
    0;

}


.tm-analytics-lifetime-card > i {

    color:
    var(--tm-primary);

    font-size:
    1.45rem;

}


.tm-analytics-lifetime-card div {

    display:
    flex;

    min-width:
    0;

    flex-direction:
    column;

}


.tm-analytics-lifetime-card strong {

    color:
    var(--tm-text);

    font-size:
    1.4rem;

    line-height:
    1.05;

}


.tm-analytics-lifetime-card span {

    margin-top:
    .25rem;

    color:
    var(--tm-text-muted);

    font-size:
    .78rem;

}


.tm-analytics-period-card {

    display:
    flex;

    align-items:
    center;

    gap:
    .8rem;

}


.tm-analytics-period-icon {

    display:
    inline-flex;

    width:
    46px;

    height:
    46px;

    flex:
    0 0 auto;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid rgba(255, 122, 24, .25);

    border-radius:
    12px;

    background:
    rgba(255, 122, 24, .1);

    color:
    var(--tm-primary);

    font-size:
    1.25rem;

}


.tm-analytics-period-copy {

    display:
    flex;

    min-width:
    0;

    flex-direction:
    column;

}


.tm-analytics-period-copy > span {

    color:
    var(--tm-text-muted);

    font-size:
    .77rem;

}


.tm-analytics-period-copy > strong {

    margin:
    .1rem 0 .2rem;

    color:
    var(--tm-text);

    font-size:
    1.5rem;

    line-height:
    1.05;

}


.tm-analytics-period-copy > small {

    display:
    flex;

    align-items:
    center;

    gap:
    .25rem;

    font-size:
    .72rem;

}


.tm-analytics-change-positive {

    color:
    var(--tm-success);

}


.tm-analytics-change-negative {

    color:
    var(--tm-danger);

}


.tm-analytics-change-neutral {

    color:
    var(--tm-text-muted);

}


.tm-analytics-chart-card {

    padding:
    1.15rem;

}


.tm-analytics-chart-header {

    display:
    flex;

    flex-wrap:
    wrap;

    align-items:
    flex-start;

    justify-content:
    space-between;

    gap:
    1rem;

    margin-bottom:
    1rem;

}


.tm-analytics-legend {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    .65rem 1rem;

    color:
    var(--tm-text-muted);

    font-size:
    .75rem;

}


.tm-analytics-legend-stacked {

    margin-bottom:
    .5rem;

}


.tm-analytics-legend span {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .35rem;

}


.tm-analytics-legend span::before {

    width:
    9px;

    height:
    9px;

    border-radius:
    50%;

    background:
    var(--tm-text-muted);

    content:
    '';

}


.tm-analytics-legend [data-analytics-legend="plays"]::before {

    background:
    var(--tm-chart-plays);

}


.tm-analytics-legend [data-analytics-legend="downloads"]::before {

    background:
    var(--tm-chart-downloads);

}


.tm-analytics-legend [data-analytics-legend="favourites"]::before {

    background:
    var(--tm-chart-favourites);

}


.tm-analytics-legend [data-analytics-legend="comments"]::before {

    background:
    var(--tm-chart-comments);

}


.tm-analytics-legend [data-analytics-legend="followers-added"]::before {

    background:
    var(--tm-chart-followers-added);

}


.tm-analytics-legend [data-analytics-legend="followers-removed"]::before {

    background:
    var(--tm-chart-followers-removed);

}


.tm-analytics-legend [data-analytics-legend="followers-net"]::before {

    background:
    var(--tm-chart-followers-net);

}


.tm-analytics-chart-wrap {

    position:
    relative;

    min-height:
    340px;

}


.tm-analytics-chart {

    display:
    block;

    width:
    100%;

    height:
    340px;

}


.tm-analytics-tooltip {

    position:
    absolute;

    z-index:
    5;

    min-width:
    150px;

    max-width:
    220px;

    padding:
    .65rem .75rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    10px;

    background:
    rgba(16, 18, 20, .96);

    box-shadow:
    var(--tm-shadow);

    color:
    var(--tm-text);

    font-size:
    .76rem;

    pointer-events:
    none;

}


.tm-analytics-tooltip strong {

    display:
    block;

    margin-bottom:
    .35rem;

}


.tm-analytics-tooltip-row {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1rem;

    margin-top:
    .2rem;

    color:
    var(--tm-text-muted);

}


.tm-analytics-tooltip-row b {

    color:
    var(--tm-text);

}


.tm-analytics-table-wrap {

    padding:
    0;

    overflow-x:
    auto;

}


.tm-analytics-table-wrap table {

    min-width:
    820px;

}


.tm-analytics-rank {

    color:
    var(--tm-primary);

    font-size:
    1.05rem;

    font-weight:
    800;

}


.tm-analytics-track-cell {

    display:
    inline-flex;

    min-width:
    210px;

    align-items:
    center;

    gap:
    .75rem;

    color:
    var(--tm-text);

    text-decoration:
    none;

}


.tm-analytics-track-cell:hover {

    color:
    var(--tm-primary);

}


.tm-analytics-track-cell img {

    width:
    48px;

    height:
    48px;

    border:
    1px solid var(--tm-border);

    border-radius:
    9px;

    object-fit:
    cover;

}


.tm-analytics-track-cell span {

    display:
    flex;

    min-width:
    0;

    flex-direction:
    column;

}


.tm-analytics-track-cell strong,
.tm-analytics-track-cell small {

    overflow:
    hidden;

    text-overflow:
    ellipsis;

    white-space:
    nowrap;

}


.tm-analytics-track-cell small {

    color:
    var(--tm-text-muted);

}


.tm-analytics-daily-details > summary {

    color:
    var(--tm-text);

    font-weight:
    700;

    cursor:
    pointer;

}


@media(max-width: 1199px) {

    .tm-analytics-lifetime-grid {

        grid-template-columns:
        repeat(3, minmax(0, 1fr));

    }


    .tm-analytics-period-grid {

        grid-template-columns:
        repeat(3, minmax(0, 1fr));

    }

}


@media(max-width: 767px) {

    .tm-analytics-filter {

        grid-template-columns:
        1fr;

    }


    .tm-analytics-filter .btn {

        width:
        100%;

    }


    .tm-analytics-lifetime-grid,
    .tm-analytics-period-grid {

        grid-template-columns:
        repeat(2, minmax(0, 1fr));

    }


    .tm-analytics-chart-wrap,
    .tm-analytics-chart {

        min-height:
        300px;

        height:
        300px;

    }

}


@media(max-width: 479px) {

    .tm-analytics-lifetime-grid,
    .tm-analytics-period-grid {

        grid-template-columns:
        1fr;

    }


    .tm-analytics-chart-header {

        display:
        block;

    }


    .tm-analytics-legend {

        margin-top:
        .8rem;

    }

}


/* Dashboard analytics snapshot */

.tm-dashboard-analytics-grid {

    display:
    grid;

    grid-template-columns:
    repeat(4, minmax(0, 1fr));

    gap:
    1rem;

}


.tm-dashboard-analytics-card {

    display:
    flex;

    align-items:
    center;

    gap:
    .8rem;

    color:
    var(--tm-text);

}


.tm-dashboard-analytics-card:hover {

    color:
    var(--tm-primary);

}


.tm-dashboard-analytics-card > i {

    color:
    var(--tm-primary);

    font-size:
    1.4rem;

}


.tm-dashboard-analytics-card div {

    display:
    flex;

    flex-direction:
    column;

}


.tm-dashboard-analytics-card strong {

    color:
    var(--tm-text);

    font-size:
    1.35rem;

    line-height:
    1;

}


.tm-dashboard-analytics-card span {

    margin-top:
    .25rem;

    color:
    var(--tm-text-muted);

    font-size:
    .78rem;

}


@media(max-width: 767px) {

    .tm-dashboard-analytics-grid {

        grid-template-columns:
        repeat(2, minmax(0, 1fr));

    }

}


@media(max-width: 479px) {

    .tm-dashboard-analytics-grid {

        grid-template-columns:
        1fr;

    }

}

/* ---- discover.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Personalised Discovery
|--------------------------------------------------------------------------
*/

.tm-discover-page {
    display: grid;
    gap: 1rem;
}

.tm-discover-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 2rem;
    align-items: center;
    min-height: 390px;
    padding: clamp(2rem, 6vw, 4.5rem);
    overflow: hidden;
    border: 1px solid var(--tm-border);
    border-radius: calc(var(--tm-radius) + 8px);
    background:
        radial-gradient(circle at 84% 20%, rgba(255, 122, 24, .25), transparent 34%),
        radial-gradient(circle at 12% 90%, rgba(77, 132, 255, .14), transparent 30%),
        linear-gradient(135deg, var(--tm-surface), #101419);
    box-shadow: var(--tm-shadow);
}

.tm-discover-hero-content {
    position: relative;
    z-index: 2;
}

.tm-discover-title {
    max-width: 760px;
    margin-bottom: 1rem;
    font-size: clamp(2.4rem, 6vw, 4.7rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.05em;
}

.tm-discover-lead {
    max-width: 720px;
    margin-bottom: 1.5rem;
    color: var(--tm-text-muted);
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.75;
}

.tm-discover-taste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}

.tm-discover-taste > span {
    margin-right: .25rem;
    color: var(--tm-text-muted);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.tm-discover-taste-chip {
    padding: .42rem .7rem;
    border: 1px solid rgba(255, 122, 24, .35);
    border-radius: 999px;
    background: rgba(255, 122, 24, .09);
    color: var(--tm-primary);
    font-size: .82rem;
    text-decoration: none;
}

.tm-discover-taste-chip:hover {
    border-color: var(--tm-primary);
    background: rgba(255, 122, 24, .16);
    color: var(--tm-primary-hover);
}

.tm-discover-hero-visual {
    position: relative;
    display: flex;
    min-height: 260px;
    align-items: center;
    justify-content: center;
}

.tm-discover-disc {
    position: relative;
    z-index: 3;
    display: flex;
    width: min(220px, 65vw);
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--tm-primary) 0 5%, #242a31 6% 19%, #0b0e11 20% 47%, #252b32 48% 50%, #0b0e11 51%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    animation: tm-discover-spin 20s linear infinite;
}

.tm-discover-disc i {
    color: rgba(255, 255, 255, .09);
    font-size: 9rem;
}

.tm-discover-orbit {
    position: absolute;
    border: 1px solid rgba(255, 122, 24, .22);
    border-radius: 50%;
}

.tm-discover-orbit-one {
    width: 285px;
    height: 285px;
}

.tm-discover-orbit-two {
    width: 345px;
    height: 190px;
    transform: rotate(-24deg);
}

.tm-discover-note {
    position: absolute;
    z-index: 4;
    display: flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(25, 29, 34, .94);
    color: var(--tm-primary);
    box-shadow: var(--tm-shadow);
}

.tm-discover-note-one {
    top: 8%;
    right: 8%;
}

.tm-discover-note-two {
    bottom: 10%;
    left: 7%;
}

.tm-discover-filter {
    position: relative;
    z-index: 4;
    margin-top: -2.25rem;
}

.tm-discover-section {
    margin-top: 2.5rem;
}

.tm-discover-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.tm-discover-kicker {
    margin-bottom: .3rem;
    color: var(--tm-primary);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

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

.tm-discover-track-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    background: var(--tm-surface);
    box-shadow: var(--tm-shadow);
    transition: var(--tm-transition);
}

.tm-discover-track-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 122, 24, .48);
}

.tm-discover-track-cover-link {
    position: relative;
    display: block;
    min-height: 100%;
    overflow: hidden;
    background: var(--tm-surface-2);
}

.tm-discover-track-cover {
    width: 100%;
    height: 100%;
    min-height: 168px;
    object-fit: cover;
    transition: transform .25s ease;
}

.tm-discover-track-card:hover .tm-discover-track-cover {
    transform: scale(1.04);
}

.tm-discover-track-rank {
    position: absolute;
    top: .6rem;
    left: .6rem;
    display: inline-flex;
    min-width: 34px;
    min-height: 29px;
    align-items: center;
    justify-content: center;
    padding: .25rem .5rem;
    border-radius: 9px;
    background: rgba(10, 12, 14, .88);
    color: var(--tm-primary);
    font-size: .78rem;
    font-weight: 800;
    backdrop-filter: blur(10px);
}

.tm-discover-track-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1rem;
}

.tm-discover-reason {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin-bottom: .55rem;
    color: var(--tm-primary);
    font-size: .74rem;
    font-weight: 700;
}

.tm-discover-track-content .tm-discover-reason {
    justify-content: flex-start;
}

.tm-discover-track-title {
    overflow: hidden;
    margin-bottom: .15rem;
    font-size: 1rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-discover-track-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .75rem;
    color: var(--tm-text-muted);
    font-size: .76rem;
}

.tm-discover-track-stats i {
    color: var(--tm-primary);
}

.tm-discover-track-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: auto;
    padding-top: .85rem;
}

.tm-discover-empty {
    display: grid;
    justify-items: center;
    gap: .4rem;
    padding: 3rem 1.5rem;
    color: var(--tm-text-muted);
    text-align: center;
}

.tm-discover-empty i {
    color: var(--tm-primary);
    font-size: 2rem;
}

.tm-discover-empty strong {
    color: var(--tm-text);
}

.tm-discover-dj-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.tm-discover-dj-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    padding: 1.4rem;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    background: var(--tm-surface);
    box-shadow: var(--tm-shadow);
    text-align: center;
    transition: var(--tm-transition);
}

.tm-discover-dj-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 122, 24, .5);
}

.tm-discover-dj-avatar-link {
    display: block;
    margin-bottom: .9rem;
}

.tm-discover-dj-avatar {
    width: 92px;
    height: 92px;
    border: 3px solid var(--tm-border);
    border-radius: 50%;
    object-fit: cover;
}

.tm-discover-dj-card:hover .tm-discover-dj-avatar {
    border-color: var(--tm-primary);
}

.tm-discover-dj-genres {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin-top: .85rem;
}

.tm-discover-dj-genres span {
    padding: .25rem .55rem;
    border-radius: 999px;
    background: var(--tm-surface-2);
    color: var(--tm-text-muted);
    font-size: .72rem;
}

.tm-discover-dj-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: auto;
    padding-top: 1rem;
}

.tm-discover-genre-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.tm-discover-genre-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface);
    color: var(--tm-text);
    text-decoration: none;
    transition: var(--tm-transition);
}

.tm-discover-genre-card:hover,
.tm-discover-genre-card.is-active {
    transform: translateY(-2px);
    border-color: var(--tm-primary);
    background: var(--tm-surface-2);
    color: var(--tm-text);
}

.tm-discover-genre-icon {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 122, 24, .12);
    color: var(--tm-primary);
    font-size: 1.15rem;
}

.tm-discover-genre-card strong,
.tm-discover-genre-card span {
    display: block;
}

.tm-discover-genre-card span {
    margin-top: .1rem;
    color: var(--tm-text-muted);
    font-size: .76rem;
}

@keyframes tm-discover-spin {
    to { transform: rotate(360deg); }
}

@media(max-width: 991px) {
    .tm-discover-hero { grid-template-columns: 1fr; }
    .tm-discover-hero-visual { min-height: 220px; }
    .tm-discover-track-grid { grid-template-columns: 1fr; }
    .tm-discover-dj-grid,
    .tm-discover-genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media(max-width: 575px) {
    .tm-discover-hero { padding: 2rem 1.25rem; }
    .tm-discover-title { font-size: 2.5rem; }
    .tm-discover-hero-visual { min-height: 190px; }
    .tm-discover-disc { width: 165px; }
    .tm-discover-disc i { font-size: 6.5rem; }
    .tm-discover-filter { margin-top: -1rem; }
    .tm-discover-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .tm-discover-track-card { grid-template-columns: 92px minmax(0, 1fr); }
    .tm-discover-track-cover { min-height: 100%; }
    .tm-discover-track-actions .btn {
        padding-right: .55rem;
        padding-left: .55rem;
    }
    .tm-discover-dj-grid,
    .tm-discover-genre-grid { grid-template-columns: 1fr; }
}

/* Phase 31: For You & Smart Discovery */
.tm-smart-discovery-page {
    display: grid;
    gap: 1.5rem;
}

.tm-smart-discovery-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 2rem;
    align-items: center;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    border: 1px solid var(--tm-border);
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 85% 15%, rgba(25, 225, 105, .18), transparent 35%),
        linear-gradient(145deg, rgba(21, 22, 28, .98), rgba(9, 10, 14, .98));
}

.tm-smart-discovery-hero::after {
    content: "";
    position: absolute;
    inset: auto -8rem -9rem auto;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    border: 3rem solid rgba(25, 225, 105, .035);
    pointer-events: none;
}

.tm-smart-discovery-hero h1 {
    max-width: 780px;
    margin: .6rem 0 1rem;
    font-size: clamp(2.2rem, 6vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.tm-smart-discovery-hero > div > p {
    max-width: 760px;
    margin: 0;
    color: var(--tm-text-muted);
    font-size: clamp(1rem, 2vw, 1.15rem);
}

.tm-smart-discovery-hero-panel {
    position: relative;
    z-index: 1;
    padding: 1.35rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1.25rem;
    background: rgba(5, 6, 10, .62);
    backdrop-filter: blur(16px);
}

.tm-smart-discovery-hero-panel strong {
    display: block;
    margin: .25rem 0 .55rem;
    font-size: 1.35rem;
}

.tm-smart-discovery-hero-panel p {
    margin: 0;
    color: var(--tm-text-muted);
}

.tm-discovery-taste-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.tm-discovery-taste-chips a {
    padding: .35rem .65rem;
    border: 1px solid rgba(25, 225, 105, .28);
    border-radius: 999px;
    background: rgba(25, 225, 105, .08);
    color: var(--tm-primary);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}

.tm-smart-discovery-filter {
    padding: 1.25rem;
}

.tm-smart-discovery-feed {
    display: grid;
    gap: 2.25rem;
}

.tm-smart-discovery-section {
    min-width: 0;
}

.tm-discovery-section-empty {
    display: flex;
    min-height: 108px;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-style: dashed;
    background: rgba(255, 255, 255, .018);
}

.tm-discovery-section-empty-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(25, 225, 105, .24);
    border-radius: 14px;
    background: rgba(25, 225, 105, .07);
    color: var(--tm-primary);
    font-size: 1.25rem;
}

.tm-discovery-section-empty strong {
    display: block;
    margin-bottom: .2rem;
    color: var(--tm-text);
}

.tm-discovery-section-empty p {
    margin: 0;
    color: var(--tm-text-muted);
    font-size: .9rem;
}

.tm-smart-discovery-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tm-smart-discovery-heading h2 {
    margin: .15rem 0 .25rem;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.tm-smart-discovery-heading p {
    margin: 0;
    color: var(--tm-text-muted);
}

.tm-smart-discovery-track-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tm-smart-discovery-track-list .tm-track-card-v2 {
    height: 100%;
}

.tm-discovery-card-context {
    display: grid;
    gap: .55rem;
    padding: .75rem 1rem 1rem;
    color: var(--tm-text-muted);
    font-size: .8rem;
}

.tm-discovery-card-context > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.tm-discovery-card-context i {
    color: var(--tm-primary);
}

.tm-discovery-progress {
    overflow: hidden;
    height: .28rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.tm-discovery-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--tm-primary);
}

.tm-discovery-action-menu {
    position: relative;
}

.tm-discovery-action-menu summary {
    list-style: none;
    cursor: pointer;
}

.tm-discovery-action-menu summary::-webkit-details-marker {
    display: none;
}

.tm-discovery-action-popover {
    position: absolute;
    right: 0;
    bottom: calc(100% + .5rem);
    z-index: 30;
    width: max-content;
    min-width: 12.5rem;
    padding: .35rem;
    border: 1px solid var(--tm-border);
    border-radius: .8rem;
    background: #101117;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .4);
}

.tm-discovery-action-popover form {
    margin: 0;
}

.tm-discovery-action-popover button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .55rem;
    padding: .55rem .7rem;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: var(--tm-text);
    font-size: .82rem;
    text-align: left;
}

.tm-discovery-action-popover button:hover,
.tm-discovery-action-popover button:focus-visible {
    background: rgba(255, 255, 255, .07);
}

.tm-smart-discovery-empty {
    padding: 3rem 1.5rem;
    text-align: center;
}

.tm-smart-discovery-empty > i {
    display: block;
    margin-bottom: 1rem;
    color: var(--tm-primary);
    font-size: 2.5rem;
}

.tm-discovery-controls {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.tm-discovery-personalisation-switch {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem .85rem;
    border: 1px solid var(--tm-border);
    border-radius: .85rem;
    background: rgba(255, 255, 255, .025);
}

.tm-discovery-control-list {
    display: grid;
    gap: .6rem;
}

.tm-discovery-control-list > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .7rem .8rem;
    border: 1px solid var(--tm-border);
    border-radius: .75rem;
    background: rgba(255, 255, 255, .02);
}

.tm-discovery-control-list span {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.tm-discovery-control-list i {
    color: var(--tm-primary);
}

.tm-discovery-control-empty {
    padding: 1rem;
    border: 1px dashed var(--tm-border);
    border-radius: .75rem;
    color: var(--tm-text-muted);
}

@media (max-width: 991.98px) {
    .tm-smart-discovery-hero {
        grid-template-columns: 1fr;
    }

    .tm-smart-discovery-track-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .tm-smart-discovery-hero {
        padding: 1.35rem;
        border-radius: 1rem;
    }

    .tm-smart-discovery-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tm-discovery-personalisation-switch,
    .tm-discovery-control-list > div {
        align-items: stretch;
        flex-direction: column;
    }

    .tm-discovery-action-popover {
        right: auto;
        left: 0;
    }
}

/* Phase 31.1 personal discovery section visibility */
.tm-smart-discovery-heading-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .55rem;
}

.tm-discovery-section-settings {
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .02);
}

.tm-discovery-section-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.tm-discovery-section-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: .8rem .9rem;
    border: 1px solid var(--tm-border);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .018);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.tm-discovery-section-toggle:hover {
    border-color: rgba(25, 225, 105, .35);
    background: rgba(25, 225, 105, .045);
    transform: translateY(-1px);
}

.tm-discovery-section-toggle > span:first-child {
    display: grid;
    min-width: 0;
    gap: .2rem;
}

.tm-discovery-section-toggle strong {
    color: var(--tm-text);
    font-size: .9rem;
}

.tm-discovery-section-toggle small {
    overflow: hidden;
    color: var(--tm-text-muted);
    font-size: .76rem;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.tm-discovery-section-toggle .form-check-input {
    margin: 0;
}

@media (max-width: 767.98px) {
    .tm-discovery-section-toggle-grid {
        grid-template-columns: 1fr;
    }

    .tm-smart-discovery-heading-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ---- events.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Events and Gigs
|--------------------------------------------------------------------------
*/


.tm-events-page,
.tm-event-detail-page {

    display:
    grid;

    gap:
    1.5rem;

}


.tm-events-hero {

    position:
    relative;

    display:
    grid;

    grid-template-columns:
    minmax(0, 1fr) auto;

    gap:
    2rem;

    align-items:
    center;

    min-height:
    315px;

    padding:
    clamp(2rem, 6vw, 4rem);

    overflow:
    hidden;

    border:
    1px solid var(--tm-border);

    border-radius:
    calc(var(--tm-radius) + 8px);

    background:
    radial-gradient(
        circle at 82% 25%,
        rgba(255, 122, 24, .25),
        transparent 34%
    ),
    linear-gradient(
        135deg,
        var(--tm-surface),
        #101419
    );

    box-shadow:
    var(--tm-shadow);

}


.tm-events-hero-title {

    max-width:
    760px;

    margin-bottom:
    1rem;

    font-size:
    clamp(2.35rem, 6vw, 4.4rem);

    font-weight:
    800;

    line-height:
    1.02;

    letter-spacing:
    -.045em;

}


.tm-events-hero-copy {

    max-width:
    680px;

    margin-bottom:
    1.5rem;

    color:
    var(--tm-text-muted);

    font-size:
    1.08rem;

    line-height:
    1.7;

}


.tm-events-hero-icon {

    display:
    flex;

    width:
    190px;

    height:
    190px;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid rgba(255, 255, 255, .1);

    border-radius:
    40px;

    background:
    rgba(15, 18, 21, .72);

    color:
    var(--tm-primary);

    font-size:
    6.5rem;

    box-shadow:
    0 26px 70px rgba(0, 0, 0, .45);

    transform:
    rotate(5deg);

}


.tm-events-filter-card {

    position:
    relative;

    z-index:
    3;

    margin-top:
    -2.35rem;

}


.tm-events-section-heading {

    display:
    flex;

    align-items:
    flex-end;

    justify-content:
    space-between;

    gap:
    1rem;

    margin-bottom:
    1rem;

}


.tm-events-result-count {

    padding:
    .42rem .72rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    999px;

    color:
    var(--tm-text-muted);

    font-size:
    .8rem;

}


.tm-event-grid {

    display:
    grid;

    grid-template-columns:
    repeat(2, minmax(0, 1fr));

    gap:
    1rem;

}


.tm-event-card {

    display:
    grid;

    grid-template-columns:
    185px minmax(0, 1fr);

    min-width:
    0;

    overflow:
    hidden;

    border:
    1px solid var(--tm-border);

    border-radius:
    var(--tm-radius);

    background:
    var(--tm-surface);

    box-shadow:
    var(--tm-shadow);

    transition:
    var(--tm-transition);

}


.tm-event-card:hover {

    transform:
    translateY(-3px);

    border-color:
    rgba(255, 122, 24, .48);

}


.tm-event-card.is-compact {

    grid-template-columns:
    130px minmax(0, 1fr);

}


.tm-event-card-flyer-link {

    position:
    relative;

    display:
    block;

    min-height:
    100%;

    overflow:
    hidden;

    background:
    var(--tm-surface-2);

}


.tm-event-card-flyer {

    width:
    100%;

    height:
    100%;

    min-height:
    270px;

    object-fit:
    cover;

    transition:
    transform .25s ease;

}


.tm-event-card.is-compact .tm-event-card-flyer {

    min-height:
    205px;

}


.tm-event-card:hover .tm-event-card-flyer {

    transform:
    scale(1.04);

}


.tm-event-date-badge {

    position:
    absolute;

    top:
    .7rem;

    left:
    .7rem;

    display:
    grid;

    min-width:
    54px;

    justify-items:
    center;

    padding:
    .5rem .55rem;

    border-radius:
    12px;

    background:
    rgba(10, 12, 14, .9);

    color:
    var(--tm-text);

    backdrop-filter:
    blur(12px);

}


.tm-event-date-badge strong {

    font-size:
    1.3rem;

    line-height:
    1;

}


.tm-event-date-badge span {

    margin-top:
    .2rem;

    color:
    var(--tm-primary);

    font-size:
    .68rem;

    font-weight:
    800;

}


.tm-event-status-badge {

    position:
    absolute;

    right:
    .7rem;

    bottom:
    .7rem;

    padding:
    .35rem .55rem;

    border-radius:
    8px;

    background:
    rgba(10, 12, 14, .88);

    color:
    var(--tm-text-muted);

    font-size:
    .72rem;

}


.tm-event-card-content {

    display:
    flex;

    min-width:
    0;

    flex-direction:
    column;

    padding:
    1.15rem;

}


.tm-event-card-kicker {

    margin-bottom:
    .5rem;

    color:
    var(--tm-primary);

    font-size:
    .76rem;

    font-weight:
    700;

}


.tm-event-card-title {

    margin-bottom:
    .15rem;

    font-size:
    1.15rem;

    font-weight:
    760;

}


.tm-event-card-dj,
.tm-event-card-location,
.tm-event-card-description,
.tm-event-card-attendance {

    color:
    var(--tm-text-muted);

    font-size:
    .82rem;

}


.tm-event-card-location {

    display:
    flex;

    gap:
    .4rem;

    align-items:
    flex-start;

    margin-top:
    .65rem;

}


.tm-event-card-location i,
.tm-event-card-attendance i,
.tm-event-manage-counts i {

    color:
    var(--tm-primary);

}


.tm-event-card-description {

    margin:
    .8rem 0 0;

    line-height:
    1.55;

}


.tm-event-card-attendance {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    .8rem;

    margin-top:
    .8rem;

}


.tm-event-card-actions {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    .45rem;

    margin-top:
    auto;

    padding-top:
    1rem;

}


.tm-event-empty {

    display:
    grid;

    justify-items:
    center;

    gap:
    .45rem;

    padding:
    3.25rem 1.5rem;

    color:
    var(--tm-text-muted);

    text-align:
    center;

}


.tm-event-empty i {

    color:
    var(--tm-primary);

    font-size:
    2rem;

}


.tm-event-empty strong {

    color:
    var(--tm-text);

}


.tm-event-flyer-upload {

    position:
    sticky;

    top:
    90px;

    padding:
    1rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    14px;

    background:
    var(--tm-surface-2);

}


.tm-event-flyer-preview {

    display:
    block;

    width:
    100%;

    aspect-ratio:
    4 / 5;

    border:
    1px solid var(--tm-border);

    border-radius:
    12px;

    object-fit:
    cover;

    background:
    var(--tm-surface);

}


.tm-event-manage-list {

    display:
    grid;

    gap:
    .85rem;

}


.tm-event-manage-card {

    display:
    grid;

    grid-template-columns:
    auto minmax(0, 1fr) auto;

    gap:
    1rem;

    align-items:
    center;

}


.tm-event-manage-date {

    display:
    grid;

    min-width:
    78px;

    justify-items:
    center;

    padding:
    .7rem;

    border-radius:
    12px;

    background:
    var(--tm-surface-2);

}


.tm-event-manage-date strong {

    color:
    var(--tm-primary);

    font-size:
    1.7rem;

    line-height:
    1;

}


.tm-event-manage-date span {

    margin-top:
    .3rem;

    color:
    var(--tm-text-muted);

    font-size:
    .68rem;

    font-weight:
    700;

}


.tm-event-manage-counts {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    1rem;

    margin-top:
    .65rem;

    color:
    var(--tm-text-muted);

    font-size:
    .78rem;

}


.tm-event-manage-actions {

    display:
    flex;

    flex-wrap:
    wrap;

    justify-content:
    flex-end;

    gap:
    .4rem;

}


.tm-event-detail-hero {

    display:
    grid;

    grid-template-columns:
    minmax(280px, .75fr)
    minmax(0, 1.25fr);

    gap:
    clamp(1.5rem, 5vw, 4rem);

    align-items:
    center;

    padding:
    clamp(1rem, 3vw, 2rem);

    border:
    1px solid var(--tm-border);

    border-radius:
    calc(var(--tm-radius) + 8px);

    background:
    radial-gradient(
        circle at 90% 10%,
        rgba(255, 122, 24, .18),
        transparent 35%
    ),
    var(--tm-surface);

    box-shadow:
    var(--tm-shadow);

}


.tm-event-detail-flyer {

    display:
    block;

    width:
    100%;

    max-height:
    610px;

    border:
    1px solid var(--tm-border);

    border-radius:
    16px;

    object-fit:
    cover;

    box-shadow:
    0 24px 60px rgba(0, 0, 0, .45);

}


.tm-event-detail-date {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    .45rem .7rem;

    align-items:
    center;

    margin-bottom:
    1rem;

    color:
    var(--tm-text-muted);

}


.tm-event-detail-date strong {

    color:
    var(--tm-primary);

}


.tm-event-detail-title {

    margin-bottom:
    1.25rem;

    font-size:
    clamp(2.1rem, 6vw, 4.6rem);

    font-weight:
    820;

    line-height:
    1.02;

    letter-spacing:
    -.045em;

}


.tm-event-detail-location {

    display:
    flex;

    gap:
    .75rem;

    align-items:
    flex-start;

    padding:
    1rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    12px;

    background:
    var(--tm-surface-2);

}


.tm-event-detail-location > i {

    color:
    var(--tm-primary);

    font-size:
    1.25rem;

}


.tm-event-detail-location strong,
.tm-event-detail-location span {

    display:
    block;

}


.tm-event-detail-location span {

    margin-top:
    .15rem;

    color:
    var(--tm-text-muted);

}


.tm-event-detail-counts {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    1rem;

    margin-top:
    1.2rem;

    color:
    var(--tm-text-muted);

}


.tm-event-detail-counts i {

    color:
    var(--tm-primary);

}


.tm-event-detail-actions {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    .55rem;

    margin-top:
    1.4rem;

}


.tm-event-detail-section,
.tm-event-dj-card {

    height:
    100%;

}


.tm-event-description {

    color:
    var(--tm-text-muted);

    line-height:
    1.8;

}


.tm-event-dj-card {

    display:
    flex;

    flex-direction:
    column;

    align-items:
    center;

    text-align:
    center;

}


.tm-event-dj-avatar {

    width:
    105px;

    height:
    105px;

    margin-bottom:
    1rem;

    border:
    3px solid var(--tm-border);

    border-radius:
    50%;

    object-fit:
    cover;

}


.tm-event-dj-card .btn {

    margin-top:
    auto;

}


.tm-dashboard-event-list {

    display:
    grid;

    grid-template-columns:
    repeat(3, minmax(0, 1fr));

    gap:
    .8rem;

}


.tm-dashboard-event-card {

    display:
    grid;

    grid-template-columns:
    auto minmax(0, 1fr);

    gap:
    .8rem;

    align-items:
    center;

    padding:
    1rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    12px;

    background:
    var(--tm-surface);

    color:
    var(--tm-text);

    text-decoration:
    none;

    transition:
    var(--tm-transition);

}


.tm-dashboard-event-card:hover {

    transform:
    translateY(-2px);

    border-color:
    var(--tm-primary);

    color:
    var(--tm-text);

}


.tm-dashboard-event-date {

    display:
    grid;

    width:
    54px;

    justify-items:
    center;

    padding:
    .45rem;

    border-radius:
    10px;

    background:
    var(--tm-surface-2);

}


.tm-dashboard-event-date strong {

    color:
    var(--tm-primary);

    font-size:
    1.2rem;

    line-height:
    1;

}


.tm-dashboard-event-date span {

    color:
    var(--tm-text-muted);

    font-size:
    .66rem;

}


.tm-dashboard-event-copy {

    min-width:
    0;

}


.tm-dashboard-event-copy strong,
.tm-dashboard-event-copy span {

    display:
    block;

    overflow:
    hidden;

    text-overflow:
    ellipsis;

    white-space:
    nowrap;

}


.tm-dashboard-event-copy span {

    margin-top:
    .18rem;

    color:
    var(--tm-text-muted);

    font-size:
    .75rem;

}


@media(max-width: 1199px) {

    .tm-event-grid {

        grid-template-columns:
        1fr;

    }


    .tm-dashboard-event-list {

        grid-template-columns:
        repeat(2, minmax(0, 1fr));

    }

}


@media(max-width: 767px) {

    .tm-events-hero {

        grid-template-columns:
        1fr;

    }


    .tm-events-hero-icon {

        display:
        none;

    }


    .tm-events-filter-card {

        margin-top:
        -1rem;

    }


    .tm-event-card,
    .tm-event-card.is-compact {

        grid-template-columns:
        120px minmax(0, 1fr);

    }


    .tm-event-card-flyer,
    .tm-event-card.is-compact .tm-event-card-flyer {

        min-height:
        235px;

    }


    .tm-event-manage-card {

        grid-template-columns:
        auto minmax(0, 1fr);

    }


    .tm-event-manage-actions {

        grid-column:
        1 / 3;

        justify-content:
        flex-start;

    }


    .tm-event-detail-hero {

        grid-template-columns:
        1fr;

    }


    .tm-event-detail-flyer {

        max-height:
        680px;

    }


    .tm-dashboard-event-list {

        grid-template-columns:
        1fr;

    }

}


@media(max-width: 479px) {

    .tm-event-card,
    .tm-event-card.is-compact {

        grid-template-columns:
        1fr;

    }


    .tm-event-card-flyer,
    .tm-event-card.is-compact .tm-event-card-flyer {

        min-height:
        auto;

        aspect-ratio:
        16 / 10;

    }


    .tm-events-section-heading {

        align-items:
        flex-start;

        flex-direction:
        column;

    }


    .tm-event-manage-card {

        grid-template-columns:
        1fr;

    }


    .tm-event-manage-date {

        width:
        100%;

    }


    .tm-event-manage-actions {

        grid-column:
        auto;

    }

}

/* ---- curation.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Editorial Curation
|--------------------------------------------------------------------------
*/


.tm-admin-nav a.is-active {

    background:
    var(--tm-surface-2);

    color:
    var(--tm-primary);

}


.tm-site-announcement {

    position:
    relative;

    z-index:
    1010;

    border-bottom:
    1px solid rgba(255, 255, 255, .12);

    color:
    #fff;

}


.tm-site-announcement.is-info {

    background:
    linear-gradient(
        90deg,
        #1f5e8c,
        #153c5b
    );

}


.tm-site-announcement.is-success {

    background:
    linear-gradient(
        90deg,
        #18643a,
        #10472b
    );

}


.tm-site-announcement.is-warning {

    background:
    linear-gradient(
        90deg,
        #8b5a12,
        #62400d
    );

}


.tm-site-announcement.is-danger {

    background:
    linear-gradient(
        90deg,
        #8c2530,
        #611a22
    );

}


.tm-site-announcement-inner {

    display:
    flex;

    align-items:
    center;

    gap:
    .9rem;

    min-height:
    58px;

    padding-top:
    .65rem;

    padding-bottom:
    .65rem;

}


.tm-site-announcement-icon {

    display:
    flex;

    width:
    36px;

    height:
    36px;

    flex:
    0 0 auto;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid rgba(255, 255, 255, .2);

    border-radius:
    10px;

    background:
    rgba(0, 0, 0, .15);

}


.tm-site-announcement-copy {

    display:
    flex;

    min-width:
    0;

    flex:
    1;

    flex-direction:
    column;

    line-height:
    1.35;

}


.tm-site-announcement-copy strong {

    font-size:
    .88rem;

}


.tm-site-announcement-copy span {

    color:
    rgba(255, 255, 255, .86);

    font-size:
    .82rem;

}


.tm-curation-public-section {

    position:
    relative;

    padding:
    clamp(1.2rem, 3vw, 2rem);

    overflow:
    hidden;

    border:
    1px solid rgba(255, 122, 24, .2);

    border-radius:
    calc(var(--tm-radius) + 4px);

    background:
    radial-gradient(
        circle at 100% 0,
        rgba(255, 122, 24, .1),
        transparent 34%
    ),
    var(--tm-surface);

    box-shadow:
    var(--tm-shadow);

}


.tm-curation-kicker {

    margin-bottom:
    .35rem;

    color:
    var(--tm-primary);

    font-size:
    .75rem;

    font-weight:
    800;

    letter-spacing:
    .07em;

    text-transform:
    uppercase;

}


.tm-curation-subheading {

    display:
    flex;

    align-items:
    center;

    gap:
    .5rem;

    margin:
    1.1rem 0 .75rem;

    color:
    var(--tm-text-muted);

    font-size:
    .8rem;

    font-weight:
    800;

    letter-spacing:
    .06em;

    text-transform:
    uppercase;

}


.tm-curation-subheading i {

    color:
    var(--tm-primary);

}


.tm-curation-card-summary {

    margin:
    0 0 .65rem;

    color:
    var(--tm-text-muted);

    font-size:
    .78rem;

    line-height:
    1.5;

}


.tm-curation-admin-form {

    display:
    block;

}


.tm-curation-admin-heading {

    display:
    flex;

    align-items:
    flex-start;

    gap:
    .85rem;

    margin-bottom:
    1.35rem;

}


.tm-curation-admin-icon {

    display:
    flex;

    width:
    44px;

    height:
    44px;

    flex:
    0 0 auto;

    align-items:
    center;

    justify-content:
    center;

    border-radius:
    12px;

    background:
    rgba(255, 122, 24, .12);

    color:
    var(--tm-primary);

    font-size:
    1.1rem;

}


.tm-curation-setting-box {

    height:
    100%;

    padding:
    1rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    12px;

    background:
    var(--tm-surface-2);

}


.tm-curation-schedule-list {

    display:
    grid;

    gap:
    1rem;

    max-height:
    1100px;

    padding-right:
    .15rem;

    overflow-y:
    auto;

}


.tm-curation-schedule-card {

    padding:
    1rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    12px;

    background:
    var(--tm-surface-2);

}


.tm-curation-schedule-header {

    display:
    flex;

    align-items:
    flex-start;

    justify-content:
    space-between;

    gap:
    1rem;

}


.tm-curation-type-badge {

    display:
    inline-flex;

    align-items:
    center;

    padding:
    .25rem .5rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    999px;

    color:
    var(--tm-text-muted);

    font-size:
    .7rem;

    font-weight:
    700;

}


@media(max-width: 767px) {

    .tm-site-announcement-inner {

        align-items:
        flex-start;

        flex-wrap:
        wrap;

    }


    .tm-site-announcement-inner .btn {

        margin-left:
        45px;

    }


    .tm-curation-public-section {

        padding:
        1rem;

    }

}

/* ---- releases.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Releases, EPs and Albums
|--------------------------------------------------------------------------
*/


.tm-release-page {

    display:
    grid;

    gap:
    1rem;

}


.tm-release-directory-hero {

    display:
    flex;

    align-items:
    flex-end;

    justify-content:
    space-between;

    gap:
    2rem;

    padding:
    clamp(2rem, 6vw, 4rem);

    border:
    1px solid var(--tm-border);

    border-radius:
    calc(var(--tm-radius) + 8px);

    background:
    radial-gradient(
        circle at 82% 20%,
        rgba(255, 122, 24, .25),
        transparent 32%
    ),
    linear-gradient(
        135deg,
        var(--tm-surface),
        #11161c
    );

    box-shadow:
    var(--tm-shadow);

}


.tm-release-directory-title {

    margin-bottom:
    .75rem;

    font-size:
    clamp(2.4rem, 6vw, 4.8rem);

    font-weight:
    800;

    letter-spacing:
    -.05em;

}


.tm-release-directory-lead {

    max-width:
    690px;

    margin-bottom:
    0;

    color:
    var(--tm-text-muted);

    font-size:
    1.08rem;

    line-height:
    1.7;

}


.tm-release-grid {

    display:
    grid;

    grid-template-columns:
    repeat(4, minmax(0, 1fr));

    gap:
    1rem;

}


.tm-release-card {

    min-width:
    0;

    overflow:
    hidden;

    border:
    1px solid var(--tm-border);

    border-radius:
    var(--tm-radius);

    background:
    var(--tm-surface);

    box-shadow:
    var(--tm-shadow);

    transition:
    var(--tm-transition);

}


.tm-release-card:hover {

    transform:
    translateY(-4px);

    border-color:
    rgba(255, 122, 24, .5);

}


.tm-release-card-cover-link {

    position:
    relative;

    display:
    block;

    aspect-ratio:
    1;

    overflow:
    hidden;

    background:
    var(--tm-surface-2);

}


.tm-release-card-cover {

    width:
    100%;

    height:
    100%;

    object-fit:
    cover;

    transition:
    transform .25s ease;

}


.tm-release-card:hover .tm-release-card-cover {

    transform:
    scale(1.04);

}


.tm-release-type-badge {

    position:
    absolute;

    top:
    .75rem;

    left:
    .75rem;

    display:
    inline-flex;

    align-items:
    center;

    padding:
    .35rem .6rem;

    border-radius:
    999px;

    background:
    rgba(12, 15, 18, .9);

    color:
    var(--tm-primary);

    font-size:
    .72rem;

    font-weight:
    800;

    letter-spacing:
    .04em;

    text-transform:
    uppercase;

    backdrop-filter:
    blur(10px);

}


.tm-release-type-badge.is-static {

    position:
    static;

}


.tm-release-card-body {

    padding:
    1rem;

}


.tm-release-card-date,
.tm-release-kicker {

    color:
    var(--tm-primary);

    font-size:
    .74rem;

    font-weight:
    800;

    letter-spacing:
    .07em;

    text-transform:
    uppercase;

}


.tm-release-card-title {

    overflow:
    hidden;

    margin:
    .3rem 0 .1rem;

    font-size:
    1.05rem;

    font-weight:
    750;

    text-overflow:
    ellipsis;

    white-space:
    nowrap;

}


.tm-release-card-artist,
.tm-release-detail-artist {

    color:
    var(--tm-text-muted);

    text-decoration:
    none;

}


.tm-release-card-artist:hover,
.tm-release-detail-artist:hover {

    color:
    var(--tm-primary);

}


.tm-release-card-meta {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    .75rem;

    margin-top:
    .85rem;

    color:
    var(--tm-text-muted);

    font-size:
    .76rem;

}


.tm-release-card-meta i {

    color:
    var(--tm-primary);

}


.tm-release-genre {

    padding:
    .3rem .6rem;

    border-radius:
    999px;

    background:
    var(--tm-surface-2);

    color:
    var(--tm-text-muted);

    font-size:
    .75rem;

}


.tm-release-empty {

    display:
    grid;

    justify-items:
    center;

    gap:
    .55rem;

    padding:
    3rem 1.5rem;

    text-align:
    center;

}


.tm-release-empty > i {

    color:
    var(--tm-primary);

    font-size:
    2.4rem;

}


.tm-release-detail-hero {

    display:
    grid;

    grid-template-columns:
    minmax(260px, 410px)
    minmax(0, 1fr);

    gap:
    clamp(1.5rem, 5vw, 4rem);

    align-items:
    center;

    padding:
    clamp(1.25rem, 4vw, 3rem);

    border:
    1px solid var(--tm-border);

    border-radius:
    calc(var(--tm-radius) + 6px);

    background:
    radial-gradient(
        circle at 80% 15%,
        rgba(255, 122, 24, .18),
        transparent 38%
    ),
    var(--tm-surface);

    box-shadow:
    var(--tm-shadow);

}


.tm-release-detail-cover {

    display:
    block;

    width:
    100%;

    aspect-ratio:
    1;

    border:
    1px solid var(--tm-border);

    border-radius:
    20px;

    object-fit:
    cover;

    box-shadow:
    0 25px 65px rgba(0, 0, 0, .45);

}


.tm-release-detail-title {

    margin-bottom:
    .25rem;

    font-size:
    clamp(2.2rem, 6vw, 4.8rem);

    font-weight:
    800;

    line-height:
    1.03;

    letter-spacing:
    -.05em;

}


.tm-release-detail-artist {

    display:
    inline-block;

    font-size:
    1.15rem;

    font-weight:
    700;

}


.tm-release-detail-meta {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    .85rem;

    margin-top:
    1.1rem;

    color:
    var(--tm-text-muted);

}


.tm-release-detail-meta i {

    color:
    var(--tm-primary);

}


.tm-release-detail-description {

    max-width:
    780px;

    margin:
    1.35rem 0;

    color:
    var(--tm-text-muted);

    line-height:
    1.75;

}


.tm-release-track-list {

    display:
    grid;

    gap:
    .55rem;

    margin:
    0;

    padding:
    0;

    list-style:
    none;

    counter-reset:
    release-track;

}


.tm-release-track-row {

    display:
    grid;

    grid-template-columns:
    42px minmax(0, 1fr) auto;

    gap:
    .8rem;

    align-items:
    center;

    padding:
    .75rem;

    border:
    1px solid transparent;

    border-radius:
    12px;

    background:
    var(--tm-surface-2);

}


.tm-release-track-row:hover {

    border-color:
    var(--tm-border);

}


.tm-release-track-number {

    display:
    flex;

    width:
    34px;

    height:
    34px;

    align-items:
    center;

    justify-content:
    center;

    border-radius:
    9px;

    background:
    rgba(255, 122, 24, .12);

    color:
    var(--tm-primary);

    font-size:
    .8rem;

    font-weight:
    800;

}


.tm-release-track-title {

    color:
    var(--tm-text);

    font-weight:
    700;

    text-decoration:
    none;

}


.tm-release-track-title:hover {

    color:
    var(--tm-primary);

}


.tm-release-track-actions {

    display:
    flex;

    align-items:
    center;

    gap:
    .35rem;

}


.tm-release-manage-list {

    display:
    grid;

    gap:
    .8rem;

}


.tm-release-manage-row {

    display:
    grid;

    grid-template-columns:
    82px minmax(0, 1fr) auto;

    gap:
    1rem;

    align-items:
    center;

    padding:
    .9rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    var(--tm-radius);

    background:
    var(--tm-surface);

}


.tm-release-manage-cover {

    width:
    82px;

    height:
    82px;

    border-radius:
    12px;

    object-fit:
    cover;

}


.tm-release-manage-actions {

    display:
    flex;

    flex-wrap:
    wrap;

    justify-content:
    flex-end;

    gap:
    .45rem;

}


.tm-release-form-cover {

    display:
    block;

    width:
    min(100%, 320px);

    aspect-ratio:
    1;

    border:
    1px solid var(--tm-border);

    border-radius:
    16px;

    object-fit:
    cover;

}


.tm-release-track-picker {

    padding-top:
    1.5rem;

    border-top:
    1px solid var(--tm-border);

}


.tm-release-track-picker-list {

    display:
    grid;

    gap:
    .55rem;

}


.tm-release-track-picker-row {

    display:
    grid;

    grid-template-columns:
    auto minmax(0, 1fr) auto;

    gap:
    .8rem;

    align-items:
    center;

    padding:
    .75rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    11px;

    background:
    var(--tm-surface-2);

    cursor:
    pointer;

}


.tm-release-track-picker-row:hover {

    border-color:
    rgba(255, 122, 24, .45);

}


.tm-release-track-picker-copy {

    min-width:
    0;

}


.tm-release-track-picker-copy strong,
.tm-release-track-picker-copy small {

    display:
    block;

}


.tm-release-track-picker-copy small {

    margin-top:
    .15rem;

    color:
    var(--tm-text-muted);

}


.tm-release-track-order-wrap {

    display:
    flex;

    align-items:
    center;

    gap:
    .45rem;

    color:
    var(--tm-text-muted);

    font-size:
    .74rem;

}


.tm-release-track-order-wrap input {

    width:
    76px;

}


@media(max-width: 1199px) {

    .tm-release-grid {

        grid-template-columns:
        repeat(3, minmax(0, 1fr));

    }

}


@media(max-width: 991px) {

    .tm-release-directory-hero {

        align-items:
        flex-start;

        flex-direction:
        column;

    }


    .tm-release-grid {

        grid-template-columns:
        repeat(2, minmax(0, 1fr));

    }


    .tm-release-detail-hero {

        grid-template-columns:
        1fr;

    }


    .tm-release-detail-cover-wrap {

        width:
        min(100%, 430px);

    }

}


@media(max-width: 575px) {

    .tm-release-grid {

        grid-template-columns:
        1fr;

    }


    .tm-release-directory-hero {

        padding:
        2rem 1.25rem;

    }


    .tm-release-track-row {

        grid-template-columns:
        36px minmax(0, 1fr);

    }


    .tm-release-track-actions {

        grid-column:
        1 / 3;

        justify-content:
        flex-end;

    }


    .tm-release-manage-row {

        grid-template-columns:
        68px minmax(0, 1fr);

    }


    .tm-release-manage-cover {

        width:
        68px;

        height:
        68px;

    }


    .tm-release-manage-actions {

        grid-column:
        1 / 3;

    }


    .tm-release-track-picker-row {

        grid-template-columns:
        auto minmax(0, 1fr);

    }


    .tm-release-track-order-wrap {

        grid-column:
        1 / 3;

        justify-content:
        flex-end;

    }

}

/* ---- radio.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Radio
|--------------------------------------------------------------------------
*/


.tm-radio-page {

    display:
    grid;

    gap:
    1rem;

}


.tm-radio-hero,
.tm-radio-detail-hero {

    position:
    relative;

    display:
    grid;

    grid-template-columns:
    minmax(0, 1.35fr)
    minmax(260px, .65fr);

    gap:
    2rem;

    align-items:
    center;

    min-height:
    360px;

    padding:
    clamp(2rem, 6vw, 4.5rem);

    overflow:
    hidden;

    border:
    1px solid var(--tm-border);

    border-radius:
    calc(var(--tm-radius) + 8px);

    background:
    radial-gradient(
        circle at 85% 15%,
        rgba(255, 122, 24, .24),
        transparent 34%
    ),
    radial-gradient(
        circle at 12% 92%,
        rgba(44, 117, 255, .15),
        transparent 32%
    ),
    linear-gradient(
        135deg,
        var(--tm-surface),
        #101419
    );

    box-shadow:
    var(--tm-shadow);

}


.tm-radio-hero h1,
.tm-radio-detail-hero h1 {

    margin-bottom:
    1rem;

    font-size:
    clamp(2.5rem, 6vw, 4.8rem);

    font-weight:
    850;

    line-height:
    1.02;

    letter-spacing:
    -.05em;

}


.tm-radio-hero p,
.tm-radio-detail-hero p {

    max-width:
    760px;

    margin-bottom:
    1.5rem;

    color:
    var(--tm-text-muted);

    font-size:
    1.08rem;

    line-height:
    1.75;

}


.tm-radio-signal {

    position:
    relative;

    display:
    flex;

    min-height:
    250px;

    align-items:
    center;

    justify-content:
    center;

}


.tm-radio-signal-disc {

    position:
    relative;

    z-index:
    4;

    display:
    flex;

    width:
    170px;

    height:
    170px;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid rgba(255, 255, 255, .12);

    border-radius:
    50%;

    background:
    radial-gradient(
        circle,
        var(--tm-primary) 0 8%,
        #252b31 9% 20%,
        #0b0e11 21% 47%,
        #252b31 48% 50%,
        #0b0e11 51%
    );

    box-shadow:
    0 30px 80px rgba(0, 0, 0, .55);

}


.tm-radio-signal-disc i {

    color:
    rgba(255, 255, 255, .22);

    font-size:
    4rem;

}


.tm-radio-wave {

    position:
    absolute;

    border:
    1px solid rgba(255, 122, 24, .35);

    border-radius:
    50%;

    animation:
    tm-radio-pulse 3s ease-out infinite;

}


.tm-radio-wave.wave-one {

    width:
    210px;

    height:
    210px;

}


.tm-radio-wave.wave-two {

    width:
    280px;

    height:
    280px;

    animation-delay:
    .75s;

}


.tm-radio-wave.wave-three {

    width:
    350px;

    height:
    350px;

    animation-delay:
    1.5s;

}


.tm-radio-section {

    margin-top:
    2.75rem;

}


.tm-radio-section-heading {

    display:
    flex;

    align-items:
    flex-end;

    justify-content:
    space-between;

    gap:
    1rem;

    margin-bottom:
    1.15rem;

}


.tm-radio-section-heading h2 {

    margin:
    0;

}


.tm-radio-kicker {

    margin-bottom:
    .3rem;

    color:
    var(--tm-primary);

    font-size:
    .76rem;

    font-weight:
    800;

    text-transform:
    uppercase;

    letter-spacing:
    .08em;

}


.tm-radio-grid {

    display:
    grid;

    grid-template-columns:
    repeat(3, minmax(0, 1fr));

    gap:
    1rem;

}


.tm-radio-station-card {

    display:
    grid;

    grid-template-rows:
    175px minmax(0, 1fr);

    min-width:
    0;

    overflow:
    hidden;

    border:
    1px solid var(--tm-border);

    border-radius:
    var(--tm-radius);

    background:
    var(--tm-surface);

    box-shadow:
    var(--tm-shadow);

    transition:
    var(--tm-transition);

}


.tm-radio-station-card:hover {

    transform:
    translateY(-4px);

    border-color:
    rgba(255, 122, 24, .5);

}


.tm-radio-station-art {

    position:
    relative;

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    overflow:
    hidden;

    background:
    radial-gradient(
        circle at center,
        rgba(255, 122, 24, .18),
        transparent 62%
    ),
    var(--tm-surface-2);

}


.tm-radio-station-art img {

    width:
    100%;

    height:
    100%;

    object-fit:
    cover;

    opacity:
    .78;

    transition:
    transform .25s ease;

}


.tm-radio-station-card:hover .tm-radio-station-art img {

    transform:
    scale(1.05);

}


.tm-radio-station-art > i {

    color:
    var(--tm-primary);

    font-size:
    4.5rem;

}


.tm-radio-live-badge {

    position:
    absolute;

    top:
    .65rem;

    left:
    .65rem;

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .35rem;

    padding:
    .35rem .6rem;

    border-radius:
    999px;

    background:
    rgba(10, 12, 14, .88);

    color:
    var(--tm-primary);

    font-size:
    .7rem;

    font-weight:
    800;

    text-transform:
    uppercase;

    letter-spacing:
    .05em;

}


.tm-radio-station-body {

    display:
    flex;

    min-width:
    0;

    flex-direction:
    column;

    padding:
    1.15rem;

}


.tm-radio-station-icon {

    display:
    flex;

    width:
    42px;

    height:
    42px;

    align-items:
    center;

    justify-content:
    center;

    margin-top:
    -2.35rem;

    margin-bottom:
    .65rem;

    border:
    3px solid var(--tm-surface);

    border-radius:
    12px;

    background:
    var(--tm-primary);

    color:
    #111;

    font-size:
    1.05rem;

}


.tm-radio-station-body h3 {

    margin-bottom:
    .45rem;

    font-size:
    1.12rem;

}


.tm-radio-station-body p {

    color:
    var(--tm-text-muted);

    font-size:
    .84rem;

    line-height:
    1.55;

}


.tm-radio-preview {

    display:
    grid;

    gap:
    .3rem;

    margin:
    .35rem 0 .9rem;

}


.tm-radio-preview span {

    overflow:
    hidden;

    color:
    var(--tm-text-muted);

    font-size:
    .76rem;

    text-overflow:
    ellipsis;

    white-space:
    nowrap;

}


.tm-radio-preview span::before {

    content:
    '›';

    margin-right:
    .35rem;

    color:
    var(--tm-primary);

}


.tm-radio-station-actions {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    .45rem;

    margin-top:
    auto;

}


.tm-radio-detail-hero {

    grid-template-columns:
    auto minmax(0, 1fr);

    min-height:
    300px;

}


.tm-radio-detail-icon {

    display:
    flex;

    width:
    clamp(130px, 20vw, 210px);

    aspect-ratio:
    1;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid rgba(255, 255, 255, .12);

    border-radius:
    50%;

    background:
    radial-gradient(
        circle,
        var(--tm-primary) 0 7%,
        #252b31 8% 19%,
        #0b0e11 20% 48%,
        #252b31 49% 51%,
        #0b0e11 52%
    );

    box-shadow:
    var(--tm-shadow);

}


.tm-radio-detail-icon i {

    color:
    rgba(255, 255, 255, .2);

    font-size:
    4rem;

}


.tm-radio-track-list {

    display:
    grid;

    gap:
    .55rem;

}


.tm-radio-track-row {

    display:
    grid;

    grid-template-columns:
    auto auto minmax(0, 1fr) auto;

    gap:
    .75rem;

    align-items:
    center;

    padding:
    .65rem;

    border:
    1px solid transparent;

    border-radius:
    11px;

    background:
    var(--tm-surface-2);

}


.tm-radio-track-row:hover {

    border-color:
    var(--tm-border);

}


.tm-radio-track-row > img {

    width:
    48px;

    height:
    48px;

    border-radius:
    8px;

    object-fit:
    cover;

}


.tm-radio-track-number {

    width:
    28px;

    color:
    var(--tm-text-muted);

    text-align:
    center;

    font-size:
    .8rem;

}


.tm-radio-track-copy {

    min-width:
    0;

}


.tm-radio-track-copy a,
.tm-radio-track-copy span {

    display:
    block;

    overflow:
    hidden;

    text-overflow:
    ellipsis;

    white-space:
    nowrap;

}


.tm-radio-track-copy a {

    color:
    var(--tm-text);

    font-weight:
    700;

    text-decoration:
    none;

}


.tm-radio-track-copy span {

    color:
    var(--tm-text-muted);

    font-size:
    .77rem;

}


.tm-radio-track-actions {

    display:
    flex;

    gap:
    .35rem;

}


.tm-player-radio-status {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .45rem;

    margin-top:
    .35rem;

    padding:
    .3rem .55rem;

    border:
    1px solid rgba(255, 122, 24, .32);

    border-radius:
    999px;

    background:
    rgba(255, 122, 24, .08);

    color:
    var(--tm-primary);

    font-size:
    .75rem;

}


.tm-player-radio-status[hidden] {

    display:
    none;

}


.tm-player-radio-stop {

    display:
    inline-flex;

    align-items:
    center;

    padding:
    0;

    border:
    0;

    background:
    transparent;

    color:
    inherit;

}


.radio-save-station.is-saved {

    border-color:
    var(--tm-warning);

}


@keyframes tm-radio-pulse {

    0% {

        transform:
        scale(.72);

        opacity:
        0;

    }


    30% {

        opacity:
        .8;

    }


    100% {

        transform:
        scale(1.08);

        opacity:
        0;

    }

}


@media(max-width: 991px) {

    .tm-radio-hero {

        grid-template-columns:
        1fr;

    }


    .tm-radio-grid {

        grid-template-columns:
        repeat(2, minmax(0, 1fr));

    }

}


@media(max-width: 575px) {

    .tm-radio-hero,
    .tm-radio-detail-hero {

        grid-template-columns:
        1fr;

        padding:
        2rem 1.25rem;

    }


    .tm-radio-hero h1,
    .tm-radio-detail-hero h1 {

        font-size:
        2.55rem;

    }


    .tm-radio-signal {

        min-height:
        205px;

    }


    .tm-radio-grid {

        grid-template-columns:
        1fr;

    }


    .tm-radio-detail-icon {

        width:
        145px;

    }


    .tm-radio-track-row {

        grid-template-columns:
        auto auto minmax(0, 1fr);

    }


    .tm-radio-track-actions {

        grid-column:
        1 / 4;

        justify-content:
        flex-end;

    }

}

/* ---- social.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine Social Activity and Reposts
|--------------------------------------------------------------------------
*/


.tm-social-page {

    display:
    grid;

    gap:
    1rem;

}


.tm-social-kicker {

    margin-bottom:
    .28rem;

    color:
    var(--tm-primary);

    font-size:
    .74rem;

    font-weight:
    800;

    letter-spacing:
    .08em;

    text-transform:
    uppercase;

}


.tm-social-section-heading {

    display:
    flex;

    align-items:
    flex-end;

    justify-content:
    space-between;

    gap:
    1rem;

    margin-bottom:
    1rem;

}


.tm-social-empty {

    display:
    grid;

    justify-items:
    center;

    gap:
    .45rem;

    padding:
    3rem 1.5rem;

    color:
    var(--tm-text-muted);

    text-align:
    center;

}


.tm-social-empty > i {

    color:
    var(--tm-primary);

    font-size:
    2rem;

}


.tm-social-empty strong {

    color:
    var(--tm-text);

}


.tm-social-compose-grid {

    display:
    grid;

    grid-template-columns:
    minmax(0, 1.2fr)
    minmax(280px, .8fr);

    gap:
    1rem;

    align-items:
    start;

}


.tm-social-compose-card,
.tm-social-preview-card {

    padding:
    clamp(1.25rem, 3vw, 2rem);

}


.tm-social-preview-card {

    position:
    sticky;

    top:
    92px;

}


.tm-social-preview-image {

    width:
    100%;

    max-height:
    360px;

    border-radius:
    12px;

    object-fit:
    cover;

}


.tm-social-manage-list {

    display:
    grid;

    gap:
    1rem;

}


.tm-social-manage-card {

    position:
    relative;

    display:
    grid;

    grid-template-columns:
    150px minmax(0, 1fr) auto;

    gap:
    1rem;

    align-items:
    start;

    padding:
    1rem;

}


.tm-social-manage-cover-link {

    display:
    block;

}


.tm-social-manage-cover {

    width:
    150px;

    aspect-ratio:
    1;

    border-radius:
    12px;

    object-fit:
    cover;

}


.tm-social-manage-content {

    min-width:
    0;

}


.tm-social-repost-label,
.tm-activity-type-label {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .35rem;

    color:
    var(--tm-primary);

    font-size:
    .73rem;

    font-weight:
    750;

    letter-spacing:
    .03em;

    text-transform:
    uppercase;

}


.tm-social-delete-form {

    align-self:
    start;

}


.tm-social-following-grid {

    display:
    grid;

    grid-template-columns:
    repeat(4, minmax(0, 1fr));

    gap:
    .75rem;

}


.tm-social-following-card {

    display:
    grid;

    grid-template-columns:
    auto minmax(0, 1fr) auto;

    gap:
    .7rem;

    align-items:
    center;

    padding:
    .8rem;

}


.tm-social-following-avatar {

    width:
    48px;

    height:
    48px;

    border-radius:
    50%;

    object-fit:
    cover;

}


.tm-social-following-copy {

    min-width:
    0;

}


.tm-activity-feed {

    display:
    grid;

    gap:
    1rem;

}


.tm-activity-feed-compact {

    grid-template-columns:
    repeat(2, minmax(0, 1fr));

}


.tm-activity-card {

    overflow:
    hidden;

    padding:
    1rem;

    transition:
    var(--tm-transition);

}


.tm-activity-card:hover {

    transform:
    translateY(-2px);

    border-color:
    rgba(255, 122, 24, .42);

}


.tm-activity-card.is-repost {

    border-color:
    rgba(23, 162, 184, .28);

    background:
    linear-gradient(
        135deg,
        rgba(23, 162, 184, .045),
        var(--tm-surface) 55%
    );

}


.tm-activity-header {

    display:
    flex;

    align-items:
    center;

    gap:
    .65rem;

    margin-bottom:
    .85rem;

}


.tm-activity-avatar-link {

    flex-shrink:
    0;

}


.tm-activity-avatar {

    width:
    42px;

    height:
    42px;

    border:
    2px solid var(--tm-border);

    border-radius:
    50%;

    object-fit:
    cover;

}


.tm-activity-heading-copy {

    min-width:
    0;

}


.tm-activity-action {

    color:
    var(--tm-text-muted);

    font-size:
    .8rem;

    line-height:
    1.45;

}


.tm-activity-action > i {

    margin-right:
    .25rem;

    color:
    var(--tm-primary);

}


.tm-repost-note {

    margin:
    0 0 .9rem;

    padding:
    .8rem 1rem;

    border-left:
    3px solid var(--bs-info);

    border-radius:
    0 10px 10px 0;

    background:
    rgba(23, 162, 184, .08);

    color:
    var(--tm-text);

    font-size:
    .9rem;

    line-height:
    1.6;

}


.tm-activity-content {

    display:
    grid;

    grid-template-columns:
    130px minmax(0, 1fr);

    gap:
    1rem;

    align-items:
    stretch;

}


.tm-activity-cover-link {

    position:
    relative;

    display:
    block;

    overflow:
    hidden;

    border-radius:
    12px;

    background:
    var(--tm-surface-2);

}


.tm-activity-cover {

    width:
    100%;

    height:
    100%;

    min-height:
    130px;

    object-fit:
    cover;

    transition:
    transform .2s ease;

}


.tm-activity-card:hover .tm-activity-cover {

    transform:
    scale(1.035);

}


.tm-activity-repost-badge {

    position:
    absolute;

    top:
    .55rem;

    left:
    .55rem;

    display:
    flex;

    width:
    30px;

    height:
    30px;

    align-items:
    center;

    justify-content:
    center;

    border-radius:
    50%;

    background:
    rgba(10, 12, 14, .88);

    color:
    var(--bs-info);

}


.tm-activity-body {

    display:
    flex;

    min-width:
    0;

    flex-direction:
    column;

}


.tm-activity-artist {

    color:
    var(--tm-primary);

    font-size:
    .82rem;

    text-decoration:
    none;

}


.tm-activity-description {

    margin:
    .7rem 0;

    line-height:
    1.55;

}


.tm-activity-meta-row {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    .75rem;

    margin-top:
    .55rem;

    color:
    var(--tm-text-muted);

    font-size:
    .75rem;

}


.tm-activity-meta-row i {

    color:
    var(--tm-primary);

}


.tm-activity-actions {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    .4rem;

    margin-top:
    auto;

    padding-top:
    .85rem;

}


.tm-dashboard-repost-grid {

    display:
    grid;

    grid-template-columns:
    repeat(4, minmax(0, 1fr));

    gap:
    .75rem;

}


.tm-dashboard-repost-card {

    display:
    grid;

    grid-template-columns:
    70px minmax(0, 1fr);

    gap:
    .7rem;

    align-items:
    center;

    padding:
    .65rem;

    color:
    var(--tm-text);

}


.tm-dashboard-repost-card img {

    width:
    70px;

    height:
    70px;

    border-radius:
    9px;

    object-fit:
    cover;

}


.tm-dashboard-repost-card span,
.tm-dashboard-repost-card small,
.tm-dashboard-repost-card strong,
.tm-dashboard-repost-card em {

    display:
    block;

    overflow:
    hidden;

    text-overflow:
    ellipsis;

    white-space:
    nowrap;

}


.tm-dashboard-repost-card small {

    color:
    var(--bs-info);

    font-size:
    .68rem;

    font-style:
    normal;

    text-transform:
    uppercase;

}


.tm-dashboard-repost-card strong {

    margin:
    .15rem 0;

    font-size:
    .86rem;

}


.tm-dashboard-repost-card em {

    color:
    var(--tm-text-muted);

    font-size:
    .72rem;

    font-style:
    normal;

}


@media(max-width: 1199px) {

    .tm-social-following-grid,
    .tm-dashboard-repost-grid {

        grid-template-columns:
        repeat(2, minmax(0, 1fr));

    }

}


@media(max-width: 991px) {

    .tm-social-compose-grid {

        grid-template-columns:
        1fr;

    }


    .tm-social-preview-card {

        position:
        static;

    }


    .tm-activity-feed-compact {

        grid-template-columns:
        1fr;

    }

}


@media(max-width: 767px) {

    .tm-social-manage-card {

        grid-template-columns:
        95px minmax(0, 1fr);

    }


    .tm-social-manage-cover {

        width:
        95px;

    }


    .tm-social-delete-form {

        grid-column:
        1 / -1;

        justify-self:
        end;

    }


    .tm-activity-content {

        grid-template-columns:
        100px minmax(0, 1fr);

    }

}


@media(max-width: 575px) {

    .tm-social-section-heading {

        align-items:
        flex-start;

        flex-direction:
        column;

    }


    .tm-social-following-grid,
    .tm-dashboard-repost-grid {

        grid-template-columns:
        1fr;

    }


    .tm-social-manage-card {

        grid-template-columns:
        1fr;

    }


    .tm-social-manage-cover {

        width:
        100%;

        max-height:
        260px;

    }


    .tm-activity-content {

        grid-template-columns:
        1fr;

    }


    .tm-activity-cover {

        max-height:
        240px;

    }

}

/* ---- bookings.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine DJ Bookings
|--------------------------------------------------------------------------
*/

.tm-bookings-page {
    display: grid;
    gap: 1rem;
}

.tm-bookings-hero,
.tm-booking-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px solid var(--tm-border);
    border-radius: calc(var(--tm-radius) + 8px);
    background:
        radial-gradient(circle at 84% 20%, rgba(255, 122, 24, .23), transparent 34%),
        linear-gradient(135deg, var(--tm-surface), #101419);
    box-shadow: var(--tm-shadow);
}

.tm-bookings-hero h1,
.tm-booking-detail-hero h1 {
    margin-bottom: 1rem;
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 820;
    line-height: 1.04;
    letter-spacing: -.045em;
}

.tm-bookings-hero p,
.tm-booking-detail-hero p {
    max-width: 720px;
    color: var(--tm-text-muted);
    line-height: 1.7;
}

.tm-bookings-hero-icon {
    display: flex;
    width: 180px;
    height: 180px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 42px;
    background: rgba(15,18,21,.72);
    color: var(--tm-primary);
    font-size: 5.5rem;
    transform: rotate(4deg);
}

.tm-bookings-section {
    margin-top: 2.5rem;
}

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

.tm-bookings-section-heading h2 {
    margin: 0;
}

.tm-bookings-kicker {
    margin-bottom: .25rem;
    color: var(--tm-primary);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tm-bookings-count {
    display: inline-flex;
    min-width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 .6rem;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    color: var(--tm-text-muted);
}

.tm-booking-list-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--tm-border);
    transition: var(--tm-transition);
}

.tm-booking-list-item:last-child {
    border-bottom: 0;
}

.tm-booking-list-item:hover {
    background: var(--tm-surface-2);
}

.tm-booking-list-date {
    display: grid;
    justify-items: center;
    padding: .45rem;
    border-radius: 10px;
    background: rgba(255,122,24,.1);
    color: var(--tm-primary);
}

.tm-booking-list-date strong,
.tm-booking-list-date span,
.tm-booking-list-copy strong,
.tm-booking-list-copy > span {
    display: block;
}

.tm-booking-list-date span,
.tm-booking-list-copy > span {
    color: var(--tm-text-muted);
    font-size: .78rem;
}

.tm-booking-status {
    display: inline-flex;
    align-items: center;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: var(--tm-surface-2);
    color: var(--tm-text-muted);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tm-booking-status.is-pending { color: var(--tm-warning); }
.tm-booking-status.is-accepted { color: var(--tm-success); }
.tm-booking-status.is-declined,
.tm-booking-status.is-cancelled { color: var(--tm-danger); }
.tm-booking-status.is-completed { color: var(--tm-info); }

.tm-booking-empty {
    display: grid;
    justify-items: center;
    gap: .4rem;
    padding: 3rem 1.5rem;
    color: var(--tm-text-muted);
    text-align: center;
}

.tm-booking-empty i {
    color: var(--tm-primary);
    font-size: 2rem;
}

.tm-booking-empty strong {
    color: var(--tm-text);
}

.tm-booking-availability-switch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .9rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface-2);
}

.tm-booking-availability-switch label strong,
.tm-booking-availability-switch label span {
    display: block;
}

.tm-booking-availability-switch label span {
    margin-top: .25rem;
    color: var(--tm-text-muted);
    font-size: .8rem;
}

.tm-booking-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.tm-booking-type-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    background: var(--tm-surface-2);
    cursor: pointer;
}

.tm-booking-dj-summary {
    position: sticky;
    top: 92px;
    padding: 1.4rem;
    text-align: center;
}

.tm-booking-dj-summary > img {
    width: 110px;
    height: 110px;
    margin-bottom: 1rem;
    border-radius: 50%;
    object-fit: cover;
}

.tm-booking-price {
    display: grid;
    margin: 1rem 0;
    padding: .85rem;
    border-radius: 12px;
    background: rgba(255,122,24,.1);
}

.tm-booking-price span {
    color: var(--tm-text-muted);
    font-size: .75rem;
}

.tm-booking-price strong {
    color: var(--tm-primary);
    font-size: 1.5rem;
}

.tm-booking-summary-line {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    margin-top: .75rem;
    color: var(--tm-text-muted);
    text-align: left;
}

.tm-booking-summary-line i {
    color: var(--tm-primary);
}

.tm-booking-dj-summary p,
.tm-booking-requirements {
    margin-top: 1rem;
    color: var(--tm-text-muted);
    font-size: .84rem;
    line-height: 1.6;
    text-align: left;
}

.tm-booking-requirements strong,
.tm-booking-requirements span {
    display: block;
}

.tm-booking-requirements strong {
    margin-bottom: .3rem;
    color: var(--tm-text);
}

.tm-booking-detail-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.tm-booking-hero-people {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tm-booking-hero-people > div {
    display: grid;
    justify-items: center;
    gap: .4rem;
    color: var(--tm-text-muted);
    font-size: .75rem;
}

.tm-booking-hero-people img {
    width: 74px;
    height: 74px;
    border: 2px solid var(--tm-border);
    border-radius: 50%;
    object-fit: cover;
}

.tm-booking-detail-card {
    padding: 1.25rem;
}

.tm-booking-detail-list {
    display: grid;
    gap: .8rem;
    margin: 1rem 0 0;
}

.tm-booking-detail-list > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: .7rem;
}

.tm-booking-detail-list dt {
    color: var(--tm-text-muted);
    font-size: .77rem;
}

.tm-booking-detail-list dd {
    margin: 0;
}

.tm-booking-original-message {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--tm-border);
}

.tm-booking-original-message p {
    margin: .55rem 0 0;
    color: var(--tm-text-muted);
    line-height: 1.65;
}

.tm-booking-conversation {
    padding: 1.25rem;
}

.tm-booking-thread {
    display: grid;
    gap: .8rem;
}

.tm-booking-message {
    max-width: 82%;
    padding: .9rem 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 14px 14px 14px 4px;
    background: var(--tm-surface-2);
}

.tm-booking-message.is-mine {
    margin-left: auto;
    border-color: rgba(255,122,24,.28);
    border-radius: 14px 14px 4px 14px;
    background: rgba(255,122,24,.08);
}

.tm-booking-message > div {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .45rem;
}

.tm-booking-message time {
    color: var(--tm-text-muted);
    font-size: .7rem;
}

.tm-booking-message p {
    margin: 0;
    line-height: 1.6;
}

.tm-booking-reply-form {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tm-border);
}

.tm-booking-profile-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgba(255,122,24,.28);
    border-radius: var(--tm-radius);
    background: rgba(255,122,24,.06);
}

.tm-booking-profile-panel p {
    margin: .35rem 0 0;
    color: var(--tm-text-muted);
}

.tm-booking-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.tm-booking-dashboard-stat {
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 11px;
    background: var(--tm-surface-2);
}

.tm-booking-dashboard-stat strong,
.tm-booking-dashboard-stat span {
    display: block;
}

.tm-booking-dashboard-stat strong {
    font-size: 1.45rem;
}

.tm-booking-dashboard-stat span {
    color: var(--tm-text-muted);
    font-size: .76rem;
}

@media(max-width: 991px) {
    .tm-bookings-hero,
    .tm-booking-detail-hero {
        grid-template-columns: 1fr;
    }

    .tm-bookings-hero-icon {
        display: none;
    }

    .tm-booking-dj-summary {
        position: static;
    }
}

@media(max-width: 575px) {
    .tm-booking-type-grid,
    .tm-booking-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .tm-booking-list-item {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .tm-booking-list-item > i {
        display: none;
    }

    .tm-booking-hero-people {
        justify-content: center;
    }

    .tm-booking-message {
        max-width: 95%;
    }

    .tm-booking-profile-panel {
        grid-template-columns: 1fr;
    }
}

/* ---- collaboration.css ---- */
/*
|--------------------------------------------------------------------------
| Collaborative playlists
|--------------------------------------------------------------------------
*/

.tm-collab-playlist-card {

    position:
    relative;

}


.tm-playlist-collab-count {

    position:
    absolute;

    right:
    .75rem;

    bottom:
    .75rem;

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .35rem;

    padding:
    .35rem .55rem;

    border:
    1px solid rgba(255,255,255,.16);

    border-radius:
    999px;

    background:
    rgba(10,12,14,.82);

    color:
    var(--tm-text);

    font-size:
    .72rem;

    font-weight:
    700;

    backdrop-filter:
    blur(8px);

}


.tm-collab-invitations {

    padding:
    1.25rem;

    border:
    1px solid rgba(13,202,240,.3);

    border-radius:
    var(--tm-radius);

    background:
    linear-gradient(
        135deg,
        rgba(13,202,240,.08),
        rgba(255,255,255,.01)
    );

}


.tm-collab-invitation-card {

    border-color:
    rgba(13,202,240,.22);

}


.tm-collab-icon {

    display:
    inline-flex;

    width:
    46px;

    height:
    46px;

    flex:
    0 0 46px;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid rgba(13,202,240,.3);

    border-radius:
    12px;

    background:
    rgba(13,202,240,.1);

    color:
    var(--tm-info);

    font-size:
    1.15rem;

}


.tm-collaborator-stack {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    .5rem;

}


.tm-collaborator-chip {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .35rem;

    padding:
    .35rem .55rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    999px;

    background:
    var(--tm-surface-2);

    color:
    var(--tm-text-muted);

    font-size:
    .75rem;

}


.tm-collaborator-row {

    display:
    flex;

    align-items:
    center;

    gap:
    .75rem;

    padding:
    .8rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    10px;

    background:
    var(--tm-surface-2);

}


.tm-collaborator-avatar {

    display:
    inline-flex;

    width:
    38px;

    height:
    38px;

    flex:
    0 0 38px;

    align-items:
    center;

    justify-content:
    center;

    border-radius:
    50%;

    background:
    rgba(255,255,255,.06);

    color:
    var(--tm-primary);

    font-size:
    1.15rem;

}


.tm-collab-permissions {

    padding:
    1rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    10px;

    background:
    var(--tm-surface-2);

    color:
    var(--tm-text-muted);

    font-size:
    .82rem;

}


.tm-collab-permissions ul {

    padding-left:
    1.15rem;

}


.tm-playlist-position {

    display:
    inline-flex;

    width:
    34px;

    height:
    34px;

    flex:
    0 0 34px;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid var(--tm-border);

    border-radius:
    9px;

    color:
    var(--tm-text-muted);

    font-size:
    .78rem;

    font-weight:
    700;

}


.tm-playlist-activity-card {

    position:
    sticky;

    top:
    92px;

}


.tm-playlist-activity-list {

    display:
    grid;

    gap:
    .85rem;

    max-height:
    650px;

    overflow-y:
    auto;

}


.tm-playlist-activity-item {

    display:
    grid;

    grid-template-columns:
    30px minmax(0,1fr);

    gap:
    .65rem;

    padding-bottom:
    .85rem;

    border-bottom:
    1px solid var(--tm-border);

    font-size:
    .82rem;

}


.tm-playlist-activity-item:last-child {

    padding-bottom:
    0;

    border-bottom:
    0;

}


.tm-playlist-activity-icon {

    display:
    inline-flex;

    width:
    30px;

    height:
    30px;

    align-items:
    center;

    justify-content:
    center;

    border-radius:
    50%;

    background:
    rgba(13,202,240,.1);

    color:
    var(--tm-info);

}


.tm-save-queue-preview {

    display:
    grid;

    gap:
    .55rem;

    max-height:
    390px;

    padding:
    .75rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    12px;

    background:
    var(--tm-surface-2);

    overflow-y:
    auto;

}


.tm-save-queue-track {

    display:
    grid;

    grid-template-columns:
    32px minmax(0,1fr);

    gap:
    .65rem;

    align-items:
    center;

    padding:
    .55rem .65rem;

    border-radius:
    9px;

    background:
    rgba(255,255,255,.025);

}


.tm-save-queue-number {

    display:
    inline-flex;

    width:
    30px;

    height:
    30px;

    align-items:
    center;

    justify-content:
    center;

    border-radius:
    8px;

    background:
    rgba(255,122,24,.12);

    color:
    var(--tm-primary);

    font-size:
    .75rem;

    font-weight:
    800;

}


@media(max-width: 1199px) {

    .tm-playlist-activity-card {

        position:
        static;

    }

}


@media(max-width: 575px) {

    .tm-collaborator-row {

        align-items:
        flex-start;

        flex-wrap:
        wrap;

    }


    .tm-collaborator-row form {

        margin-left:
        auto;

    }

}

/* ---- oauth.css ---- */
/*
|--------------------------------------------------------------------------
| Discord OAuth and Connected Accounts
|--------------------------------------------------------------------------
*/


.tm-auth-card {

    padding:
    .35rem;

}


.tm-auth-card .card-body {

    padding:
    clamp(1.25rem, 4vw, 2rem);

}


.tm-discord-button {

    display:
    inline-flex;

    min-height:
    44px;

    align-items:
    center;

    justify-content:
    center;

    gap:
    .55rem;

    border:
    1px solid rgba(88, 101, 242, .72);

    background:
    #5865f2;

    color:
    #ffffff;

    font-weight:
    700;

}


.tm-discord-button:hover,
.tm-discord-button:focus {

    border-color:
    #7983f5;

    background:
    #4752c4;

    color:
    #ffffff;

}


.tm-discord-button .bi-discord {

    font-size:
    1.1rem;

}


.tm-auth-divider {

    display:
    flex;

    align-items:
    center;

    gap:
    .8rem;

    margin:
    1.4rem 0;

    color:
    var(--tm-text-muted);

    font-size:
    .75rem;

    text-transform:
    uppercase;

    letter-spacing:
    .08em;

}


.tm-auth-divider::before,
.tm-auth-divider::after {

    content:
    '';

    height:
    1px;

    flex:
    1;

    background:
    var(--tm-border);

}


.tm-auth-footer {

    margin-top:
    1.25rem;

    color:
    var(--tm-text-muted);

    font-size:
    .88rem;

    text-align:
    center;

}


.tm-auth-footer a {

    margin-left:
    .2rem;

    font-weight:
    700;

}


.tm-discord-link-icon {

    display:
    flex;

    width:
    64px;

    height:
    64px;

    align-items:
    center;

    justify-content:
    center;

    margin:
    0 auto 1rem;

    border-radius:
    18px;

    background:
    rgba(88, 101, 242, .16);

    color:
    #8b94f8;

    font-size:
    1.8rem;

}


.tm-oauth-match-card,
.tm-connected-account-card,
.tm-connected-account-empty {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1rem;

    padding:
    1rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    12px;

    background:
    var(--tm-surface-2);

}


.tm-oauth-match-card strong,
.tm-oauth-match-card small,
.tm-connected-account-card strong,
.tm-connected-account-card small {

    display:
    block;

}


.tm-oauth-match-card small,
.tm-connected-account-card small {

    margin-top:
    .2rem;

    color:
    var(--tm-text-muted);

}


.tm-discord-section-icon {

    border-color:
    rgba(88, 101, 242, .42);

    color:
    #8b94f8;

}


.tm-connected-account-provider {

    display:
    flex;

    min-width:
    0;

    align-items:
    center;

    gap:
    .8rem;

}


.tm-connected-account-logo {

    display:
    inline-flex;

    width:
    44px;

    height:
    44px;

    flex-shrink:
    0;

    align-items:
    center;

    justify-content:
    center;

    border-radius:
    12px;

    background:
    #5865f2;

    color:
    #ffffff;

    font-size:
    1.25rem;

}


@media(max-width: 575px) {

    .tm-connected-account-card,
    .tm-connected-account-empty {

        align-items:
        stretch;

        flex-direction:
        column;

    }


    .tm-connected-account-empty .btn {

        width:
        100%;

    }

}

/* ---- reviews.css ---- */
/*
|--------------------------------------------------------------------------
| Reviews, Ratings and Reputation
|--------------------------------------------------------------------------
*/

.tm-review-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--tm-border);
}

.tm-review-overview {
    display: grid;
    grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr);
    gap: 1.5rem;
    padding: 1.4rem;
    border: 1px solid var(--tm-border);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}

.tm-review-average {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tm-review-average > strong {
    font-size: clamp(2.7rem, 6vw, 4.5rem);
    line-height: 1;
    letter-spacing: -.06em;
}

.tm-review-average > span {
    margin-top: .4rem;
    color: var(--tm-text-muted);
}

.tm-review-stars {
    display: inline-flex;
    gap: .15rem;
    color: #ffc107;
}

.tm-review-average .tm-review-stars {
    margin-top: .65rem;
    font-size: 1.1rem;
}

.tm-review-distribution {
    display: grid;
    align-content: center;
    gap: .55rem;
}

.tm-review-distribution-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 36px;
    align-items: center;
    gap: .65rem;
    color: var(--tm-text-muted);
    font-size: .82rem;
}

.tm-review-distribution-row > span {
    white-space: nowrap;
}

.tm-review-distribution-row i {
    color: #ffc107;
    font-size: .72rem;
}

.tm-review-distribution-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tm-surface-2);
}

.tm-review-distribution-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff9f1c, #ffc107);
}

.tm-review-form-card {
    overflow: hidden;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    background: var(--tm-surface);
}

.tm-review-form-card > details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    font-weight: 750;
    list-style: none;
}

.tm-review-form-card > details > summary::-webkit-details-marker {
    display: none;
}

.tm-review-form-card > details[open] > summary {
    border-bottom: 1px solid var(--tm-border);
}

.tm-review-form-card > details[open] > summary > i {
    transform: rotate(180deg);
}

.tm-review-form-card > details > summary > i {
    transition: transform .18s ease;
}

.tm-review-form {
    display: grid;
    gap: 1.1rem;
    padding: 1.2rem;
}

.tm-rating-input {
    padding: 0;
    border: 0;
}

.tm-rating-input legend {
    margin-bottom: .55rem;
    font-size: .9rem;
    font-weight: 700;
}

.tm-rating-options {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: .25rem;
}

.tm-rating-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tm-rating-options label {
    color: #5d6166;
    font-size: 1.9rem;
    cursor: pointer;
    transition: transform .15s ease, color .15s ease;
}

.tm-rating-options label:hover,
.tm-rating-options label:hover ~ label,
.tm-rating-options input:checked ~ label {
    color: #ffc107;
}

.tm-rating-options label:hover {
    transform: translateY(-2px) scale(1.05);
}

.tm-review-tag-options {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.tm-review-form-notice {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.1rem;
    color: var(--tm-text-muted);
}

.tm-review-form-notice > i {
    color: var(--tm-primary);
}

.tm-review-list {
    display: grid;
    gap: 1rem;
}

.tm-review-card {
    padding: 1.2rem;
    border: 1px solid var(--tm-border);
    border-radius: 15px;
    background: var(--tm-surface);
    scroll-margin-top: 90px;
}

.tm-review-card-header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
}

.tm-review-avatar {
    width: 46px;
    height: 46px;
    border: 2px solid var(--tm-border);
    border-radius: 50%;
    object-fit: cover;
}

.tm-review-author strong,
.tm-review-author span,
.tm-review-card-rating time {
    display: block;
}

.tm-review-author span,
.tm-review-card-rating time {
    margin-top: .15rem;
    color: var(--tm-text-muted);
    font-size: .73rem;
}

.tm-review-card-rating {
    text-align: right;
}

.tm-review-verification-list,
.tm-reviewer-badge-list,
.tm-review-tags,
.tm-reputation-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.tm-review-verification-list {
    margin-top: .9rem;
}

.tm-review-verification-list span,
.tm-reviewer-badge-list span,
.tm-reputation-badge {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .28rem .55rem;
    border: 1px solid rgba(66, 211, 146, .3);
    border-radius: 999px;
    background: rgba(66, 211, 146, .08);
    color: #79e7b5;
    font-size: .68rem;
    font-weight: 700;
}

.tm-reviewer-badge-list {
    margin-top: .55rem;
}

.tm-reviewer-badge-list span,
.tm-reputation-badge {
    border-color: rgba(255, 193, 7, .3);
    background: rgba(255, 193, 7, .08);
    color: #ffd45d;
}

.tm-review-title {
    margin: 1rem 0 .45rem;
    font-size: 1.05rem;
}

.tm-review-body {
    margin-top: 1rem;
    color: var(--tm-text);
    line-height: 1.7;
}

.tm-review-tags {
    margin-top: 1rem;
}

.tm-review-tags span {
    padding: .28rem .58rem;
    border-radius: 999px;
    background: var(--tm-surface-2);
    color: var(--tm-text-muted);
    font-size: .7rem;
}

.tm-review-creator-reply {
    margin-top: 1.15rem;
    padding: .9rem 1rem;
    border-left: 3px solid var(--tm-primary);
    border-radius: 0 10px 10px 0;
    background: rgba(255,255,255,.025);
}

.tm-review-creator-reply > div:first-child {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--tm-primary);
}

.tm-review-creator-reply time {
    margin-left: auto;
    color: var(--tm-text-muted);
    font-size: .7rem;
}

.tm-review-creator-reply p {
    margin: .65rem 0 0;
    line-height: 1.6;
}

.tm-review-reply-form {
    margin-top: 1rem;
}

.tm-review-reply-form summary {
    color: var(--tm-primary);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
}

.tm-review-reply-form form {
    display: grid;
    gap: .65rem;
    margin-top: .65rem;
}

.tm-review-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.15rem;
    padding-top: .85rem;
    border-top: 1px solid var(--tm-border);
}

.tm-review-votes,
.tm-review-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.tm-reputation-summary {
    display: grid;
    gap: 1rem;
}

.tm-reputation-summary.is-compact {
    gap: .55rem;
}

.tm-reputation-level {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.tm-reputation-score {
    display: grid;
    place-items: center;
    min-width: 58px;
    height: 58px;
    padding: 0 .65rem;
    border: 1px solid rgba(255, 193, 7, .35);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,193,7,.13), rgba(255,122,24,.08));
    color: #ffd45d;
    font-size: 1.25rem;
    font-weight: 850;
}

.tm-reputation-level strong,
.tm-reputation-level small {
    display: block;
}

.tm-reputation-level small {
    margin-top: .12rem;
    color: var(--tm-text-muted);
    font-size: .72rem;
}

.tm-profile-reputation-card {
    padding: 1.25rem;
}

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

.tm-reputation-stat-grid > div {
    padding: .8rem;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    background: var(--tm-surface-2);
}

.tm-reputation-stat-grid strong,
.tm-reputation-stat-grid span {
    display: block;
}

.tm-reputation-stat-grid strong {
    font-size: 1.15rem;
}

.tm-reputation-stat-grid span {
    margin-top: .15rem;
    color: var(--tm-text-muted);
    font-size: .7rem;
}

.tm-review-received-score {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.tm-review-received-score > strong {
    font-size: 3rem;
    line-height: 1;
}

.tm-review-management-list {
    display: grid;
    gap: .85rem;
}

.tm-review-management-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
}

.tm-review-management-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    min-width: 120px;
}

@media(max-width: 767px) {
    .tm-review-overview {
        grid-template-columns: 1fr;
    }

    .tm-review-card-header {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .tm-review-card-rating {
        grid-column: 1 / -1;
        text-align: left;
    }

    .tm-review-card-footer,
    .tm-review-form-notice {
        align-items: stretch;
        flex-direction: column;
    }

    .tm-review-votes,
    .tm-review-actions {
        width: 100%;
    }

    .tm-reputation-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tm-review-management-card {
        grid-template-columns: 1fr;
    }

    .tm-review-management-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ---- radio-admin.css ---- */
/*
|--------------------------------------------------------------------------
| Radio Studio and Genre Catalogue
|--------------------------------------------------------------------------
*/

.tm-admin-radio-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.tm-admin-radio-stat {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: .1rem .8rem;
    padding: 1.1rem;
}

.tm-admin-radio-stat > i {
    grid-row: 1 / span 2;
    color: var(--tm-primary);
    font-size: 1.55rem;
    text-align: center;
}

.tm-admin-radio-stat strong {
    font-size: 1.35rem;
    line-height: 1;
}

.tm-admin-radio-stat span {
    color: var(--tm-text-muted);
    font-size: .78rem;
}

.tm-admin-radio-list {
    display: grid;
    gap: .75rem;
}

.tm-admin-radio-row {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface);
}

.tm-admin-radio-icon {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 122, 24, .12);
    color: var(--tm-primary);
    font-size: 1.35rem;
}

.tm-admin-radio-genre-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.tm-admin-radio-genre-chips span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .65rem;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface);
    font-size: .78rem;
}

.tm-admin-radio-genre-chips i {
    color: var(--tm-success);
}

.tm-radio-source-panel {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface);
}

.tm-radio-source-panel[hidden] {
    display: none !important;
}

.tm-radio-track-search {
    width: min(100%, 280px);
}

.tm-radio-admin-track-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    max-height: 470px;
    padding: .25rem;
    overflow-y: auto;
}

.tm-radio-admin-track-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 62px;
    gap: .65rem;
    align-items: center;
    padding: .75rem;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    background: var(--tm-surface-2);
    cursor: pointer;
}

.tm-radio-admin-track-option:hover {
    border-color: var(--tm-primary);
}

.tm-radio-admin-track-option strong,
.tm-radio-admin-track-option small {
    display: block;
}

.tm-radio-admin-track-option small {
    margin-top: .15rem;
    color: var(--tm-text-muted);
}

.tm-admin-genre-table th,
.tm-admin-genre-table td {
    vertical-align: middle;
}

.tm-genre-delete-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
}

.tm-genre-delete-form .form-select {
    width: 190px;
}

.tm-admin-count-pill {
    display: inline-flex;
    padding: .45rem .7rem;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    color: var(--tm-text-muted);
    font-size: .78rem;
}

@media(max-width: 991px) {
    .tm-admin-radio-stats,
    .tm-radio-admin-track-list {
        grid-template-columns: 1fr;
    }

    .tm-admin-radio-row {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .tm-admin-radio-row > :last-child {
        grid-column: 1 / -1;
        justify-content: flex-start !important;
    }
}

@media(max-width: 575px) {
    .tm-admin-radio-stats {
        grid-template-columns: 1fr;
    }

    .tm-genre-delete-form,
    .tm-genre-delete-form .form-select,
    .tm-genre-delete-form .btn {
        width: 100%;
    }
}

.tm-radio-track-position {
    text-align: center;
}


.tm-admin-track-genre-manager > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.tm-admin-track-genre-manager > summary::-webkit-details-marker {
    display: none;
}

.tm-admin-track-genre-manager > summary span:first-child {
    display: block;
}

.tm-admin-track-genre-manager > summary small {
    display: block;
    margin-top: .2rem;
    color: var(--tm-text-muted);
    font-weight: 400;
}

/* ---- charts.css ---- */
/*
|--------------------------------------------------------------------------
| Charts, Awards and Achievements
|--------------------------------------------------------------------------
*/

.tm-charts-page,
.tm-achievements-page,
.tm-chart-admin-page {
    --tm-chart-accent: var(--tm-primary);
}

.tm-chart-hero,
.tm-achievement-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.35rem, 3vw, 2.5rem);
    background:
        radial-gradient(circle at top right, rgba(255, 122, 24, .18), transparent 42%),
        var(--tm-surface);
}

.tm-chart-hero > div:first-child,
.tm-achievement-hero > div:first-child {
    max-width: 760px;
}

.tm-chart-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    flex-shrink: 0;
}

.tm-award-grid,
.tm-featured-chart-grid,
.tm-achievement-grid,
.tm-award-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.tm-award-card,
.tm-award-admin-card,
.tm-chart-preview-card {
    padding: 1.25rem;
}

.tm-award-card h3,
.tm-award-admin-card h3,
.tm-chart-preview-card h3 {
    font-size: 1.1rem;
}

.tm-award-icon,
.tm-achievement-icon,
.tm-chart-directory-icon,
.tm-table-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 122, 24, .14);
    color: var(--tm-primary);
    font-size: 1.2rem;
}

.tm-award-note {
    padding: .75rem;
    border-left: 3px solid var(--tm-primary);
    background: var(--tm-surface-2);
    color: var(--tm-text-muted);
    font-size: .88rem;
}

.tm-chart-window {
    display: inline-flex;
    padding: .35rem .55rem;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    color: var(--tm-text-muted);
    font-size: .72rem;
    white-space: nowrap;
}

.tm-chart-mini-list {
    display: grid;
    gap: .35rem;
}

.tm-chart-mini-list a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: .58rem .65rem;
    border-radius: 9px;
    background: var(--tm-surface-2);
    color: var(--tm-text);
    text-decoration: none;
}

.tm-chart-mini-list a:hover {
    background: var(--tm-surface-3, rgba(255,255,255,.07));
}

.tm-chart-mini-list strong {
    color: var(--tm-primary);
}

.tm-chart-mini-list small {
    color: var(--tm-text-muted);
}

.tm-chart-directory {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.tm-chart-directory-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    padding: 1rem;
    color: var(--tm-text);
    text-decoration: none;
}

.tm-chart-directory-card:hover {
    border-color: var(--tm-primary);
    transform: translateY(-2px);
}

.tm-chart-directory-card strong,
.tm-chart-directory-card p,
.tm-chart-directory-card small {
    display: block;
}

.tm-chart-directory-card p {
    margin: .18rem 0 .35rem;
    color: var(--tm-text-muted);
    font-size: .82rem;
}

.tm-chart-directory-card small {
    color: var(--tm-text-muted);
    font-size: .7rem;
}

.tm-chart-period-card {
    min-width: 250px;
    padding: 1rem 1.15rem;
}

.tm-chart-period-card strong,
.tm-chart-period-card small {
    display: block;
}

.tm-chart-period-card small {
    margin-top: .25rem;
    color: var(--tm-text-muted);
}

.tm-chart-list {
    display: grid;
    gap: .85rem;
}

.tm-chart-entry {
    display: grid;
    grid-template-columns: 70px 88px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

.tm-chart-entry.is-compact {
    grid-template-columns: 56px 64px minmax(0, 1fr);
}

.tm-chart-position {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .1rem;
    color: var(--tm-primary);
}

.tm-chart-position span {
    font-size: .9rem;
}

.tm-chart-position strong {
    font-size: 1.8rem;
    line-height: 1;
}

.tm-chart-entry-artwork {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 11px;
    background: var(--tm-surface-2);
}

.tm-chart-entry-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-chart-entry-copy {
    min-width: 0;
}

.tm-chart-entry-heading,
.tm-chart-entry-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tm-chart-entry-heading h3 {
    margin: 0;
    font-size: 1.05rem;
}

.tm-chart-entry-heading h3 a {
    color: var(--tm-text);
    text-decoration: none;
}

.tm-chart-entry-heading h3 a:hover {
    color: var(--tm-primary);
}

.tm-chart-movement {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .32rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.tm-chart-movement.is-up {
    background: rgba(66, 211, 146, .14);
    color: #42d392;
}

.tm-chart-movement.is-down {
    background: rgba(255, 107, 107, .14);
    color: #ff6b6b;
}

.tm-chart-movement.is-new {
    background: rgba(255, 193, 7, .14);
    color: #ffd166;
}

.tm-chart-movement.is-same {
    background: var(--tm-surface-2);
    color: var(--tm-text-muted);
}

.tm-chart-entry-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .85rem;
    margin: .72rem 0;
    color: var(--tm-text-muted);
    font-size: .75rem;
}

.tm-chart-entry-metrics span {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
}

.tm-chart-entry-metrics i {
    color: var(--tm-primary);
}

.tm-achievement-count {
    min-width: 160px;
    text-align: center;
}

.tm-achievement-count strong,
.tm-achievement-count span {
    display: block;
}

.tm-achievement-count strong {
    color: var(--tm-primary);
    font-size: 2.25rem;
    line-height: 1;
}

.tm-achievement-count span {
    margin-top: .35rem;
    color: var(--tm-text-muted);
    font-size: .8rem;
}

.tm-achievement-badge {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 13px;
    background: var(--tm-surface);
}

.tm-achievement-badge.is-locked {
    opacity: .72;
}

.tm-achievement-badge strong,
.tm-achievement-badge p,
.tm-achievement-badge small {
    display: block;
}

.tm-achievement-badge p {
    margin: .22rem 0 .45rem;
    color: var(--tm-text-muted);
    font-size: .78rem;
}

.tm-achievement-badge small {
    color: var(--tm-text-muted);
    font-size: .68rem;
}

.tm-achievement-progress > div {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tm-surface-2);
}

.tm-achievement-progress > div > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--tm-primary);
}

.tm-achievement-progress small {
    margin-top: .35rem;
}

.tm-achievement-category > h3 {
    margin-bottom: .75rem;
    font-size: 1rem;
}

.tm-chart-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .5rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface);
}

.tm-chart-admin-tabs a {
    padding: .55rem .75rem;
    border-radius: 8px;
    color: var(--tm-text-muted);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
}

.tm-chart-admin-tabs a:hover {
    background: var(--tm-surface-2);
    color: var(--tm-text);
}

.tm-admin-stat.is-warning {
    border-color: rgba(255, 193, 7, .55);
}

.tm-admin-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.tm-admin-switch {
    min-height: 46px;
    margin: 0;
    padding: .75rem .85rem .75rem 3rem;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    background: var(--tm-surface-2);
}

.tm-chart-admin-list {
    display: grid;
    gap: .85rem;
}

.tm-chart-admin-card {
    overflow: hidden;
}

.tm-chart-admin-card-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem;
}

.tm-chart-admin-card h3 {
    margin-bottom: .25rem;
    font-size: 1.05rem;
}

.tm-chart-admin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.tm-chart-admin-meta span {
    padding: .3rem .5rem;
    border-radius: 999px;
    background: var(--tm-surface-2);
    color: var(--tm-text-muted);
    font-size: .68rem;
}

.tm-chart-admin-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
}

.tm-chart-run-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--tm-border);
    background: rgba(255,255,255,.015);
}

.tm-chart-run-strip a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    background: var(--tm-surface-2);
    color: var(--tm-text);
    text-decoration: none;
    font-size: .72rem;
}

.tm-chart-run-strip small {
    color: var(--tm-text-muted);
}

.tm-award-suggestion {
    padding: .75rem;
    border-radius: 10px;
    background: var(--tm-surface-2);
}

.tm-award-suggestion strong,
.tm-award-suggestion small {
    display: block;
}

.tm-award-suggestion small {
    margin-top: .2rem;
    color: var(--tm-text-muted);
}

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

.tm-weight-grid label > span {
    display: block;
    margin-bottom: .35rem;
    color: var(--tm-text-muted);
    font-size: .75rem;
    font-weight: 700;
}

.tm-integrity-list {
    display: grid;
    gap: .45rem;
}

.tm-integrity-list > div {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(3, auto) auto;
    align-items: center;
    gap: .75rem;
    padding: .7rem;
    border-radius: 9px;
    background: var(--tm-surface-2);
    font-size: .76rem;
}

.tm-integrity-list strong,
.tm-integrity-list small {
    display: block;
}

.tm-integrity-list small {
    color: var(--tm-text-muted);
}

@media(max-width: 1199px) {
    .tm-award-grid,
    .tm-featured-chart-grid,
    .tm-achievement-grid,
    .tm-award-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media(max-width: 767px) {
    .tm-chart-hero,
    .tm-achievement-hero,
    .tm-chart-entry-heading,
    .tm-chart-entry-footer,
    .tm-chart-admin-card-main {
        align-items: stretch;
        flex-direction: column;
    }

    .tm-chart-hero-actions,
    .tm-chart-admin-actions {
        width: 100%;
    }

    .tm-chart-hero-actions .btn,
    .tm-chart-admin-actions .btn,
    .tm-chart-admin-actions form {
        flex: 1;
    }

    .tm-chart-directory,
    .tm-award-grid,
    .tm-featured-chart-grid,
    .tm-achievement-grid,
    .tm-award-admin-grid,
    .tm-admin-toggle-grid,
    .tm-weight-grid {
        grid-template-columns: 1fr;
    }

    .tm-chart-entry {
        grid-template-columns: 54px 68px minmax(0, 1fr);
        align-items: start;
    }

    .tm-chart-position strong {
        font-size: 1.35rem;
    }

    .tm-chart-entry-heading,
    .tm-chart-entry-footer {
        display: flex;
    }

    .tm-chart-movement {
        align-self: flex-start;
    }

    .tm-integrity-list > div {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 479px) {
    .tm-chart-entry {
        grid-template-columns: 44px 58px minmax(0, 1fr);
        gap: .65rem;
        padding: .75rem;
    }

    .tm-chart-entry-metrics {
        display: none;
    }

    .tm-chart-entry-footer .tm-card-meta {
        display: none;
    }

    .tm-chart-directory-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .tm-chart-directory-card > i:last-child {
        display: none;
    }
}


/*
|--------------------------------------------------------------------------
| Discover chart highlights
|--------------------------------------------------------------------------
*/


.tm-discover-chart-grid {

    display:
    grid;

    grid-template-columns:
    repeat(2, minmax(0, 1fr));

    gap:
    1rem;

}


.tm-discover-chart-card {

    padding:
    1.1rem;

}


.tm-discover-chart-card > .bi {

    font-size:
    1.25rem;

}


.tm-discover-chart-card .tm-chart-entry {

    box-shadow:
    none;

}


@media(max-width: 991px) {

    .tm-discover-chart-grid {

        grid-template-columns:
        1fr;

    }

}


/*
|--------------------------------------------------------------------------
| Preview ordering controls
|--------------------------------------------------------------------------
*/


.tm-chart-admin-entry {

    display:
    grid;

    gap:
    .55rem;

}


.tm-chart-admin-entry-controls {

    display:
    flex;

    flex-wrap:
    wrap;

    justify-content:
    flex-end;

    gap:
    .45rem;

    padding:
    0 .2rem .45rem;

}


.tm-admin-compact-list {

    display:
    grid;

    gap:
    .55rem;

}


.tm-admin-compact-row {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1rem;

    padding:
    .75rem;

    border:
    1px solid var(--tm-border);

    border-radius:
    10px;

    background:
    var(--tm-surface-2);

}


@media(max-width: 575px) {

    .tm-admin-compact-row {

        align-items:
        flex-start;

        flex-direction:
        column;

    }

}

/* ---- dj-league.css ---- */
/*
|--------------------------------------------------------------------------
| The Mix Machine DJ League
|--------------------------------------------------------------------------
*/

.tm-dj-league-page {
    display: grid;
    gap: 2rem;
}

.tm-league-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
    gap: 2rem;
    align-items: center;
    min-height: 360px;
    padding: clamp(2rem, 6vw, 4.5rem);
    overflow: hidden;
    border: 1px solid var(--tm-border);
    border-radius: calc(var(--tm-radius) + 8px);
    background:
        radial-gradient(circle at 82% 22%, rgba(255, 183, 0, .25), transparent 34%),
        radial-gradient(circle at 8% 88%, rgba(255, 122, 24, .18), transparent 28%),
        linear-gradient(135deg, var(--tm-surface), #11151a);
    box-shadow: var(--tm-shadow);
}

.tm-league-title {
    max-width: 760px;
    margin-bottom: 1rem;
    font-size: clamp(2.6rem, 7vw, 5.4rem);
    font-weight: 850;
    line-height: .98;
    letter-spacing: -.055em;
}

.tm-league-lead {
    max-width: 760px;
    margin-bottom: 1.5rem;
    color: var(--tm-text-muted);
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.75;
}

.tm-league-trophy {
    position: relative;
    display: grid;
    width: min(240px, 65vw);
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 183, 0, .24), transparent 55%),
        rgba(13, 16, 20, .75);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .45);
}

.tm-league-trophy::before,
.tm-league-trophy::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(255, 183, 0, .22);
    border-radius: 50%;
}

.tm-league-trophy::before {
    inset: -24px;
}

.tm-league-trophy::after {
    inset: -52px;
    opacity: .55;
}

.tm-league-trophy i {
    color: #ffb700;
    font-size: clamp(5rem, 12vw, 8.5rem);
    filter: drop-shadow(0 20px 32px rgba(255, 183, 0, .25));
}

.tm-league-season-summary,
.tm-league-section-heading,
.tm-league-application-form,
.tm-league-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.tm-league-summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.tm-league-summary-stats span {
    min-width: 110px;
    padding: .8rem 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface-2);
    color: var(--tm-text-muted);
    text-align: center;
}

.tm-league-summary-stats strong {
    display: block;
    color: var(--tm-text);
    font-size: 1.3rem;
}

.tm-league-application {
    border-color: rgba(255, 122, 24, .35);
}

.tm-league-application-form {
    align-items: end;
    margin-top: 1.5rem;
}

.tm-league-application-form > div:nth-child(2) {
    flex: 1 1 460px;
}

.tm-league-applicant {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.tm-league-applicant img {
    border: 2px solid var(--tm-primary);
    border-radius: 50%;
    object-fit: cover;
}

.tm-league-notice {
    justify-content: flex-start;
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px dashed var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface-2);
    color: var(--tm-text-muted);
}

.tm-league-notice i {
    color: var(--tm-primary);
    font-size: 1.3rem;
}

.tm-league-section {
    display: grid;
    gap: 1.2rem;
}

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

.tm-league-entrant-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .8rem;
    align-items: center;
    padding: .9rem;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    background: var(--tm-surface);
    color: var(--tm-text);
    text-decoration: none;
    transition: var(--tm-transition);
}

.tm-league-entrant-card:hover {
    transform: translateY(-2px);
    border-color: var(--tm-primary);
    color: var(--tm-text);
}

.tm-league-entrant-card img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.tm-league-entrant-card strong,
.tm-league-entrant-card small {
    display: block;
}

.tm-league-entrant-card small {
    overflow: hidden;
    color: var(--tm-text-muted);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-league-seed {
    display: inline-grid;
    min-width: 30px;
    height: 26px;
    place-items: center;
    padding: 0 .4rem;
    border-radius: 999px;
    background: rgba(255, 122, 24, .13);
    color: var(--tm-primary);
    font-size: .72rem;
    font-weight: 800;
}

.tm-league-entrant-card > .tm-league-seed {
    position: absolute;
    top: .4rem;
    left: .4rem;
    z-index: 2;
}

.tm-league-bracket {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(285px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    padding: .35rem .2rem 1.25rem;
    scroll-snap-type: x proximity;
}

.tm-league-round {
    display: grid;
    min-width: 0;
    gap: 1rem;
    scroll-snap-align: start;
}

.tm-league-round > header {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: .8rem 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: rgba(20, 24, 29, .94);
    backdrop-filter: blur(12px);
}

.tm-league-round > header span {
    color: var(--tm-primary);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tm-league-round > header h3 {
    margin: .15rem 0 0;
    font-size: 1.05rem;
}

.tm-league-round-matchups {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: space-around;
    gap: 1rem;
}

.tm-league-matchup {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    background: var(--tm-surface);
    box-shadow: var(--tm-shadow);
}

.tm-league-matchup.is-live {
    border-color: rgba(25, 135, 84, .65);
    box-shadow: 0 0 0 1px rgba(25, 135, 84, .16), var(--tm-shadow);
}

.tm-league-matchup-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--tm-border);
    background: var(--tm-surface-2);
    color: var(--tm-text-muted);
    font-size: .72rem;
    font-weight: 700;
}

.tm-league-competitor {
    padding: .75rem;
    border-bottom: 1px solid var(--tm-border);
}

.tm-league-competitor:last-child {
    border-bottom: 0;
}

.tm-league-competitor.is-winner {
    background: linear-gradient(90deg, rgba(255, 183, 0, .13), transparent);
}

.tm-league-competitor.is-selected {
    box-shadow: inset 3px 0 0 var(--tm-primary);
}

.tm-league-competitor-profile {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
    color: var(--tm-text);
    text-decoration: none;
}

.tm-league-competitor-profile img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.tm-league-competitor-profile i {
    color: #ffb700;
}

.tm-league-competitor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    margin-top: .6rem;
}

.tm-league-vote-count {
    color: var(--tm-text-muted);
    font-size: .74rem;
}

.tm-league-tbd {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
    color: var(--tm-text-muted);
    font-size: .82rem;
}

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

.tm-league-prose {
    color: var(--tm-text-muted);
    line-height: 1.75;
}

.tm-league-empty {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.tm-league-empty > i {
    color: var(--tm-primary);
    font-size: 2rem;
}

.tm-admin-league-stats,
.tm-admin-discovery-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .8rem;
}

.tm-admin-league-stats .tm-card,
.tm-admin-discovery-stats .tm-card {
    display: grid;
    justify-items: center;
    gap: .25rem;
    padding: 1rem;
    text-align: center;
}

.tm-admin-league-stats i,
.tm-admin-discovery-stats i {
    color: var(--tm-primary);
    font-size: 1.25rem;
}

.tm-admin-league-stats strong,
.tm-admin-discovery-stats strong {
    font-size: 1.45rem;
}

.tm-admin-league-stats span,
.tm-admin-discovery-stats span {
    color: var(--tm-text-muted);
    font-size: .75rem;
}

.tm-admin-switch-list {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface-2);
}

.tm-admin-season-form {
    padding: 1rem;
    border: 1px dashed var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface-2);
}

.tm-admin-application-list {
    display: grid;
    gap: .8rem;
}

.tm-admin-application-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface-2);
}

.tm-admin-application-review {
    padding-left: 1rem;
    border-left: 1px solid var(--tm-border);
}

.tm-admin-league-rounds {
    display: grid;
    gap: 1.25rem;
}

.tm-admin-league-round {
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    background: var(--tm-surface-2);
}

.tm-admin-league-round > header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.tm-admin-matchup-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.tm-admin-matchup-card {
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface);
}

.tm-admin-matchup-competitors {
    display: grid;
    gap: .4rem;
}

.tm-admin-matchup-competitors > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: center;
    padding: .55rem;
    border: 1px solid var(--tm-border);
    border-radius: 9px;
}

.tm-admin-matchup-competitors > div.is-winner {
    border-color: rgba(255, 183, 0, .55);
    background: rgba(255, 183, 0, .09);
}

.tm-admin-matchup-competitors span,
.tm-admin-matchup-competitors em {
    color: var(--tm-text-muted);
    font-size: .7rem;
    font-style: normal;
}

.tm-admin-weight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.tm-admin-weight-grid label {
    display: grid;
    gap: .35rem;
}

.tm-admin-weight-grid span {
    color: var(--tm-text-muted);
    font-size: .78rem;
}

@media (max-width: 1199.98px) {
    .tm-league-entrant-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tm-admin-league-stats,
    .tm-admin-discovery-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tm-admin-matchup-grid,
    .tm-admin-weight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .tm-league-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .tm-league-trophy {
        width: 150px;
    }

    .tm-league-entrant-grid,
    .tm-league-info-grid,
    .tm-admin-league-stats,
    .tm-admin-discovery-stats,
    .tm-admin-matchup-grid,
    .tm-admin-weight-grid {
        grid-template-columns: 1fr;
    }

    .tm-admin-application-card {
        grid-template-columns: 1fr;
    }

    .tm-admin-application-review {
        padding-top: 1rem;
        padding-left: 0;
        border-top: 1px solid var(--tm-border);
        border-left: 0;
    }

    .tm-league-application-form {
        align-items: stretch;
    }

    .tm-league-bracket {
        grid-auto-columns: minmax(270px, 88vw);
    }
}

/* --------------------------------------------------------------------------
   Phase 30.1 competition hub tabs
   -------------------------------------------------------------------------- */

.tm-league-tabs {
    position: sticky;
    top: 72px;
    z-index: 20;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    padding: 0 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    background: rgba(14, 17, 21, .96);
    box-shadow: var(--tm-shadow);
    scrollbar-width: thin;
    backdrop-filter: blur(16px);
}

.tm-league-tab {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .55rem;
    min-height: 58px;
    padding: 0 1rem;
    color: var(--tm-text-muted);
    font-size: .9rem;
    font-weight: 750;
    text-decoration: none;
    transition: var(--tm-transition);
}

.tm-league-tab::after {
    position: absolute;
    right: .65rem;
    bottom: 0;
    left: .65rem;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: transparent;
    content: "";
}

.tm-league-tab:hover,
.tm-league-tab.is-active {
    color: var(--tm-text);
}

.tm-league-tab.is-active {
    color: var(--tm-primary);
}

.tm-league-tab.is-active::after {
    background: var(--tm-primary);
    box-shadow: 0 0 18px rgba(255, 122, 24, .45);
}

.tm-league-tab-panel,
.tm-league-match-list,
.tm-league-challenge-list {
    display: grid;
    gap: 1rem;
}

.tm-league-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 60px;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tm-border);
}

.tm-league-table-heading span {
    color: var(--tm-text-muted);
    font-size: .78rem;
}

.tm-league-leaderboard-card {
    overflow: hidden;
    padding: 0;
}

.tm-league-table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, .018);
    --bs-table-hover-bg: rgba(255, 255, 255, .035);
    min-width: 760px;
}

.tm-league-table > :not(caption) > * > * {
    padding: .9rem 1rem;
    border-color: var(--tm-border);
}

.tm-league-table thead th {
    color: var(--tm-text-muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.tm-league-rank {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--tm-border);
    border-radius: 7px;
    background: var(--tm-surface-2);
    font-size: .82rem;
    font-weight: 850;
}

.tm-league-rank.is-gold {
    border-color: #e7c400;
    background: linear-gradient(145deg, #ffe94d, #c9a800);
    color: #181300;
    box-shadow: 0 6px 18px rgba(255, 221, 0, .25);
}

.tm-league-rank.is-silver {
    border-color: #d1d6dc;
    background: linear-gradient(145deg, #f2f4f6, #9da4ac);
    color: #16191c;
}

.tm-league-rank.is-bronze {
    border-color: #bb7430;
    background: linear-gradient(145deg, #d99146, #925018);
    color: #140a02;
}

.tm-league-player-link {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    color: var(--tm-text);
    text-decoration: none;
}

.tm-league-player-link:hover {
    color: var(--tm-primary);
}

.tm-league-player-link img {
    flex: 0 0 auto;
    border: 2px solid var(--tm-border);
    border-radius: 50%;
    object-fit: cover;
}

.tm-league-player-link strong,
.tm-league-player-link small {
    display: block;
}

.tm-league-player-link small {
    color: var(--tm-text-muted);
    font-size: .72rem;
}

.tm-league-streak {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 850;
}

.tm-league-streak.is-win {
    color: #4bd46b;
}

.tm-league-streak.is-win::before {
    content: "⚡";
}

.tm-league-streak.is-loss {
    color: #ef6a72;
}

.tm-league-streak.is-draw {
    color: var(--tm-text-muted);
}

.tm-league-title-count {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #ffcf33;
    font-weight: 850;
}

.tm-league-empty-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 120px;
    padding: 1.5rem;
    color: var(--tm-text-muted);
    text-align: center;
}

.tm-league-empty-inline i {
    color: var(--tm-primary);
    font-size: 1.5rem;
}

.tm-league-match-list-section {
    overflow: hidden;
    padding: 0;
}

.tm-league-match-list {
    padding: 1rem;
}

.tm-league-list-match {
    overflow: hidden;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    background: var(--tm-surface-2);
}

.tm-league-list-match.is-live {
    border-color: rgba(25, 190, 100, .52);
    box-shadow: 0 0 0 1px rgba(25, 190, 100, .08);
}

.tm-league-list-match-meta,
.tm-league-challenge-card > header,
.tm-league-challenge-card > footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--tm-border);
    background: rgba(255, 255, 255, .02);
    color: var(--tm-text-muted);
    font-size: .78rem;
}

.tm-league-versus,
.tm-league-challenge-versus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
}

.tm-league-versus-player,
.tm-league-challenge-player {
    display: grid;
    gap: .7rem;
    align-content: center;
    justify-items: center;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface);
    text-align: center;
}

.tm-league-versus-player.is-winner,
.tm-league-challenge-player.is-winner {
    border-color: rgba(255, 201, 34, .65);
    background: linear-gradient(145deg, rgba(255, 201, 34, .12), rgba(255, 255, 255, .015));
}

.tm-league-challenge-player.is-selected {
    box-shadow: inset 0 -3px 0 var(--tm-primary);
}

.tm-league-vs-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    align-self: center;
    border: 1px solid var(--tm-border);
    border-radius: 50%;
    background: var(--tm-surface);
    color: var(--tm-text-muted);
    font-size: .68rem;
    font-weight: 900;
}

.tm-league-result-line {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #ffcf33;
    font-size: .82rem;
    font-weight: 800;
}

.tm-league-list-match > .tm-league-result-line {
    width: 100%;
    justify-content: center;
    padding: .75rem 1rem;
    border-top: 1px solid var(--tm-border);
    background: rgba(255, 201, 34, .05);
}

.tm-league-challenge-create,
.tm-league-song-submit {
    border-color: rgba(255, 122, 24, .32);
}

.tm-league-challenge-list {
    padding: 1rem;
}

.tm-league-challenge-card {
    overflow: hidden;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    background: var(--tm-surface-2);
}

.tm-league-challenge-card.is-live {
    border-color: rgba(25, 190, 100, .52);
}

.tm-league-challenge-card > header p {
    color: var(--tm-text);
}

.tm-league-challenge-card > footer {
    border-top: 1px solid var(--tm-border);
    border-bottom: 0;
}

.tm-league-challenge-response {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: .75rem;
    align-items: end;
    width: 100%;
}

.tm-league-song-submit-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    margin-top: 1.25rem;
}

.tm-league-song-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.tm-league-song-card {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    padding: 0;
}

.tm-league-song-card.is-featured {
    border-color: rgba(255, 201, 34, .52);
}

.tm-league-song-card.is-pending {
    opacity: .78;
}

.tm-league-song-artwork {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 1px solid var(--tm-border);
    background: var(--tm-surface-2);
}

.tm-league-song-artwork > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-league-song-artwork .badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
}

.tm-league-song-artwork .badge + .badge {
    top: auto;
    bottom: .75rem;
}

.tm-league-song-body {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.tm-league-song-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.tm-league-rules-copy {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface-2);
    line-height: 1.8;
    white-space: normal;
}

.tm-admin-challenge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

@media (max-width: 1199.98px) {
    .tm-league-song-grid,
    .tm-admin-challenge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .tm-league-tabs {
        top: 62px;
        padding: 0 .35rem;
    }

    .tm-league-tab {
        min-height: 52px;
        padding: 0 .75rem;
    }

    .tm-league-versus,
    .tm-league-challenge-versus {
        grid-template-columns: 1fr;
    }

    .tm-league-vs-mark {
        justify-self: center;
    }

    .tm-league-challenge-response,
    .tm-league-song-submit-form,
    .tm-league-song-grid,
    .tm-admin-challenge-grid {
        grid-template-columns: 1fr;
    }

    .tm-league-song-submit-form .btn {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Administration navigation and collapsible control centre sections
   -------------------------------------------------------------------------- */

.tm-admin-league-jump {
    position: sticky;
    top: 76px;
    z-index: 18;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    padding: .65rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: rgba(18, 22, 27, .96);
    box-shadow: var(--tm-shadow);
    backdrop-filter: blur(14px);
}

.tm-admin-league-jump-label {
    padding: .45rem .6rem;
    color: var(--tm-text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tm-admin-league-jump a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .7rem;
    border-radius: 8px;
    color: var(--tm-text-muted);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--tm-transition);
}

.tm-admin-league-jump a:hover,
.tm-admin-league-jump a:focus-visible {
    background: var(--tm-surface-2);
    color: var(--tm-primary);
}

.tm-admin-collapsible-section {
    scroll-margin-top: 150px;
}

.tm-admin-section-collapse-control {
    display: flex;
    justify-content: flex-end;
    margin: -.25rem -.25rem .75rem;
}

.tm-admin-section-collapse-control button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 150px;
    justify-content: space-between;
}

.tm-admin-collapsible-section.is-collapsed {
    padding-bottom: .75rem;
}

.tm-admin-collapsible-section.is-collapsed > :not(.tm-admin-section-collapse-control) {
    display: none !important;
}

.tm-admin-collapsible-section.is-collapsed .tm-admin-section-collapse-control {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .tm-admin-league-jump {
        position: static;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }

    .tm-admin-league-jump-label,
    .tm-admin-league-jump a {
        flex: 0 0 auto;
    }

    .tm-admin-section-collapse-control button {
        width: 100%;
    }
}

/* ---- track-cards.css ---- */
/*
|--------------------------------------------------------------------------
| Compact Track / Song Cards
|--------------------------------------------------------------------------
*/

.tm-track-card-v2 {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .95rem;
    padding: 1.15rem;
    overflow: visible;
    z-index: 0;
    border: 1px solid var(--tm-border);
    border-radius: 22px;
    background: var(--tm-surface);
    box-shadow: var(--tm-shadow);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.tm-track-card-v2:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 122, 24, .45);
}

.tm-track-card-v2.has-open-menu {
    z-index: 40;
}

@supports selector(.tm-track-card-v2:has(.tm-track-card-v2-more.show)) {
    .tm-track-card-v2:has(.tm-track-card-v2-more.show) {
        z-index: 40;
    }
}

.tm-track-card-v2-more {
    position: relative;
}

.tm-track-card-v2-more .dropdown-menu {
    z-index: 1200;
    min-width: 220px;
}

.tm-track-card-v2.is-featured {
    border-color: rgba(255, 193, 7, .5);
}

.tm-track-card-v2.is-pending {
    border-style: dashed;
}

.tm-track-card-v2-author {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .7rem;
}

.tm-track-card-v2-avatar-link {
    flex: 0 0 auto;
}

.tm-track-card-v2-avatar {
    display: block;
    width: 38px;
    height: 38px;
    border: 1px solid var(--tm-border);
    border-radius: 50%;
    object-fit: cover;
}

.tm-track-card-v2-author-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.tm-track-card-v2-artist {
    overflow: hidden;
    color: var(--tm-text);
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-track-card-v2-artist:hover {
    color: var(--tm-primary);
}

.tm-track-card-v2-date {
    margin-top: .15rem;
    color: var(--tm-text-muted);
    font-size: .74rem;
}

.tm-track-card-v2-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
    margin-left: auto;
}

.tm-track-card-v2-main {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 1rem;
    min-width: 0;
    align-items: center;
}

.tm-track-card-v2-artwork-wrap {
    position: relative;
    width: 128px;
    height: 128px;
}

.tm-track-card-v2-artwork-link,
.tm-track-card-v2-artwork {
    display: block;
    width: 100%;
    height: 100%;
}

.tm-track-card-v2-artwork-link {
    overflow: hidden;
    border-radius: 16px;
    background: var(--tm-surface-2);
}

.tm-track-card-v2-artwork {
    object-fit: cover;
    transition: transform .25s ease, filter .25s ease;
}

.tm-track-card-v2:hover .tm-track-card-v2-artwork {
    transform: scale(1.025);
    filter: brightness(.88);
}

.tm-track-card-v2-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 50%;
    background: var(--tm-primary);
    color: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
    font-size: 1.55rem;
    transition: transform .2s ease, filter .2s ease;
}

.tm-track-card-v2-play:hover,
.tm-track-card-v2-play:focus-visible {
    transform: translate(-50%, -50%) scale(1.07);
    filter: brightness(1.08);
}

.tm-track-card-v2-play i {
    margin-left: .12rem;
    line-height: 1;
}

.tm-track-card-v2-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

.tm-track-card-v2-heading {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.tm-track-card-v2-title {
    min-width: 0;
    margin: 0;
    color: var(--tm-text);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.35;
}

.tm-track-card-v2-title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tm-track-card-v2-title a:hover {
    color: var(--tm-primary);
}

.tm-track-card-v2-genre {
    flex: 0 0 auto;
    padding: .25rem .55rem;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    color: var(--tm-text-muted);
    font-size: .69rem;
    font-weight: 700;
}

.tm-track-card-v2-description {
    display: -webkit-box;
    overflow: hidden;
    margin: .55rem 0 0;
    color: var(--tm-text-muted);
    font-size: .82rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tm-track-card-v2-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: .7rem;
    color: var(--tm-text-muted);
    font-size: .76rem;
}

.tm-track-card-v2-stats > span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.tm-track-card-v2-stats i {
    color: currentColor;
}

.tm-track-card-v2-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-top: .9rem;
    border-top: 1px solid var(--tm-border);
}

.tm-track-card-v2-action.btn,
.tm-track-card-v2-actions > .btn,
.tm-track-card-v2-actions > form .btn {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    padding: .42rem .78rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
}

.tm-track-card-v2-action.btn-outline-secondary,
.tm-track-card-v2-actions .btn-outline-secondary {
    border-color: var(--tm-border);
    color: var(--tm-text-muted);
}

.tm-track-card-v2-action.btn-outline-secondary:hover,
.tm-track-card-v2-actions .btn-outline-secondary:hover {
    border-color: rgba(255, 122, 24, .55);
    background: var(--tm-surface-2);
    color: var(--tm-text);
}

.tm-track-card-v2-action.favourite-track,
.tm-track-card-v2-action[href*="#track-comments"] {
    min-width: 58px;
}

.tm-track-card-v2-action .favourite-count,
.tm-track-card-v2-action .comment-count {
    font-variant-numeric: tabular-nums;
}

.tm-track-card-v2.is-compact {
    gap: .75rem;
    padding: .9rem;
    border-radius: 18px;
}

.tm-track-card-v2.is-compact .tm-track-card-v2-main {
    grid-template-columns: 96px minmax(0, 1fr);
}

.tm-track-card-v2.is-compact .tm-track-card-v2-artwork-wrap {
    width: 96px;
    height: 96px;
}

.tm-track-card-v2.is-compact .tm-track-card-v2-author {
    display: none;
}

.tm-track-card-v2.is-compact .tm-track-card-v2-description {
    -webkit-line-clamp: 1;
}

.tm-track-card-v2.is-compact .tm-track-card-v2-actions {
    padding-top: .7rem;
}

/* Keep legacy cards tidy until every specialist card moves to the shared component. */
.tm-track-card:not(.tm-track-card-v2) {
    gap: .9rem;
    padding: 1rem;
    border-radius: 20px;
}

.tm-track-card:not(.tm-track-card-v2) .tm-track-cover {
    width: 104px !important;
    height: 104px !important;
    border-radius: 15px;
    object-fit: cover;
}

.tm-track-card:not(.tm-track-card-v2) .btn {
    padding: .42rem .72rem;
    border-radius: 999px;
    font-size: .8rem;
}

/* League songs use the same visual language while preserving moderation tools. */
.tm-league-song-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tm-league-song-card {
    gap: .9rem;
    padding: 1rem;
    border-radius: 20px;
}

.tm-league-song-card .tm-league-song-artwork {
    border-radius: 15px;
}

.tm-league-song-card .btn {
    padding: .42rem .72rem;
    border-radius: 999px;
    font-size: .8rem;
}

@media (max-width: 767.98px) {
    .tm-track-card-v2 {
        padding: 1rem;
    }

    .tm-track-card-v2-main {
        grid-template-columns: 102px minmax(0, 1fr);
        gap: .85rem;
    }

    .tm-track-card-v2-artwork-wrap {
        width: 102px;
        height: 102px;
    }

    .tm-track-card-v2-play {
        width: 42px;
        height: 42px;
        font-size: 1.35rem;
    }

    .tm-track-card-v2-stat-label {
        display: none;
    }

    .tm-track-card-v2-action.btn,
    .tm-track-card-v2-actions > .btn,
    .tm-track-card-v2-actions > form .btn {
        min-height: 36px;
        padding-inline: .68rem;
    }

    .tm-track-card-v2-actions {
        gap: .42rem;
    }

    .tm-league-song-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479.98px) {
    .tm-track-card-v2-main,
    .tm-track-card-v2.is-compact .tm-track-card-v2-main {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .tm-track-card-v2-artwork-wrap,
    .tm-track-card-v2.is-compact .tm-track-card-v2-artwork-wrap {
        width: 82px;
        height: 82px;
    }

    .tm-track-card-v2-title {
        font-size: .98rem;
    }

    .tm-track-card-v2-genre,
    .tm-track-card-v2-description {
        display: none;
    }

    .tm-track-card-v2-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tm-track-card-v2-action.btn,
    .tm-track-card-v2-actions > .btn,
    .tm-track-card-v2-actions > form,
    .tm-track-card-v2-actions > form .btn {
        width: 100%;
    }

    .tm-track-card-v2-action span:not(.favourite-count):not(.comment-count):not(.visually-hidden),
    .tm-track-card-v2-actions > .btn span:not(.favourite-count):not(.comment-count):not(.visually-hidden) {
        display: none;
    }

    .tm-track-card-v2-action.favourite-track,
    .tm-track-card-v2-action[href*="#track-comments"] {
        min-width: 0;
    }

    .tm-track-card:not(.tm-track-card-v2) {
        align-items: flex-start;
    }

    .tm-track-card:not(.tm-track-card-v2) .tm-track-cover {
        width: 82px !important;
        height: 82px !important;
    }
}

.tm-track-card-v2-action.btn-outline-danger {
    border-color: var(--tm-border);
    color: var(--tm-text-muted);
}

.tm-track-card-v2-action.btn-outline-danger:hover {
    border-color: rgba(220, 53, 69, .55);
    background: rgba(220, 53, 69, .08);
    color: #ff7b89;
}

.tm-track-card-v2-action.btn-danger {
    border-color: rgba(220, 53, 69, .5);
    background: rgba(220, 53, 69, .14);
    color: #ff8995;
}

/* Individual track page uses the same compact action language as track cards. */
.tm-track-detail-actions {
    margin-top: .25rem;
}

.tm-track-detail-actions > .btn-primary {
    padding-inline: 1rem;
}

.tm-track-detail-actions .tm-report-panel {
    margin-top: .35rem;
}

/* Streamlined directory actions: Play, Download, Save and More. */
.tm-track-card-v2-actions.is-streamlined {
    align-items: center;
    flex-wrap: wrap;
}

.tm-track-card-v2-actions.is-streamlined > form {
    margin: 0;
}

.tm-track-card-v2-actions.is-streamlined .tm-track-card-v2-more {
    margin-left: auto;
}

.tm-track-card-v2-actions.is-streamlined .dropdown-menu {
    min-width: 13.5rem;
    padding: 0.4rem;
    border: 1px solid var(--tm-border);
    border-radius: 0.8rem;
    background: #101117;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.42);
}

.tm-track-card-v2-actions.is-streamlined .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--tm-text);
    text-align: left;
}

.tm-track-card-v2-actions.is-streamlined .dropdown-item > i {
    width: 1.15rem;
    color: var(--tm-primary);
    text-align: center;
}

.tm-track-card-v2-actions.is-streamlined .dropdown-item:hover,
.tm-track-card-v2-actions.is-streamlined .dropdown-item:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

@media (max-width: 575.98px) {
    .tm-track-card-v2-actions.is-streamlined {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tm-track-card-v2-actions.is-streamlined > *,
    .tm-track-card-v2-actions.is-streamlined > form,
    .tm-track-card-v2-actions.is-streamlined > form .btn,
    .tm-track-card-v2-actions.is-streamlined .tm-track-card-v2-more,
    .tm-track-card-v2-actions.is-streamlined .tm-track-card-v2-more > .btn {
        width: 100%;
        margin-left: 0;
    }
}

.tm-track-card-v2.has-streamlined-actions {
    overflow: visible;
}


/* Shared compact action language for older track-oriented cards. */
.tm-compact-track-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.tm-compact-track-actions .btn,
.tm-compact-track-actions > form .btn {
    display: inline-flex;
    min-width: 36px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .4rem .72rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
}

.tm-compact-track-actions .btn > i {
    line-height: 1;
}

/* Queue buttons inside dropdown menus must align like every other menu item. */
.tm-track-card-v2-actions.is-streamlined .dropdown-item.tm-add-queue {
    justify-content: flex-start;
    text-align: left;
}

/* ---- tracks.css ---- */
/* Track directory: personal shortcuts and fair-listen discovery. */

.tm-my-tracks-panel,
.tm-track-hidden-gems {
    border: 1px solid var(--tm-border);
    border-radius: 1rem;
    background:
        radial-gradient(circle at top right, rgba(228, 87, 46, 0.12), transparent 38%),
        rgba(18, 20, 27, 0.92);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.18);
}

.tm-my-tracks-panel {
    scroll-margin-top: 7rem;
}

.tm-my-tracks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
}

.tm-my-tracks-toggle {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tm-text);
    text-align: left;
    cursor: pointer;
}

.tm-my-tracks-toggle:focus-visible {
    outline: 2px solid var(--tm-primary);
    outline-offset: 0.45rem;
    border-radius: 0.35rem;
}

.tm-my-tracks-heading {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.tm-my-tracks-heading > i {
    display: grid;
    flex: 0 0 auto;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: 0.75rem;
    background: rgba(228, 87, 46, 0.14);
    color: var(--tm-primary);
    font-size: 1.15rem;
}

.tm-my-tracks-heading > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tm-my-tracks-heading strong {
    color: #fff;
    font-size: 1rem;
}

.tm-my-tracks-heading small {
    color: var(--tm-text-muted);
}

.tm-my-tracks-chevron {
    flex: 0 0 auto;
    color: var(--tm-primary);
    transition: transform 0.2s ease;
}

.tm-my-tracks-panel.is-open .tm-my-tracks-chevron {
    transform: rotate(180deg);
}

.tm-my-tracks-header-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tm-my-tracks-content {
    padding: 0 1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.tm-my-tracks-content[hidden] {
    display: none;
}

.tm-my-tracks-grid {
    display: grid;
    gap: 0.75rem;
    padding-top: 1rem;
}

.tm-my-track-card {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.85rem;
    background: rgba(7, 8, 12, 0.52);
}

.tm-my-track-artwork-wrap {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
}

.tm-my-track-artwork {
    width: 100%;
    height: 100%;
    border-radius: 0.7rem;
    object-fit: cover;
}

.tm-my-track-play {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--tm-primary);
    color: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.45);
}

.tm-my-track-copy {
    min-width: 0;
}

.tm-my-track-copy h3 {
    min-width: 0;
    margin: 0;
    font-size: 1rem;
}

.tm-my-track-copy h3 a {
    display: block;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-my-track-copy .tm-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.4rem;
}

.tm-my-track-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.tm-my-track-actions form {
    margin: 0;
}

.tm-my-tracks-empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0.25rem 0.25rem;
}

.tm-my-tracks-empty > i {
    color: var(--tm-primary);
    font-size: 1.8rem;
}

.tm-my-tracks-empty p {
    margin: 0.2rem 0 0;
    color: var(--tm-text-muted);
}

.tm-track-hidden-gems {
    padding: 1rem;
}

.tm-track-hidden-gems-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tm-track-hidden-gems-heading h2 {
    margin: 0.2rem 0;
    color: #fff;
    font-size: clamp(1.25rem, 3vw, 1.65rem);
}

.tm-track-hidden-gems-heading p {
    margin: 0;
    color: var(--tm-text-muted);
}

.tm-track-hidden-gems-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--tm-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tm-track-hidden-gems-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.tm-track-hidden-gems-grid .tm-track-card-v2 {
    height: 100%;
    margin-bottom: 0 !important;
}

.tm-track-gem-reason {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem 0.9rem;
    color: var(--tm-text-muted);
    font-size: 0.78rem;
}

.tm-track-gem-reason i {
    color: var(--tm-primary);
}

@media (max-width: 767.98px) {
    .tm-my-tracks-header,
    .tm-track-hidden-gems-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .tm-my-tracks-toggle {
        width: 100%;
    }

    .tm-my-tracks-header-actions,
    .tm-track-hidden-gems-heading > .btn {
        width: 100%;
    }

    .tm-my-tracks-header-actions > *,
    .tm-track-hidden-gems-heading > .btn {
        flex: 1 1 auto;
    }

    .tm-my-track-card {
        grid-template-columns: 3.75rem minmax(0, 1fr);
    }

    .tm-my-track-artwork-wrap {
        width: 3.75rem;
        height: 3.75rem;
    }

    .tm-my-track-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .tm-my-track-actions > *,
    .tm-my-track-actions form,
    .tm-my-track-actions form .btn {
        flex: 1 1 0;
    }

    .tm-my-tracks-empty {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tm-my-tracks-empty .btn {
        grid-column: 1 / -1;
    }

    .tm-track-hidden-gems-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-my-tracks-chevron {
        transition: none;
    }
}

/* ---- footer.css ---- */
/*
|--------------------------------------------------------------------------
| Site Footer
|--------------------------------------------------------------------------
*/

.tm-site-footer {

    position:
    relative;

    margin-top:
    4rem;

    border-top:
    1px solid rgba(255, 255, 255, .08);

    background:
    radial-gradient(
        circle at 12% 0%,
        color-mix(in srgb, var(--tm-primary) 12%, transparent),
        transparent 34%
    ),
    linear-gradient(
        180deg,
        rgba(25, 29, 34, .72),
        rgba(12, 14, 16, .96)
    );

    overflow:
    hidden;

    padding-bottom:
    126px;

    transition:
    padding-bottom .18s ease;

}


body.tm-player-is-collapsed .tm-site-footer {

    padding-bottom:
    58px;

}


.tm-site-footer::before {

    content:
    '';

    position:
    absolute;

    inset:
    0 0 auto;

    height:
    1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--tm-primary) 65%, transparent),
        transparent
    );

}


.tm-footer-main {

    display:
    grid;

    grid-template-columns:
    minmax(250px, .85fr)
    minmax(0, 1.65fr);

    gap:
    clamp(2rem, 5vw, 5rem);

    padding:
    clamp(2.5rem, 5vw, 4.25rem)
    0
    2.4rem;

}


.tm-footer-brand-panel {

    min-width:
    0;

}


.tm-footer-brand {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .85rem;

    color:
    var(--tm-text);

    text-decoration:
    none;

}


.tm-footer-brand:hover {

    color:
    var(--tm-text);

}


.tm-footer-brand-mark {

    display:
    grid;

    width:
    3.25rem;

    height:
    3.25rem;

    place-items:
    center;

    flex:
    0 0 auto;

    border:
    1px solid color-mix(in srgb, var(--tm-primary) 34%, transparent);

    border-radius:
    1rem;

    background:
    linear-gradient(
        145deg,
        color-mix(in srgb, var(--tm-primary) 20%, transparent),
        color-mix(in srgb, var(--tm-primary) 4.5%, transparent)
    );

    box-shadow:
    0 14px 40px rgba(0, 0, 0, .22);

    color:
    var(--tm-primary);

    font-size:
    1.65rem;

}


.tm-footer-brand strong,
.tm-footer-brand small {

    display:
    block;

}


.tm-footer-brand strong {

    font-size:
    1.08rem;

    line-height:
    1.2;

}


.tm-footer-brand small {

    margin-top:
    .25rem;

    color:
    var(--tm-text-muted);

    font-size:
    .78rem;

    font-weight:
    500;

    letter-spacing:
    .025em;

}


.tm-footer-description {

    max-width:
    31rem;

    margin:
    1.25rem 0 0;

    color:
    var(--tm-text-muted);

    font-size:
    .92rem;

    line-height:
    1.75;

}


.tm-footer-feature-links {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    .55rem;

    margin-top:
    1.45rem;

}


.tm-footer-feature-links a {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .45rem;

    min-height:
    2.25rem;

    padding:
    .45rem .72rem;

    border:
    1px solid rgba(255, 255, 255, .08);

    border-radius:
    999px;

    background:
    rgba(255, 255, 255, .035);

    color:
    var(--tm-text-muted);

    font-size:
    .78rem;

    font-weight:
    700;

    text-decoration:
    none;

}


.tm-footer-feature-links a:hover,
.tm-footer-feature-links a:focus-visible {

    border-color:
    color-mix(in srgb, var(--tm-primary) 42%, transparent);

    background:
    color-mix(in srgb, var(--tm-primary) 10%, transparent);

    color:
    var(--tm-text);

    transform:
    translateY(-1px);

}


.tm-footer-feature-links i {

    color:
    var(--tm-primary);

}


.tm-footer-navigation {

    display:
    grid;

    grid-template-columns:
    repeat(3, minmax(0, 1fr));

    gap:
    clamp(1rem, 2.5vw, 2rem);

    align-items:
    start;

}


.tm-footer-group {

    min-width:
    0;

}


.tm-footer-group > summary {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    .75rem;

    min-height:
    2.5rem;

    margin:
    0 0 .7rem;

    color:
    var(--tm-text);

    font-size:
    .82rem;

    font-weight:
    800;

    letter-spacing:
    .04em;

    list-style:
    none;

    text-transform:
    uppercase;

}


.tm-footer-group > summary::-webkit-details-marker {

    display:
    none;

}


.tm-footer-group > summary > span {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .55rem;

}


.tm-footer-group > summary > span i {

    color:
    var(--tm-primary);

    font-size:
    .95rem;

}


.tm-footer-group-chevron {

    display:
    none;

    color:
    var(--tm-text-muted);

    font-size:
    .75rem;

    transition:
    transform var(--tm-transition);

}


.tm-footer-links {

    display:
    grid;

    gap:
    .18rem;

}


.tm-footer-group:not([open]) > .tm-footer-links {

    display:
    grid;

}


.tm-footer-links > a {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    .6rem;

    min-height:
    2.25rem;

    padding:
    .4rem .48rem;

    margin-inline:
    -.48rem;

    border-radius:
    .55rem;

    color:
    var(--tm-text-muted);

    font-size:
    .84rem;

    font-weight:
    550;

    text-decoration:
    none;

}


.tm-footer-links > a > span:first-child {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .55rem;

    min-width:
    0;

}


.tm-footer-links > a i {

    width:
    1rem;

    color:
    rgba(245, 247, 250, .48);

    text-align:
    center;

    transition:
    color var(--tm-transition);

}


.tm-footer-links > a:hover,
.tm-footer-links > a:focus-visible {

    background:
    rgba(255, 255, 255, .045);

    color:
    var(--tm-text);

    transform:
    translateX(2px);

}


.tm-footer-links > a:hover i,
.tm-footer-links > a:focus-visible i {

    color:
    var(--tm-primary);

}


.tm-footer-links > .tm-footer-admin-link {

    color:
    #ffd8b8;

}


.tm-footer-count {

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    min-width:
    1.45rem;

    min-height:
    1.45rem;

    padding:
    0 .38rem;

    border:
    1px solid color-mix(in srgb, var(--tm-primary) 35%, transparent);

    border-radius:
    999px;

    background:
    color-mix(in srgb, var(--tm-primary) 14%, transparent);

    color:
    #ffd8b8;

    font-size:
    .68rem;

    font-weight:
    800;

    line-height:
    1;

}


.tm-footer-bottom {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    1rem;

    min-height:
    4.4rem;

    border-top:
    1px solid rgba(255, 255, 255, .07);

    color:
    var(--tm-text-muted);

    font-size:
    .78rem;

}


.tm-footer-bottom > div {

    display:
    flex;

    flex-wrap:
    wrap;

    align-items:
    center;

    gap:
    .42rem;

}


.tm-footer-top-link {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    .45rem;

    flex:
    0 0 auto;

    padding:
    .48rem .68rem;

    border:
    1px solid rgba(255, 255, 255, .08);

    border-radius:
    .65rem;

    color:
    var(--tm-text-muted);

    font-weight:
    700;

    text-decoration:
    none;

}


.tm-footer-top-link:hover,
.tm-footer-top-link:focus-visible {

    border-color:
    color-mix(in srgb, var(--tm-primary) 40%, transparent);

    background:
    color-mix(in srgb, var(--tm-primary) 8%, transparent);

    color:
    var(--tm-text);

}


@media (max-width: 991px) {

    .tm-footer-main {

        grid-template-columns:
        1fr;

        gap:
        2.2rem;

    }


    .tm-footer-description {

        max-width:
        42rem;

    }

}


@media (max-width: 767px) {

    .tm-site-footer {

        margin-top:
        3rem;

        padding-bottom:
        150px;

    }


    body.tm-player-is-collapsed .tm-site-footer {

        padding-bottom:
        58px;

    }


    .tm-footer-main {

        padding:
        2.25rem 0 1.5rem;

    }


    .tm-footer-navigation {

        grid-template-columns:
        1fr;

        gap:
        .6rem;

    }


    .tm-footer-group {

        overflow:
        hidden;

        border:
        1px solid rgba(255, 255, 255, .08);

        border-radius:
        .8rem;

        background:
        rgba(255, 255, 255, .025);

    }


    .tm-footer-group > summary {

        min-height:
        3rem;

        margin:
        0;

        padding:
        .55rem .85rem;

        cursor:
        pointer;

        user-select:
        none;

    }


    .tm-footer-group > summary:hover,
    .tm-footer-group > summary:focus-visible {

        background:
        rgba(255, 255, 255, .035);

    }


    .tm-footer-group-chevron {

        display:
        inline-block;

    }


    .tm-footer-group[open] .tm-footer-group-chevron {

        transform:
        rotate(180deg);

    }


    .tm-footer-group:not([open]) > .tm-footer-links {

        display:
        none;

    }


    .tm-footer-links {

        gap:
        .08rem;

        padding:
        .2rem .65rem .7rem;

        border-top:
        1px solid rgba(255, 255, 255, .055);

    }


    .tm-footer-links > a {

        min-height:
        2.65rem;

        margin-inline:
        0;

        padding:
        .52rem .45rem;

    }


    .tm-footer-bottom {

        align-items:
        flex-start;

        min-height:
        0;

        padding:
        1.2rem 0 1.5rem;

    }

}


@media (max-width: 480px) {

    .tm-footer-feature-links {

        display:
        grid;

        grid-template-columns:
        repeat(3, minmax(0, 1fr));

    }


    .tm-footer-feature-links a {

        justify-content:
        center;

        padding-inline:
        .45rem;

    }


    .tm-footer-feature-links span {

        overflow:
        hidden;

        text-overflow:
        ellipsis;

        white-space:
        nowrap;

    }


    .tm-footer-bottom {

        flex-direction:
        column;

    }


    .tm-footer-top-link {

        align-self:
        flex-end;

    }

}


@media (prefers-reduced-motion: reduce) {

    .tm-site-footer {

        transition:
        none;

    }

}

/* ---- theme-admin.css ---- */
/*
|--------------------------------------------------------------------------
| Theme runtime controls and appearance administration
|--------------------------------------------------------------------------
*/

body {
    font-family: var(--tm-font-family, Inter, system-ui, sans-serif);
}

.container {
    max-width: var(--tm-content-max, 1200px);
}

.tm-brand-logo {
    display: block;
    width: auto;
    max-width: 42px;
    height: 34px;
    object-fit: contain;
}

.tm-footer-brand-logo {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

body.tm-navbar-style-solid .tm-navbar {
    background: var(--tm-bg);
    backdrop-filter: none;
}

body.tm-navbar-style-glass .tm-navbar {
    background: color-mix(in srgb, var(--tm-bg) 92%, transparent);
    backdrop-filter: blur(14px);
}

body.tm-card-style-flat .tm-card {
    box-shadow: none;
}

body.tm-card-style-flat .tm-card:hover {
    transform: none;
}

body.tm-card-style-glass .tm-card {
    background: color-mix(in srgb, var(--tm-surface) 82%, transparent);
    backdrop-filter: blur(16px);
}

body.tm-density-compact .tm-card {
    padding: 1rem;
}

body.tm-density-compact .tm-content {
    padding-top: 28px;
    padding-bottom: 58px;
}

body.tm-density-compact .form-control,
body.tm-density-compact .form-select,
body.tm-density-compact .btn {
    min-height: 38px;
}

body.tm-density-spacious .tm-card {
    padding: 1.8rem;
}

body.tm-density-spacious .tm-content {
    padding-top: 52px;
    padding-bottom: 96px;
}

body.tm-has-theme-background {
    background-color: var(--tm-bg);
    background-image:
        linear-gradient(var(--tm-theme-background-overlay), var(--tm-theme-background-overlay)),
        var(--tm-theme-background-image);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/* Sticky, searchable admin navigation */
.tm-admin-nav {
    position: sticky;
    top: 78px;
    z-index: 900;
}

.tm-admin-nav-search {
    display: flex;
    flex: 0 1 210px;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
    padding: .45rem .7rem;
    border: 1px solid var(--tm-border);
    border-radius: 9px;
    background: var(--tm-bg);
    color: var(--tm-text-muted);
}

.tm-admin-nav-search:focus-within {
    border-color: var(--tm-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-primary) 16%, transparent);
}

.tm-admin-nav-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tm-text);
    font: inherit;
    font-size: .86rem;
}

.tm-admin-nav-search input::placeholder {
    color: var(--tm-text-muted);
}

.tm-admin-nav-group[hidden],
.tm-admin-nav-menu a[hidden] {
    display: none !important;
}

.tm-admin-page-note {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--tm-primary) 35%, var(--tm-border));
    border-radius: var(--tm-radius);
    background: color-mix(in srgb, var(--tm-primary) 8%, var(--tm-surface));
}

.tm-admin-page-note > i {
    color: var(--tm-primary);
    font-size: 1.25rem;
}

.tm-admin-page-note div {
    display: grid;
    gap: .15rem;
}

.tm-admin-page-note span {
    color: var(--tm-text-muted);
    font-size: .9rem;
}

.tm-admin-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.tm-admin-section-heading > i {
    color: var(--tm-primary);
    font-size: 1.5rem;
}

/* Theme manager */
.tm-theme-upload-card {
    display: grid;
    grid-template-rows: 110px auto;
    gap: 1rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: calc(var(--tm-radius) - 2px);
    background: var(--tm-surface-2);
}

.tm-theme-upload-preview {
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: 110px;
    border: 1px dashed color-mix(in srgb, var(--tm-border) 78%, white);
    border-radius: calc(var(--tm-radius) - 4px);
    background: var(--tm-bg);
    color: var(--tm-primary);
    font-size: 2rem;
    background-position: center;
    background-size: cover;
}

.tm-theme-upload-preview img {
    display: block;
    width: 100%;
    height: 100%;
    padding: .6rem;
    object-fit: contain;
}

.tm-theme-favicon-preview img {
    width: 74px;
    height: 74px;
}

.tm-theme-colour-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.tm-theme-colour-field {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: .85rem;
    padding: .8rem;
    border: 1px solid var(--tm-border);
    border-radius: calc(var(--tm-radius) - 3px);
    background: var(--tm-surface-2);
    cursor: pointer;
}

.tm-theme-colour-field:hover {
    border-color: color-mix(in srgb, var(--tm-primary) 55%, var(--tm-border));
}

.tm-theme-colour-field input[type="color"] {
    width: 52px;
    height: 52px;
    padding: 3px;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.tm-theme-colour-field span {
    display: grid;
    min-width: 0;
}

.tm-theme-colour-field small {
    color: var(--tm-text-muted);
    font-size: .78rem;
}

.tm-theme-colour-field code {
    margin-top: .25rem;
    color: var(--tm-primary);
    font-size: .75rem;
}

.tm-theme-range-field {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 42px;
}

.tm-theme-range-field output {
    flex: 0 0 48px;
    color: var(--tm-primary);
    font-weight: 700;
    text-align: right;
}

.tm-theme-save-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 70;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    background: color-mix(in srgb, var(--tm-surface) 94%, transparent);
    box-shadow: var(--tm-shadow);
    backdrop-filter: blur(14px);
}

.tm-theme-save-bar > div {
    display: grid;
}

.tm-theme-save-bar span {
    color: var(--tm-text-muted);
    font-size: .84rem;
}

.tm-theme-admin-sidebar {
    position: sticky;
    top: 165px;
}

.tm-theme-preview {
    overflow: hidden;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    background: var(--tm-bg);
    color: var(--tm-text);
    box-shadow: var(--tm-shadow);
}

.tm-theme-preview-nav {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--tm-border);
    background: var(--tm-surface);
}

.tm-theme-preview-nav i,
.tm-theme-preview-card .badge {
    color: var(--tm-primary);
}

.tm-theme-preview-card {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    background: var(--tm-surface);
}

.tm-theme-preview-card p {
    color: var(--tm-text-muted);
    font-size: .86rem;
}

.tm-theme-preview[data-card-style="flat"] .tm-theme-preview-card {
    box-shadow: none;
}

.tm-theme-preview[data-card-style="glass"] .tm-theme-preview-card {
    background: color-mix(in srgb, var(--tm-surface) 78%, transparent);
    backdrop-filter: blur(10px);
}

.tm-theme-preset-list {
    display: grid;
    gap: .55rem;
}

.tm-theme-preset button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .7rem;
    border: 1px solid var(--tm-border);
    border-radius: calc(var(--tm-radius) - 3px);
    background: var(--tm-surface-2);
    color: var(--tm-text);
    text-align: left;
}

.tm-theme-preset button:hover,
.tm-theme-preset button:focus-visible {
    border-color: var(--tm-primary);
    color: var(--tm-primary);
}

.tm-theme-preset button > span:nth-child(2) {
    display: grid;
}

.tm-theme-preset small {
    color: var(--tm-text-muted);
    font-size: .74rem;
}

.tm-theme-preset-swatches {
    display: flex;
    overflow: hidden;
    width: 48px;
    height: 34px;
    border: 1px solid var(--tm-border);
    border-radius: 8px;
}

.tm-theme-preset-swatches i {
    flex: 1;
    background: var(--preset-colour);
}

/* Compact administration overview */
.tm-admin-attention-grid,
.tm-admin-core-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.tm-admin-attention-card,
.tm-admin-core-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
    text-decoration: none;
}

.tm-admin-attention-card > i,
.tm-admin-core-card > i {
    flex: 0 0 auto;
    color: var(--tm-primary);
    font-size: 1.4rem;
}

.tm-admin-attention-card > span,
.tm-admin-core-card > span {
    display: grid;
    min-width: 0;
}

.tm-admin-attention-card small,
.tm-admin-core-card small {
    color: var(--tm-text-muted);
}

.tm-admin-attention-card strong {
    font-size: 1.35rem;
}

.tm-admin-core-card strong {
    font-size: .96rem;
}

.tm-admin-overview-collapsible > summary {
    display: flex;
    align-items: center;
    gap: .65rem;
    cursor: pointer;
    list-style: none;
}

.tm-admin-overview-collapsible > summary::-webkit-details-marker {
    display: none;
}

.tm-admin-overview-collapsible > summary .bi-chevron-down {
    margin-left: auto;
    transition: transform .18s ease;
}

.tm-admin-overview-collapsible[open] > summary .bi-chevron-down {
    transform: rotate(180deg);
}

@media (max-width: 1199.98px) {
    .tm-admin-nav {
        top: 74px;
    }

    .tm-theme-admin-sidebar {
        position: static;
    }

    .tm-admin-attention-grid,
    .tm-admin-core-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .tm-admin-nav {
        position: relative;
        top: auto;
    }

    .tm-admin-nav-search {
        flex-basis: auto;
        width: 100%;
    }

    .tm-theme-colour-grid,
    .tm-admin-attention-grid,
    .tm-admin-core-grid {
        grid-template-columns: 1fr;
    }

    .tm-theme-save-bar {
        position: static;
        align-items: stretch;
        flex-direction: column;
    }

    .tm-theme-save-bar .btn {
        width: 100%;
    }
}

/* ---- community.css ---- */
.tm-community-page {
    --tm-community-gap: 1.25rem;
}

.tm-community-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.35rem, 3vw, 2.25rem);
    margin-bottom: 1.5rem;
    border: 1px solid var(--tm-border);
    border-radius: calc(var(--tm-radius) + 4px);
    background:
        radial-gradient(circle at top right, rgba(255, 122, 24, .18), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
    box-shadow: var(--tm-shadow);
}

.tm-community-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--tm-text-muted);
}

.tm-community-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    flex: 0 0 auto;
}

.tm-community-composer {
    padding: 1.15rem;
}

.tm-community-composer-heading,
.tm-community-actor {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.tm-community-composer-heading {
    margin-bottom: 1rem;
}

.tm-community-composer-heading img,
.tm-community-avatar {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(255, 122, 24, .45);
    background: var(--tm-surface-2);
}

.tm-community-composer-textarea {
    min-height: 118px;
    resize: vertical;
}

.tm-community-composer-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(180px, .7fr) auto;
    gap: .85rem;
    align-items: end;
    margin-top: 1rem;
}

.tm-community-composer-submit {
    display: flex;
    justify-content: flex-end;
}

.tm-community-tabs {
    display: flex;
    gap: .45rem;
    padding: .4rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    background: rgba(25, 29, 34, .82);
    scrollbar-width: thin;
}

.tm-community-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: max-content;
    padding: .7rem 1rem;
    border-radius: 10px;
    color: var(--tm-text-muted);
    text-decoration: none;
    font-weight: 700;
    transition: var(--tm-transition);
}

.tm-community-tabs a:hover,
.tm-community-tabs a.is-active {
    color: var(--tm-text);
    background: var(--tm-surface-2);
}

.tm-community-tabs a.is-active {
    box-shadow: inset 0 0 0 1px rgba(255, 122, 24, .35);
}

.tm-community-feed {
    display: grid;
    gap: var(--tm-community-gap);
}

.tm-community-post {
    position: relative;
    overflow: visible;
    padding: 1rem;
}

.tm-community-post.is-pinned {
    border-color: rgba(255, 122, 24, .58);
    box-shadow: 0 16px 40px rgba(255, 122, 24, .08);
}

.tm-community-post.is-featured::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: var(--tm-radius) 0 0 var(--tm-radius);
    background: linear-gradient(var(--tm-primary), #ffc107);
}

.tm-community-post-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.tm-community-avatar-link {
    flex: 0 0 auto;
}

.tm-community-actor-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    min-width: 0;
}

.tm-community-menu {
    position: relative;
    flex: 0 0 auto;
}

.tm-community-menu > summary {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--tm-text-muted);
    cursor: pointer;
    list-style: none;
}

.tm-community-menu > summary::-webkit-details-marker {
    display: none;
}

.tm-community-menu[open] > summary,
.tm-community-menu > summary:hover {
    color: var(--tm-text);
    background: var(--tm-surface-2);
}

.tm-community-menu-popover {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    z-index: 20;
    width: min(270px, 82vw);
    padding: .45rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: #171b20;
    box-shadow: var(--tm-shadow);
}

.tm-community-menu-popover > a,
.tm-community-menu-popover > form > button,
.tm-community-report-details > summary {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .65rem .75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tm-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.tm-community-menu-popover > a:hover,
.tm-community-menu-popover > form > button:hover,
.tm-community-report-details > summary:hover {
    background: var(--tm-surface-2);
}

.tm-community-report-details > summary {
    list-style: none;
}

.tm-community-report-details > summary::-webkit-details-marker {
    display: none;
}

.tm-community-post-copy {
    margin: 1rem 0;
    font-size: 1.02rem;
    line-height: 1.68;
    overflow-wrap: anywhere;
}

.tm-community-attachment {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: .75rem;
    margin-top: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 13px;
    background: rgba(35, 41, 48, .55);
}

.tm-community-attachment-artwork {
    display: block;
    width: 112px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background: var(--tm-surface-2);
}

.tm-community-attachment-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-community-attachment-copy {
    min-width: 0;
}

.tm-community-attachment-copy h3 {
    margin: .15rem 0 .2rem;
    font-size: 1rem;
}

.tm-community-attachment-copy p {
    margin: .55rem 0 0;
    color: var(--tm-text-muted);
    font-size: .9rem;
}

.tm-community-attachment-label {
    color: var(--tm-primary);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.tm-community-attachment-play {
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 1.25rem;
}

.tm-community-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .85rem;
    margin-top: 1rem;
    border-top: 1px solid var(--tm-border);
}

.tm-community-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.tm-community-reactions form {
    margin: 0;
}

.tm-community-reaction,
.tm-community-comment-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 34px;
    padding: .38rem .62rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--tm-text-muted);
    text-decoration: none;
    transition: var(--tm-transition);
}

.tm-community-reaction:hover:not(:disabled),
.tm-community-comment-link:hover,
.tm-community-reaction.is-active {
    color: var(--tm-text);
    border-color: var(--tm-border);
    background: var(--tm-surface-2);
}

.tm-community-reaction.is-active {
    color: var(--tm-primary);
    border-color: rgba(255, 122, 24, .42);
}

.tm-community-reaction:disabled {
    opacity: .62;
    cursor: default;
}

.tm-community-comments {
    display: grid;
    gap: .85rem;
    padding-top: 1rem;
    margin-top: .8rem;
    border-top: 1px solid var(--tm-border);
}

.tm-community-view-comments {
    color: var(--tm-text-muted);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
}

.tm-community-view-comments:hover {
    color: var(--tm-primary);
}

.tm-community-comment {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: .65rem;
    padding: .7rem;
    border-radius: 10px;
    background: rgba(35, 41, 48, .5);
}

.tm-community-comment > img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 50%;
}

.tm-community-comment-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .15rem;
    font-size: .9rem;
}

.tm-community-comment-heading time {
    color: var(--tm-text-muted);
    font-size: .76rem;
}

.tm-community-comment-report > summary {
    width: max-content;
    margin-top: .25rem;
    color: var(--tm-text-muted);
    font-size: .78rem;
    cursor: pointer;
}

.tm-community-comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: end;
}

.tm-community-edit-panel {
    padding-top: .85rem;
    margin-top: .85rem;
    border-top: 1px dashed var(--tm-border);
}

.tm-community-edit-panel > summary {
    color: var(--tm-text-muted);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 700;
}

.tm-community-activity-wrap .tm-activity-card {
    margin: 0;
}

.tm-community-empty {
    display: grid;
    place-items: center;
    gap: .55rem;
    min-height: 240px;
    padding: 2rem;
    text-align: center;
}

.tm-community-empty > i {
    color: var(--tm-primary);
    font-size: 2.4rem;
}

.tm-community-empty span {
    max-width: 520px;
    color: var(--tm-text-muted);
}

.tm-community-compact-notice {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1rem;
    color: var(--tm-text-muted);
}

.tm-community-sidebar-stack {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 96px;
}

.tm-community-sidebar-card {
    padding: 1rem;
}

.tm-community-sidebar-card h2 {
    margin: .65rem 0 .55rem;
    font-size: 1rem;
}

.tm-community-sidebar-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--tm-primary);
    background: rgba(255, 122, 24, .12);
}

.tm-community-rules {
    color: var(--tm-text-muted);
    font-size: .9rem;
    line-height: 1.65;
}

.tm-community-sidebar-status {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--tm-success);
    font-size: .9rem;
}

.tm-community-pagination {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
}

.tm-community-single-column {
    max-width: 820px;
    margin: 0 auto;
}

.tm-community-admin-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .85rem;
}

.tm-community-admin-stats .tm-card {
    display: grid;
    gap: .2rem;
    padding: 1rem;
}

.tm-community-admin-stats i {
    color: var(--tm-primary);
    font-size: 1.2rem;
}

.tm-community-admin-stats strong {
    font-size: 1.55rem;
}

.tm-community-admin-stats span {
    color: var(--tm-text-muted);
    font-size: .82rem;
}

.tm-community-admin-switches {
    display: grid;
    gap: .6rem;
}

.tm-community-admin-switch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    align-items: flex-start;
    padding: .75rem;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    cursor: pointer;
    background: rgba(35, 41, 48, .35);
}

.tm-community-admin-switch input {
    margin-top: .2rem;
}

.tm-community-admin-switch span {
    display: grid;
    gap: .1rem;
}

.tm-community-admin-switch small {
    color: var(--tm-text-muted);
}

.tm-community-admin-list {
    display: grid;
    gap: .9rem;
}

.tm-community-admin-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: rgba(35, 41, 48, .42);
}

.tm-community-admin-item-main {
    min-width: 0;
}

.tm-community-admin-body {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.tm-community-admin-actions {
    display: flex;
    align-content: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .4rem;
}

.tm-community-admin-actions form {
    margin: 0;
}

.tm-community-admin-actions details {
    position: relative;
}

.tm-community-admin-actions details > summary {
    list-style: none;
}

.tm-community-admin-actions details > summary::-webkit-details-marker {
    display: none;
}

.tm-community-admin-note-form {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 10;
    display: grid;
    gap: .5rem;
    width: 300px;
    padding: .75rem;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    background: #171b20;
    box-shadow: var(--tm-shadow);
}

.tm-community-admin-empty {
    padding: 1.25rem;
    border: 1px dashed var(--tm-border);
    border-radius: 10px;
    color: var(--tm-text-muted);
    text-align: center;
}

@media (max-width: 1199.98px) {
    .tm-community-sidebar-stack {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tm-community-admin-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .tm-community-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .tm-community-hero-actions,
    .tm-community-hero-actions .btn {
        width: 100%;
    }

    .tm-community-composer-controls {
        grid-template-columns: 1fr;
    }

    .tm-community-composer-submit,
    .tm-community-composer-submit .btn {
        width: 100%;
    }

    .tm-community-attachment {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .tm-community-attachment-artwork {
        width: 78px;
    }

    .tm-community-attachment-play {
        position: absolute;
        left: 50px;
        bottom: .45rem;
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .tm-community-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .tm-community-comment-form {
        grid-template-columns: 1fr;
    }

    .tm-community-sidebar-stack,
    .tm-community-admin-stats {
        grid-template-columns: 1fr;
    }

    .tm-community-admin-item {
        grid-template-columns: 1fr;
    }

    .tm-community-admin-actions {
        justify-content: flex-start;
    }

    .tm-community-admin-note-form {
        right: auto;
        left: 0;
        width: min(300px, 82vw);
    }
}

@media (max-width: 479.98px) {
    .tm-community-post {
        padding: .85rem;
    }

    .tm-community-avatar,
    .tm-community-composer-heading img {
        width: 40px;
        height: 40px;
    }

    .tm-community-comment-link span {
        display: none;
    }

    .tm-community-reaction {
        padding-inline: .52rem;
    }
}

/* ---- groups.css ---- */
.tm-groups-page {
    --tm-group-surface: rgba(22, 27, 34, .86);
    --tm-group-surface-strong: rgba(31, 38, 48, .96);
    --tm-group-border: rgba(255, 255, 255, .1);
    --tm-group-muted: rgba(255, 255, 255, .63);
    --tm-group-accent-soft: color-mix(in srgb, var(--tm-primary) 18%, transparent);
    max-width: 1240px;
    margin: 0 auto;
}

.tm-groups-hero,
.tm-group-profile-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: 2rem;
    border: 1px solid var(--tm-group-border);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 5% 10%, color-mix(in srgb, var(--tm-primary) 28%, transparent), transparent 34%),
        radial-gradient(circle at 95% 10%, rgba(111, 66, 193, .2), transparent 30%),
        linear-gradient(135deg, rgba(22, 27, 34, .98), rgba(12, 15, 20, .94));
    box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
}

.tm-groups-hero > div:first-child { max-width: 760px; }
.tm-groups-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .75rem;
    color: var(--tm-primary);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.tm-groups-hero h1,
.tm-group-profile-copy h1,
.tm-groups-form-intro h1,
.tm-group-manage-heading h1 {
    margin: 0 0 .75rem;
    font-size: clamp(2rem, 4vw, 3.7rem);
    font-weight: 800;
    line-height: 1.04;
}
.tm-groups-hero p,
.tm-group-profile-copy > p,
.tm-groups-form-intro > p,
.tm-group-manage-heading p {
    margin: 0;
    color: var(--tm-group-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}
.tm-groups-hero-actions,
.tm-group-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
}
.tm-group-profile-actions { min-width: 190px; }
.tm-group-profile-actions form { margin: 0; }

.tm-groups-section,
.tm-groups-directory { margin-bottom: 2.4rem; }
.tm-groups-section-heading,
.tm-group-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.tm-groups-section-heading h2,
.tm-group-panel-heading h2 {
    margin: .15rem 0 0;
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: 800;
}

.tm-groups-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.tm-groups-grid.is-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tm-group-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--tm-group-border);
    border-radius: 1rem;
    background: var(--tm-group-surface);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tm-group-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tm-primary) 55%, var(--tm-group-border));
    box-shadow: 0 22px 44px rgba(0, 0, 0, .28);
}
.tm-group-card.is-featured { border-color: color-mix(in srgb, var(--tm-primary) 46%, var(--tm-group-border)); }
.tm-group-card-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 132px;
    color: #fff;
    font-size: 3rem;
    font-weight: 900;
    text-decoration: none;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .2), transparent 22%),
        linear-gradient(135deg, color-mix(in srgb, var(--tm-primary) 75%, #222), #27213f);
}
.tm-group-card-featured {
    position: absolute;
    top: .7rem;
    right: .7rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .62rem;
    border-radius: 999px;
    background: rgba(10, 12, 16, .82);
    font-size: .72rem;
    font-weight: 800;
}
.tm-group-card-body { padding: 1rem; }
.tm-group-card-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .75rem;
    color: var(--tm-group-muted);
    font-size: .72rem;
    font-weight: 700;
}
.tm-group-card h3 { margin: .6rem 0 .45rem; font-size: 1.12rem; font-weight: 800; }
.tm-group-card h3 a { color: inherit; text-decoration: none; }
.tm-group-card p {
    min-height: 2.9rem;
    margin: 0 0 .85rem;
    color: var(--tm-group-muted);
    font-size: .87rem;
    line-height: 1.6;
}
.tm-group-card-stats,
.tm-group-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .9rem;
    color: var(--tm-group-muted);
    font-size: .78rem;
}
.tm-group-card-badges { margin-top: .75rem; }

.tm-groups-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, .42fr) minmax(180px, .4fr) auto;
    gap: .85rem;
    align-items: end;
    padding: 1rem;
    margin-bottom: 1.2rem;
    border: 1px solid var(--tm-group-border);
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 46%),
        rgba(15, 18, 24, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 14px 34px rgba(0, 0, 0, .16);
}
.tm-groups-filter-field {
    display: grid;
    gap: .42rem;
    min-width: 0;
}
.tm-groups-filter-field > label {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    margin: 0;
    color: var(--tm-group-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tm-groups-filter-field > label i { color: var(--tm-primary); }
.tm-groups-search,
.tm-groups-select { position: relative; }
.tm-groups-search > i {
    position: absolute;
    z-index: 2;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tm-group-muted);
    pointer-events: none;
}
.tm-groups-search input,
.tm-groups-select .form-select {
    width: 100%;
    min-height: 45px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: .68rem;
    color: #fff;
    background-color: rgba(255, 255, 255, .045);
    box-shadow: none;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.tm-groups-search input { padding: .7rem .9rem .7rem 2.55rem; }
.tm-groups-select .form-select { padding-top: .7rem; padding-bottom: .7rem; }
.tm-groups-search input::placeholder { color: rgba(255, 255, 255, .42); }
.tm-groups-search input:hover,
.tm-groups-select .form-select:hover { border-color: rgba(255, 255, 255, .22); }
.tm-groups-search input:focus,
.tm-groups-select .form-select:focus {
    outline: 0;
    border-color: color-mix(in srgb, var(--tm-primary) 75%, #fff 8%);
    background-color: rgba(255, 255, 255, .065);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tm-primary) 18%, transparent);
}
.tm-groups-select .form-select option { color: #fff; background: #151a22; }
.tm-groups-filter-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: .35rem;
    min-width: 142px;
}
.tm-groups-filter-actions .btn {
    min-height: 45px;
    border-radius: .68rem;
    white-space: nowrap;
}
.tm-groups-filter-clear {
    color: var(--tm-group-muted);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.tm-groups-filter-clear:hover { color: #fff; }
.tm-groups-empty,
.tm-group-manage-empty {
    padding: 3rem 1.25rem;
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 1rem;
    color: var(--tm-group-muted);
    text-align: center;
    background: rgba(255, 255, 255, .025);
}
.tm-groups-empty > i { display: block; margin-bottom: .7rem; font-size: 2.4rem; color: var(--tm-primary); }
.tm-groups-empty h3 { color: #fff; font-size: 1.25rem; }
.tm-groups-empty p { margin-bottom: 0; }

.tm-groups-form-shell {
    display: grid;
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
    gap: 2rem;
    align-items: start;
}
.tm-groups-form-intro { position: sticky; top: 100px; padding: 1rem 0; }
.tm-groups-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.6rem;
    color: var(--tm-group-muted);
    text-decoration: none;
}
.tm-groups-back:hover { color: #fff; }
.tm-groups-form-tips { display: grid; gap: .75rem; margin-top: 1.5rem; }
.tm-groups-form-tips div { display: flex; gap: .65rem; color: var(--tm-group-muted); }
.tm-groups-form-tips i { color: var(--tm-primary); }
.tm-groups-form-card { padding: clamp(1.2rem, 3vw, 2rem); }

.tm-group-profile-hero { justify-content: flex-start; }
.tm-group-profile-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: clamp(90px, 12vw, 140px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 1.3rem;
    color: #fff;
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 900;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tm-primary) 80%, #222), #352850);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 20px 40px rgba(0, 0, 0, .22);
}
.tm-group-profile-copy { min-width: 0; flex: 1 1 auto; }
.tm-group-profile-badges,
.tm-group-profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .9rem;
}
.tm-group-profile-badges span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .58rem;
    border-radius: 999px;
    color: var(--tm-group-muted);
    background: rgba(255, 255, 255, .055);
    font-size: .74rem;
    font-weight: 750;
}
.tm-group-profile-badges .is-featured { color: #ffd86b; }
.tm-group-profile-badges .is-status { color: #ffdc8a; }
.tm-group-profile-copy h1 { margin-top: .65rem; }
.tm-group-profile-stats { margin-top: 1rem; color: var(--tm-group-muted); font-size: .85rem; }
.tm-group-profile-stats strong { color: #fff; }

.tm-group-tabs,
.tm-group-manage-nav {
    display: flex;
    gap: .5rem;
    padding: .55rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--tm-group-border);
    border-radius: .9rem;
    background: rgba(14, 17, 22, .84);
    scrollbar-width: thin;
}
.tm-group-tabs a,
.tm-group-manage-nav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 42px;
    padding: .65rem .9rem;
    border-radius: .65rem;
    color: var(--tm-group-muted);
    font-weight: 750;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.tm-group-tabs a:hover,
.tm-group-tabs a.is-active,
.tm-group-manage-nav a:hover { color: #fff; background: color-mix(in srgb, var(--tm-primary) 18%, rgba(255, 255, 255, .04)); }
.tm-group-tabs small,
.tm-group-manage-nav span {
    display: inline-grid;
    place-items: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    font-size: .69rem;
}

.tm-group-tab-panel {
    min-height: 280px;
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid var(--tm-group-border);
    border-radius: 1rem;
    background: rgba(15, 18, 24, .72);
}
.tm-group-composer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid color-mix(in srgb, var(--tm-primary) 36%, var(--tm-group-border));
    border-radius: .9rem;
    background: var(--tm-group-accent-soft);
}
.tm-group-composer-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    background: var(--tm-primary);
}
.tm-group-composer textarea {
    width: 100%;
    resize: vertical;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
}
.tm-group-composer-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .6rem; color: var(--tm-group-muted); font-size: .75rem; }
.tm-group-join-prompt {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: .85rem;
    color: var(--tm-group-muted);
    background: rgba(255, 255, 255, .04);
}
.tm-group-join-prompt > i { font-size: 1.6rem; color: var(--tm-primary); }
.tm-group-join-prompt strong,
.tm-group-join-prompt span { display: block; }
.tm-group-join-prompt strong { color: #fff; }

.tm-group-post-list { display: grid; gap: .9rem; }
.tm-group-post {
    overflow: visible;
    border: 1px solid var(--tm-group-border);
    border-radius: .9rem;
    background: var(--tm-group-surface);
}
.tm-group-post.is-pinned { border-color: color-mix(in srgb, var(--tm-primary) 55%, var(--tm-group-border)); }
.tm-group-post.is-moderation { opacity: .84; border-style: dashed; }
.tm-group-post > header {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1rem .4rem;
}
.tm-group-post > header img,
.tm-group-comment img,
.tm-group-member-card img,
.tm-group-manage-list img {
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, .06);
}
.tm-group-post > header > div:nth-child(2) { min-width: 0; }
.tm-group-post > header strong,
.tm-group-post > header span { display: block; }
.tm-group-post > header span { color: var(--tm-group-muted); font-size: .75rem; }
.tm-group-post-labels { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.tm-group-post-labels span {
    display: inline-flex !important;
    align-items: center;
    gap: .3rem;
    padding: .3rem .5rem;
    border-radius: 999px;
    color: #fff !important;
    background: color-mix(in srgb, var(--tm-primary) 28%, transparent);
    font-size: .68rem !important;
    font-weight: 800;
}
.tm-group-post-labels .is-status { background: rgba(255, 193, 7, .18); }
.tm-group-post-body { padding: .85rem 1rem 1rem; line-height: 1.72; overflow-wrap: anywhere; }
.tm-group-post-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .65rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: var(--tm-group-muted);
    font-size: .78rem;
}
.tm-group-post-actions > span,
.tm-group-post-actions button,
.tm-group-reaction-picker summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 34px;
    padding: .38rem .62rem;
    border: 0;
    border-radius: 999px;
    color: inherit;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}
.tm-group-post-actions button:hover,
.tm-group-reaction-picker summary:hover,
.tm-group-reaction-picker summary.is-selected { color: #fff; background: rgba(255, 255, 255, .07); }
.tm-group-reaction-picker { position: relative; }
.tm-group-reaction-picker summary { list-style: none; }
.tm-group-reaction-picker summary::-webkit-details-marker { display: none; }
.tm-group-reaction-picker > div {
    position: absolute;
    z-index: 20;
    bottom: calc(100% + .45rem);
    left: 0;
    display: flex;
    gap: .25rem;
    min-width: max-content;
    padding: .4rem;
    border: 1px solid var(--tm-group-border);
    border-radius: .75rem;
    background: #11161d;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .4);
}
.tm-group-reaction-picker > div form { margin: 0; }
.tm-group-reaction-picker > div button { border-radius: .55rem; }
.tm-group-reaction-picker > div button.is-selected { color: var(--tm-primary); background: var(--tm-group-accent-soft); }

.tm-group-comments { display: grid; gap: .55rem; padding: .8rem 1rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.tm-group-comment { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: start; }
.tm-group-comment > div { padding: .55rem .7rem; border-radius: .75rem; background: rgba(255, 255, 255, .045); }
.tm-group-comment > div > div { display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; }
.tm-group-comment > div span { color: var(--tm-group-muted); font-size: .68rem; }
.tm-group-comment p { margin: .2rem 0 0; font-size: .85rem; line-height: 1.55; }
.tm-group-comment > form button { border: 0; color: var(--tm-group-muted); background: transparent; }
.tm-group-comment-form { display: grid; grid-template-columns: 1fr auto; gap: .55rem; padding: .75rem 1rem 1rem; }
.tm-group-comment-form input { min-width: 0; padding: .55rem .75rem; border: 1px solid rgba(255, 255, 255, .11); border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .045); }

.tm-group-submit-track { position: relative; }
.tm-group-submit-track > summary { list-style: none; }
.tm-group-submit-track > summary::-webkit-details-marker { display: none; }
.tm-group-submit-track > form {
    position: absolute;
    z-index: 25;
    top: calc(100% + .5rem);
    right: 0;
    width: min(330px, 85vw);
    padding: 1rem;
    border: 1px solid var(--tm-group-border);
    border-radius: .85rem;
    background: #11161d;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .44);
}

.tm-group-member-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.tm-group-member-card {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem;
    border: 1px solid var(--tm-group-border);
    border-radius: .85rem;
    background: var(--tm-group-surface);
}
.tm-group-member-card > div { min-width: 0; flex: 1; }
.tm-group-member-card strong,
.tm-group-member-card span { display: block; }
.tm-group-member-card a { color: #fff; text-decoration: none; }
.tm-group-member-card > div span { color: var(--tm-group-muted); font-size: .75rem; }
.tm-group-role {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: .3rem .5rem;
    border-radius: 999px;
    color: var(--tm-group-muted);
    background: rgba(255, 255, 255, .07);
    font-size: .68rem !important;
    font-weight: 800;
}
.tm-group-role.is-owner { color: #ffd66b; background: rgba(255, 193, 7, .14); }
.tm-group-role.is-moderator { color: #95caff; background: rgba(13, 110, 253, .16); }
.tm-group-about-grid { display: grid; grid-template-columns: 1fr 1fr minmax(240px, .6fr); gap: 1rem; }
.tm-group-long-copy { color: var(--tm-group-muted); line-height: 1.75; }
.tm-group-facts dl { margin: 0; }
.tm-group-facts dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.tm-group-facts dl div:last-child { border-bottom: 0; }
.tm-group-facts dt { color: var(--tm-group-muted); font-weight: 600; }
.tm-group-facts dd { margin: 0; text-align: right; }

.tm-group-manage-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.tm-group-manage-heading h1 { font-size: clamp(2rem, 4vw, 3rem); }
.tm-group-manage-section { margin-bottom: 1rem; scroll-margin-top: 100px; }
.tm-group-manage-list,
.tm-group-moderation-list { display: grid; gap: .65rem; }
.tm-group-manage-list > article,
.tm-group-moderation-list > article {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .025);
}
.tm-group-manage-list > article > div:nth-child(2),
.tm-group-moderation-copy { min-width: 0; flex: 1; }
.tm-group-manage-list strong,
.tm-group-manage-list span { display: block; }
.tm-group-manage-list span,
.tm-group-moderation-copy > span { color: var(--tm-group-muted); font-size: .75rem; }
.tm-group-manage-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.tm-group-manage-actions form { margin: 0; }
.tm-group-moderation-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.tm-group-moderation-copy p { margin: .5rem 0 .35rem; color: var(--tm-group-muted); line-height: 1.55; }

.tm-groups-admin-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
}
.tm-groups-admin-stats .tm-card { display: grid; gap: .35rem; padding: 1rem; }
.tm-groups-admin-stats i { color: var(--tm-primary); font-size: 1.25rem; }
.tm-groups-admin-stats strong { font-size: 1.45rem; }
.tm-groups-admin-stats span { color: var(--tm-group-muted); font-size: .72rem; }
.tm-groups-admin-switches { display: grid; gap: .5rem; }
.tm-groups-admin-switch {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .65rem;
    align-items: start;
    padding: .7rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .7rem;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
}
.tm-groups-admin-switch strong,
.tm-groups-admin-switch small { display: block; }
.tm-groups-admin-switch small { color: var(--tm-group-muted); line-height: 1.45; }
.tm-groups-admin-list { display: grid; gap: .75rem; }
.tm-groups-admin-list > article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(210px, auto);
    gap: .85rem;
    align-items: start;
    padding: .9rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .85rem;
    background: rgba(255, 255, 255, .025);
}
.tm-groups-admin-group-mark {
    display: grid;
    place-items: center;
    width: 52px;
    aspect-ratio: 1;
    border-radius: .75rem;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--tm-primary), #493b72);
}
.tm-groups-admin-group-copy > div { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tm-groups-admin-group-copy p { margin: .45rem 0; color: var(--tm-group-muted); }
.tm-groups-admin-group-copy > span { color: var(--tm-group-muted); font-size: .75rem; }
.tm-groups-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.tm-groups-admin-actions form { margin: 0; }
.tm-groups-admin-actions details { position: relative; }
.tm-groups-admin-actions summary { list-style: none; }
.tm-groups-admin-actions summary::-webkit-details-marker { display: none; }
.tm-groups-admin-note {
    position: absolute;
    z-index: 20;
    top: calc(100% + .4rem);
    right: 0;
    width: 280px;
    padding: .75rem;
    border: 1px solid var(--tm-group-border);
    border-radius: .7rem;
    background: #11161d;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .4);
}

@media (max-width: 1100px) {
    .tm-groups-grid,
    .tm-groups-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tm-group-about-grid { grid-template-columns: 1fr 1fr; }
    .tm-group-about-grid .tm-group-facts { grid-column: 1 / -1; }
    .tm-groups-admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tm-groups-admin-list > article { grid-template-columns: auto minmax(0, 1fr); }
    .tm-groups-admin-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 820px) {
    .tm-groups-hero,
    .tm-group-profile-hero,
    .tm-group-manage-heading { align-items: flex-start; flex-direction: column; }
    .tm-groups-hero-actions,
    .tm-group-profile-actions { width: 100%; justify-content: flex-start; }
    .tm-groups-filters { grid-template-columns: 1fr 1fr; }
    .tm-groups-filter-search,
    .tm-groups-filter-actions { grid-column: 1 / -1; }
    .tm-groups-form-shell { grid-template-columns: 1fr; }
    .tm-groups-form-intro { position: static; }
    .tm-group-member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tm-group-profile-mark { width: 92px; }
}

@media (max-width: 620px) {
    .tm-groups-grid,
    .tm-groups-grid.is-compact,
    .tm-group-member-grid,
    .tm-group-about-grid,
    .tm-groups-admin-stats { grid-template-columns: 1fr; }
    .tm-groups-filters { grid-template-columns: 1fr; }
    .tm-groups-filter-search,
    .tm-groups-filter-actions { grid-column: auto; }
    .tm-group-profile-hero { padding: 1.15rem; }
    .tm-group-tabs a span { display: none; }
    .tm-group-tabs a { flex: 1 0 auto; }
    .tm-group-post > header { align-items: flex-start; }
    .tm-group-post-labels { width: 100%; margin-left: 0; }
    .tm-group-manage-list > article,
    .tm-group-moderation-list > article { align-items: flex-start; flex-wrap: wrap; }
    .tm-group-manage-actions { width: 100%; justify-content: flex-start; }
    .tm-groups-admin-list > article { grid-template-columns: 1fr; }
    .tm-groups-admin-group-mark { width: 44px; }
    .tm-group-comment { grid-template-columns: auto 1fr; }
    .tm-group-comment > form { grid-column: 2; }
}

.tm-group-report,
.tm-group-inline-report,
.tm-group-comment-report { position: relative; }
.tm-group-report > summary,
.tm-group-inline-report > summary,
.tm-group-comment-report > summary { list-style: none; cursor: pointer; }
.tm-group-report > summary::-webkit-details-marker,
.tm-group-inline-report > summary::-webkit-details-marker,
.tm-group-comment-report > summary::-webkit-details-marker { display: none; }
.tm-group-report > form,
.tm-group-inline-report > form,
.tm-group-comment-report > form {
    position: absolute;
    z-index: 35;
    top: calc(100% + .45rem);
    right: 0;
    display: grid;
    gap: .55rem;
    width: min(300px, 85vw);
    padding: .8rem;
    border: 1px solid var(--tm-group-border);
    border-radius: .75rem;
    background: #11161d;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .45);
}
.tm-group-inline-report > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 34px;
    padding: .38rem .62rem;
    border-radius: 999px;
    color: var(--tm-group-muted);
}
.tm-group-inline-report > summary:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.tm-group-comment-report > summary { color: var(--tm-group-muted); }
.tm-group-comment-report > form { top: 1.6rem; }

/* Phase 40: Official DJ Teams */
.tm-teams-page,
.tm-team-profile {
    --tm-team-accent: #e4572e;
    --tm-team-gold: #f0c419;
    --tm-team-panel: rgba(17, 20, 27, .92);
}

.tm-teams-hero,
.tm-team-profile-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--tm-group-border);
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 15% 10%, rgba(228, 87, 46, .16), transparent 34%),
        linear-gradient(135deg, rgba(24, 18, 35, .97), rgba(9, 11, 16, .97));
    overflow: hidden;
}

.tm-teams-hero h1,
.tm-team-profile-heading h1 {
    margin: .35rem 0 .7rem;
    font-size: clamp(2.35rem, 6vw, 4.8rem);
    font-weight: 900;
    letter-spacing: -.055em;
}

.tm-teams-hero p,
.tm-team-tagline {
    max-width: 760px;
    margin: 0;
    color: var(--tm-group-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.tm-teams-directory { margin-top: 2rem; }
.tm-teams-filter {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0 2rem;
    padding: .85rem 1.1rem;
    border: 1px solid var(--tm-group-border);
    border-radius: 999px;
    background: rgba(16, 18, 24, .88);
}
.tm-teams-filter i { color: var(--tm-group-muted); }
.tm-teams-filter input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
}
.tm-teams-filter input::placeholder { color: #7f8797; }
.tm-teams-filter a { color: #fff; font-size: .85rem; text-decoration: none; }

.tm-teams-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.tm-teams-grid.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tm-team-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 1.2rem;
    min-height: 220px;
    padding: 1.45rem;
    border: 1px solid var(--tm-group-border);
    border-radius: 1.35rem;
    background:
        linear-gradient(135deg, rgba(18, 20, 27, .97), rgba(11, 13, 18, .97));
    box-shadow: inset 0 -2px 0 rgba(228, 87, 46, .35);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tm-team-card:hover {
    transform: translateY(-3px);
    border-color: rgba(228, 87, 46, .5);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .25), inset 0 -2px 0 rgba(228, 87, 46, .65);
}
.tm-team-card-logo {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1.25rem;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, rgba(228, 87, 46, .35), rgba(35, 42, 57, .95));
    font-size: 1.65rem;
    font-weight: 900;
    text-decoration: none;
}
.tm-team-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.tm-team-card-copy { display: flex; flex-direction: column; min-width: 0; }
.tm-team-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.tm-team-card h3 { margin: 0; font-size: 1.22rem; font-weight: 800; }
.tm-team-card h3 a { color: #fff; text-decoration: none; }
.tm-team-card-heading span {
    color: var(--tm-group-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.tm-team-card-arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--tm-team-gold);
    background: rgba(255, 255, 255, .045);
    text-decoration: none;
}
.tm-team-card p {
    flex: 1;
    margin: 1.35rem 0;
    color: var(--tm-group-muted);
    line-height: 1.65;
}
.tm-team-card-meta { display: flex; flex-wrap: wrap; gap: .65rem 1rem; color: #a7afbf; font-size: .82rem; }
.tm-team-card-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.tm-team-card-meta i { color: var(--tm-team-gold); }

.tm-team-profile > .tm-groups-back { display: inline-flex; margin-bottom: 1rem; }
.tm-team-profile-heading { justify-content: flex-start; }
.tm-team-profile-logo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(110px, 16vw, 180px);
    aspect-ratio: 1;
    border: 4px solid rgba(240, 196, 25, .35);
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, rgba(228, 87, 46, .48), #151a24);
    box-shadow: 0 0 0 7px rgba(240, 196, 25, .08), 0 22px 55px rgba(0, 0, 0, .35);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;
}
.tm-team-profile-logo img { width: 100%; height: 100%; object-fit: cover; }
.tm-team-profile-stats { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.tm-team-profile-stats span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .48rem .72rem;
    border: 1px solid var(--tm-group-border);
    border-radius: 999px;
    color: #c5cad3;
    background: rgba(255, 255, 255, .035);
    font-size: .82rem;
}
.tm-team-profile-stats .is-member { color: #92e6a7; border-color: rgba(74, 222, 128, .3); }

.tm-team-leader-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.75rem;
    margin: 2rem 0 3rem;
    padding: clamp(1.35rem, 3vw, 2.2rem);
    border: 1px solid rgba(240, 196, 25, .12);
    border-radius: 1.6rem;
    background:
        radial-gradient(circle at 82% 20%, rgba(240, 196, 25, .1), transparent 28%),
        linear-gradient(135deg, #111318, #15140d);
}
.tm-team-leader-avatar {
    width: clamp(104px, 15vw, 160px);
    aspect-ratio: 1;
    border: 4px solid rgba(240, 196, 25, .45);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 6px rgba(240, 196, 25, .08);
}
.tm-team-leader-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--tm-team-gold);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .17em;
    text-transform: uppercase;
}
.tm-team-leader-copy h2 { margin: .35rem 0 .7rem; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 950; font-style: italic; letter-spacing: -.05em; }
.tm-team-leader-copy p { max-width: 760px; color: var(--tm-group-muted); line-height: 1.65; }
.tm-team-leader-badge { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,.35)); }
.tm-team-leader-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; color: var(--tm-group-muted); }
.tm-team-leader-empty > i { font-size: 2.2rem; color: var(--tm-team-gold); }
.tm-team-leader-empty div { display: grid; }
.tm-team-leader-empty strong { color: #fff; }

.tm-team-section { margin: 0 0 3.2rem; }
.tm-team-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; padding-bottom: .85rem; border-bottom: 1px solid var(--tm-group-border); }
.tm-team-section-heading h2 { margin: .15rem 0 0; font-size: 1.45rem; }
.tm-team-member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.tm-team-member-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 92px;
    padding: 1rem;
    border: 1px solid var(--tm-group-border);
    border-radius: 1rem;
    background: rgba(20, 22, 28, .9);
}
.tm-team-member-avatar { position: relative; display: block; width: 58px; height: 58px; }
.tm-team-member-avatar img { width: 100%; height: 100%; border-radius: .9rem; object-fit: cover; }
.tm-team-member-avatar span { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border: 3px solid #15171d; border-radius: 50%; background: #52d273; }
.tm-team-member-card > div { display: grid; min-width: 0; }
.tm-team-member-card strong { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-team-member-card small { color: var(--tm-group-muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tm-team-member-badge { width: 38px; height: 38px; object-fit: contain; }
.tm-team-member-badge-fallback { display: grid; place-items: center; width: 38px; height: 38px; border-radius: .7rem; color: var(--tm-team-gold); background: rgba(240, 196, 25, .08); }
.tm-team-about { padding: clamp(1.25rem, 3vw, 2rem); }
.tm-team-about h2 { margin: .2rem 0 1rem; }
.tm-team-about p { margin: 0; color: var(--tm-group-muted); line-height: 1.75; }

.tm-profile-team-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: -.15rem 0 1rem;
}

.tm-profile-team-badge,
.tm-profile-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 36px;
    padding: .38rem .65rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.tm-profile-team-badge {
    border: 1px solid rgba(240, 196, 25, .22);
    color: #f4d95f;
    background: rgba(240, 196, 25, .06);
}

.tm-profile-team-badge:hover {
    border-color: rgba(240, 196, 25, .5);
    color: #fff0a6;
}

.tm-profile-team-badge img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.tm-profile-admin-badge {
    border: 1px solid rgba(228, 87, 46, .34);
    color: #ffad94;
    background: rgba(228, 87, 46, .1);
}

.tm-profile-admin-badge i {
    font-size: 1rem;
}

@media (min-width: 768px) {
    .tm-profile-team-badges {
        justify-content: flex-start;
    }
}

.tm-admin-teams-grid { display: grid; gap: 1rem; }
.tm-admin-team-card { padding: 1.2rem; border: 1px solid var(--tm-group-border); border-radius: 1.15rem; background: rgba(12, 15, 20, .78); }
.tm-admin-team-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; cursor: pointer; list-style: none; }
.tm-admin-team-summary::-webkit-details-marker { display: none; }
.tm-admin-team-logo { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 1rem; overflow: hidden; background: rgba(228, 87, 46, .14); font-weight: 900; }
.tm-admin-team-logo img { width: 100%; height: 100%; object-fit: cover; }
.tm-admin-team-summary-copy { display: grid; gap: .15rem; }
.tm-admin-team-summary-copy small { color: var(--tm-group-muted); }
.tm-admin-team-form { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--tm-group-border); }
.tm-admin-team-roster { display: grid; gap: .55rem; }
.tm-admin-team-member { display: flex; align-items: center; gap: .75rem; padding: .65rem; border: 1px solid var(--tm-group-border); border-radius: .8rem; background: rgba(255,255,255,.025); }
.tm-admin-team-member img { width: 38px; height: 38px; border-radius: .65rem; object-fit: cover; }
.tm-admin-team-member > div { flex: 1; display: grid; }
.tm-admin-team-member small { color: var(--tm-group-muted); }

@media (max-width: 980px) {
    .tm-teams-grid,
    .tm-teams-grid.is-compact { grid-template-columns: 1fr; }
    .tm-team-leader-card { grid-template-columns: auto 1fr; }
    .tm-team-leader-badge { grid-column: 2; }
}

@media (max-width: 720px) {
    .tm-teams-hero,
    .tm-team-profile-heading { align-items: flex-start; flex-direction: column; }
    .tm-team-card { grid-template-columns: 72px minmax(0, 1fr); padding: 1rem; }
    .tm-team-card-logo { width: 72px; height: 72px; }
    .tm-team-member-grid { grid-template-columns: 1fr; }
    .tm-team-leader-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .tm-team-leader-badge { grid-column: auto; }
    .tm-team-leader-copy .btn { width: 100%; }
    .tm-admin-team-summary { grid-template-columns: auto 1fr; }
    .tm-admin-team-summary > i { display: none; }
}

.tm-profile-personal-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 36px;
    padding: .38rem .65rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-color: color-mix(in srgb, var(--profile-badge-text, #fff) 26%, transparent);
    border-radius: 999px;
    color: var(--profile-badge-text, #fff);
    background: var(--profile-badge-bg, #2b3038);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
}

.tm-profile-personal-badge img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.tm-profile-personal-badge i {
    font-size: 1rem;
}

/* ---- collaborations.css ---- */
.tm-collab-page{--tm-collab-accent:var(--tm-primary,#7c5cff);--tm-collab-border:rgba(255,255,255,.1);--tm-collab-muted:rgba(255,255,255,.66);padding-bottom:1rem}.tm-collab-page h1,.tm-collab-page h2,.tm-collab-page h3{letter-spacing:-.025em}.tm-collab-hero,.tm-collab-project-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2rem;margin-bottom:2rem;border:1px solid var(--tm-collab-border);border-radius:1.35rem;background:radial-gradient(circle at 90% 0%,rgba(124,92,255,.26),transparent 35%),linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:0 24px 70px rgba(0,0,0,.2)}.tm-collab-hero:after,.tm-collab-project-hero:after{content:"";position:absolute;width:13rem;height:13rem;right:-5rem;bottom:-7rem;border:2rem solid rgba(124,92,255,.08);border-radius:50%;pointer-events:none}.tm-collab-hero h1,.tm-collab-project-hero h1{margin:.25rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:800}.tm-collab-hero p,.tm-collab-project-hero p{max-width:760px;margin:0;color:var(--tm-collab-muted);font-size:1.05rem}.tm-collab-hero-actions,.tm-collab-project-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.75rem;position:relative;z-index:1}.tm-collab-section-heading,.tm-collab-panel-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.1rem}.tm-collab-section-heading span,.tm-collab-panel-heading span{display:block;color:var(--tm-collab-accent);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em}.tm-collab-section-heading h2,.tm-collab-panel-heading h2{margin:.2rem 0 0;font-size:1.35rem;font-weight:800}.tm-collab-section-heading>a{font-size:.88rem;text-decoration:none;font-weight:700}.tm-collab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.tm-collab-card{display:flex;flex-direction:column;min-height:100%;border:1px solid var(--tm-collab-border);border-radius:1.15rem;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.017));overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.tm-collab-card:hover{transform:translateY(-3px);border-color:rgba(124,92,255,.5);box-shadow:0 18px 45px rgba(0,0,0,.22)}.tm-collab-card.is-featured{background:linear-gradient(150deg,rgba(124,92,255,.15),rgba(255,255,255,.022))}.tm-collab-card-main{display:flex;gap:1rem;padding:1.15rem 1.15rem .85rem;color:inherit;text-decoration:none;flex:1}.tm-collab-card-icon,.tm-collab-project-mark{display:grid;place-items:center;flex:0 0 auto;width:3.25rem;height:3.25rem;border-radius:1rem;background:rgba(124,92,255,.16);border:1px solid rgba(124,92,255,.28);color:var(--tm-collab-accent);font-size:1.25rem}.tm-collab-card-copy{min-width:0}.tm-collab-card-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.55rem}.tm-collab-card-copy h2{font-size:1.08rem;margin:0 0 .4rem}.tm-collab-card-copy p{margin:0 0 .75rem;color:var(--tm-collab-muted);font-size:.9rem;line-height:1.55}.tm-collab-card-owner{font-size:.78rem;color:rgba(255,255,255,.55)}.tm-collab-card-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .75rem;padding:.8rem 1.15rem;border-top:1px solid var(--tm-collab-border);font-size:.76rem;color:rgba(255,255,255,.72)}.tm-collab-card-stats span{display:flex;gap:.4rem;align-items:center}.tm-collab-card-stats i{color:var(--tm-collab-accent)}.tm-collab-card-genres{padding:0 1.15rem .95rem;font-size:.75rem;color:rgba(255,255,255,.53)}.tm-collab-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.tm-collab-mini-card{display:flex;gap:.75rem;align-items:center;padding:.85rem 1rem;border:1px solid var(--tm-collab-border);border-radius:1rem;background:rgba(255,255,255,.025);color:inherit;text-decoration:none}.tm-collab-mini-card:hover{border-color:rgba(124,92,255,.48)}.tm-collab-mini-icon{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:.75rem;background:rgba(124,92,255,.14);color:var(--tm-collab-accent)}.tm-collab-mini-card span:last-child{min-width:0;display:flex;flex-direction:column}.tm-collab-mini-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tm-collab-mini-card small{color:var(--tm-collab-muted);font-size:.74rem}.tm-collab-filter{display:grid;grid-template-columns:minmax(240px,1.5fr) repeat(3,minmax(145px,.75fr)) auto;gap:.85rem;align-items:end}.tm-collab-filter-field label{display:block;font-size:.72rem;font-weight:700;color:rgba(255,255,255,.64);margin-bottom:.35rem}.tm-collab-filter-search>div{position:relative}.tm-collab-filter-search i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);z-index:2}.tm-collab-filter-search input{padding-left:2.35rem}.tm-collab-filter-actions{display:flex;gap:.5rem}.tm-collab-empty{text-align:center;padding:3rem 1.25rem;border:1px dashed rgba(255,255,255,.16);border-radius:1rem;color:var(--tm-collab-muted);background:rgba(255,255,255,.015)}.tm-collab-empty>i{font-size:2rem;color:var(--tm-collab-accent);display:block;margin-bottom:.7rem}.tm-collab-empty h3{font-size:1.1rem;color:#fff}.tm-collab-empty.compact{padding:1.4rem}.tm-collab-empty.compact p{margin:0}.tm-collab-page-header{display:flex;justify-content:space-between;gap:1.25rem;align-items:flex-start;margin-bottom:1.5rem}.tm-collab-page-header h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;margin:.4rem 0}.tm-collab-page-header p{margin:0;color:var(--tm-collab-muted)}.tm-collab-back{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-size:.85rem;font-weight:700}.tm-collab-form{padding:1.5rem}.tm-collab-form-panel{height:100%;padding:1.15rem;border-radius:1rem;background:rgba(255,255,255,.027);border:1px solid var(--tm-collab-border)}.tm-collab-form-panel h2{font-size:1rem;margin-bottom:1rem}.tm-collab-form-note{display:flex;gap:.65rem;color:var(--tm-collab-muted);font-size:.82rem}.tm-collab-form-note i{color:var(--tm-collab-accent);font-size:1.05rem}.tm-collab-form-footer{display:flex;justify-content:flex-end;gap:.75rem;padding-top:1.25rem;margin-top:1.25rem;border-top:1px solid var(--tm-collab-border)}.tm-collab-project-hero{justify-content:flex-start}.tm-collab-project-mark{width:5rem;height:5rem;font-size:2rem;border-radius:1.35rem}.tm-collab-project-copy{flex:1;min-width:0}.tm-collab-project-meta{display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin-top:1rem;color:var(--tm-collab-muted);font-size:.8rem}.tm-collab-project-meta span{display:flex;align-items:center;gap:.35rem}.tm-collab-project-actions{margin-left:auto}.tm-collab-tabs{display:flex;gap:.4rem;padding:.4rem;margin-bottom:1.5rem;border:1px solid var(--tm-collab-border);background:rgba(255,255,255,.02);border-radius:1rem;overflow-x:auto}.tm-collab-tabs a{display:inline-flex;gap:.5rem;align-items:center;padding:.72rem 1rem;border-radius:.75rem;color:var(--tm-collab-muted);text-decoration:none;font-weight:700;font-size:.86rem;white-space:nowrap}.tm-collab-tabs a:hover,.tm-collab-tabs a.is-active{background:rgba(124,92,255,.18);color:#fff}.tm-collab-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,.8fr);gap:1rem}.tm-collab-prose{color:rgba(255,255,255,.76);line-height:1.72}.tm-collab-tagline{margin-top:1.2rem;padding:.8rem 1rem;border-radius:.75rem;background:rgba(124,92,255,.1);color:rgba(255,255,255,.75)}.tm-collab-role-list{display:flex;flex-direction:column;gap:.55rem}.tm-collab-role-list article{display:flex;justify-content:space-between;gap:.8rem;padding:.8rem;border-radius:.8rem;background:rgba(255,255,255,.025);border:1px solid var(--tm-collab-border)}.tm-collab-role-list article>div{display:flex;flex-direction:column}.tm-collab-role-list strong{font-size:.88rem}.tm-collab-role-list small{color:var(--tm-collab-muted);font-size:.72rem}.tm-collab-role-list article>span{font-size:.72rem;color:#8fe3ad;white-space:nowrap}.tm-collab-role-list article.is-closed{opacity:.55}.tm-collab-apply-form{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--tm-collab-border)}.tm-collab-result{display:flex;gap:1rem;align-items:center;padding:1.25rem;border:1px solid rgba(64,214,146,.28);border-radius:1rem;background:linear-gradient(135deg,rgba(64,214,146,.12),rgba(255,255,255,.02))}.tm-collab-result-icon{font-size:2rem;color:#53dc9b}.tm-collab-result span{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:#76e6ae;font-weight:800}.tm-collab-result h2{font-size:1.15rem;margin:.15rem 0 .3rem}.tm-collab-result a{text-decoration:none;font-weight:700;font-size:.85rem}.tm-collab-team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.tm-collab-team-grid article{display:flex;align-items:center;gap:.8rem;padding:.9rem;border-radius:.9rem;background:rgba(255,255,255,.024);border:1px solid var(--tm-collab-border)}.tm-collab-member-avatar{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;overflow:hidden;background:rgba(124,92,255,.16);color:var(--tm-collab-accent)}.tm-collab-member-avatar img{width:100%;height:100%;object-fit:cover}.tm-collab-team-grid article>div:last-child{display:flex;min-width:0;flex-direction:column}.tm-collab-team-grid strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tm-collab-team-grid span,.tm-collab-team-grid small{font-size:.73rem;color:var(--tm-collab-muted)}.tm-collab-updates-layout{display:grid;gap:1rem}.tm-collab-update-form{position:relative}.tm-collab-update-list{display:grid;gap:.8rem}.tm-collab-update-list>.tm-card{margin:0}.tm-collab-update-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:.75rem}.tm-collab-update-head>div{display:flex;flex-direction:column}.tm-collab-update-head span{color:var(--tm-collab-muted);font-size:.73rem}.tm-collab-update-list p{color:rgba(255,255,255,.78);line-height:1.65}.tm-collab-update-link{display:inline-flex;gap:.35rem;align-items:center;text-decoration:none;font-weight:700;font-size:.85rem}.tm-collab-manage-nav{position:sticky;top:.75rem;z-index:10;display:flex;gap:.4rem;padding:.45rem;margin-bottom:1rem;border:1px solid var(--tm-collab-border);border-radius:1rem;background:rgba(16,18,28,.92);backdrop-filter:blur(14px);overflow-x:auto}.tm-collab-manage-nav a{display:inline-flex;align-items:center;gap:.4rem;padding:.62rem .82rem;border-radius:.7rem;color:var(--tm-collab-muted);text-decoration:none;font-size:.8rem;font-weight:700;white-space:nowrap}.tm-collab-manage-nav a:hover{background:rgba(124,92,255,.16);color:#fff}.tm-collab-manage-nav span{display:grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .3rem;border-radius:2rem;background:rgba(255,255,255,.1);font-size:.66rem}.tm-collab-role-create{display:grid;grid-template-columns:1fr 1.5fr 100px auto;gap:.75rem;align-items:end;margin-bottom:1rem}.tm-collab-manage-role-list,.tm-collab-application-list,.tm-collab-manage-members,.tm-collab-manage-update-list{display:flex;flex-direction:column;gap:.65rem}.tm-collab-manage-role-list article,.tm-collab-application-list article,.tm-collab-manage-members article,.tm-collab-manage-update-list article{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;border:1px solid var(--tm-collab-border);border-radius:.85rem;background:rgba(255,255,255,.02)}.tm-collab-manage-role-list article>div:first-child,.tm-collab-manage-members article>div:first-child,.tm-collab-manage-update-list article>div:first-child{display:flex;flex-direction:column}.tm-collab-manage-role-list article>div:last-child,.tm-collab-application-list article>div:last-child,.tm-collab-manage-members article>div:last-child{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem}.tm-collab-manage-role-list span,.tm-collab-manage-role-list small,.tm-collab-manage-members span,.tm-collab-manage-update-list span{color:var(--tm-collab-muted);font-size:.74rem}.tm-collab-application-list article>div:first-child{flex:1}.tm-collab-application-list span{display:block;color:var(--tm-collab-accent);font-size:.76rem;font-weight:700}.tm-collab-application-list p,.tm-collab-manage-update-list p{margin:.35rem 0 0;color:var(--tm-collab-muted);font-size:.82rem}.tm-collab-credit-list{display:grid;gap:.65rem}.tm-collab-credit-list form{display:grid;grid-template-columns:1fr 1fr auto;gap:.75rem;align-items:end;padding:.8rem;border:1px solid var(--tm-collab-border);border-radius:.85rem;background:rgba(255,255,255,.02)}.tm-collab-complete-toggle,.tm-collab-admin-switch{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem;border:1px solid var(--tm-collab-border);border-radius:.85rem;background:rgba(255,255,255,.02);cursor:pointer}.tm-collab-complete-toggle span,.tm-collab-admin-switch span{display:flex;flex-direction:column}.tm-collab-complete-toggle small,.tm-collab-admin-switch small{color:var(--tm-collab-muted);font-size:.74rem}.tm-collab-admin-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}.tm-collab-admin-stats>.tm-card{display:flex;flex-direction:column;gap:.2rem}.tm-collab-admin-stats i{color:var(--tm-collab-accent);font-size:1.25rem}.tm-collab-admin-stats strong{font-size:1.6rem}.tm-collab-admin-stats span{color:var(--tm-collab-muted);font-size:.73rem}.tm-collab-admin-switches{display:flex;flex-direction:column;gap:.55rem}.tm-collab-admin-list{display:flex;flex-direction:column;gap:.75rem}.tm-collab-admin-list>article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;padding:1rem;border:1px solid var(--tm-collab-border);border-radius:1rem;background:rgba(255,255,255,.02)}.tm-collab-admin-project-mark{display:grid;place-items:center;width:3rem;height:3rem;border-radius:.85rem;background:rgba(124,92,255,.15);color:var(--tm-collab-accent)}.tm-collab-admin-project-copy>div:first-child{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}.tm-collab-admin-project-copy p{margin:.35rem 0;color:var(--tm-collab-muted);font-size:.84rem}.tm-collab-admin-project-copy>span{font-size:.73rem;color:rgba(255,255,255,.5)}.tm-collab-admin-actions{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end;gap:.35rem;max-width:360px}.tm-collab-admin-actions form{margin:0}.tm-collab-admin-actions details{position:relative}.tm-collab-admin-actions summary{list-style:none}.tm-collab-admin-note{position:absolute;right:0;top:calc(100% + .45rem);z-index:30;width:280px;padding:.75rem;border:1px solid var(--tm-collab-border);border-radius:.85rem;background:#181b27;box-shadow:0 20px 50px rgba(0,0,0,.4)}.tm-collab-admin-note button{margin-top:.5rem}
@media(max-width:1199px){.tm-collab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tm-collab-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.tm-collab-filter-actions{grid-column:1/-1}.tm-collab-admin-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.tm-collab-admin-list>article{grid-template-columns:auto minmax(0,1fr)}.tm-collab-admin-actions{grid-column:1/-1;max-width:none;justify-content:flex-start}}
@media(max-width:991px){.tm-collab-hero,.tm-collab-project-hero{align-items:flex-start;flex-direction:column}.tm-collab-project-actions{margin-left:0}.tm-collab-layout{grid-template-columns:1fr}.tm-collab-team-grid,.tm-collab-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tm-collab-role-create{grid-template-columns:1fr 1fr}.tm-collab-role-create button{align-self:end}.tm-collab-credit-list form{grid-template-columns:1fr 1fr}.tm-collab-credit-list form button{grid-column:1/-1;justify-self:end}}
@media(max-width:767px){.tm-collab-hero,.tm-collab-project-hero{padding:1.25rem}.tm-collab-project-mark{width:3.6rem;height:3.6rem;font-size:1.4rem}.tm-collab-grid,.tm-collab-mini-grid,.tm-collab-team-grid,.tm-collab-admin-stats{grid-template-columns:1fr}.tm-collab-filter{grid-template-columns:1fr}.tm-collab-filter-actions{grid-column:auto}.tm-collab-page-header{flex-direction:column}.tm-collab-card-stats{grid-template-columns:1fr}.tm-collab-role-create,.tm-collab-credit-list form{grid-template-columns:1fr}.tm-collab-manage-role-list article,.tm-collab-application-list article,.tm-collab-manage-members article,.tm-collab-manage-update-list article{align-items:flex-start;flex-direction:column}.tm-collab-admin-list>article{grid-template-columns:1fr}.tm-collab-admin-actions{flex-direction:column;align-items:stretch}.tm-collab-admin-actions form,.tm-collab-admin-actions .btn{width:100%}.tm-collab-admin-note{position:static;width:100%;margin-top:.5rem}.tm-collab-hero-actions,.tm-collab-project-actions{width:100%}.tm-collab-hero-actions .btn,.tm-collab-project-actions .btn,.tm-collab-project-actions form{flex:1}.tm-collab-project-actions form .btn{width:100%}}

.tm-collab-report{position:relative}.tm-collab-report summary{list-style:none}.tm-collab-report form{position:absolute;right:0;top:calc(100% + .5rem);z-index:50;display:grid;gap:.5rem;width:280px;padding:.75rem;border:1px solid var(--tm-collab-border);border-radius:.85rem;background:#181b27;box-shadow:0 20px 50px rgba(0,0,0,.4)}@media(max-width:767px){.tm-collab-report{flex:1}.tm-collab-report summary{width:100%}.tm-collab-report form{position:static;width:100%;margin-top:.5rem}}

/* Phase 34.0.1: admin-managed collaboration project types */
.tm-collab-type-create{display:grid;grid-template-columns:1.15fr 1fr 1fr 110px;gap:.8rem;align-items:end;padding:1rem;border:1px solid var(--tm-collab-border);border-radius:1rem;background:rgba(255,255,255,.02)}
.tm-collab-type-create-description{grid-column:1/4}
.tm-collab-type-active{display:flex;align-items:center;gap:.7rem;min-height:42px;padding:.65rem .75rem;border:1px solid var(--tm-collab-border);border-radius:.75rem;background:rgba(255,255,255,.025);cursor:pointer}
.tm-collab-type-active input{margin:0}
.tm-collab-type-active span{display:flex;flex-direction:column;line-height:1.2}
.tm-collab-type-active small{color:var(--tm-collab-muted);font-size:.68rem}
.tm-collab-type-list{display:grid;gap:.75rem}
.tm-collab-type-list>article{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.85rem;align-items:center;padding:1rem;border:1px solid var(--tm-collab-border);border-radius:1rem;background:rgba(255,255,255,.02)}
.tm-collab-type-list>article.is-disabled{opacity:.68;background:rgba(255,255,255,.012)}
.tm-collab-type-summary{display:flex;align-items:flex-start;gap:.85rem;min-width:0}
.tm-collab-type-icon{display:grid;place-items:center;flex:0 0 auto;width:2.8rem;height:2.8rem;border-radius:.85rem;background:rgba(124,92,255,.15);color:var(--tm-collab-accent);font-size:1.1rem}
.tm-collab-type-summary>div{min-width:0}
.tm-collab-type-summary small{display:block;margin-top:.2rem;color:rgba(255,255,255,.5);font-size:.72rem}
.tm-collab-type-summary p{margin:.35rem 0 0;color:var(--tm-collab-muted);font-size:.8rem}
.tm-collab-type-editor{position:relative}
.tm-collab-type-editor>summary{list-style:none;white-space:nowrap}
.tm-collab-type-editor>form{position:absolute;right:0;top:calc(100% + .5rem);z-index:40;width:min(680px,80vw);padding:1rem;border:1px solid var(--tm-collab-border);border-radius:1rem;background:#181b27;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.tm-collab-type-delete{display:flex;align-items:end;justify-content:flex-end;gap:.5rem;min-width:170px}
.tm-collab-type-delete label{font-size:.68rem;color:var(--tm-collab-muted)}
.tm-collab-type-delete .form-select{min-width:190px}
@media(max-width:1199px){.tm-collab-type-create{grid-template-columns:repeat(2,minmax(0,1fr))}.tm-collab-type-create-description{grid-column:1/-1}.tm-collab-type-list>article{grid-template-columns:minmax(0,1fr) auto}.tm-collab-type-delete{grid-column:1/-1;justify-content:flex-start}}
@media(max-width:767px){.tm-collab-type-create{grid-template-columns:1fr}.tm-collab-type-create-description{grid-column:auto}.tm-collab-type-list>article{grid-template-columns:1fr;align-items:stretch}.tm-collab-type-editor>summary,.tm-collab-type-delete,.tm-collab-type-delete .btn{width:100%}.tm-collab-type-editor>form{position:static;width:100%;margin-top:.5rem}.tm-collab-type-delete{flex-direction:column;align-items:stretch}.tm-collab-type-delete .form-select{min-width:0}}

/* ---- library.css ---- */
.tm-track-visibility-panel {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    padding: 1rem;
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    margin-bottom: 1.5rem;
}

.tm-track-visibility-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.tm-track-visibility-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: start;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .85rem;
    padding: .9rem;
    cursor: pointer;
    background: rgba(0,0,0,.14);
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.tm-track-visibility-option:hover,
.tm-track-visibility-option.is-selected {
    border-color: color-mix(in srgb, var(--tm-primary) 70%, white 10%);
    background: color-mix(in srgb, var(--tm-primary) 12%, transparent);
    transform: translateY(-1px);
}

.tm-track-visibility-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tm-track-visibility-option strong,
.tm-track-visibility-option small { display: block; }
.tm-track-visibility-option small { color: var(--bs-secondary-color); margin-top: .2rem; line-height: 1.35; }
.tm-track-visibility-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: rgba(255,255,255,.08);
    color: var(--tm-primary);
}

.tm-track-context-panel {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 1rem;
}

.tm-library-create-collection {
    width: auto;
    flex: 0 0 auto;
    align-self: flex-start;
    white-space: nowrap;
}

.tm-library-hero {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--tm-primary) 22%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}

.tm-library-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.25rem 0;
}

.tm-library-tabs a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .8rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    background: rgba(255,255,255,.025);
}

.tm-library-section { scroll-margin-top: 7rem; }
.tm-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.tm-collection-card {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    padding: 1rem;
    background: rgba(255,255,255,.025);
    min-width: 0;
}

.tm-collection-card h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.tm-collection-card p { color: var(--bs-secondary-color); margin-bottom: .75rem; }
.tm-collection-meta { color: var(--bs-secondary-color); font-size: .88rem; }
.tm-library-empty {
    border: 1px dashed rgba(255,255,255,.15);
    border-radius: 1rem;
    padding: 1.4rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.tm-library-list-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    padding: .9rem;
    background: rgba(255,255,255,.025);
}

.tm-library-list-card img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: .75rem;
}

.tm-library-collection-item {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    padding: 1rem;
    background: rgba(255,255,255,.02);
}

.tm-track-visibility-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--bs-secondary-color);
}

@media (max-width: 991.98px) {
    .tm-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .tm-track-visibility-options,
    .tm-library-grid { grid-template-columns: 1fr; }
    .tm-library-list-card { align-items: flex-start; }
}

.tm-library-collection-hero {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
}

.tm-library-hero-cover {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,.24);
}

.tm-library-hero-copy { min-width: 0; }
.tm-library-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.tm-collection-card-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: .75rem;
    margin-bottom: .85rem;
    border: 1px solid rgba(255,255,255,.1);
}

@media (max-width: 991.98px) {
    .tm-library-collection-hero {
        grid-template-columns: 110px minmax(0, 1fr);
    }
    .tm-library-hero-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .tm-library-collection-hero { grid-template-columns: 1fr; }
    .tm-library-hero-cover { max-width: 180px; }
    .tm-library-hero-actions { grid-column: auto; }
}

.tm-collection-card-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    border-radius: .75rem;
    margin-bottom: .85rem;
    border: 1px solid rgba(255,255,255,.1);
    background:
        radial-gradient(circle at 72% 22%, color-mix(in srgb, var(--tm-primary) 22%, transparent), transparent 34%),
        rgba(255,255,255,.025);
    color: var(--tm-primary);
    font-size: 2rem;
}

.tm-library-card-collections > summary {
    list-style: none;
}

.tm-library-card-collections > summary::-webkit-details-marker {
    display: none;
}

/* ---- downloads.css ---- */
.tm-downloads-page,
.tm-download-detail,
.tm-download-form-page {
    --tm-download-accent: var(--tm-primary, #ff7a18);
}

/* Keep Download Hub category/genre badges aligned with the active theme. */
.tm-downloads-page .text-bg-primary,
.tm-download-detail .text-bg-primary {
    background-color: var(--tm-download-accent) !important;
    color: #fff !important;
}

.tm-downloads-hero,
.tm-download-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--tm-download-accent) 18%, transparent), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: 0 1rem 3rem rgba(0,0,0,.18);
}

.tm-download-category-strip {
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    padding: .2rem .1rem .7rem;
    scrollbar-width: thin;
}

.tm-download-category-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.75rem;
    padding: .65rem .85rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    color: var(--bs-body-color);
    background: rgba(255,255,255,.035);
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.tm-download-category-chip:hover,
.tm-download-category-chip.is-active {
    border-color: color-mix(in srgb, var(--tm-download-accent) 70%, transparent);
    background: color-mix(in srgb, var(--tm-download-accent) 12%, transparent);
    color: #fff;
    transform: translateY(-1px);
}

.tm-download-category-chip small {
    display: inline-grid;
    place-items: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding-inline: .35rem;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    font-size: .72rem;
}

.tm-download-filter-form .form-label {
    margin-bottom: .35rem;
    color: rgba(255,255,255,.72);
    font-size: .82rem;
    font-weight: 700;
}

.tm-download-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 1.1rem;
    background: rgba(255,255,255,.035);
    box-shadow: 0 .75rem 2rem rgba(0,0,0,.15);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tm-download-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tm-download-accent) 50%, transparent);
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,.24);
}

.tm-download-card-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tm-download-accent) 19%, transparent), rgba(13,202,240,.1));
}

.tm-download-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.tm-download-card:hover .tm-download-card-cover img {
    transform: scale(1.025);
}

.tm-download-card-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: rgba(255,255,255,.82);
    font-size: 3.5rem;
}

.tm-download-card-featured {
    position: absolute;
    top: .75rem;
    right: .75rem;
}

.tm-download-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.15rem;
}

.tm-download-card-summary {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(255,255,255,.74);
    font-size: .93rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.tm-download-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.68);
    font-size: .82rem;
}

.tm-download-card-stats span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.tm-download-card-stats i {
    color: var(--tm-download-accent);
}

.tm-download-detail-hero {
    align-items: stretch;
    justify-content: flex-start;
}

.tm-download-detail-artwork {
    flex: 0 0 clamp(12rem, 26vw, 21rem);
    overflow: hidden;
    border-radius: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tm-download-accent) 20%, transparent), rgba(13,202,240,.12));
}

.tm-download-detail-artwork img,
.tm-download-detail-artwork > span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 15rem;
    object-fit: cover;
    font-size: 5rem;
}

.tm-download-detail-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}

.tm-download-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.tm-download-detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.tm-download-detail-stats > span {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0 .45rem;
    min-width: 7.5rem;
    padding: .65rem .8rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .8rem;
    background: rgba(0,0,0,.18);
}

.tm-download-detail-stats i {
    grid-row: 1 / 3;
    color: var(--tm-download-accent);
    font-size: 1.35rem;
}

.tm-download-detail-stats strong {
    line-height: 1;
}

.tm-download-detail-stats small {
    color: rgba(255,255,255,.58);
    font-size: .7rem;
}

.tm-download-rich-text {
    color: rgba(255,255,255,.79);
    line-height: 1.75;
}

.tm-download-details-list {
    display: grid;
    gap: .85rem;
}

.tm-download-details-list > div {
    display: grid;
    grid-template-columns: minmax(7rem, .8fr) 1.2fr;
    gap: 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.tm-download-details-list dt {
    color: rgba(255,255,255,.55);
    font-size: .78rem;
    font-weight: 700;
}

.tm-download-details-list dd {
    margin: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.tm-download-checksum {
    display: block;
    max-width: 100%;
    padding: .7rem;
    border-radius: .65rem;
    background: rgba(0,0,0,.28);
    overflow-wrap: anywhere;
    font-size: .72rem;
}

.tm-download-comment {
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: .85rem;
    background: rgba(255,255,255,.025);
}

.tm-download-form-sidebar {
    top: 6rem;
}

.tm-download-manage-icon {
    display: grid;
    flex: 0 0 3rem;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid color-mix(in srgb, var(--tm-download-accent) 35%, transparent);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--tm-download-accent) 10%, transparent);
    color: var(--tm-download-accent);
    font-size: 1.3rem;
}

.tm-download-admin-action {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) auto minmax(9rem, auto) auto;
    align-items: center;
    gap: .6rem;
    width: min(100%, 48rem);
}

.tm-admin-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .85rem;
    background: rgba(255,255,255,.025);
    cursor: pointer;
}

.tm-admin-toggle strong,
.tm-admin-toggle small {
    display: block;
}

.tm-admin-toggle small {
    margin-top: .25rem;
    color: rgba(255,255,255,.58);
    font-weight: 400;
    line-height: 1.45;
}

@media (max-width: 991.98px) {
    .tm-downloads-hero,
    .tm-download-detail-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .tm-download-detail-artwork {
        width: min(100%, 28rem);
        flex-basis: auto;
    }

    .tm-download-admin-action {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .tm-downloads-hero,
    .tm-download-detail-hero {
        padding: 1.15rem;
    }

    .tm-download-primary-actions > * {
        flex: 1 1 calc(50% - .5rem);
    }

    .tm-download-detail-stats > span {
        flex: 1 1 calc(50% - .5rem);
    }

    .tm-download-details-list > div {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .tm-download-details-list dd {
        text-align: left;
    }

    .tm-download-admin-action {
        grid-template-columns: 1fr;
    }
}

.tm-download-version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.tm-download-version-row:first-child {
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 575.98px) {
    .tm-download-version-row {
        align-items: flex-start;
        flex-direction: column;
    }
}