body{font-family:Arial,Helvetica,sans-serif;margin:20px;background:#f6f7fb;color:#222}
h1{margin-top:0}
button{padding:8px 12px;border:none;border-radius:6px;background:#444;color:#fff;cursor:pointer}
button.primary{background:#0d6efd}
button.danger{background:#dc3545}
button.secondary{background:#6c757d}
button:disabled{opacity:.6;cursor:default}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:10px}
ol,ul{background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06);padding:12px}
.topbar{display:flex;align-items:center;justify-content:space-between}
.logout{color:#fff;background:#6c757d;padding:6px 10px;border-radius:6px;text-decoration:none}
.card{background:#fff;padding:14px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.06);margin:12px 0}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.controls-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.vol-wrap{display:flex;align-items:center;gap:8px}
.vol-wrap.small{opacity:.8}
progress{width:140px;height:14px}
input[type=range]{width:180px}
input.num{width:70px;padding:6px;border:1px solid #ccc;border-radius:6px}
.selectable li{list-style:none;margin:6px 0;padding:10px 12px;border:1px solid #eee;border-radius:8px;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden}
.dnd-item{cursor:move}
.drag-handle{opacity:.6;margin:0 8px}
.dnd-item.dragging{opacity:.5}
.btn-group{display:flex;gap:6px}
.preset{background:#6c757d}
.hover-reveal .jumpBtn{position:absolute; right:10px; top:8px; opacity:0; pointer-events:none; transition:opacity .15s; z-index:2}
.hover-reveal:hover .jumpBtn{opacity:1; pointer-events:auto}
/* Full-row progress fill behind content */
.row-progress{position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,110,253,.35) var(--pct,0%), transparent 0); z-index:0}
.row-content{position:relative; z-index:1}
.hint{opacity:.7}
.error{color:#dc3545}


/* Overlay editor */
.overlay.hidden{ display:none }
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:9999 }
.overlay-card{ background:#fff; width:min(720px, calc(100% - 32px)); max-height:80vh; display:flex; flex-direction:column; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.2) }
.overlay-head{ padding:12px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid #eee }
.overlay-head .spacer{ flex:1 }
.overlay-body{ padding:10px 14px; overflow:auto }
.overlay-foot{ padding:8px 14px; border-top:1px solid #eee }
.reorder-list{ list-style:none; margin:0; padding:0 }
.re-item{ display:grid; grid-template-columns: 48px 1fr; gap:10px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:8px; margin:6px 0; background:#fdfdfd }
.re-item.dragging{ opacity:.6 }
.re-item.placeholder{ border:2px dashed #0d6efd; background:rgba(13,110,253,.08) }
#saveOrder{ display:none !important }


/* Make normal playlist clearly non-draggable */
.drag-handle{ display:none !important; }
.dnd-item{ cursor: default !important; }
.selectable li{ cursor: default; }