:root{color-scheme:dark;--cyan:#27c9e8;--teal:#11889a;--black:#000;--white:#f6f6f6;--muted:#a9adb2}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:#000;color:var(--white);font-family:Arial,Helvetica,sans-serif;overflow:hidden}
button,input{font:inherit}button{cursor:pointer}
#app{height:100dvh;width:100%;position:relative;background:#000;overflow:hidden}
#video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain}#jwPlayer .jwplayer{width:100%!important;height:100%!important}
.top{position:absolute;top:0;left:0;right:0;height:62px;z-index:4;display:flex;align-items:center;padding:0 20px;background:linear-gradient(#000d,transparent);gap:18px}
.menu-left{flex:0 0 42px;margin-left:-8px}.brand{font-size:16px;font-weight:700;letter-spacing:.2px;max-width:calc(100vw - 130px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topright{margin-left:auto;display:flex;align-items:center;gap:18px}.clock{font-size:23px;font-weight:400;white-space:nowrap}.iconbtn{border:0;color:#fff;background:transparent;font-size:27px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%}.iconbtn:hover{background:#ffffff20}
#searchWrap{display:none;position:absolute;right:18px;top:60px;width:min(340px,calc(100vw - 36px));z-index:8;background:#111;border:1px solid #444;border-radius:8px;padding:8px}
#searchWrap.open{display:block}#search{width:100%;border:0;outline:0;background:transparent;color:#fff;padding:8px;font-size:16px}
#sidebar{position:absolute;left:0;top:62px;bottom:0;width:min(500px,90vw);z-index:5;background:rgba(0,0,0,.48);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;transition:transform .25s ease;transform:translateX(0);border-right:1px solid #21bcd8}
#sidebar.hidden{transform:translateX(calc(-100% + 5px))}
#rail{width:84px;flex:0 0 84px;border-right:1px solid #1e9cb0;background:rgba(0,0,0,.22);display:flex;flex-direction:column;align-items:stretch;padding-top:8px}
#rail button{height:54px;border:0;background:transparent;color:#fff;font-size:13px;font-weight:700;border-left:4px solid transparent}
#rail button.active{border-left-color:var(--cyan);background:#0e7d8c}
#rail button:hover{background:#16424a}
#channelPane{flex:1;min-width:0;display:flex;flex-direction:column}
#listHead{height:0;overflow:hidden}
#channels{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#31c8e6 #000;padding:8px 9px 22px 0}
.channel{position:relative;width:100%;height:64px;display:grid;grid-template-columns:26px minmax(0,1fr) 66px;align-items:center;gap:12px;padding:0 8px 0 10px;border:0;border-radius:0;background:rgba(0,0,0,.12);color:#f4f4f4;text-align:left;margin:2px 0}
.channel:hover{background:rgba(18,23,26,.72)}.channel.active{background:rgba(17,136,154,.82);border-radius:0 6px 6px 0}
.num{height:100%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;border-right:1px solid #157d8e}
.channel.active .num:before{content:"";position:absolute;left:0;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:0;border-right:10px solid #fff}
.chname{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:0}
.logo{width:60px;height:36px;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain}.logo span{font-size:10px;font-weight:800;color:#1b2430;text-align:center}
#edgeTab{position:absolute;z-index:7;left:0;top:45%;height:80px;width:9px;background:var(--cyan);border-radius:0 6px 6px 0;border:0;display:none}
#sidebar.hidden+#edgeTab{display:block}
#toast{position:absolute;z-index:9;left:50%;bottom:24px;transform:translateX(-50%);background:#16181dcc;border:1px solid #ffffff25;border-radius:7px;padding:10px 14px;font-size:13px;color:#eee;max-width:90vw;text-align:center}
#loader{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:#ccc;pointer-events:none;text-align:center}
.spinner{width:38px;height:38px;border:4px solid #555;border-top-color:#fff;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
#loader.hidden{display:none}
#hint{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#777;font-size:14px;pointer-events:none}
@media(max-width:600px){.top{padding:0 10px;height:54px}.menu-left{margin-left:-6px;flex-basis:36px}.clock{font-size:17px}#sidebar{top:54px;width:min(94vw,460px)}#rail{width:62px;flex-basis:62px}.channel{grid-template-columns:23px minmax(0,1fr) 54px;gap:8px;height:58px}.logo{width:50px;height:32px}.chname{font-size:14px}.brand{font-size:14px}.topright{gap:5px}}