/* ===========================
   Logo
=========================== */

.logo{
    display:flex;
    align-items:center;
    gap:16px;
}

.logo-circle{

    width:52px;
    height:52px;

    border-radius:50%;

    background:
        radial-gradient(circle at 35% 35%,#7fe8ff,#25b8ff 55%,#0066ff);

    box-shadow:
        0 0 25px rgba(49,215,255,.5),
        inset 0 0 20px rgba(255,255,255,.25);

}

.logo h1{

    font-size:24px;
    font-weight:700;
    letter-spacing:.04em;

}

.logo span{

    display:block;

    margin-top:4px;

    color:var(--text-muted);

    font-size:13px;

}

/* ===========================
   LIVE
=========================== */

.live{

    display:flex;
    align-items:center;
    gap:12px;

    padding:10px 18px;

    border-radius:999px;

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

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

}

.live-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#ff4757;

    animation:pulse 1.5s infinite;

}

/* ===========================
   Player
=========================== */

.player{

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:320px;

}

.player h2{

    margin:12px 0;

    font-size:46px;

    line-height:1.1;

    max-width:700px;

}

.player p{

    color:var(--text-secondary);

    margin-bottom:28px;

}

.label{

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:12px;

    font-weight:700;

}

/* ===========================
   Button
=========================== */

#playButton{

    width:76px;
    height:76px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:white;

    font-size:28px;

    background:
        linear-gradient(135deg,
        #31d7ff,
        #178dff);

    transition:.25s;

    box-shadow:
        0 0 35px rgba(49,215,255,.35);

}

#playButton:hover{

    transform:scale(1.08);

}

#playButton:active{

    transform:scale(.95);

}

/* ===========================
   Dashboard
=========================== */

.panel h3{

    margin-bottom:20px;

    font-size:18px;

}

/* ===========================
   History
=========================== */

#history{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.history-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px;

    border-radius:12px;

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

}

/* ===========================
   Weather
=========================== */

#weather{

    font-size:18px;

    color:var(--text-secondary);

}

/* ===========================
   Footer
=========================== */

footer{

    color:var(--text-muted);

    font-size:14px;

}

/* ===========================
   Pulse animation
=========================== */

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(255,70,90,.7);

    }

    70%{

        box-shadow:0 0 0 12px rgba(255,70,90,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(255,70,90,0);

    }

}