:root{
  --bg:#0f1115;
  --card:#131418;
  --muted:#9aa0a6;
  --accent:#7c3aed;
  --accent-2:#6b7280;
  --text:#e6eef8;
}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Arial;background:var(--bg);color:var(--text);margin:0;padding:24px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.topbar h1{margin:0}
.container{display:grid;grid-template-columns:1fr;gap:24px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.04);padding:18px;border-radius:10px}
.settings h2{margin-top:0}
.field-row{display:flex;gap:8px;align-items:center;margin:8px 0}
.field-row label{min-width:120px;color:var(--muted)}
.field-row input{flex:1;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--text)}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:8px 10px;border-radius:6px;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent),#5b21b6);border:none}
.btn.small{padding:6px 8px;font-size:13px}
.artists-area{padding:0}
.artists-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.artists-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:flex-start}
.artist-card{width:100%;max-width:360px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.03);padding:12px;border-radius:10px}
.artist-card .title{display:flex;justify-content:space-between;align-items:center}
.artist-card .artist-header{display:flex;gap:12px;align-items:center}
.artist-card .artist-image{width:250px;height:250px;border-radius:8px;background:#222;flex:0 0 250px}
.artist-card .artist-info{flex:1}
.tracks-list{margin-top:8px;border-radius:8px;padding:8px;border:1px solid rgba(255,255,255,0.02);background:rgba(255,255,255,0.01);max-height:160px;overflow:auto}
.track{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid rgba(255,255,255,0.02);flex-wrap:wrap}
.track .index{width:28px;text-align:center;color:var(--muted)}
.track .play{width:18px;color:var(--accent);font-weight:700}
.track .name{flex:1;min-width:120px}
.track .audio{width:180px;max-width:100%}
.track .delete-icon{background:linear-gradient(90deg,#ff4d6d,#ff6f91);border:none;color:white;padding:6px 8px;border-radius:6px;cursor:pointer}
.track .delete-icon:hover{filter:brightness(1.05);transform:translateY(-1px)}
.upload-box{margin-top:12px;border:2px dashed rgba(255,255,255,0.03);padding:14px;border-radius:8px;text-align:center;color:var(--muted);display:block}

.artist-toolbar{display:flex;align-items:center;gap:8px;margin-top:10px}
.artist-toolbar .track-count{color:var(--muted);font-size:13px}
.names-btn{background:linear-gradient(90deg,var(--accent),#5b21b6);color:white;border:none}
.edit-link{background:transparent;border:1px solid rgba(255,255,255,0.04)}
.add-single{margin-top:8px;width:100%;justify-content:center}

/* scrollbar */
.tracks-list::-webkit-scrollbar{width:10px}
.tracks-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.03);border-radius:8px}
.artist-card{background:transparent;border:1px dashed rgba(255,255,255,0.03);padding:12px;border-radius:10px}
.artist-card .title{display:flex;justify-content:space-between;align-items:center}
.artist-meta{display:flex;gap:12px;margin-top:10px}
.artist-image{width:92px;height:92px;border-radius:8px;background:#222;display:flex;align-items:center;justify-content:center;overflow:hidden}
.artist-image img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transform-origin:center;transition:transform .18s ease}
.artist-image:hover img{transform:scale(1.02)}
.tracks{flex:1}
.tracks-list{margin-top:12px;border-radius:8px;padding:10px;border:1px solid rgba(255,255,255,0.02);background:rgba(255,255,255,0.01)}
.track{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid rgba(255,255,255,0.02)}
.track:last-child{border-bottom:none}
.track .index{width:24px;text-align:center;color:var(--muted)}
.track .name{flex:1}
.track audio{width:200px}
.track .actions{display:flex;gap:6px}
.upload-box{margin-top:12px;border:2px dashed rgba(255,255,255,0.03);padding:18px;border-radius:8px;text-align:center;color:var(--muted)}
.upload-box input{display:none}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6)}
.modal.hidden{display:none}
.modal-content{background:var(--card);padding:18px;border-radius:8px;min-width:480px}
.modal-content.small{min-width:360px}
.modal textarea{width:100%;min-height:200px;background:#0b0b0c;border-radius:6px;padding:10px;color:var(--text);border:1px solid rgba(255,255,255,0.03)}
.modal-content label{display:block;color:var(--muted);margin-top:10px;margin-bottom:6px}
.modal-content input{width:100%;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text)}
.modal-content input:focus{outline:none;box-shadow:0 0 0 3px rgba(124,58,237,0.12);border-color:rgba(124,58,237,0.9)}
.modal-content .modal-row{margin-bottom:8px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.edit-btn{background:transparent;border:1px solid rgba(255,255,255,0.04)}
.controls{display:flex;gap:8px}

/* new row-based artist layout */
.row{margin-bottom:10px}
.row-header{display:flex;justify-content:space-between;align-items:center}
.artist-name{font-weight:700;font-size:18px}
.hdr-ops{display:flex;gap:8px}
.row-image{display:flex;justify-content:center}
.artist-image{width:250px;height:250px;border-radius:8px;background:#222;position:relative;overflow:hidden;margin:0 auto}
.artist-image img{width:100%;height:100%;object-fit:cover}
.img-overlay{position:absolute;right:8px;top:8px;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.artist-image:hover .img-overlay{opacity:1}

/* overlay buttons (change / delete) */
.img-overlay button{background:rgba(0,0,0,0.45);color:var(--text);border:1px solid rgba(255,255,255,0.06);padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px}
.img-overlay button:hover{filter:brightness(1.05);transform:translateY(-1px)}
.img-overlay .change-btn{background:linear-gradient(90deg,var(--accent),#5b21b6);border:none;color:white}
.img-overlay .delete-btn{background:linear-gradient(90deg,#ff4d6d,#ff6f91);border:none;color:white}

.row-toolbar{display:flex;align-items:center;gap:8px;justify-content:flex-start}
.track-count{color:var(--muted);font-size:13px}
.names-btn{background:linear-gradient(90deg,var(--accent),#5b21b6);color:white;border:none;padding:6px 8px;border-radius:6px}
.reorder-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px 8px;border-radius:6px}
.add-single{margin-top:8px;width:100%;justify-content:center;padding:8px}

.track .play{width:18px;color:var(--accent);font-weight:700;border:none;background:transparent}
.track .name{flex:1;min-width:120px;padding-left:6px}
.track .audio{width:180px;max-width:100%;display:none}
.track .actions{display:flex;gap:6px;align-items:center}

/* small absolute-positioned seek bar shown when playing so it doesn't change row height */
.track{position:relative}
.seek{position:absolute;right:90px;top:50%;transform:translateY(-50%);width:110px;height:6px;appearance:none;background:linear-gradient(90deg,var(--accent),#5b21b6);border-radius:4px;display:none;z-index:2}
.seek::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:white;box-shadow:0 0 0 2px rgba(0,0,0,0.25)}
.seek::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:white}

/* show up/down when reorder-mode active */
.tracks-list.reorder-mode .up,
.tracks-list.reorder-mode .down{display:inline-block}

/* Reorder modal list */
.reorder-list{list-style:none;padding:0;margin:8px 0 0 0;max-height:300px;overflow:auto;border:1px solid rgba(255,255,255,0.03);border-radius:6px;background:rgba(255,255,255,0.01)}
.reorder-list li{display:flex;align-items:center;gap:8px;padding:10px;border-bottom:1px solid rgba(255,255,255,0.02);cursor:grab}
.reorder-list li.dragging{opacity:0.5}
.reorder-list li .handle{width:18px;text-align:center;color:var(--muted)}
.reorder-list li .tname{flex:1}
.reorder-list li:last-child{border-bottom:none}


/* Responsive grid: 4 columns desktop, 2 on medium, 1 on small */
@media (max-width:1200px){
  .artists-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .artists-list{grid-template-columns:1fr}
}

@media(max-width:900px){
  .container{grid-template-columns:1fr;}
}