/* ===================================================================
   [C] HOP THOAI - lop phu, the hop thoai, o nhap, nut chon playlist, toast.
       Trang quan tri (D) dung lai y nguyen cac lop nay.
   =================================================================== */

/* --------------- [C] hop thoai --------------- */
.modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:var(--s6);
  background:rgba(20,23,26,.34); backdrop-filter:blur(4px); }
.modal-card{ width:min(460px,100%); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4);
  max-height:86vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.modal-title{ font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.02em; }
.pl-pick{ display:flex; align-items:center; gap:11px; padding:9px; border:0; background:none;
  border-radius:var(--r-md); width:100%; text-align:left; color:var(--ink); }
.pl-pick:hover{ background:var(--panel2); }

.seg{ display:flex; background:var(--panel2); border:1px solid var(--line); border-radius:999px; padding:3px; }
.seg-opt{ flex:1; padding:8px 16px; border:0; background:none; color:var(--muted); border-radius:999px; font-size:13.5px; white-space:nowrap; }
.seg-opt.is-on{ background:var(--goldb); color:#fff; font-weight:700; }
.field{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--faint); }
.input{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:11px var(--s3); color:var(--ink); outline:none; }
.input:focus{ border-color:var(--goldb); box-shadow:0 0 0 3px var(--acc-soft); }
form{ display:flex; flex-direction:column; gap:var(--s3); }
.form-error{ margin:0; color:#b23b30; font-size:13px; }
.hint{ margin:0; text-align:center; color:var(--faint); font-size:12.5px; }

.toast{ position:fixed; left:50%; bottom:104px; transform:translateX(-50%); z-index:70;
  background:#14171a; color:#fff; padding:11px var(--s4); border-radius:999px; font-size:13.5px;
  box-shadow:var(--shadow-lg); }