#rdoBtn{position:fixed;left:54px;bottom:12px;z-index:9001;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid #3a3a3a;background:#141414;color:#e5e5e5;cursor:pointer;opacity:.7;display:grid;place-items:center;transition:opacity .15s,background .2s,border-color .2s}
#rdoBtn:hover,#rdoBtn.on{opacity:1}
#rdoBtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#rdoBtn.live{opacity:1;background:radial-gradient(circle at 35% 28%,#ffd98a,#c4780f 75%);border-color:#ffe3a8;color:#2b1704;box-shadow:0 0 0 0 rgba(255,170,50,.6);animation:rdoPulse 2.4s ease-out infinite}
@keyframes rdoPulse{0%{box-shadow:0 0 0 0 rgba(255,170,50,.6)}70%,100%{box-shadow:0 0 0 10px rgba(255,170,50,0)}}

#rdoPanel{--p:.5;position:fixed;left:54px;bottom:56px;z-index:9003;width:min(356px,calc(100vw - 24px));max-height:min(660px,calc(100vh - 72px));display:none;flex-direction:column;overflow:hidden;color:#f1e2bd;font-family:Sarabun,Tahoma,sans-serif;font-size:14px;border-radius:20px;padding:12px;
background:repeating-linear-gradient(91deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.10) 2px 3px,rgba(255,225,180,.025) 3px 6px,rgba(0,0,0,.06) 6px 7px),repeating-linear-gradient(88deg,rgba(255,210,150,.035) 0 14px,rgba(0,0,0,.05) 14px 31px),linear-gradient(180deg,#78492a 0%,#563219 48%,#3a2010 100%);
box-shadow:0 0 0 2px #c9a24e,0 0 0 3px #3b2a0c,0 34px 70px -10px rgba(0,0,0,.85),0 10px 22px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,226,180,.35),inset 0 -3px 6px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.5)}
#rdoPanel.on{display:flex;animation:rdoIn .22s cubic-bezier(.2,.9,.3,1.1)}
@keyframes rdoIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
#rdoPanel button{font:inherit;color:inherit;background:transparent;border:0;padding:0;border-radius:0;cursor:pointer}

/* หน้าปัดไฟส้ม */
#rdoPanel .rdial{position:relative;flex:none;padding:10px 14px 12px;border-radius:12px;overflow:hidden;background:radial-gradient(90% 130% at 50% 70%,rgba(255,150,40,.10),transparent 70%),linear-gradient(180deg,#241707,#0e0803);box-shadow:inset 0 4px 12px rgba(0,0,0,.95),inset 0 0 0 2px #090502,0 0 0 2px #c2994a,0 0 0 4px #4a3512,0 2px 0 4px rgba(255,225,170,.18);transition:background .5s}
#rdoPanel.playing .rdial{background:radial-gradient(95% 140% at 50% 78%,rgba(255,170,60,.62),rgba(255,120,20,.2) 55%,transparent 78%),linear-gradient(180deg,#3a2509,#170e04)}
#rdoPanel .rdial::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.17),rgba(255,255,255,.03) 34%,transparent 36%),linear-gradient(180deg,rgba(255,255,255,.1),transparent 18%);border-radius:inherit}
#rdoPanel .rdh{display:flex;align-items:center;gap:8px;min-height:22px}
#rdoPanel .rlamp{flex:none;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7a2a22,#3a0f0b);box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 0 0 2px #1a0e06;transition:all .3s}
#rdoPanel.playing .rlamp{background:radial-gradient(circle at 35% 30%,#ffb0a0,#ff3b2a 60%);box-shadow:0 0 10px 2px rgba(255,70,50,.85),0 0 0 2px #1a0e06}
#rdoPanel.loading .rlamp{background:radial-gradient(circle at 35% 30%,#ffe9a0,#ffb21c 60%);box-shadow:0 0 10px 2px rgba(255,190,40,.8),0 0 0 2px #1a0e06;animation:rdoBlink .9s steps(2) infinite}
@keyframes rdoBlink{50%{opacity:.25}}
#rdoPanel .rst{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:#a38d5f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
#rdoPanel.playing .rst{color:#ffd48a}
#rdoPanel .rst.err{color:#ff9a90}
#rdoPanel .reye{flex:none;position:relative;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#08140a 0 28%,#0d2412 29% 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.9),0 0 0 2px #b08a3c,0 0 0 3px #2c1f08}
#rdoPanel .reye::before{content:"";position:absolute;inset:4px;border-radius:50%;background:conic-gradient(from 180deg,transparent 0 30%,#3dff7a 30% 70%,transparent 70%);opacity:.18;filter:blur(.4px);transition:opacity .3s}
#rdoPanel.playing .reye::before{opacity:1;animation:rdoEye 1.1s ease-in-out infinite;box-shadow:0 0 10px #3dff7a}
@keyframes rdoEye{0%,100%{transform:scale(.55)}45%{transform:scale(1)}70%{transform:scale(.75)}}
#rdoPanel .rnow{position:relative;z-index:1;padding:6px 0 4px}
#rdoPanel .rnow b{display:block;font-size:21px;font-weight:700;line-height:1.2;color:#8f7c52;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s,text-shadow .4s}
#rdoPanel.playing .rnow b{color:#ffe2a6;text-shadow:0 0 12px rgba(255,170,60,.85),0 0 2px rgba(255,220,150,.9)}
#rdoPanel .rnow small{display:block;font-size:12.5px;color:#9a8660;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rdoPanel.playing .rnow small{color:#d9b877}
#rdoPanel .rsc{position:relative;margin:10px 0 0;height:30px}
#rdoPanel .rsc .tk{position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(90deg,rgba(255,214,140,.55) 0 1px,transparent 1px 8px) 0 100%/100% 8px no-repeat,repeating-linear-gradient(90deg,rgba(255,214,140,.95) 0 1.5px,transparent 1.5px 40px) 0 100%/100% 14px no-repeat}
#rdoPanel .rsc .nm{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font:400 12px/1 'Bebas Neue','Sarabun',sans-serif;letter-spacing:.06em;color:rgba(255,214,140,.7)}
#rdoPanel .rndl{position:absolute;top:-6px;bottom:2px;left:calc(var(--p)*100%);width:2px;margin-left:-1px;background:linear-gradient(180deg,#ff6a4d,#e0230f);box-shadow:0 0 8px rgba(255,60,30,.9),0 0 0 .5px rgba(255,200,180,.4);transition:left .75s cubic-bezier(.3,1.5,.5,1);z-index:2}
#rdoPanel .rndl::before{content:"";position:absolute;top:-2px;left:-3px;width:8px;height:8px;border-radius:50%;background:#ff4a30;box-shadow:0 0 6px #ff4a30}

/* ผ้าลำโพง + ปุ่ม */
#rdoPanel .rctl{flex:none;display:flex;align-items:center;justify-content:center;gap:20px;margin-top:14px;padding:14px 12px;border-radius:12px;
background:radial-gradient(circle,#150d06 0 1.25px,rgba(0,0,0,.0) 1.7px) 0 0/7px 7px,radial-gradient(circle at 3.5px 3.5px,rgba(255,236,190,.32) 0 1px,transparent 1.6px) 0 0/7px 7px,linear-gradient(180deg,#d6b878,#a47f3d 55%,#8b6a2f);
box-shadow:inset 0 3px 8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(60,40,10,.6),0 1px 0 rgba(255,226,170,.35),0 0 0 2px #2c1b0a}
#rdoPanel .rpl,#rdoPanel .rsk{display:grid;place-items:center;border-radius:50%!important;color:#f3dfae;background:radial-gradient(circle at 34% 26%,#6b4a30 0%,#2c190c 55%,#150b05 100%);transition:transform .1s,box-shadow .1s}
#rdoPanel .rpl{width:62px;height:62px;box-shadow:0 0 0 3px #e0c27c,0 0 0 5px #5a4216,0 10px 14px -2px rgba(0,0,0,.75),inset 0 2px 3px rgba(255,235,190,.35),inset 0 -5px 9px rgba(0,0,0,.65)}
#rdoPanel .rsk{width:44px;height:44px;box-shadow:0 0 0 2px #d7b96f,0 0 0 4px #5a4216,0 7px 10px -2px rgba(0,0,0,.7),inset 0 2px 3px rgba(255,235,190,.3),inset 0 -4px 7px rgba(0,0,0,.6)}
#rdoPanel .rpl:hover,#rdoPanel .rsk:hover{filter:brightness(1.18)}
#rdoPanel .rpl:active,#rdoPanel .rsk:active{transform:translateY(2px);box-shadow:0 0 0 3px #e0c27c,0 0 0 5px #5a4216,0 3px 5px -1px rgba(0,0,0,.7),inset 0 3px 8px rgba(0,0,0,.7)}
#rdoPanel .rsk:active{box-shadow:0 0 0 2px #d7b96f,0 0 0 4px #5a4216,0 2px 4px -1px rgba(0,0,0,.7),inset 0 3px 7px rgba(0,0,0,.7)}
#rdoPanel .rpl svg{width:26px;height:26px;fill:currentColor;stroke:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
#rdoPanel .rsk svg{width:19px;height:19px;fill:currentColor;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}

/* เสียง */
#rdoPanel .rv{flex:none;display:flex;align-items:center;gap:10px;padding:12px 6px 4px;color:#e6cc92}
#rdoPanel .rv svg{flex:none;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
#rdoPanel input[type=range]{--v:60%;flex:1;min-width:0;height:22px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
#rdoPanel input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#ffb84a,#ff8a1f) 0 0/var(--v) 100% no-repeat,linear-gradient(180deg,#0e0804,#2a1a0c);box-shadow:inset 0 2px 3px rgba(0,0,0,.85),0 1px 0 rgba(255,226,170,.28)}
#rdoPanel input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(180deg,#0e0804,#2a1a0c);box-shadow:inset 0 2px 3px rgba(0,0,0,.85)}
#rdoPanel input[type=range]::-moz-range-progress{height:8px;border-radius:8px;background:linear-gradient(90deg,#ffb84a,#ff8a1f)}
#rdoPanel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff3cf,#d9b25c 45%,#8a6422);border:1px solid #3a2808;box-shadow:0 3px 5px rgba(0,0,0,.65),inset 0 -2px 3px rgba(80,50,5,.55)}
#rdoPanel input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff3cf,#d9b25c 45%,#8a6422);border:1px solid #3a2808;box-shadow:0 3px 5px rgba(0,0,0,.65)}

/* รายการสถานี */
#rdoPanel .rbody{flex:1 1 auto;min-height:0;margin-top:10px;overflow:auto;border-radius:12px;scrollbar-width:thin;scrollbar-color:#a8863f #1a0f07;
background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),linear-gradient(180deg,#1b1009,#25160c);
box-shadow:inset 0 5px 14px rgba(0,0,0,.9),inset 0 0 0 1px #0a0603,0 1px 0 rgba(255,226,170,.3),0 0 0 2px #2c1b0a;padding:2px 0 8px}
#rdoPanel .rg{display:flex;align-items:center;gap:10px;padding:14px 14px 6px;font-size:13px;font-weight:700;color:#c9a45c;letter-spacing:.03em;text-shadow:0 1px 0 #000}
#rdoPanel .rg::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(201,164,92,.55),transparent)}
#rdoPanel .rl{padding:0 6px}
#rdoPanel .rrow{display:flex;align-items:center;gap:2px;border-radius:10px;transition:background .15s}
#rdoPanel .rrow:hover{background:rgba(255,226,170,.07)}
#rdoPanel .rrow.cur{background:linear-gradient(90deg,rgba(255,170,60,.2),rgba(255,170,60,.04))}
#rdoPanel .rpick{flex:1;min-width:0;display:flex;align-items:center;gap:12px;text-align:left;padding:7px 8px;border-radius:10px!important}
#rdoPanel .rav{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:400 16px/1 'Bebas Neue','Sarabun',sans-serif;letter-spacing:.04em;color:#2a1a06;background:radial-gradient(circle at 34% 26%,#f3dfa6,#b58f45 55%,#6e4f19);box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -3px 5px rgba(70,45,5,.55),0 3px 5px rgba(0,0,0,.7),0 0 0 1.5px #2c1b0a;transition:box-shadow .3s,background .3s}
#rdoPanel .rrow.cur .rav{background:radial-gradient(circle at 34% 26%,#fff6d0,#ffc04d 50%,#d27a10);box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -3px 5px rgba(120,60,0,.5),0 0 12px 2px rgba(255,170,50,.7),0 0 0 1.5px #2c1b0a}
#rdoPanel .rtx{min-width:0}
#rdoPanel .rtx b{display:block;font-weight:600;font-size:14.5px;color:#f1e2bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rdoPanel .rrow.cur .rtx b{color:#ffcf75;text-shadow:0 0 8px rgba(255,160,40,.55)}
#rdoPanel .rtx small{display:block;margin-top:1px;font-size:12px;color:#9a8660;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rdoPanel .rtx small.rsty{color:#d9bf86;white-space:normal;line-height:1.35;font-size:12.5px}
#rdoPanel .rdel,#rdoPanel .rsv{flex:none;width:30px;height:30px;margin-right:6px;border-radius:50%!important;color:#a38d5f;font-size:18px;line-height:1;display:grid;place-items:center}
#rdoPanel .rdel:hover{background:rgba(229,60,40,.25);color:#ff9a8a}
#rdoPanel .rsv:hover{background:rgba(255,226,170,.14);color:#ffe2a6}
#rdoPanel .rsv.ok{color:#8bdc7a;cursor:default}

/* ลิ้นชักทองเหลือง */
#rdoPanel .ra{margin:8px 8px 0;border-radius:12px;background:linear-gradient(180deg,#3d2613,#26160b);padding:0 12px 2px;box-shadow:inset 0 1px 0 rgba(255,226,170,.2),inset 0 0 0 1px #5a4020,0 3px 6px rgba(0,0,0,.5)}
#rdoPanel .ra[open]{padding-bottom:12px}
#rdoPanel .ra summary{list-style:none;display:flex;align-items:center;gap:8px;padding:11px 0;font-size:13.5px;font-weight:700;color:#d9b877;cursor:pointer}
#rdoPanel .ra summary::-webkit-details-marker{display:none}
#rdoPanel .ra summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s;opacity:.75}
#rdoPanel .ra[open] summary::after{transform:rotate(-135deg)}
#rdoPanel .ra summary:hover{color:#ffe2a6}
#rdoPanel .ra input[type=text]{display:block;width:100%;box-sizing:border-box;margin:0 0 8px;font:inherit;font-size:13.5px;color:#f6e8c4;background:#120a05;border:1px solid #5a4020;border-radius:8px;padding:9px 12px;box-shadow:inset 0 2px 5px rgba(0,0,0,.8)}
#rdoPanel .ra input[type=text]:focus{outline:0;border-color:#ffb84a;box-shadow:inset 0 2px 5px rgba(0,0,0,.8),0 0 0 3px rgba(255,170,50,.28)}
#rdoPanel .ra input::placeholder{color:#7d6a45}
#rdoPanel .radd{width:100%;padding:10px 12px!important;border-radius:9px!important;background:linear-gradient(180deg,#f0d794,#c19a4c 55%,#9a7634)!important;color:#2a1a06!important;font-weight:700;font-size:13.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 3px rgba(70,45,5,.5),0 3px 5px rgba(0,0,0,.6);transition:transform .1s,filter .15s}
#rdoPanel .radd:hover{filter:brightness(1.08)}#rdoPanel .radd:active{transform:translateY(2px);box-shadow:inset 0 2px 5px rgba(70,45,5,.7),0 1px 2px rgba(0,0,0,.6)}#rdoPanel .radd:disabled{opacity:.55;cursor:default}
#rdoPanel .rm{margin:8px 0 0;font-size:12px;line-height:1.5;color:#ffb0a0}
#rdoPanel .rfq{margin-top:8px!important}
#rdoPanel .rfl{max-height:230px;overflow:auto;margin:8px -6px 0;scrollbar-width:thin;scrollbar-color:#a8863f #1a0f07}
#rdoPanel .rundo{display:flex;align-items:center;gap:10px;margin:8px 8px 0;padding:8px 12px;border-radius:10px;background:linear-gradient(180deg,#46290f,#2f1a09);box-shadow:inset 0 0 0 1px #7a5826,0 3px 6px rgba(0,0,0,.5);font-size:13px;color:#e6cc92}
#rdoPanel .rundo span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rdoPanel .rundo button{margin-left:auto;flex:none;padding:4px 12px;border-radius:999px;font-weight:700;color:#2a1a06;background:linear-gradient(180deg,#f0d794,#c19a4c)}
#rdoPanel .rrst{display:block;margin:12px 14px 2px;font-size:12.5px;color:#c9a45c;text-decoration:underline;text-underline-offset:3px}
#rdoPanel .rrst:hover{color:#ffe2a6}
#rdoPanel .rhint{margin:10px 14px 2px;font-size:12px;color:#7d6a45}
#rdoCtx{position:fixed;z-index:9010;min-width:200px;max-width:260px;padding:6px;border-radius:12px;font-family:Sarabun,Tahoma,sans-serif;color:#f1e2bd;background:linear-gradient(180deg,#52301a,#2c180b);box-shadow:0 0 0 1.5px #c9a24e,0 0 0 3px #3b2a0c,0 20px 44px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,226,170,.3);animation:rdoIn .14s ease-out}
#rdoCtx .hd{padding:6px 12px 8px;font-size:12px;color:#a38d5f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid rgba(255,226,170,.14);margin-bottom:4px}
#rdoCtx button{display:block;width:100%;text-align:left;font:inherit;font-size:14px;color:inherit;background:transparent;border:0;border-radius:8px;padding:9px 12px;cursor:pointer}
#rdoCtx button:hover,#rdoCtx button:focus-visible{background:rgba(255,190,80,.18);outline:0}
#rdoCtx button.dg{color:#ff9f8f}
#rdoCtx button.dg:hover,#rdoCtx button.dg:focus-visible{background:rgba(229,60,40,.3);color:#ffd0c6}
#rdoPanel button:focus-visible,#rdoBtn:focus-visible,#rdoPanel summary:focus-visible{outline:2px solid #ffd98a;outline-offset:2px}
@media(max-width:560px){#rdoPanel{left:12px}}
@media print{#rdoBtn,#rdoPanel,#rdoCtx{display:none!important}}
@media(prefers-reduced-motion:reduce){#rdoBtn.live,#rdoPanel.on,#rdoPanel.loading .rlamp,#rdoPanel.playing .reye::before{animation:none}#rdoPanel .rndl{transition:none}}