body{
margin:0;
font-family:'Source Sans 3',sans-serif;
background:#0c3a67;
color:white;
}

.app{
max-width:600px;
margin:auto;
padding-bottom:80px;
}

.title{
font-family:'Lobster Two',serif;
font-size:28px;
text-align:center;
margin-top:10px;
}

.subtitle{
text-align:center;
margin-bottom:15px;
font-size:15px;
opacity:0.9;
}

/* OFFLINE */

.offline-container{
text-align:center;
margin-bottom:15px;
}

.offline-btn{
background:#f28c28;
border:none;
color:white;
padding:8px 14px;
border-radius:8px;
font-size:14px;
cursor:pointer;
margin:4px;
}

.install-panel{
display:none;
background:#1d4f85;
padding:14px;
margin-top:10px;
border-radius:10px;
font-size:14px;
line-height:1.5;
}

/* PLAYER */

.sticky-player{
position:sticky;
top:0;
background:#0c3a67;
z-index:1000;
}

.image-container{
width:100%;
overflow:hidden;
}

.track-image{
width:100%;
height:220px;
object-fit:cover;
border-radius:12px;
}

.player{
padding:12px;
}

.current-track{
font-size:18px;
margin-bottom:10px;
text-align:center;
}

.controls{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:10px;
flex-wrap:wrap;
}

.controls button{
background:#0c3a67;
border:1px solid #4377ac;
border-radius:10px;
padding:10px;
color:white;
font-size:14px;
cursor:pointer;
}

.controls span{
display:block;
font-size:11px;
margin-top:4px;
}

.play-btn{
background:white !important;
color:#0c3a67 !important;
font-size:18px;
padding:16px;
}

/* BARRE AUDIO */

.progress-container{
width:100%;
height:6px;
background:#2c4c78;
border-radius:4px;
overflow:hidden;
margin:8px 0;
}

#progress{
height:100%;
width:0%;
background:#f28c28;
transition:width .35s linear;
}

.time-display{
font-size:13px;
text-align:center;
margin-bottom:12px;
}

/* MAP BUTTONS */

.map-buttons{
display:flex;
gap:12px;
justify-content:center;
margin-bottom:12px;
}

.map-btn{
background:#4377ac;
color:white;
padding:12px;
border-radius:10px;
text-decoration:none;
font-size:13px;
width:45%;
text-align:center;
border:1px solid #4377ac;
}

/* PLAYLIST */

#playlist{
padding:10px;
}

.track{
background:#2f5d8a;
padding:12px;
margin-bottom:8px;
border-radius:12px;
cursor:pointer;
border:1px solid #4377ac;
}

/* MICRO INTERACTION PREMIUM */

.map-btn,
.track,
.controls button{
box-shadow:0 2px 6px rgba(0,0,0,0.25);
}

.map-btn:active,
.track:active,
.controls button:active{
transform:translateY(1px);
box-shadow:0 1px 3px rgba(0,0,0,0.25);
}

.track.active{
background:#98b3cd;
}

button{
transition:all .25s ease;
}

.big-subtitle{
font-size:20px;
font-weight:500;
}

.start-message{
text-align:center;
margin-bottom:15px;
font-size:14px;
opacity:0.9;
}

.install-btn{
background:#f28c28;
}

.download-btn{
background:#1aa36f;
}

.download-btn{
background:#1aa36f;
}

.loading-dots::after {
content: "...";
animation: dots 1s steps(3, end) infinite;
}

@keyframes dots {
0% { content: "."; }
33% { content: ".."; }
66% { content: "..."; }
100% { content: "."; }
}

.offline-ready{
background:#2bb673;
color:white;
padding:10px;
margin-top:10px;
border-radius:8px;
text-align:center;
font-weight:600;
}

#installArrow{
margin-left:8px;
transition:transform 0.3s;
}

#installArrow.open{
transform:rotate(180deg);
}