/* assets/style.css - clean, modern look */
:root{ --bg:#0f1720; --card:#0b1220; --muted:#9aa4b2; --accent:#1db954; }
*{box-sizing:border-box}
body{font-family:Inter, system-ui, Arial; margin:0; background:var(--bg); color:#e6eef6}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.search{display:flex;gap:8px;margin-bottom:16px}
.search input{flex:1;padding:10px;border-radius:8px;border:1px solid #13202b;background:#07111a;color:inherit}
.search button{padding:10px 14px;border-radius:8px;background:var(--accent);border:none;color:#06120b}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.card{background:var(--card);padding:12px;border-radius:12px}
.card img{width:100%;height:140px;object-fit:cover;border-radius:8px}
.meta{padding:8px 0}
.title{font-weight:600;color:#ffffff;text-decoration:none}
.artist{color:var(--muted);font-size:14px}
.controls{display:flex;gap:8px}
.btn{display:inline-block;padding:8px 10px;border-radius:8px;text-decoration:none;background:#1f2a33;color:#e6eef6}
.track-page{display:flex;gap:20px}
.left{flex:0 0 300px}
.right{flex:1}
.big-thumb{width:100%;border-radius:12px}


/* responsive small tweaks */
@media (max-width:720px){.track-page{flex-direction:column}.left{flex:unset}}
/* Upload page */
.upload-page {
  max-width: 560px;
  margin: 0 auto;
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #0c1722;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

.upload-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.upload-form label {
  font-size: 14px;
  color: #9fb3c8;
}

.upload-form input,
.upload-form textarea {
  background: #07111a;
  border: 1px solid #1c2b3a;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 15px;
}

.upload-form textarea {
  resize: vertical;
  min-height: 80px;
}

.upload-form input:focus,
.upload-form textarea:focus {
  outline: none;
  border-color: #3ea6ff;
}

.upload-form .readonly {
  opacity: .7;
  cursor: not-allowed;
}

.upload-form .checkbox {
  margin-top: 8px;
}

.upload-form .btn.primary {
  background: #3ea6ff;
  color: #000;
  border: none;
  padding: 12px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}

.upload-form .btn.primary:hover {
  background: #63b7ff;
}