body {
background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
font-family: 'Segoe UI', sans-serif;
color: white;
margin: 0;
}

.admin-top, .back-top {
position: fixed;
top: 20px;
left: 20px;
background: rgba(0,0,0,0.6);
padding: 10px 15px;
border-radius: 8px;
color: #00c6ff;
text-decoration: none;
font-weight: bold;
z-index:1000;
}

.container {
max-width: 900px;
margin: auto;
padding: 80px 20px 30px 20px;
}

h1 { text-align: center; margin-bottom: 10px; }

.counter { text-align:center; margin-bottom:15px; opacity:0.8; }

input, select {
width: 100%;
padding: 12px;
margin-bottom: 20px;
border-radius: 10px;
border: none;
font-size: 16px;
box-sizing:border-box;
}

button {
width:100%;
padding:12px;
border:none;
border-radius:10px;
background:#00c6ff;
color:black;
font-weight:bold;
}

.song-item {
padding: 12px;
margin: 8px 0;
background: rgba(255,255,255,0.08);
border-radius: 8px;
position:relative;
word-break:break-word;
}

.delete {
position:absolute;
right:10px;
top:10px;
color:red;
text-decoration:none;
}

.logout-btn {
display:inline-block;
margin-bottom:20px;
color:#ff8080;
text-decoration:none;
}

small { opacity:0.7; }

@media (max-width: 600px) {
h1 { font-size: 20px; }
.song-item { font-size: 14px; }
.admin-top, .back-top { padding:8px 10px; font-size:14px; }
}