body{
font-family: "Segoe UI", Arial, sans-serif;
background:#0e0e11;
color:#e5e5e5;
margin:0;
padding:20px;
text-align:center;
}

/* Titel */

h1{
font-size:34px;
margin-bottom:15px;
color:#ffffff;
}

/* Formular */

form{
margin:auto;
max-width:420px;
}

input{
width:100%;
padding:14px;
margin:8px 0;
border-radius:8px;
border:1px solid #2a2a2f;
background:#1a1a1f;
color:white;
font-size:15px;
box-sizing:border-box;
}

input:focus{
outline:none;
border:1px solid #ff0066;
}

/* Buttons */

button{
padding:10px 14px;
border-radius:6px;
border:none;
background:#ff0066;
color:white;
cursor:pointer;
font-size:14px;
transition:0.2s;
}

button:hover{
background:#ff2f7c;
}

/* Grid */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:18px;
max-width:1100px;
margin:auto;
}

/* Karten */

.card{
background:#18181d;
border-radius:10px;
padding:20px;
position:relative;
box-shadow:0 4px 12px rgba(0,0,0,0.4);
transition:0.2s;
}

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

/* Song */

.song{
font-size:19px;
font-weight:600;
margin-bottom:6px;
}

/* Name */

.name{
font-size:14px;
color:#9b9b9b;
margin-bottom:6px;
}

/* Status */

.status{
font-size:14px;
margin-top:8px;
opacity:0.9;
}

/* Buttons */

.buttons{
margin-top:14px;
display:flex;
flex-wrap:wrap;
gap:8px;
}

.buttons button{
flex:1;
}

/* Status Farben */

.pending{
border-left:4px solid #ffaa00;
}

.next{
border-left:4px solid #a259ff;
}

.playing{
border-left:4px solid #00bfff;
}

.played{
border-left:4px solid #00d26a;
}

.rejected{
border-left:4px solid #ff3b3b;
opacity:0.8;
}

/* Delete X */

.deleteBtn{
position:absolute;
top:10px;
right:12px;
font-size:18px;
color:#888;
cursor:pointer;
}

.deleteBtn:hover{
color:#ff3b3b;
}

/* Popup */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:none;
justify-content:center;
align-items:center;
z-index:1000;
}

.modal-content{
background:#18181d;
padding:25px;
border-radius:10px;
width:320px;
box-shadow:0 6px 18px rgba(0,0,0,0.6);
}

.modal-content h3{
margin-top:0;
}

.modal-content select{
width:100%;
padding:12px;
margin-top:10px;
border-radius:6px;
border:1px solid #2a2a2f;
background:#1a1a1f;
color:white;
}

.modalButtons{
margin-top:20px;
display:flex;
gap:10px;
}

.modalButtons button{
flex:1;
}

/* Mobile */

@media (max-width:600px){

body{
padding:12px;
}

h1{
font-size:28px;
}

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

.buttons{
flex-direction:column;
}

}