/* 39GO KARA / Night Console. UI only; no simulated audio meters. */
:root{--bg:#070c16;--panel:#101b2c;--panel2:#152239;--line:#263b52;--muted:#91a2b8;--text:#ecf2f8;--lime:#e4c07b;--gold:#e4c07b;--cyan:#64d9e8;--pink:#e98da1}
[hidden]{display:none!important}body{background:radial-gradient(ellipse at 50% -20%,#193047 0,transparent 65%),#070c16;color:var(--text)}button{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.auth-loading .wrap{visibility:hidden}.auth-loading:after{content:'39GO KARA · กำลังเชื่อมต่อ';position:fixed;inset:0;display:grid;place-items:center;color:var(--gold)}
.panel{background:linear-gradient(145deg,#142235,#0c1422);border:1px solid #2b3c50;border-radius:17px;box-shadow:inset 0 1px #ffffff0b,0 12px 32px #0005}.top{border-bottom:1px solid #d2b37525;padding-bottom:14px}.brand{letter-spacing:1px}.brand i{font-weight:500;letter-spacing:3px}.console-edition{display:inline-block;margin-left:18px;color:#7f94a9;font-size:10px;letter-spacing:2px;font-weight:400}.account-bar{display:flex;gap:16px;align-items:center}.badge{border-color:#786445;color:var(--gold);font-size:10px;letter-spacing:1.5px}.btn-primary{background:linear-gradient(#edcf97,#cda45f);color:#15202a;box-shadow:inset 0 1px #ffefd0,0 4px 14px #0005}.btn-secondary,.iconbtn{background:linear-gradient(#24364b,#172639);border:1px solid #3b4e63}.btn,.iconbtn{min-height:42px}.field input,.field textarea,.field select,.guest-form input,.guest-form select{background:#080f1b;border-color:#30455e;color:#e9f1fb}.field input:focus,.field textarea:focus{border-color:var(--cyan)}
.access-screen{min-height:calc(100dvh - 145px);display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center;max-width:1080px;margin:auto}.access-intro h1{font-size:clamp(40px,6vw,76px);line-height:1.2;margin:20px 0;letter-spacing:-2px;font-weight:600}.access-intro h1 span{color:var(--gold)}.access-intro p{color:#9bafc4;line-height:1.9;font-size:17px}.access-detail{font-size:10px;letter-spacing:1.7px;color:#8299ad;margin-top:48px;display:flex;align-items:center;gap:10px}.login-card{padding:34px}.login-card h2{font-size:26px;margin:8px 0 24px}.panel-index{color:var(--gold);font:600 11px system-ui;letter-spacing:2px}.remember-row{display:flex;align-items:center;gap:8px;color:#a2b4c8;font-size:13px;margin:20px 0}.login-guest{border-top:1px solid var(--line);margin-top:25px;padding-top:20px;color:var(--muted);font-size:13px}.login-guest .join-row{margin-top:10px}.login-guest input{background:#0a1320;border:1px solid var(--line);color:white;border-radius:8px;padding:10px;width:100%}.form-error{color:#ffadac;font-size:14px;min-height:20px}.status-led{display:inline-block;width:6px;height:6px;border-radius:50%;background:#72dbaa;box-shadow:0 0 9px #72dbaa55}.my-rooms{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}.my-rooms h3{flex-basis:100%;font-size:14px;color:var(--muted)}.my-rooms a{color:var(--cyan);border:1px solid var(--line);padding:7px 11px;border-radius:8px;text-decoration:none;font-size:13px}
body.party-open .wrap{padding:14px 20px 12px}.party-open .top{flex-basis:36px;padding-bottom:8px;margin-bottom:10px}.room-head{min-height:56px;margin-bottom:12px}.room-head h1{font-size:23px;letter-spacing:.2px}.room-head .tag{font-size:9px;letter-spacing:2px;color:#7596ae}.owner-pill{background:#263927;border:1px solid #4b7357;color:#a5e8b8;letter-spacing:1px}.room-code{color:var(--cyan)}
.room-grid{grid-template-columns:minmax(0,1fr) 108px minmax(260px,.39fr);gap:12px;padding-bottom:76px}.player-card{padding:13px}.deck-heading{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#7a96ae;letter-spacing:1.8px;padding:0 2px 11px}.deck-heading .status-led{margin-right:8px}#playbackStatus{color:var(--gold)}.player-box{border:1px solid #2c4155;border-radius:11px;background:#030710}.player-empty{background:radial-gradient(ellipse,#172638,#050a12);color:#b6c9d8}.play-disc{background:#132134;color:var(--gold);border-color:#5b503a}.now{padding:13px 3px 3px}.now h2{font-size:21px;line-height:1.35}.now .tag{font-size:9px;letter-spacing:1px}.now .muted{font-size:12px}.channel-strip{background:linear-gradient(90deg,#0d1725,#1b2a3b 50%,#101b2b);border:1px solid #354455;border-radius:14px;box-shadow:inset 0 1px #ffffff0d,0 12px 25px #0004;display:flex;flex-direction:column;align-items:center;padding:17px 10px 12px;min-height:0}.channel-strip h3{font-size:11px;letter-spacing:2px;margin:10px 0}.channel-led{width:28px;height:3px;border-radius:2px;background:var(--cyan);box-shadow:0 0 9px #64d9e842;margin:0 0 15px}.channel-strip label{font-size:11px;color:var(--muted)}#volumeValue{font:500 25px system-ui;color:var(--gold);margin:7px 0 10px}.fader-track{flex:1;min-height:65px;width:54px;padding:5px 10px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 20px,#70869b55 21px,transparent 22px);display:flex;justify-content:center}.fader-track input{writing-mode:vertical-lr;direction:rtl;width:26px;min-height:0;height:100%;accent-color:var(--gold);cursor:ns-resize}.mute-key{margin-top:14px;width:70px;min-height:35px;border:1px solid #536171;background:linear-gradient(#2b3a4b,#172536);box-shadow:0 3px 0 #040910;color:#aec0d0;font-size:10px;letter-spacing:1.6px;border-radius:5px}.mute-key[aria-pressed=true]{background:#9e483a;color:#fff;border-color:#ff9d8b;box-shadow:0 0 14px #e95b3033}.channel-note{font-size:9px;color:#6d8398;margin-top:12px;text-align:center}
.sidebar{grid-template-rows:minmax(0,1fr) 136px}.side-card{padding:13px}.queue-subtitle{font-size:10px;color:#7d93a7;margin-left:5px;font-weight:400}.side-title h3{font-size:13px;letter-spacing:1px}.queue-actions button{border:1px solid #425771!important;background:#1c2c40!important;color:#c9dae8!important}.count{background:#1a2b3e;color:#91adc1}.track{background:linear-gradient(110deg,#17273b,#101c2b);border-color:#2d4159;border-radius:9px;align-content:center;min-width:0}.track.current{background:linear-gradient(110deg,#29302c,#13222b);border-color:#9d8552}.track-name{font-size:13px;line-height:1.5}.track-by{color:#8298ad}.num{background:#22344b;color:#9ebbd1;border-radius:6px}.track.current .num{background:#d9b574;color:#15222b}.queue-votes{color:#769bae}.tiny{background:#29435c}.queue{align-content:start;grid-auto-rows:minmax(65px,auto)}#queuePanel .queue{overflow:hidden}#queuePanel>.muted{font-size:9px;color:#5e7891}#sharePanel{background:linear-gradient(120deg,#152439,#0c1929)}#sharePanel .qrrow canvas{width:76px!important;height:76px!important}.shareurl{color:#829bb4}.smallbtn{color:var(--gold)}
#eventPanel{left:20px;right:20px;bottom:12px;height:61px;border:1px solid #415268;border-top-color:#6a604b;border-radius:13px;background:linear-gradient(#1b2b3e,#101d2d);box-shadow:0 -5px 30px #0005,inset 0 1px #ffffff0a;backdrop-filter:blur(16px)}#eventPanel .emoji{background:#17273b;border:1px solid #354a62;border-radius:8px;min-height:36px}.live-dot{background:#73d7a1;box-shadow:0 0 7px #73d7a166}.toolbar-brand{color:#89a4b8;letter-spacing:1.5px}#hostControlsToggle{color:var(--gold);border-color:#897347;background:linear-gradient(#3d3c34,#222b31);min-width:96px}.host-drawer{background:linear-gradient(#203248,#101c2e)!important;border-color:#576078!important;box-shadow:0 -12px 35px #0008;border-radius:13px!important;max-width:calc(100vw - 32px)}.pref button.on{background:var(--gold);border-color:#ffe0a4}.iconbtn.primary{background:linear-gradient(#edcf97,#cda45f);color:#15202a;border-color:#e6c480}.toast{background:#dce8ee;border:1px solid #b8d0dd}.modal{background:#020711cf;backdrop-filter:blur(12px)}.modal-box{border-color:#61593f}.guest-now strong{color:var(--gold)}
@media(max-width:1000px){.room-grid{grid-template-columns:minmax(0,1fr) 82px minmax(220px,.6fr);gap:8px}.channel-strip{padding:12px 6px}.channel-strip h3{font-size:10px}.channel-note{font-size:8px}.access-screen{gap:30px}.console-edition{display:none}}
@media(max-width:820px) and (orientation:portrait){body.party-open .wrap{padding:9px 10px}.room-grid{grid-template-columns:minmax(0,1fr) 72px;grid-template-rows:minmax(0,1.25fr) minmax(150px,.8fr);padding-bottom:61px;gap:8px}.player-card{grid-column:1;grid-row:1;padding:8px}.channel-strip{grid-column:2;grid-row:1/3;padding:12px 5px 8px}.sidebar{grid-column:1;grid-row:2;grid-template-columns:1fr;grid-template-rows:1fr}.player-box{flex:1;max-height:none;aspect-ratio:auto}.now h2{font-size:16px}.now .muted{font-size:10px}.deck-heading{font-size:8px;letter-spacing:.7px;padding-bottom:8px}.room-head{min-height:49px;margin-bottom:8px}.room-head h1{font-size:19px}.room-head .muted{font-size:10px}.queue-subtitle{display:none}.track-name{font-size:12px!important}.queue{grid-auto-rows:minmax(58px,auto)}#eventPanel{left:8px;right:8px;bottom:8px;height:50px}#eventPanel .event-buttons .emoji:nth-child(n+3){display:none}#eventPanel .emoji{min-height:30px;min-width:28px}#hostControlsToggle{min-width:66px}#eventPanel .iconbtn{min-height:34px}.account-bar{gap:8px}.badge{font-size:8px;padding:4px 7px}.brand{font-size:17px}.top .smallbtn{font-size:10px}}
@media(max-width:650px){.access-screen{display:flex;flex-direction:column;gap:20px;align-items:stretch;min-height:0;padding:12px 5px}.access-intro h1{font-size:40px;margin:12px 0}.access-intro p{font-size:14px;margin:10px 0}.access-detail{display:none}.login-card{padding:24px}.top{margin-bottom:10px}.home-grid{grid-template-columns:1fr}.hero h1{font-size:38px}.hero p{font-size:14px}.channel-strip .panel-index{font-size:9px}#volumeValue{font-size:21px}.mute-key{width:54px}}
@media(orientation:landscape) and (max-height:600px){body.party-open .wrap{padding:7px 12px}.room-head{min-height:30px;margin-bottom:6px}.room-head h1{font-size:17px}.room-head .muted{font-size:9px}.room-grid{grid-template-columns:minmax(0,1fr) 68px minmax(230px,.65fr);grid-template-rows:minmax(0,1fr);gap:7px;padding-bottom:52px}.channel-strip{padding:6px 4px}.channel-strip h3{margin:5px 0;font-size:9px}.channel-led{margin-bottom:5px}.channel-strip label,.channel-note,.channel-strip .panel-index{display:none}#volumeValue{font-size:17px;margin:3px 0}.mute-key{margin-top:7px;min-height:27px;width:50px}.fader-track{min-height:45px;width:42px}.player-card{padding:7px}.deck-heading{font-size:8px;padding-bottom:5px}.player-box{flex:1;max-height:none}.now{padding-top:5px}.now h2{font-size:15px}.now .muted{font-size:9px}.now .tag{display:none}.sidebar{grid-template-rows:1fr}#eventPanel{height:44px;bottom:7px;left:12px;right:12px}#eventPanel .emoji{min-height:27px;padding:3px 6px}#eventPanel .iconbtn{min-height:30px}.side-card{padding:9px}.queue{grid-auto-rows:minmax(60px,auto)}.room>.footnote{display:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}

#queue .track{height:72px;min-height:72px;max-height:72px}#queue .track-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#queue .track-by{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Reference console finish: shared by login, room, guest and dialogs. */
:root{--bg:#04090d;--panel:#0c161c;--panel2:#14232c;--line:#344b57;--gold:#f2cf68;--lime:#f2cf68;--muted:#a4bac8}
body{background:radial-gradient(ellipse at 45% 0,#1a2a37,transparent 65%),#04090d}
.panel,.channel-strip,.host-drawer{border-radius:7px;background:linear-gradient(125deg,#17252d 0,#0b141a 40%,#071015 100%);border:1px solid #58707a;box-shadow:inset 0 0 0 3px #050b10,inset 0 4px 9px #b6d4dd15,0 4px 12px #0008}
.top{background:linear-gradient(100deg,#060d12,#162530,#080f14);border-bottom:1px solid #6e7d7f;padding:10px 14px;border-radius:5px}.brand{color:#f2d482;text-shadow:0 2px 2px #000;font-weight:800}.brand i{color:#e6dfca;font-weight:700}.badge{color:#c7d9df;background:#061014;border-color:#425761}
.btn,.iconbtn,.smallbtn,.mute-key{border-radius:5px}.btn-secondary,.iconbtn,.mute-key{background:linear-gradient(145deg,#273641,#101a21 65%);border-color:#71828b;box-shadow:inset 0 1px #d2e2ec35,0 3px 3px #0008;color:#edf3f6}
.btn-primary,.iconbtn.primary{background:linear-gradient(135deg,#ffeaa2,#edc549 52%,#d9a92e);border:1px solid #fff0b0;color:#201b0c;box-shadow:inset 0 0 0 2px #ffec9d70,0 0 14px #f1c74725,0 3px 3px #0008;font-weight:750}
.btn:hover,.iconbtn:hover{filter:brightness(1.12)}button:disabled{filter:none;opacity:.5}.side-title,.deck-heading{border-bottom:1px solid #54687465;padding-bottom:10px;color:#f2e6b9}.side-title h3{font-size:16px;letter-spacing:0}.deck-heading{font-size:12px;letter-spacing:1px}.panel-index{color:#f2cf68}.field input,.field textarea,.field select,.guest-form input,.guest-form select,.login-guest input{background:#040b10;border-color:#405460;border-radius:5px;box-shadow:inset 0 2px 5px #0008;min-height:44px}.field label{color:#d1dfe6}.status-led,.live-dot{background:#38ed75;box-shadow:0 0 9px #38ed7550}
.access-screen{max-width:1180px;gap:64px}.access-intro{padding:28px;border-left:3px solid #e7c35b}.access-intro h1{color:#f3f5f2}.access-intro h1 span{color:#f2cf68}.login-card{border-top:2px solid #d5bd70;padding:34px}.login-card h2{font-size:30px}.login-guest{border-color:#3e515b}.remember-row{color:#c0ced5}.home-grid .card h2,.modal-box h2{color:#f3d67d}.guest-head{background:linear-gradient(#1b2a33,#091219);border:1px solid #526975;border-radius:6px;padding:16px}.guest-now{border-left:3px solid #edc549}.guest-now strong{font-size:22px}.guest-events .emoji,#eventPanel .emoji{background:linear-gradient(135deg,#24343d,#081217);border:1px solid #5a707b;box-shadow:inset 0 1px #b6d4dd25;border-radius:5px}.track{background:linear-gradient(115deg,#1c2c36,#091319);border-color:#425c6a;border-radius:6px}.track.current{border-color:#f3d055;background:linear-gradient(115deg,#39361b,#121a16);box-shadow:inset 0 0 0 1px #d5ac3760}.track-name{color:#f1f3f1}.track-by{color:#aac1ce}.num{background:#09151d;color:#e4edf0}.channel-strip{background:linear-gradient(90deg,#091217,#20313b 50%,#081015);border-top-color:#c6b16b}.channel-strip h3{color:#f4edd5}.channel-led{background:#e6ca6c;box-shadow:none}#volumeValue{color:#f5d773}.fader-track input{accent-color:#d7e1e5}.player-box{border-radius:4px;border-color:#4b6070}.player-empty{background:radial-gradient(ellipse at 50% 40%,#233340,#03090e 75%)}.play-disc{border-radius:8px;background:linear-gradient(#34454c,#14212b);border-color:#d4b969;color:#ffdd77}.now{border-top:1px solid #3e535d;margin-top:9px;padding:12px 4px 0}.now h2{color:#fff4d7}#eventPanel{border-radius:6px;background:linear-gradient(#21313a,#071016);border-color:#78817b}#hostControlsToggle{color:#ffdf78;border-color:#bba258;background:linear-gradient(#3d3c2b,#191e16)}#sharePanel{background:linear-gradient(120deg,#17272e,#050e12)}.modal-box{border-color:#d0b76c}.pref button.on{background:#efd06c;color:#231e0e}.guest-queue,.guest-events{padding:18px}.vote-controls button{background:#142831;color:white;border:1px solid #5b7480;border-radius:5px;min-height:44px}
@media(min-width:1100px){.room-grid{grid-template-columns:116px minmax(0,1fr) minmax(300px,.43fr)}.channel-strip{grid-column:1;grid-row:1}.player-card{grid-column:2;grid-row:1}.sidebar{grid-column:3;grid-row:1}}
@media(max-width:650px){.access-screen{gap:16px;padding:8px 0}.access-intro{padding:8px 18px}.access-intro h1{font-size:35px;margin:8px 0}.access-intro p{font-size:14px;line-height:1.6}.login-card{padding:23px}.login-card h2{font-size:26px}.top{padding:9px}.side-title h3{font-size:13px}.guest-head{padding:12px}.guest-now strong{font-size:19px}}

@media(min-width:821px) and (min-height:601px){.sidebar{grid-template-rows:minmax(0,1fr) 166px}}