/* =========================================================
   AUDSINK
   ESTILO PRINCIPAL
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;
    min-height: 100%;
}


body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -10%,
            #202738 0%,
            #0d1017 42%,
            #080a0f 100%
        );

    color: #f4f6fb;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    line-height: 1.5;
}


button,
input {
    font-family: inherit;
}


button {
    cursor: pointer;
}


.app-background {
    position: fixed;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(100, 120, 255, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(0, 220, 180, 0.05),
            transparent 30%
        );

    z-index: 0;
}


/* =========================================================
   APP
   ========================================================= */

.app {
    position: relative;

    z-index: 1;

    width: min(
        1400px,
        calc(100% - 32px)
    );

    margin: 0 auto;

    padding:
        24px
        0
        40px;
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.brand {
    display: flex;

    align-items: center;

    gap: 14px;
}


.logo {
    display: block;

    width: 58px;
    height: 58px;

    object-fit: contain;

    border-radius: 16px;

    filter:
        drop-shadow(
            0 8px 24px
            rgba(0, 0, 0, 0.35)
        );
}


.brand-text {
    display: flex;

    flex-direction: column;

    line-height: 1.15;
}


.brand-name {
    font-size: 25px;

    font-weight: 800;

    letter-spacing: -0.5px;
}


.brand-subtitle {
    margin-top: 5px;

    color: #8991a3;

    font-size: 12px;

    font-weight: 500;
}


.connection-wrapper {
    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 999px;

    background:
        rgba(255,255,255,0.035);

    color: #b9c0ce;

    font-size: 13px;
}


.connection-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #f0a43c;

    box-shadow:
        0 0 10px
        rgba(240,164,60,0.6);
}


/* =========================================================
   ROOM BAR
   ========================================================= */

.room-bar {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 72px;

    margin-bottom: 22px;

    padding:
        13px
        18px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.018)
        );

    box-shadow:
        0 15px 40px
        rgba(0,0,0,0.18);
}


.room-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 13px;

    background:
        rgba(105, 122, 255, 0.12);

    font-size: 20px;
}


.room-info {
    display: flex;

    flex-direction: column;

    min-width: 0;
}


.room-label {
    color: #737b8e;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}


.room-info strong {
    margin-top: 2px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #e9ecf4;

    font-size: 15px;
}


.room-live {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-left: auto;

    padding:
        6px
        10px;

    border-radius: 999px;

    background:
        rgba(50, 220, 150, 0.08);

    color: #67dfa8;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .7px;
}


.room-live span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #42d994;

    box-shadow:
        0 0 8px
        rgba(66,217,148,0.8);
}


/* =========================================================
   GRID
   ========================================================= */

.content-grid {
    display: grid;

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

    gap: 22px;

    align-items: start;
}


.main-column,
.side-column {
    min-width: 0;
}


.main-column {
    display: flex;

    flex-direction: column;

    gap: 22px;
}


.side-column {
    display: flex;

    flex-direction: column;

    gap: 22px;
}


/* =========================================================
   CARDS
   ========================================================= */

.card,
.player-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(27,31,42,0.96),
            rgba(15,18,25,0.96)
        );

    box-shadow:
        0 20px 60px
        rgba(0,0,0,0.20);
}


.card {
    padding: 22px;
}


/* =========================================================
   PLAYER
   ========================================================= */

.player-card {
    min-height: 430px;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;
}


.player-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    top: -230px;
    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(101,119,255,0.18),
            transparent 65%
        );

    pointer-events: none;
}


.now-playing {
    position: relative;

    z-index: 1;

    width: min(
        100%,
        600px
    );

    padding:
        32px
        20px;
}


.eyebrow {
    display: block;

    margin-bottom: 18px;

    color: #737c90;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.music-cover {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 130px;
    height: 130px;

    margin:
        0 auto
        20px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #323b61,
            #171c2d
        );

    border:
        1px solid
        rgba(255,255,255,0.08);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,0.35),
        inset 0 1px 0
        rgba(255,255,255,0.06);
}


.cover-icon {
    font-size: 58px;

    line-height: 1;

    color: #dce2ff;

    text-shadow:
        0 5px 25px
        rgba(120,140,255,0.5);
}


#title {
    margin:
        0
        auto
        8px;

    max-width: 580px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #f7f8fc;

    font-size: clamp(
        20px,
        3vw,
        28px
    );

    font-weight: 750;

    letter-spacing: -0.5px;
}


.player-status {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 22px;

    margin:
        0
        0
        18px;

    color: #8992a6;

    font-size: 13px;
}


.status-pulse {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #6875ff;

    box-shadow:
        0 0 10px
        rgba(104,117,255,0.7);
}


/* =========================================================
   AUDIO
   ========================================================= */

#audio {
    display: block;

    width: 100%;

    height: 42px;

    margin:
        0
        auto
        18px;

    border-radius: 12px;
}


/* =========================================================
   PLAYER BUTTONS
   ========================================================= */

.buttons {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 8px;
}


.control-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 50%;

    background:
        rgba(255,255,255,0.055);

    color: #e8ebf4;

    font-size: 17px;

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


.control-button:hover {
    transform: translateY(-2px);

    background:
        rgba(255,255,255,0.10);

    border-color:
        rgba(255,255,255,0.15);
}


.control-button:active {
    transform:
        translateY(0)
        scale(.96);
}


.play-button {
    width: 60px;
    height: 60px;

    background:
        linear-gradient(
            145deg,
            #6977ff,
            #5361e8
        );

    border: none;

    color: white;

    font-size: 21px;

    box-shadow:
        0 10px 28px
        rgba(87,101,235,0.32);
}


.play-button:hover {
    background:
        linear-gradient(
            145deg,
            #7784ff,
            #5d6af0
        );
}


/* =========================================================
   LIBERAR ÁUDIO / iOS
   ========================================================= */

.audio-unlock-button {
    position: relative;
}

.audio-unlock-button.audio-unlocked {
    border-color:
        rgba(104,117,255,0.55);

    box-shadow:
        0 0 0 3px
        rgba(104,117,255,0.10);
}

.audio-unlock-button.audio-muted {
    opacity: 0.82;
}

.audio-unlock-button {
    min-width: 44px;
}


/* =========================================================
   CLOCK
   ========================================================= */

.clock {
    margin-top: 18px;

    color: #687185;

    font-size: 11px;

    font-weight: 600;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.section-heading {
    display: flex;

    align-items: center;

    gap: 12px;
}


.section-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 13px;

    background:
        rgba(105,119,255,0.10);

    font-size: 18px;
}


.section-heading h2 {
    margin: 0;

    color: #eef0f7;

    font-size: 17px;

    font-weight: 750;
}


.section-heading p {
    margin:
        3px
        0
        0;

    color: #70798c;

    font-size: 12px;
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-card {
    padding: 24px;
}


.search-card > .section-heading {
    margin-bottom: 18px;
}


.search-row {
    display: flex;

    gap: 10px;
}


.search-row input {
    flex: 1;

    min-width: 0;

    height: 50px;

    padding:
        0
        16px;

    outline: none;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 13px;

    background:
        rgba(0,0,0,0.20);

    color: #eef1f8;

    font-size: 14px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.search-row input::placeholder {
    color: #60697a;
}


.search-row input:focus {
    border-color:
        rgba(104,118,255,0.65);

    box-shadow:
        0 0 0 3px
        rgba(104,118,255,0.09);
}


.search-button {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-width: 125px;

    height: 50px;

    padding:
        0
        17px;

    border: none;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #6573ff,
            #5361e6
        );

    color: white;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 8px 24px
        rgba(83,97,230,0.22);

    transition:
        transform .18s ease,
        filter .18s ease;
}


.search-button:hover {
    transform: translateY(-1px);

    filter: brightness(1.08);
}


/* =========================================================
   RESULTADOS DA PESQUISA
   ========================================================= */

/*
 * Esta parte controla o tamanho dos resultados.
 *
 * Antes os elementos não tinham um estilo específico,
 * fazendo a pesquisa ocupar espaço demais.
 */

.search-results {
    margin-top: 14px;

    max-height: 330px;

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255,255,255,0.12)
        transparent;
}


/* Cabeçalho dos resultados */

.search-results-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;

    padding:
        8px
        2px;

    color: #858ea0;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .7px;
}


/* Botão fechar */

.search-close-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    height: 30px;

    padding:
        0
        10px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 9px;

    background:
        rgba(255,255,255,0.045);

    color: #aeb6c6;

    font-size: 10px;

    font-weight: 700;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}


.search-close-button:hover {
    background:
        rgba(255,80,80,0.10);

    border-color:
        rgba(255,100,100,0.20);

    color: #ff9292;
}


/* Resultado individual */

.search-result {
    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 78px;

    margin-bottom: 7px;

    padding: 7px;

    border:
        1px solid
        rgba(255,255,255,0.055);

    border-radius: 12px;

    background:
        rgba(255,255,255,0.025);

    transition:
        background .18s ease,
        border-color .18s ease;
}


.search-result:hover {
    background:
        rgba(255,255,255,0.045);

    border-color:
        rgba(255,255,255,0.09);
}


/* Miniatura */

.search-result img {
    display: block;

    width: 72px;
    height: 56px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 8px;

    background:
        #151923;
}


/* Área de informações */

.result-info {
    display: grid;

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

    grid-template-rows:
        auto
        auto;

    align-items: center;

    gap:
        3px
        10px;

    flex: 1;

    min-width: 0;
}


/* Título */

.result-title {
    display: block;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #e9ecf4;

    font-size: 12px;

    font-weight: 700;
}


/* Canal */

.result-channel {
    display: block;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #70798b;

    font-size: 10px;
}


/* Botão adicionar */

.result-add-button {
    grid-column: 2;

    grid-row:
        1 / 3;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 92px;

    height: 32px;

    padding:
        0
        9px;

    border:
        1px solid
        rgba(105,119,255,0.20);

    border-radius: 9px;

    background:
        rgba(105,119,255,0.09);

    color: #b8c0ff;

    font-size: 10px;

    font-weight: 700;

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


.result-add-button:hover {
    transform: translateY(-1px);

    background:
        rgba(105,119,255,0.16);

    border-color:
        rgba(105,119,255,0.35);
}


/* Carregando */

.search-loading {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 48px;

    padding: 10px;

    color: #7e8799;

    font-size: 12px;
}


/* Nenhum resultado */

.search-empty {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 48px;

    color: #70798b;

    font-size: 12px;
}


.search-empty span {
    font-size: 15px;
}


.search-empty p {
    margin: 0;
}


/* Erro */

.search-error {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px;

    border:
        1px solid
        rgba(255,90,90,0.12);

    border-radius: 10px;

    background:
        rgba(255,70,70,0.05);

    color: #ef8585;

    font-size: 11px;
}


.search-error p {
    flex: 1;

    margin: 0;
}


.search-error .search-close-button {
    flex-shrink: 0;
}


/* =========================================================
   PLAYLIST
   ========================================================= */

.playlist-card {
    padding: 0;
}


.playlist-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        22px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);
}


.danger {
    flex-shrink: 0;

    height: 36px;

    padding:
        0
        12px;

    border:
        1px solid
        rgba(255,90,90,0.16);

    border-radius: 10px;

    background:
        rgba(255,80,80,0.06);

    color: #ef8585;

    font-size: 11px;

    font-weight: 700;

    transition:
        background .18s ease,
        border-color .18s ease;
}


.danger:hover {
    background:
        rgba(255,80,80,0.12);

    border-color:
        rgba(255,90,90,0.30);
}


.playlist-list {
    min-height: 90px;

    padding: 8px 22px 18px;
}


.empty {
    margin:
        22px
        0;

    text-align: center;

    color: #626b7c;

    font-size: 13px;
}


/* =========================================================
   CHAT
   ========================================================= */

.chat-card {
    padding: 0;

    display: flex;

    flex-direction: column;

    min-height: 470px;
}


.chat-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        20px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);
}


.online-indicator {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #6ddda6;

    font-size: 10px;

    font-weight: 700;
}


.online-indicator span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #4fdb98;

    box-shadow:
        0 0 8px
        rgba(79,219,152,0.7);
}


.chat-message {
    display: flex;

    align-items: baseline;

    gap: 8px;

    flex-wrap: wrap;
}


.chat-name {
    font-weight: 700;
}


.chat-text {
    overflow-wrap: anywhere;
}


.chat-time {
    opacity: 0.65;

    margin-left: auto;
}


.chat-messages {
    display: flex;

    flex: 1;

    flex-direction: column;

    min-height: 310px;

    max-height: 430px;

    overflow-y: auto;

    padding: 18px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255,255,255,0.12)
        transparent;
}


.chat-empty {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    flex: 1;

    min-height: 260px;

    text-align: center;

    color: #687184;
}


.chat-empty-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 14px;

    border-radius: 18px;

    background:
        rgba(105,119,255,0.08);

    font-size: 25px;
}


.chat-empty strong {
    color: #9aa2b3;

    font-size: 13px;
}


.chat-empty span {
    margin-top: 4px;

    color: #626b7b;

    font-size: 11px;
}


.chat-input-area {
    display: flex;

    gap: 8px;

    padding: 14px;

    border-top:
        1px solid
        rgba(255,255,255,0.06);

    background:
        rgba(0,0,0,0.12);
}


.chat-input-area input {
    flex: 1;

    min-width: 0;

    height: 43px;

    padding:
        0
        13px;

    outline: none;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 11px;

    background:
        rgba(255,255,255,0.035);

    color: #eef1f7;

    font-size: 12px;
}


.chat-input-area input:focus {
    border-color:
        rgba(104,118,255,0.55);
}


.chat-input-area input::placeholder {
    color: #5f6879;
}


#chatSend {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    border: none;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #6876ff,
            #5361e6
        );

    color: white;

    font-size: 17px;

    transition:
        transform .18s ease,
        filter .18s ease;
}


#chatSend:hover {
    transform: translateY(-1px);

    filter: brightness(1.08);
}


/* =========================================================
   INFO
   ========================================================= */

.info-card {
    padding: 20px;
}


.info-card > .section-heading {
    margin-bottom: 16px;
}


.info-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.info-item {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px;

    border-radius: 13px;

    background:
        rgba(255,255,255,0.025);
}


.info-symbol {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        rgba(255,255,255,0.045);

    font-size: 15px;
}


.info-item div {
    display: flex;

    flex-direction: column;
}


.info-item small {
    color: #626b7d;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;
}


.info-item strong {
    margin-top: 1px;

    color: #b8bfcd;

    font-size: 12px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 30px;

    color: #4e5666;

    font-size: 10px;

    font-weight: 600;
}


.footer-separator {
    color: #353b48;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}


::-webkit-scrollbar-track {
    background: transparent;
}


::-webkit-scrollbar-thumb {
    border-radius: 20px;

    background:
        rgba(255,255,255,0.10);
}


::-webkit-scrollbar-thumb:hover {
    background:
        rgba(255,255,255,0.16);
}


/* =========================================================
   SELEÇÃO
   ========================================================= */

::selection {
    background:
        rgba(105,119,255,0.35);

    color: white;
}


/* =========================================================
   RESPONSIVO - TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .content-grid {
        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap: 16px;
    }

}


/* =========================================================
   RESPONSIVO - CELULAR
   ========================================================= */

@media (max-width: 800px) {

    .app {
        width:
            calc(100% - 20px);

        padding-top: 14px;
    }


    .topbar {
        margin-bottom: 15px;
    }


    .logo {
        width: 48px;
        height: 48px;
    }


    .brand-name {
        font-size: 21px;
    }


    .brand-subtitle {
        font-size: 10px;
    }


    .connection-wrapper {
        padding:
            7px
            9px;

        font-size: 11px;
    }


    .room-bar {
        min-height: 62px;

        margin-bottom: 15px;

        border-radius: 15px;
    }


    .content-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .main-column,
    .side-column {
        gap: 15px;
    }


    .player-card {
        min-height: 390px;

        border-radius: 19px;
    }


    .now-playing {
        padding:
            25px
            15px;
    }


    .music-cover {
        width: 105px;
        height: 105px;

        border-radius: 23px;
    }


    .cover-icon {
        font-size: 45px;
    }


    #title {
        max-width: 90vw;

        font-size: 21px;
    }


    .card {
        border-radius: 18px;
    }


    .search-row {
        flex-direction: column;
    }


    .search-button {
        width: 100%;
    }


    /* RESULTADOS NO CELULAR */

    .search-results {
        max-height: 300px;
    }


    .search-result {
        min-height: 70px;

        padding: 6px;
    }


    .search-result img {
        width: 64px;
        height: 50px;
    }


    .result-title {
        font-size: 11px;
    }


    .result-channel {
        font-size: 9px;
    }


    .result-add-button {
        min-width: 82px;

        height: 30px;

        padding:
            0
            7px;

        font-size: 9px;
    }


    .chat-card {
        min-height: 420px;
    }


    .chat-messages {
        min-height: 260px;
    }


    .info-card {
        display: none;
    }

}


/* =========================================================
   RESPONSIVO - CELULAR PEQUENO
   ========================================================= */

@media (max-width: 480px) {

    .app {
        width:
            calc(100% - 14px);

        padding-bottom: 25px;
    }


    .topbar {
        gap: 8px;
    }


    .brand {
        gap: 9px;
    }


    .logo {
        width: 42px;
        height: 42px;

        border-radius: 12px;
    }


    .brand-name {
        font-size: 18px;
    }


    .brand-subtitle {
        display: none;
    }


    .connection-wrapper {
        max-width: 125px;

        overflow: hidden;

        white-space: nowrap;
    }


    .room-bar {
        padding:
            10px
            12px;
    }


    .room-icon {
        width: 36px;
        height: 36px;

        border-radius: 10px;

        font-size: 17px;
    }


    .room-live {
        padding:
            5px
            7px;

        font-size: 8px;
    }


    .player-card {
        min-height: 370px;
    }


    .music-cover {
        width: 90px;
        height: 90px;

        margin-bottom: 16px;
    }


    .cover-icon {
        font-size: 38px;
    }


    .control-button {
        width: 43px;
        height: 43px;
    }


    .play-button {
        width: 55px;
        height: 55px;
    }


    .search-card,
    .card {
        padding: 17px;
    }


    .playlist-card {
        padding: 0;
    }


    .playlist-header {
        padding: 17px;
    }


    .playlist-header .section-heading {
        min-width: 0;
    }


    .playlist-header .section-heading p {
        display: none;
    }


    .section-icon {
        width: 36px;
        height: 36px;

        border-radius: 10px;

        font-size: 16px;
    }


    .section-heading h2 {
        font-size: 15px;
    }


    .section-heading p {
        font-size: 10px;
    }


    .danger {
        font-size: 10px;

        padding:
            0
            9px;
    }


    /* RESULTADOS NO CELULAR PEQUENO */

    .search-results {
        max-height: 260px;
    }


    .search-results-header {
        font-size: 9px;
    }


    .search-close-button {
        height: 28px;

        padding:
            0
            8px;

        font-size: 9px;
    }


    .search-result {
        gap: 8px;

        min-height: 64px;
    }


    .search-result img {
        width: 58px;
        height: 46px;

        border-radius: 7px;
    }


    .result-info {
        gap:
            2px
            5px;
    }


    .result-title {
        font-size: 10px;
    }


    .result-channel {
        font-size: 8px;
    }


    .result-add-button {
        min-width: 72px;

        height: 27px;

        font-size: 8px;
    }


    .chat-header {
        padding: 17px;
    }


    .chat-input-area {
        padding: 10px;
    }


    .footer {
        margin-top: 20px;
    }

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

button:focus-visible,
input:focus-visible {
    outline:
        2px solid
        rgba(115,130,255,0.8);

    outline-offset: 2px;
}


/* =========================================================
   REDUÇÃO DE ANIMAÇÕES
   ========================================================= */

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

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;

    }

}


/* =========================================================
   SALAS / MONITOR - PADRÃO AUDSINK
   ========================================================= */

.rooms-app,
.admin-app {
    max-width: 1400px;
}


.rooms-header-card {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;

    padding: 22px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.018)
        );

    box-shadow:
        0 15px 40px
        rgba(0,0,0,0.18);
}


.rooms-title {
    margin:
        5px
        0
        3px;

    font-size: 28px;

    line-height: 1.1;

    letter-spacing: -0.5px;
}


.rooms-user {
    color: #8991a3;

    font-size: 13px;
}


.rooms-actions,
.admin-controls {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


.rooms-button,
.admin-controls button {
    min-height: 42px;

    padding:
        0
        16px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 12px;

    background:
        rgba(255,255,255,0.055);

    color: #f4f6fb;

    font-weight: 700;

    transition: 0.2s ease;
}


.rooms-button:hover,
.admin-controls button:hover {
    background:
        rgba(255,255,255,0.10);

    transform:
        translateY(-1px);
}


.rooms-button-secondary {
    color: #c5cad5;
}


.room-live-neutral {
    color: #aeb6c6;

    background:
        rgba(255,255,255,0.045);
}


.rooms-card {
    margin-bottom: 18px;
}


.rooms-card .section-heading {
    margin-bottom: 18px;
}


.create-room {
    display: flex;

    gap: 10px;

    align-items: stretch;
}


.create-room input {
    flex: 1;

    min-width: 220px;
}


.rooms-create-button {
    width: auto;

    min-width: 125px;
}


.rooms-message {
    min-height: 0;

    margin:
        -5px
        0
        17px;

    font-size: 13px;

    font-weight: 600;
}


.rooms-message.error {
    color: #ff7777;
}


.rooms-message.success {
    color: #71e6a0;
}


.room-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.room-item {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 16px;

    border:
        1px solid
        rgba(255,255,255,0.055);

    border-radius: 14px;

    background:
        rgba(255,255,255,0.035);
}


.room-item:hover {
    background:
        rgba(255,255,255,0.055);
}


.room-info {
    min-width: 0;
}


.room-title {
    font-size: 16px;

    font-weight: 750;

    margin-bottom: 4px;
}


.room-details {
    color: #8991a3;

    font-size: 12px;
}


.room-id {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;

    word-break: break-all;

    color: #b8c0cf;
}


.current-room {
    border-color:
        rgba(115,130,255,0.24);
}


.room-details-grid {
    display: grid;

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

    gap: 12px;

    margin-bottom: 16px;
}


.room-details-grid p {
    display: flex;

    flex-direction: column;

    gap: 4px;

    margin: 0;

    padding: 12px;

    border-radius: 12px;

    background:
        rgba(255,255,255,0.035);
}


.room-details-grid strong {
    color: #8991a3;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.6px;
}


.members-list {
    margin-bottom: 16px;

    color: #c9ced8;
}


.rooms-leave-button {
    min-height: 40px;

    padding:
        0
        15px;

    border-radius: 11px;
}


.admin-stats {
    display: grid;

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

    gap: 15px;

    margin-bottom: 18px;
}


.admin-stats .card {
    margin: 0;
}

.sync-profile-card {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(255,255,255,0.07);
    text-align: left;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.sync-profile-card:hover {
    transform: translateY(-2px);
}

.sync-profile-card.active {
    border-color: rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.09);
}

.sync-profile-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.sync-profile-icon {
    line-height: 1;
}

.sync-profile-status {
    margin-top: 6px;
    color: #8991a3;
    font-size: 11px;
    font-weight: 600;
}

.playlist-owner-selectable {
    cursor: pointer;
}

.playlist-owner-selectable:hover {
    background: rgba(255,255,255,0.035);
}


.admin-stats .card-title,
.admin-music-card .card-title {
    color: #8991a3;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.7px;
}


.admin-stats .card-value {
    margin-top: 7px;

    font-size: 25px;

    font-weight: 800;
}


.admin-music-card {
    margin-bottom: 18px;
}


.admin-music-card .music-title {
    margin:
        6px
        0
        4px;

    font-size: 20px;

    font-weight: 800;
}


.admin-music-card .small {
    color: #8991a3;

    font-size: 12px;
}


.admin-controls {
    margin-bottom: 18px;
}


.admin-controls button {
    background:
        rgba(255,255,255,0.045);
}


.admin-devices {
    padding: 0;

    overflow: hidden;
}


.admin-devices-header {
    padding: 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);

    font-size: 16px;

    font-weight: 800;
}


.admin-devices .device {
    border-bottom:
        1px solid
        rgba(255,255,255,0.055);

    padding:
        14px
        18px;

    color: #d8dce5;
}


.admin-devices .device:last-child {
    border-bottom: 0;
}




.admin-rooms {
    padding: 0;
    overflow: hidden;
    margin-bottom: 18px;
}

.admin-room-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.055);
    color: #d8dce5;
}

.admin-room-item:last-child {
    border-bottom: 0;
}

.admin-room-info {
    min-width: 0;
    flex: 1;
}

.admin-room-name {
    font-size: 16px;
    margin-bottom: 5px;
}

.admin-room-meta {
    color: #8991a3;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
}

.admin-room-delete {
    flex-shrink: 0;
    padding: 9px 13px;
    border: 1px solid rgba(255, 90, 90, 0.30);
    border-radius: 8px;
    background: rgba(255, 70, 70, 0.08);
    color: #ff9b9b;
    cursor: pointer;
    font-weight: 700;
}

.admin-room-delete:hover {
    background: rgba(255, 70, 70, 0.16);
}

@media (max-width: 600px) {
    .admin-devices #devicesList {
        grid-template-columns: 1fr;
    }
    .admin-room-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-room-delete {
        width: 100%;
    }
}

@media (max-width: 800px) {

    .rooms-header-card {
        align-items: flex-start;

        flex-direction: column;
    }


    .rooms-actions {
        width: 100%;
    }


    .rooms-button {
        flex: 1;
    }


    .create-room {
        flex-direction: column;
    }


    .rooms-create-button {
        width: 100%;
    }


    .room-details-grid {
        grid-template-columns: 1fr;
    }


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


    .admin-controls button {
        flex:
            1 1
            calc(50% - 10px);
    }

}


@media (max-width: 480px) {

    .rooms-title {
        font-size: 23px;
    }


    .rooms-header-card {
        padding: 17px;

        border-radius: 16px;
    }


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


    .admin-controls button {
        flex:
            1 1
            100%;
    }

}


.admin-empty-devices {
    padding: 20px;

    color: #8991a3;
}

/* Playlist compartilhada / permissões da sala */
.shared-playlist-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    font-size: 0.95rem;
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* =========================================================
   AUDSINK MODERN AUDIO / PARTY UI
   ========================================================= */

:root {
    --accent-a: #8b5cf6;
    --accent-b: #22d3ee;
    --accent-c: #f472b6;
    --glass: rgba(20, 24, 36, 0.72);
    --glass-strong: rgba(27, 31, 47, 0.9);
    --line-soft: rgba(255,255,255,0.10);
    --shadow-deep: 0 24px 70px rgba(0,0,0,0.42);
}

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(139,92,246,0.16), transparent 24%),
        radial-gradient(circle at 88% 18%, rgba(34,211,238,0.11), transparent 24%),
        radial-gradient(circle at 55% 95%, rgba(244,114,182,0.10), transparent 25%),
        linear-gradient(180deg, #090b12 0%, #07090e 100%);
}

.app-background {
    background:
        radial-gradient(circle at 20% 25%, rgba(139,92,246,0.08), transparent 28%),
        radial-gradient(circle at 80% 72%, rgba(34,211,238,0.06), transparent 30%);
}

.topbar {
    padding-top: 6px;
}

.brand-name {
    text-shadow: 0 0 24px rgba(139,92,246,0.32);
}

.logo {
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow:
        0 10px 28px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.22);
}

.room-bar,
.card,
.player-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.02));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-color: rgba(255,255,255,0.09);
    box-shadow: var(--shadow-deep);
}

.room-icon,
.section-icon,
.cover-icon {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.16);
    background:
        linear-gradient(145deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05));
    box-shadow:
        0 12px 24px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -10px 18px rgba(0,0,0,0.16);
    transform: translateY(0) rotateX(0deg);
    transition: transform .24s ease, box-shadow .24s ease;
}

.room-icon::after,
.section-icon::after,
.cover-icon::after {
    content: "";
    position: absolute;
    inset: 12% 16% 48%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0));
    opacity: .55;
    pointer-events: none;
}

.room-icon:hover,
.section-icon:hover,
.cover-icon:hover {
    transform: translateY(-2px) rotateX(7deg);
    box-shadow:
        0 18px 32px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.32);
}

.room-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 22px;
}

.section-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

.cover-icon {
    width: 118px;
    height: 118px;
    margin: 0 auto 18px;
    border-radius: 30px;
    font-size: 46px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.26), transparent 24%),
        linear-gradient(145deg, rgba(139,92,246,.95), rgba(34,211,238,.68) 60%, rgba(244,114,182,.82));
    box-shadow:
        0 22px 48px rgba(0,0,0,.42),
        0 0 42px rgba(139,92,246,.22),
        inset 0 2px 0 rgba(255,255,255,.32);
}

.player-card {
    position: relative;
    overflow: hidden;
}

.player-card::before,
.player-card::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(8px);
    pointer-events: none;
}

.player-card::before {
    width: 180px;
    height: 180px;
    right: -60px;
    top: -50px;
    background: radial-gradient(circle, rgba(34,211,238,.24), transparent 70%);
}

.player-card::after {
    width: 220px;
    height: 220px;
    left: -90px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(244,114,182,.20), transparent 70%);
}

.buttons .control-button {
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
    box-shadow:
        0 12px 22px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.16);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.buttons .control-button:hover {
    transform: translateY(-3px);
    box-shadow:
        0 18px 28px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.2);
}

.buttons .play-button {
    background: linear-gradient(145deg, #8b5cf6, #5b21b6);
    box-shadow:
        0 16px 34px rgba(91,33,182,.42),
        inset 0 1px 0 rgba(255,255,255,.3);
}

.search-button,
.rooms-button,
.admin-controls button,
.rooms-create-button {
    border: 1px solid rgba(255,255,255,.14) !important;
    background: linear-gradient(145deg, rgba(139,92,246,.96), rgba(91,33,182,.96)) !important;
    box-shadow:
        0 12px 28px rgba(91,33,182,.28),
        inset 0 1px 0 rgba(255,255,255,.24);
}

.search-button:hover,
.rooms-button:hover,
.admin-controls button:hover,
.rooms-create-button:hover {
    transform: translateY(-2px);
}

.admin-app .admin-stats .card,
.admin-app .admin-controls-card,
.admin-app .admin-devices {
    border-radius: 22px;
}

.admin-stats {
    gap: 16px;
}

.admin-stats .card {
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.admin-stats .card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -28px;
    top: -38px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34,211,238,.15), transparent 72%);
    pointer-events: none;
}

.admin-devices #devicesList {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.admin-devices .device {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.admin-devices .device:last-child {
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.device-sync-status {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 8px 0;
    padding: 6px 10px;
    background: rgba(255,255,255,.035);
}

.sync-yellow {
    color: #fbbf24;
    border-color: rgba(251,191,36,.18) !important;
    background: rgba(251,191,36,.08) !important;
}

.device-ping {
    margin-top: 6px;
    color: #7f899c;
    font-size: 12px;
}

.admin-controls-card {
    position: sticky;
    top: 12px;
    z-index: 5;
}

@media (max-width: 1100px) {
    .admin-devices #devicesList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-controls-card {
        position: static;
    }
}

@media (max-width: 600px) {
    .app {
        width: min(100%, calc(100% - 18px));
        padding-top: 14px;
    }

    .topbar {
        align-items: flex-start;
    }

    .brand-name {
        font-size: 22px;
    }

    .logo {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .room-bar {
        padding: 12px;
        border-radius: 16px;
    }

    .room-live {
        margin-left: auto;
    }

    .cover-icon {
        width: 96px;
        height: 96px;
        border-radius: 26px;
        font-size: 38px;
    }

    .buttons .control-button {
        width: 52px;
        height: 52px;
    }

    .admin-devices #devicesList {
        gap: 10px;
    }
}