*{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100vh;background:#0f0f0f;color:#e0e0e0;overflow:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;}body::-webkit-scrollbar{width:8px;}body::-webkit-scrollbar-track{background:transparent;}body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px;}body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);}.app-header{background:#1a1a1a;border-bottom:1px solid rgba(255,255,255,.05);padding:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.3);}.app-header h1{font-size:2rem;font-weight:700;margin:0;color:#fff;display:flex;align-items:center;gap:.75rem;letter-spacing:1px;}.app-header h1 i{color:#e50914;font-size:2.2rem;}#clock{font-size:1.3rem;font-weight:600;color:#b0b0b0;font-variant-numeric:tabular-nums;}.app-main{display:grid;grid-template-columns:1fr;height:calc(100vh - 100px);gap:0;padding:0;overflow:hidden;}.channels{padding:1.5rem;overflow-y:auto;border-bottom:1px solid rgba(255,255,255,.05);background:#121212;max-height:40%;}.channels h3{font-size:1.1rem;font-weight:700;margin-bottom:1.5rem;color:#fff;display:flex;align-items:center;gap:.75rem;letter-spacing:.5px;}.channels h3 i{color:#e50914;font-size:1.2rem;}.channels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:1rem;}.channel-card{padding:1rem;background:#1a1a1a;border-radius:.75rem;border:1px solid rgba(255,255,255,.05);cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden;}.channel-card:hover,.channel-card:focus{outline:none;border-color:rgba(229,9,20,.5);background:#3b3b3b;transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.5);}.channel-logo{margin-bottom:.75rem;height:50px;display:flex;align-items:center;justify-content:center;position:relative;}.channel-logo img{max-width:50px;max-height:50px;-o-object-fit:contain;object-fit:contain;transition:transform .3s ease;}.channel-card:hover .channel-logo img,.channel-card:focus .channel-logo img{transform:scale(1.1);}.channel-info{width:100%;}.channel-name{font-size:.75rem;font-weight:700;line-height:1.2;color:#e0e0e0;margin-bottom:.4rem;transition:color .3s ease;}.channel-card:hover .channel-name,.channel-card:focus .channel-name{color:#fff;}.channel-rating{font-size:.65rem;color:#888;display:flex;align-items:center;justify-content:center;gap:.2rem;}.channel-rating i{color:#e50914;font-size:.6rem;}.channel-chat-badge{position:absolute;top:.5rem;right:.5rem;background:rgba(229,9,20,.9);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;}.player{flex:1;display:flex;align-items:center;justify-content:center;background:#0f0f0f;overflow:hidden;position:relative;}.player::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 30%,rgba(229,9,20,.03) 0%,transparent 50%);pointer-events:none;}#player-container{width:95%;height:95%;position:relative;border-radius:.5rem;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.05);}#player-iframe,#player-video{width:100%;height:100%;border:none;display:none;background:#000;}.player-wrapper{width:100%;height:100%;display:flex;gap:1.5rem;overflow:hidden;}.player-main{flex:1;display:flex;align-items:center;justify-content:center;}.player-chat{width:300px;background:#1a1a1a;border-left:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;overflow:hidden;}.chat-header{padding:1rem;border-bottom:1px solid rgba(255,255,255,.05);background:#121212;}.chat-header h4{margin:0;font-size:.9rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:.5rem;}.chat-header i{color:#e50914;}.chat-channel-info{font-size:.75rem;color:#888;margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.05);word-break:break-all;}.chat-rating{display:flex;gap:.2rem;margin-top:.4rem;}.chat-rating i{color:#888;}#channel-url-chat i{color:#d8c309;}.chat-rating button{background:none;border:none;color:#666;font-size:.85rem;cursor:pointer;transition:all .2s ease;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;touch-action:manipulation;}.chat-rating button:hover,.chat-rating button:active,.chat-rating button.active{color:#e50914;}.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;}.chat-message{font-size:.8rem;color:#b0b0b0;padding:.6rem;background:#121212;border-radius:.4rem;border-left:2px solid #e50914;line-height:1.3;}.chat-message strong{color:#e0e0e0;font-weight:600;}.chat-message-mine{border-left:2px solid #5247ec;}.chat-input-area{padding:.75rem;border-top:1px solid rgba(255,255,255,.05);background:#121212;display:flex;gap:.5rem;}.chat-input{flex:1;background:#222;border:1px solid rgba(255,255,255,.1);color:#e0e0e0;border-radius:.4rem;padding:.5rem;font-size:.75rem;}.chat-input:focus{outline:none;border-color:rgba(229,9,20,.5);background:#2a2a2a;}.chat-send-btn{background:#e50914;border:none;color:#fff;border-radius:.4rem;padding:.5rem .75rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:40px;}.chat-send-btn:hover{background:#c90812;}.chat-send-btn:active{transform:scale(.95);}.no-player{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;z-index:1;text-align:center;padding:1.5rem;}.no-player i{font-size:3.5rem;color:#444;}.no-player p{font-size:1.3rem;font-weight:600;color:#666;}.spotify-player-wrapper{max-width:500px;display:flex;flex-direction:column;align-items:center;gap:0;}.spotify-player-wrapper iframe{box-shadow:0 8px 24px rgba(0,0,0,.3);border-radius:12px 12px 0 0;}.spotify-info{font-size:.75rem;color:#e0e0e0;text-align:center;padding:.75rem 1rem;background:#800000;border-radius:12px 12px 0 0;border:1px solid rgba(29,185,84,.3);border-top:none;box-shadow:0 8px 24px rgba(0,0,0,.3);}.spotify-info i{color:#e0e0e0;font-size:.9rem;}.channel-select-prompt{font-size:1.5rem;font-weight:700;color:#e0e0e0;margin-top:2rem;display:flex;align-items:center;gap:.75rem;}.channel-select-prompt i{color:#e50914;font-size:2rem;animation:pointLeft 2s ease-in-out infinite;}@keyframes pointLeft{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px)}}.control-bar{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:rgba(20,20,20,.25);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);padding:1rem 1.5rem;border-radius:.75rem;display:flex;gap:1rem;z-index:9999;box-shadow:0 12px 40px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);flex-wrap:wrap;justify-content:center;max-width:95%;transition:all .3s ease;}.control-bar:hover{border-color:rgba(255,255,255,.15);box-shadow:0 16px 48px rgba(0,0,0,.7);}.control-bar button{background:#333;color:#e0e0e0;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;padding:.65rem 1.2rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;white-space:nowrap;display:flex;align-items:center;gap:.5rem;}.control-bar button:hover,.control-bar button:focus{outline:none;background:#444;border-color:rgba(229,9,20,.6);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(229,9,20,.2);}.control-bar button.btn-danger{background:#e50914;border-color:#e50914;color:#fff;}.control-bar button.btn-danger:hover{background:#c90812;border-color:#c90812;box-shadow:0 6px 20px rgba(229,9,20,.4);}button:focus-visible{outline:2px solid #e50914;outline-offset:2px;}.channel-card:focus-visible{outline:2px solid #e50914;outline-offset:2px;}@media (max-width:576px){.app-header{padding:.6rem .75rem}.app-header h1{font-size:1rem;gap:.4rem}.app-header h1 i{font-size:1.2rem}#clock{font-size:.8rem}.app-main{height:calc(100vh - 54px)}.channels{max-height:20vh;min-height:110px;padding:.5rem .75rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.channels h3{font-size:.85rem;margin-bottom:.5rem;gap:.4rem}.channels h3 i{font-size:.9rem}.channels-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:.4rem}.channel-card{padding:.4rem;min-height:75px;touch-action:manipulation}.channel-card:active{transform:scale(.95)}.channel-logo{height:32px;margin-bottom:.3rem}.channel-logo img{max-width:32px;max-height:32px}.channel-name{font-size:.58rem;line-height:1.1;margin-bottom:.15rem;max-height:2.2em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.channel-rating{font-size:.5rem}.channel-chat-badge{width:14px;height:14px;font-size:.5rem;top:.25rem;right:.25rem}.player{min-height:calc(78vh - 70px);padding-bottom:48px}#player-container{width:100%;height:100%;border-radius:0;box-shadow:none}.player-wrapper{flex-direction:column;gap:0}.player-main{width:100%;min-height:28vh;max-height:38vh;flex:0 1 auto;display:flex;align-items:center;justify-content:center}.player-chat{width:100%;flex:1 1 auto;min-height:45vh;max-height:55vh;border-left:none;border-top:1px solid rgba(255,255,255,.05)}.chat-header{padding:.6rem .75rem}.chat-header h4{font-size:.8rem}.chat-channel-info{font-size:.7rem}.chat-messages{padding:.6rem .75rem;gap:.5rem}.chat-message{font-size:.75rem;padding:.5rem}.chat-input-area{padding:.6rem .75rem}.chat-input{font-size:.7rem;padding:.45rem}.chat-send-btn{font-size:.7rem;padding:.45rem .65rem;min-width:36px}.chat-rating button{width:18px;height:18px;font-size:.7rem;padding:.2rem;min-width:32px;min-height:32px}.chat-rating button:hover,.chat-rating button:active,.chat-rating button.active{color:#e50914!important;transform:scale(1.15)}#player-container{width:100%;height:100%;border-radius:0;box-shadow:none}#player-iframe,#player-video{width:100%;height:100%}.no-player{padding:1rem}.no-player i{font-size:2rem}.no-player p{font-size:.85rem}.spotify-player-wrapper{max-width:100%;padding:0}.spotify-player-wrapper iframe{height:280px;border-radius:8px 8px 0 0}.spotify-info{font-size:.65rem;padding:.6rem .75rem;border-radius:8px 8px 0 0}.channel-select-prompt{font-size:1.1rem;margin-top:1.5rem;gap:.5rem}.channel-select-prompt i{font-size:1.5rem}.control-bar{position:fixed;bottom:0;left:0;right:0;transform:none;padding:.4rem .5rem;gap:.35rem;max-width:100%;border-radius:0;border:none;border-top:1px solid rgba(255,255,255,.1);background:rgba(15,15,15,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.control-bar button{padding:.55rem .65rem;font-size:.7rem;gap:.25rem;flex:1;min-width:0;justify-content:center;border-radius:.4rem}.control-bar button i{font-size:.85rem}}@media (max-width:576px) and (max-width:380px){.control-bar button{font-size:0;padding:.6rem}.control-bar button i{font-size:1rem;margin:0}}@media (max-width:915px) and (max-height:500px) and (orientation:landscape){.app-header{padding:.4rem .75rem}.app-header h1{font-size:.9rem;gap:.3rem}.app-header h1 i{font-size:1rem}#clock{font-size:.7rem}.app-main{height:calc(100vh - 45px);grid-template-columns:240px 1fr;gap:0}.channels{max-height:100%;border-right:1px solid rgba(255,255,255,.05);border-bottom:none;padding:.4rem .5rem;overflow-y:auto}.channels h3{font-size:.8rem;margin-bottom:.4rem;gap:.3rem}.channels h3 i{font-size:.85rem}.channels-grid{grid-template-columns:repeat(2,1fr);gap:.35rem}.channel-card{padding:.35rem;min-height:65px}.channel-logo{height:28px;margin-bottom:.25rem}.channel-logo img{max-width:28px;max-height:28px}.channel-name{font-size:.55rem;line-height:1.1}.channel-rating{font-size:.48rem}.channel-chat-badge{width:13px;height:13px;font-size:.48rem}.player{grid-column:2;min-height:0;padding-bottom:45px}#player-container{border-radius:0}.player-chat{display:none}.player-wrapper{flex-direction:row}.player-main{width:100%;height:100%}.no-player i{font-size:1.5rem}.no-player p{font-size:.75rem}.spotify-player-wrapper iframe{height:240px;border-radius:8px 8px 0 0}.spotify-info{font-size:.6rem;padding:.5rem;border-radius:8px 8px 0 0}.channel-select-prompt{font-size:.9rem;margin-top:1.25rem}.channel-select-prompt i{font-size:1.2rem}.control-bar{position:fixed;bottom:0;left:240px;right:0;transform:none;padding:.35rem .5rem;gap:.3rem;border-radius:0;border:none;border-top:1px solid rgba(255,255,255,.1);background:rgba(15,15,15,.95)}.control-bar button{padding:.45rem .6rem;font-size:.65rem;gap:.25rem;border-radius:.3rem}.control-bar button i{font-size:.8rem}}@media (min-width:577px) and (max-width:768px){.app-header h1{font-size:1.3rem}#clock{font-size:1rem}.channels{max-height:26vh;min-height:130px;padding:1rem}.channels h3{font-size:1rem}.channels-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:.6rem}.channel-card{padding:.6rem;min-height:80px}.channel-logo{height:40px}.channel-logo img{max-width:40px;max-height:40px}.channel-name{font-size:.65rem}.player{padding-bottom:52px}.player-wrapper{flex-direction:column}.player-main{width:100%;min-height:30vh;max-height:38vh;flex:0 1 auto;display:flex;align-items:center;justify-content:center}.player-chat{width:100%;flex:1 1 auto;min-height:35vh;max-height:42vh;border-left:none;border-top:1px solid rgba(255,255,255,.05)}.chat-header{padding:.7rem .85rem}.chat-messages{padding:.7rem .85rem}.chat-rating{gap:.15rem}.chat-rating button{min-width:36px;min-height:36px}.no-player{padding:1.5rem}.no-player i{font-size:2.5rem}.no-player p{font-size:1rem}.spotify-player-wrapper iframe{height:300px;border-radius:10px 10px 0 0}.spotify-info{font-size:.7rem;padding:.65rem .85rem;border-radius:10px 10px 0 0}.channel-select-prompt{font-size:1.3rem;margin-top:1.75rem}.channel-select-prompt i{font-size:1.8rem}.control-bar{position:fixed;bottom:0;left:0;right:0;transform:none;padding:.6rem .75rem;gap:.5rem;border-radius:0;border:none;border-top:1px solid rgba(255,255,255,.1);background:rgba(15,15,15,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-bar button{padding:.65rem 1rem;font-size:.8rem}}@media (min-width:769px) and (max-width:992px){.app-main{grid-template-columns:300px 1fr}.channels{border-right:1px solid rgba(255,255,255,.05);border-bottom:none;max-height:100%;padding:1rem}.channels-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.player{grid-column:2;padding-bottom:48px}.player-wrapper{flex-direction:row;gap:1rem}.player-main{flex:1;display:flex;align-items:center;justify-content:center}.player-chat{width:240px;max-height:100%;border-left:1px solid rgba(255,255,255,.05);border-top:none}.control-bar{position:fixed;bottom:0;left:300px;right:0;transform:none;border-radius:0;border:none;border-top:1px solid rgba(255,255,255,.1);background:rgba(15,15,15,.95);padding:.6rem .75rem}.control-bar button{padding:.6rem 1rem;font-size:.85rem}}@media (min-width:993px){.app-main{grid-template-columns:320px 1fr}.channels{border-right:1px solid rgba(255,255,255,.05);border-bottom:none;max-height:100%;overflow-y:auto}.channels-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1rem}.player{grid-column:2;padding-bottom:0}.player-wrapper{flex-direction:row;gap:1.5rem}.player-main{flex:1;display:flex;align-items:center;justify-content:center}.player-chat{width:300px;max-height:100%;border-left:1px solid rgba(255,255,255,.05);border-top:none}}@media (min-width:1400px){.app-main{grid-template-columns:380px 1fr}.channels-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1.2rem}.player-chat{width:320px}.control-bar button{padding:.75rem 1.4rem;font-size:1rem}}