/* app.css v42 */
.card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:16px;overflow:visible}
.grid{display:grid;gap:16px}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-1{grid-template-columns:1fr}
@media(max-width:760px){.grid.cols-2{grid-template-columns:1fr}}
.form-row{margin-bottom:12px}.form-row label{display:block;font-size:.9rem;color:var(--text-muted);margin-bottom:6px}
.form-row input[type=text],.form-row input[type=url],.form-row input[type=date],.form-row input[type=password],.form-row select,.form-row textarea{width:100%;padding:10px 12px;border-radius:var(--border-radius);border:1px solid var(--border-color);background:var(--input-bg);color:var(--text-color)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--border-color);font-size:.8rem;color:var(--text-muted);background:var(--input-bg)}
.nav{display:flex;gap:10px;justify-content:center;margin-bottom:18px}.nav a{padding:8px 12px;border-radius:var(--border-radius);border:1px solid var(--border-color);background:var(--input-bg);color:var(--text-color)}
.release-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border-radius:var(--border-radius);border:1px solid var(--border-color);background:var(--card-bg)}
.release-row .left{display:flex;align-items:center;gap:12px}.thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--border-color);background:#222}
.list-tracks{padding-left:1.6rem;margin-left:.2rem}
.embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--border-radius);border:1px solid var(--border-color);background:#000;margin-bottom:16px}.embed-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.flash{margin:16px 0}.flash.success{border:1px solid rgba(29,185,84,.5);background:rgba(29,185,84,.1);color:var(--accent-color);padding:12px 14px;border-radius:var(--border-radius)}.flash.error{border:1px solid rgba(244,67,54,.5);background:rgba(244,67,54,.1);color:var(--error-color);padding:12px 14px;border-radius:var(--border-radius)}
.brand-logo{display:block;margin:6px auto 4px;max-height:216px;height:auto;width:auto}
.row-flex{display:flex;align-items:center;gap:8px}
.row-flex.group-row{background:var(--input-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:6px 8px}
.row-flex.group-row input[type=text],.row-flex.group-row input[type=url],.row-flex.group-row input[type=password]{flex:1;background:transparent;border:0;padding:8px 10px;color:var(--text-color)}
.fieldset-rows{border:0!important;padding:0;margin:0;background:transparent}.fieldset-rows>legend{padding:0;margin-bottom:8px;color:var(--text-muted)}
.filters-card{margin-bottom:24px}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.pager .btn{margin:0 1px}
.top-pager{ margin-bottom: 24px; } .bottom-pager{ margin-top: 24px; }
.edit-actions-row{ margin-top: 10px; display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.edit-actions-row .left-actions{display:flex;gap:8px}
.btn-danger{background:#b91c1c;border:1px solid #b91c1c;color:#fff}.btn-danger:hover{filter:brightness(0.95)}
.link-list{ list-style:none; padding-left:0; margin:10px 0 0; display:grid; gap:8px; }
.link-list li a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border-color); background:var(--input-bg); border-radius:var(--border-radius); text-decoration:none; color:var(--text-color); }
.link-list li a:hover{ filter:brightness(1.05); }
.link-list .icon{ width:18px; height:18px; display:inline-block; }
.link-list li form{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border-color); background:var(--input-bg); border-radius:var(--border-radius); }
.link-list li form input[type=password]{ flex:1; min-width:120px; padding:8px 10px; border:1px solid var(--border-color); background:transparent; border-radius:var(--border-radius); color:var(--text-color); }
img.cover{max-width:300px;max-height:300px;width:auto;height:auto;border-radius:var(--border-radius);border:1px solid var(--border-color);display:block;margin-bottom:12px}

/* v42: drag-sort for link rows */
.drag-handle{cursor:grab; user-select:none; padding:6px 8px; border:1px dashed var(--border-color); border-radius:8px; font-size:16px; line-height:1; display:inline-flex; align-items:center; justify-content:center; min-width:28px; }
.drag-handle:active{cursor:grabbing}
.link-row.dragging{opacity:1;background:#3f3f3f;border-color:#666}

.link-row.dragging input{background:transparent;color:var(--text-color)}

#add-track-btn{margin-top:12px}

#add-link-btn{margin-top:12px;margin-bottom:14px}

.drag-active{ user-select:none; }

.drag-handle{ cursor:grab; user-select:none; padding:6px 8px; border:1px dashed var(--border-color); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; min-width:28px; } .drag-handle:active{ cursor:grabbing }

.link-row.dragging{ background:#3f3f3f; border-color:#666; opacity:1; z-index:2 } .link-row.dragging input{ background:transparent; color:var(--text-color) }

.release-actions{ margin-top: 24px; }

.links-card{ margin-bottom: 16px; }


/* v43-dndfix14: Global mobile overflow fixes */
:root,*,*::before,*::after{ box-sizing:border-box }
html,body{ width:100%; max-width:100%; overflow-x:hidden }
main,section,.page,.container{ max-width:100%; overflow-x:hidden }

/* Responsive YouTube embed */
.embed-container{ position:relative; width:100%; max-width:100%; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden }
.embed-container iframe{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; border:0 }

/* Prevent link rows from overflowing */
.card{ max-width:100%; box-sizing:border-box }
.link-list{ list-style:none; padding:0; margin:0 }
.link-list li{ margin:0 0 10px 0 }
.link-list li a,
.link-list li form{ display:flex; align-items:center; gap:8px; width:100%; max-width:100%; box-sizing:border-box; overflow:hidden }
.link-list li a svg{ flex:0 0 auto }
.link-list li a span,
.link-list li form span{ flex:1; min-width:0; overflow-wrap:anywhere; word-break:break-word }
.link-list li form input[type="password"]{ flex:1 1 220px; min-width:0; max-width:100% }

/* Edit forms: wrap gracefully on phones */
.row-flex.group-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%; max-width:100% }
.row-flex.group-row input[type=url],
.row-flex.group-row input[type=text],
.row-flex.group-row input[type=password]{ flex:1 1 260px; min-width:0; max-width:100% }
.row-flex.group-row .btn,.drag-handle,.badge.platform-badge{ flex:0 0 auto }

@media (max-width:640px){
  .row-flex.group-row input[type=url],
  .row-flex.group-row input[type=text],
  .row-flex.group-row input[type=password]{ flex-basis:100% }
}



/* v43-dndfix15: final mobile hardening for embeds + links */
html,body{ width:100%; max-width:100%; overflow-x:hidden }
.embed-container{ position:relative; width:100%; max-width:100%; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden }
.embed-container iframe{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; border:0 }

.link-list{ list-style:none; padding:0; margin:0; width:100% }
.link-list li{ margin:0 0 10px 0; width:100% }
.link-list li a,
.link-list li form{ display:flex; align-items:center; gap:8px; width:100%; max-width:100%; overflow:hidden; box-sizing:border-box }
.link-list li a svg{ flex:0 0 auto }
.link-list li a span,
.link-list li form span{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; word-break:break-word }
.link-list li form input[type="password"]{ flex:1 1 220px; min-width:0; max-width:100% }



/* v43-dndfix16: single-embed guarantee + hardened mobile responsiveness */
:root,*,*::before,*::after{ box-sizing:border-box }
html,body{ width:100%; max-width:100%; overflow-x:hidden }
#app,.container,.wrap,.page,main,section,.grid{ max-width:100%; overflow-x:hidden }

.embed-container{ position:relative; width:100%; max-width:100%; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden }
.embed-container iframe{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; border:0 }

.card{ max-width:100%; box-sizing:border-box }
.card .content{ width:100%; max-width:100%; overflow-wrap:anywhere; word-break:break-word }
.link-list{ list-style:none; padding:0; margin:0; width:100% }
.link-list li{ width:100%; margin:0 0 10px 0 }
.link-list li a,
.link-list li form{ display:flex; align-items:center; gap:8px; width:100%; max-width:100%; overflow:hidden; box-sizing:border-box }
.link-list li a svg{ flex:0 0 auto }
.link-list li a span,
.link-list li form span{ flex:1; min-width:0; overflow-wrap:anywhere; word-break:break-word }
.link-list li form input[type="password"]{ flex:1 1 220px; min-width:0; max-width:100% }



/* v43-dndfix17: enforce single embed and wrap link rows on mobile */
.link-list li a{ flex-wrap: wrap }
.link-list li a span{ min-width:0; flex:1 1 100% }
.link-list li form{ flex-wrap: wrap }
.link-list li form input[type="password"]{ flex:1 1 100% }