:root{color-scheme:dark;font-family:system-ui,-apple-system,"Noto Sans Thai",sans-serif;background:#101827;color:#f8fafc}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{border:0;background:#1e2c43;color:inherit;border-radius:9px;padding:11px 18px;cursor:pointer;min-height:44px}button:hover,button:focus-visible{outline:2px solid #7dd3fc;background:#304462}button.primary{background:#147dae}input,select{background:#101827;border:1px solid #46546c;border-radius:8px;color:inherit;padding:12px;width:100%}label{display:grid;gap:7px;margin:12px 0}.top{display:flex;align-items:center;justify-content:space-between;padding:20px 4vw;gap:16px;border-bottom:1px solid #26354b}.brand{display:flex;align-items:center;gap:13px;background:transparent;padding:0;font-size:23px}.brand img{width:46px;height:46px;border-radius:9px}nav,.actions{display:flex;gap:8px;flex-wrap:wrap}main{padding:24px 4vw 55px;max-width:1700px;margin:auto}h1{font-size:clamp(24px,3vw,34px);margin:0 0 8px}h2{font-size:21px}p{color:#aebed3;line-height:1.6}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:18px;margin-top:24px}.card{padding:0;overflow:hidden;text-align:left;border:1px solid #29384d;display:flex;flex-direction:column}.card img{width:100%;aspect-ratio:2/3;object-fit:contain;background:#0a111f;display:block}.card.youtube img{aspect-ratio:16/9;object-fit:cover}.card.home img{aspect-ratio:16/9;padding:0;object-fit:contain}.card strong{font-weight:600;padding:13px 14px 5px;line-height:1.4}.card small{padding:0 14px 14px;color:#a9bdd4;overflow:hidden;text-overflow:ellipsis}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.pill{padding:5px 10px;border-radius:20px;background:#24344d;color:#bde6ff;font-size:13px}#notice{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);max-width:90vw;margin:0;padding:8px 15px;border-radius:10px;background:#25364d;z-index:20}#notice:empty{display:none}dialog{border:1px solid #35435d;border-radius:15px;background:#142034;color:inherit;max-width:min(520px,94vw);width:100%;padding:25px}dialog::backdrop{background:#000b}#player{max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;inset:0;margin:0;padding:0;border:0;border-radius:0;background:#000;overflow:hidden}#video{width:100%;height:100%;object-fit:contain}#audio{display:none}.player-bottom{position:absolute;bottom:0;left:0;right:0;padding:45px 3vw max(18px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#08101cf5);transition:opacity .2s}.player-bottom.hide{opacity:0;pointer-events:none}.player-bottom h2{margin:6px 0}.player-bottom p{margin:7px 0;font-size:14px}.player-bottom button{background:#1e2c43df;font-size:14px}.channel-panel{position:absolute;inset:0 auto 0 0;width:min(360px,76vw);background:#111a2bf2;z-index:3;padding:20px 12px;display:flex;flex-direction:column}.channel-panel[hidden]{display:none}.channel-panel h2{margin:3px 9px 14px}.channel-panel select{margin-bottom:10px}#channel-list{overflow:auto;flex:1;scrollbar-width:thin}#channel-list button{display:block;border-radius:0;text-align:left;width:100%;background:none;border-bottom:1px solid #354257;padding:14px 10px}#channel-list button.selected{background:#213750;color:#a5e5ff}#channel-list small{display:block;color:#a5b5ca;font-size:12px;margin:5px 0 0 42px}#channel-list b{display:inline-block;min-width:42px;color:#7dd3fc}#channel-number{position:absolute;top:24px;right:24px;font-size:28px;background:#101827dd;border-radius:9px;padding:8px 15px}#channel-number:empty{display:none}#audio-cover{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,#243a59,#0b1220);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px}#audio-cover[hidden]{display:none}#audio-cover img{width:min(220px,40vw);border-radius:15px}#audio-cover p{max-width:400px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:600px){.top{padding:12px;gap:7px}.brand{font-size:18px;gap:8px}.brand img{width:34px;height:34px}nav{gap:5px}nav button{padding:8px 10px;font-size:12px}main{padding:20px 14px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.card strong{font-size:14px;padding:10px}.card small{font-size:11px;padding:0 10px 10px}.toolbar button{font-size:14px}.player-bottom{padding:30px 12px max(15px,env(safe-area-inset-bottom))}.player-bottom button{font-size:12px;padding:8px 10px}.player-bottom h2{font-size:16px}.actions{gap:6px}}

.channel-logo{display:inline-block;width:30px;height:30px;object-fit:contain;vertical-align:middle;margin-right:5px}

.youtube-item{min-width:0}.youtube-item>.card{width:100%}.youtube-item>.actions{display:flex;gap:6px;flex-wrap:wrap}