*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0a;--bg-secondary: #1a1a1a;--bg-card: #252525;--accent: #003366;--accent-hover: #004080;--text-primary: #ffffff;--text-secondary: #b3b3b3;--border: #333}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:var(--bg-secondary);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.logo{font-size:1.5rem;font-weight:700;color:var(--accent)}.user-info{display:flex;align-items:center;gap:1rem}.user-name{color:var(--text-secondary)}.btn{padding:.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:500;transition:all .2s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-card)}.login-container{display:flex;align-items:center;justify-content:center;flex:1;padding:2rem}.login-box{background:var(--bg-secondary);padding:2.5rem;border-radius:8px;width:100%;max-width:400px}.login-title{font-size:2rem;margin-bottom:2rem;text-align:center}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-secondary)}.form-group input{width:100%;padding:.75rem 1rem;border:1px solid var(--border);border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-size:1rem}.form-group input:focus{outline:none;border-color:var(--accent)}.error-message{color:var(--accent);margin-bottom:1rem;text-align:center}.main-content{display:flex;flex:1;overflow:hidden}.sidebar{width:280px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column}.category-list{flex:1;overflow-y:auto;padding:1rem}.category-item{padding:.75rem 1rem;cursor:pointer;border-radius:4px;margin-bottom:.5rem;transition:background .2s}.category-item:hover{background:var(--bg-card)}.category-item.active{background:var(--accent)}.channel-grid{flex:1;padding:1.5rem;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;align-content:start}.channel-card{background:var(--bg-card);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}.channel-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px #0000004d}.channel-logo{width:100%;height:100px;object-fit:contain;background:var(--bg-primary);display:flex;align-items:center;justify-content:center}.channel-logo img{max-width:80%;max-height:80%}.channel-name{padding:.75rem;text-align:center;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-overlay{position:fixed;inset:0;background:#000000f2;z-index:1000;display:flex;flex-direction:column}.player-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:linear-gradient(to bottom,rgba(0,0,0,.8),transparent)}.player-title{font-size:1.25rem}.player-close{background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;padding:.5rem}.player-container{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.video-player{width:100%;max-width:1200px;aspect-ratio:16/9;background:#000;border-radius:8px}.video-player video{width:100%;height:100%;border-radius:8px}.loading{display:flex;align-items:center;justify-content:center;height:200px;color:var(--text-secondary)}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.search-bar{padding:1rem;border-bottom:1px solid var(--border)}.search-input{width:100%;padding:.5rem 1rem;border:1px solid var(--border);border-radius:4px;background:var(--bg-primary);color:var(--text-primary)}.hamburger-btn{display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;padding:.25rem .5rem;border-radius:4px;transition:background .2s}.hamburger-btn:hover{background:var(--bg-card)}.sidebar-overlay{display:none;position:fixed;inset:0;background:#0009;z-index:899}@media(max-width:1024px){.sidebar{width:220px}.channel-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:1rem;gap:.75rem}}@media(max-width:768px){.hamburger-btn{display:block}.header{padding:.625rem 1rem}.logo{font-size:1.15rem}.user-name{display:none}.sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;z-index:900;transform:translate(-100%);transition:transform .3s ease;box-shadow:none}.sidebar.open{transform:translate(0);box-shadow:4px 0 24px #00000080}.sidebar-overlay.visible{display:block}.channel-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));padding:.75rem;gap:.625rem}.channel-logo{height:80px}.channel-name{padding:.5rem;font-size:.8rem}.search-bar{padding:.625rem .75rem}.player-container{padding:0}.video-player{max-width:100%;border-radius:0}.video-player video{border-radius:0}.player-header{padding:.75rem 1rem}.player-title{font-size:1rem}.login-box{padding:1.5rem}.login-title{font-size:1.5rem;margin-bottom:1.25rem}}@media(max-width:480px){.header{padding:.5rem .75rem}.logo{font-size:1rem}.btn-secondary{padding:.5rem .75rem;font-size:.8rem}.channel-grid{grid-template-columns:repeat(2,1fr);padding:.5rem;gap:.5rem}.channel-logo{height:70px}.channel-name{padding:.375rem;font-size:.75rem}.login-box{padding:1.25rem}.login-title{font-size:1.25rem;margin-bottom:1rem}.form-group{margin-bottom:1rem}.form-group input{padding:.625rem .75rem;font-size:.9rem}}