:root {
  --bg: #0d0a16;
  --panel: #1a1428;
  --panel2: #241c38;
  --line: #342a4d;
  --text: #f4f0ff;
  --muted: #a69cc4;
  --pink: #ff4fa3;
  --violet: #7c5cff;
  --ok: #3ddc97;
  --warn: #ffb547;
  --err: #ff6b6b;
  --grad: linear-gradient(90deg, var(--pink), var(--violet));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 "Noto Sans Thai", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small-text { font-size: 13px; }
.err { color: var(--err); margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.btn {
  font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 16px; cursor: pointer; min-height: 44px; transition: background .15s, transform .1s;
}
.btn:hover { background: #2e2447; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--grad); border: 0; font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.small { padding: 4px 12px; min-height: 36px; border-radius: 10px; }
.btn.icon { padding: 0; width: 44px; height: 44px; display: grid; place-items: center; font-size: 20px; border-radius: 50%; }
.btn.big { padding: 14px 40px; font-size: 20px; }
input, textarea {
  font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px; min-height: 44px; width: 100%;
}
input[type=search], input[type=url], input[type=password] { -webkit-appearance: none; appearance: none; }
input:focus, textarea:focus { outline: 2px solid var(--violet); outline-offset: 1px; }
textarea { resize: vertical; line-height: 1.6; }

/* login */
.login-page { display: grid; place-items: center; padding: 16px; }
.login-card { width: min(360px, 100%); display: grid; gap: 12px; text-align: center; background: var(--panel); padding: 32px 24px; border-radius: 20px; border: 1px solid var(--line); }
.login-card img { margin: 0 auto; }
.login-card h1 { margin: 0; font-size: 26px; }
.login-card p { margin: 0; }

/* library */
#library { max-width: 880px; margin: 0 auto; padding: 16px 16px 48px; }
.lib-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; }
.add { display: flex; gap: 8px; margin-bottom: 14px; }
.add input { flex: 1; }
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.tools input { flex: 1 1 220px; }
.chips { display: flex; gap: 6px; }
.chip { font: inherit; font-size: 14px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; min-height: 36px; cursor: pointer; }
.chip.on { color: var(--text); background: var(--panel2); border-color: var(--violet); }
.songs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.song {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px; cursor: pointer;
}
.song.ready:hover { border-color: var(--violet); }
.song img { width: 96px; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; background: var(--panel2); display: block; }
.song .meta { min-width: 0; }
.song .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.song .sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song .acts { display: flex; gap: 4px; }
.song .acts .btn.icon { width: 40px; height: 40px; font-size: 18px; background: transparent; border-color: transparent; }
.song .acts .fav.on { color: #ffd34f; }
.badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; margin-right: 6px; background: var(--panel2); }
.badge.ok { color: var(--ok); }
.badge.wait { color: var(--warn); }
.badge.bad { color: var(--err); }
.empty { text-align: center; padding: 48px 0; }
@media (max-width: 520px) {
  .song { grid-template-columns: 72px 1fr auto; }
  .song img { width: 72px; }
  .add { flex-direction: column; }
}

/* player */
#player { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(40px) brightness(.32) saturate(1.3); z-index: -1; }
.p-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
.p-head .btn.icon { background: rgba(0,0,0,.25); border-color: transparent; }
.p-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.p-title b, .p-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-title span { font-size: 13px; }
.stage { flex: 1; display: grid; place-items: center; padding: 8px 16px; min-height: 0; position: relative; }
.lyrics { width: 100%; max-width: 1100px; text-align: center; display: flex; flex-direction: column; gap: .5em; font-size: clamp(22px, 5.2vw, 60px); }
.lyrics .l { font-weight: 800; line-height: 1.35; transition: opacity .3s, transform .3s; }
.lyrics .prev { opacity: .28; font-size: .62em; }
.lyrics .next { opacity: .55; font-size: .72em; }
.lyrics .next2 { opacity: .3; font-size: .62em; }
.lyrics .cur {
  --p: 0%;
  background: linear-gradient(90deg, #ffe066 0 var(--p), #fff var(--p) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 12px rgba(0,0,0,.6));
}
.lyrics .gap { color: var(--muted); font-weight: 600; letter-spacing: .3em; }
.lyrics.plain { overflow-y: auto; max-height: 100%; font-size: clamp(18px, 3.4vw, 32px); gap: .25em; }
.lyrics.plain .l { font-weight: 600; opacity: .9; }
.nolyrics { text-align: center; display: grid; gap: 12px; justify-items: center; }
.nolyrics .row { justify-content: center; }
.loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; background: rgba(13,10,22,.55); z-index: 2; }
.loading .bar { width: min(320px, 70vw); height: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; }
.loading .bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .2s; }

.controls { background: rgba(13,10,22,.78); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 10px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); display: grid; gap: 8px; }
.seek { display: flex; gap: 10px; align-items: center; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.seek input { flex: 1; padding: 0; min-height: 28px; }
input[type=range] { accent-color: var(--pink); background: transparent; border: 0; }
.main-btns { display: flex; justify-content: center; align-items: center; gap: 22px; }
.main-btns .btn.icon { font-size: 14px; font-weight: 600; }
.btn.play { width: 64px; height: 64px; border-radius: 50%; padding: 0; font-size: 26px; background: var(--grad); border: 0; }
.mixer { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; align-items: center; font-size: 14px; color: var(--muted); }
.mixer label { display: flex; align-items: center; gap: 8px; }
.mixer label input { width: 120px; min-height: 28px; padding: 0; }
.mixer output { width: 3em; color: var(--text); font-variant-numeric: tabular-nums; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper b { min-width: 3.2em; text-align: center; color: var(--text); font-variant-numeric: tabular-nums; }
.stepper em { font-style: normal; color: var(--warn); font-size: 12px; }
.fs .controls { opacity: .15; transition: opacity .4s; }
.fs .controls:hover, .fs .controls:focus-within { opacity: 1; }

/* dialogs */
.dlg { width: min(560px, calc(100% - 32px)); max-height: 86vh; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.dlg.wide { width: min(760px, calc(100% - 32px)); }
.dlg::backdrop { background: rgba(0,0,0,.6); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 18px; }
.dlg-head .btn.icon { width: 36px; height: 36px; font-size: 16px; }
.dlg-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 10px; }
@media (max-width: 520px) { .dlg-form { grid-template-columns: 1fr; } }
.results { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.results li button { width: 100%; text-align: left; display: grid; gap: 2px; }
.results .r-sub { font-size: 13px; color: var(--muted); }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tab { font: inherit; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px; cursor: pointer; }
.tab.on { color: var(--text); border-color: var(--pink); }
[data-pane] { display: grid; gap: 10px; }
.tap-now { font-size: 18px; padding: 10px 12px; background: var(--panel2); border-radius: 12px; }
.foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line); padding: 10px 18px; border-radius: 12px; z-index: 50; max-width: calc(100% - 32px); box-shadow: 0 8px 30px rgba(0,0,0,.5); }

/* MV จาก YouTube: ปิดเสียง วางหลังเนื้อร้อง ขนาดพอดีกรอบ (contain) */
.mv { position: absolute; inset: 0; display: grid; place-items: center; container-type: size; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s; }
.mv .box { width: min(100cqw, 100cqh * 16 / 9); height: min(100cqh, 100cqw * 9 / 16); overflow: hidden; position: relative; }
/* iframe สูงกว่ากรอบ 200px: ภาพยังพอดีกรอบ แต่แถบชื่อคลิป/ปุ่ม More videos ของ YouTube ที่ชิดขอบถูกตัดออก */
.mv iframe { position: absolute; left: 0; top: -100px; width: 100%; height: calc(100% + 200px); border: 0; }
.stage.mv-live .mv { opacity: 1; }
.lyrics, .nolyrics { position: relative; z-index: 1; }
.stage.mv-live .lyrics {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: none; gap: .3em;
  padding: 40px 16px 14px; font-size: clamp(20px, 4.2vw, 52px);
  background: linear-gradient(transparent, rgba(0,0,0,.72) 40%);
}
.stage.mv-live .lyrics .prev, .stage.mv-live .lyrics .next2 { display: none; }
.stage.mv-live .lyrics .l:not(.cur) { text-shadow: 0 2px 8px #000; }
.mvbtn { font-size: 13px !important; font-weight: 800; color: var(--muted); }
.mvbtn.on { color: #fff; background: var(--grad) !important; }

/* ผลค้นหา YouTube */
.yt { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px; margin-bottom: 18px; }
.yt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
.yt .song { background: var(--panel2); cursor: default; }
.yt .song .btn.add-one { min-height: 38px; padding: 6px 14px; white-space: nowrap; }
.yt .song .in-lib { font-size: 13px; color: var(--ok); white-space: nowrap; padding: 0 6px; }
.yt .song img { cursor: pointer; }
.lib-title { font-size: 16px; color: var(--muted); font-weight: 600; margin: 4px 0 10px; }
.lyr-note { margin: -4px 0 10px; min-height: 1em; }

/* โหมดคลิปคาราโอเกะ: ใช้เครื่องเล่น YouTube (มีเสียง+ปุ่มของ YouTube) เต็มจอ */
.kchk { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); margin: -4px 0 14px; cursor: pointer; }
.kchk input { width: 20px; height: 20px; min-height: 0; accent-color: var(--pink); }
.yt .song .acts { flex-direction: column; align-items: stretch; gap: 6px; }
.yt .song .acts .btn { font-size: 14px; }
#player.clip .controls, #player.clip #p-mv, #player.clip #p-menu, #player.clip .lyrics, #player.clip #nolyrics, #player.clip #loading { display: none !important; }
#player.clip .mv { opacity: 1; pointer-events: auto; }
#player.clip .mv iframe { top: 0; height: 100%; }
#player.clip .stage { padding: 0; }
.badge.clip { color: #ffd34f; }

/* คิวเพลง */
.queue { background: var(--panel); border: 1px solid var(--violet); border-radius: 18px; padding: 12px; margin-bottom: 18px; }
.q-list { margin: 0; padding: 0 0 0 22px; display: grid; gap: 6px; }
.q-list li { padding: 4px 0; }
.q-row { display: flex; align-items: center; gap: 8px; }
.q-row .q-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-row .btn.icon { width: 36px; height: 36px; font-size: 15px; background: transparent; border-color: transparent; }
.song .acts .btn.icon.qadd { font-size: 20px; }
.next-bar { position: absolute; top: 8px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; max-width: min(70%, 520px);
  background: rgba(13,10,22,.75); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 14px; font-size: 14px; }
.next-bar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lyr-warn { position: absolute; top: 8px; left: 12px; z-index: 3; font: inherit; font-size: 13px; color: #ffd34f; cursor: pointer;
  background: rgba(13,10,22,.75); border: 1px solid #6b5a1f; border-radius: 999px; padding: 6px 12px; }
#player.clip .lyr-warn { display: none !important; }
.countdown { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; text-align: center; gap: 8px; background: rgba(13,10,22,.88); }
.countdown h2 { margin: 0; font-size: clamp(22px, 4vw, 44px); padding: 0 16px; }
.countdown #cd-sec { font-size: 48px; font-weight: 800; margin: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 520px) { .next-bar { top: auto; bottom: 8px; right: 8px; } }
.countdown .btn { justify-self: center; padding: 10px 28px; }
.next-bar > span { white-space: nowrap; }

/* โหมดทีวี + QR */
.tv { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(280px, 40%) 1fr; gap: 32px; padding: 32px; align-items: center; }
.tv-left { display: grid; justify-items: center; gap: 10px; text-align: center; }
.tv-left h2, .tv-right h2 { margin: 0; font-size: clamp(22px, 3vw, 40px); }
.qr { background: #fff; padding: 14px; border-radius: 16px; line-height: 0; }
.qr img, .qr canvas { width: min(34vw, 340px) !important; height: auto !important; }
.qr-dlg { justify-self: center; width: fit-content; margin: 0 auto 8px; }
.qr-dlg img, .qr-dlg canvas { width: min(70vw, 260px) !important; }
.tv-right { display: grid; gap: 14px; align-content: center; min-width: 0; }
.tv-queue { font-size: clamp(16px, 2.2vw, 28px); max-height: 55vh; overflow: auto; }
.tv-queue .q-row { gap: 12px; }
.tv-start { font-size: clamp(18px, 2.4vw, 30px); font-weight: 800; color: #ffd34f; margin: 0; }
.tv-unlock { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13,10,22,.85); font-size: 28px; cursor: pointer; z-index: 5; }
.tv-mini { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: grid; justify-items: center; gap: 4px; font-size: 12px; color: var(--muted);
  background: rgba(13,10,22,.75); border-radius: 12px; padding: 8px; }
.tv-mini > div { background: #fff; padding: 6px; border-radius: 8px; line-height: 0; }
.tv-mini img, .tv-mini canvas { width: 96px !important; height: 96px !important; }
#player.clip .tv-mini { display: none !important; }
.q-singer { color: var(--muted); font-size: .85em; }
@media (max-width: 760px) { .tv { grid-template-columns: 1fr; overflow: auto; padding: 16px; } .qr img, .qr canvas { width: min(70vw, 280px) !important; } }
/* หน้าแขก */
.guest { max-width: 680px; margin: 0 auto; padding: 16px 16px 48px; display: grid; gap: 12px; }
.g-name { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.g-songs .song { cursor: default; }

/* ห้อง + คำขอเพลง */
.req-box { margin-top: 12px; display: grid; gap: 6px; }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.req-row { display: flex; align-items: center; gap: 8px; background: var(--panel2); border-radius: 12px; padding: 6px 8px; }
.req-row img { width: 64px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
.req-row .q-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-row .btn { min-height: 36px; padding: 4px 12px; }
.req-row .ok { color: var(--ok); } .req-row .no { color: var(--err); }
.req-badge { position: absolute; top: 52px; left: 12px; z-index: 3; font: inherit; font-size: 14px; color: #fff; cursor: pointer;
  background: var(--grad); border: 0; border-radius: 999px; padding: 6px 14px; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .65; } }
.tv-room { font-size: .55em; font-weight: 600; }
.room-row { display: flex; align-items: center; gap: 8px; }
.room-row .q-name { flex: 1; }

/* หมวดเพลง */
.cats { flex-wrap: wrap; margin: -4px 0 14px; }
.cats .chip.lang { border-style: dashed; }
.chip .n { opacity: .6; font-size: .85em; margin-left: 4px; }
.sort { font: inherit; font-size: 14px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; min-height: 36px; }
.tag-badge { display: inline-block; font-size: 11px; padding: 0 7px; margin-left: 4px; border-radius: 999px; background: #2b2246; color: #c9b8ff; }
.tag-pick .chip { cursor: pointer; }
.song.sel-mode { position: relative; }
.song.sel-mode::before { content: ""; position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #fff; background: rgba(0,0,0,.4); z-index: 1; }
.song.picked { border-color: var(--pink); }
.song.picked::before { background: var(--pink); content: "✓"; color: #fff; font-size: 14px; display: grid; place-items: center; }
.sel-mode .acts { visibility: hidden; }
.sel-bar { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 40; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
  width: min(760px, calc(100% - 24px)); background: var(--panel2); border: 1px solid var(--violet); border-radius: 16px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.sel-bar input { width: 150px; min-height: 36px; padding: 6px 10px; }
body.selecting #library { padding-bottom: 120px; }

.song .tags { margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px; }
.song .tags .tag-badge { margin-left: 0; }
.lib-head { flex-wrap: wrap; gap: 10px; }
.lib-head .row { flex-wrap: nowrap; gap: 6px; }
.sort { -webkit-appearance: none; appearance: none; padding-right: 28px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a69cc4' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center; }
@media (max-width: 520px) {
  .lib-head { justify-content: space-between; }
  .lib-head .brand { font-size: 20px; }
  .lib-head .row .btn.small { padding: 4px 10px; font-size: 14px; }
}