*{box-sizing:border-box;margin:0;padding:0}body{background-color:#0f0f0f;color:#fff;font-family:Roboto,Arial,sans-serif}.app{min-height:100vh}.header{background:#0f0f0f;border-bottom:1px solid #303030;height:56px;justify-content:space-between;left:0;padding:0 16px;position:fixed;right:0;top:0;z-index:1000}.header,.header-left{align-items:center;display:flex}.header-left{gap:16px}.menu-btn{align-items:center;background:none;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;justify-content:center;padding:8px}.menu-btn:hover{background:#ffffff1a}.logo{align-items:center;cursor:pointer;display:flex;gap:4px}.logo-icon{color:red;font-size:32px}.logo-text{font-size:20px;font-weight:700;letter-spacing:-1px}.search-container{align-items:center;display:flex;flex:1 1;margin:0 40px;max-width:640px}.search-input{background:#121212;border:1px solid #303030;border-radius:20px 0 0 20px;color:#fff;flex:1 1;font-size:16px;height:40px;outline:none;padding:0 16px}.search-input:focus{border-color:#1c62b9}.search-btn{align-items:center;background:#222;border:1px solid #303030;border-left:none;border-radius:0 20px 20px 0;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;width:64px}.search-btn:hover{background:#3a3a3a}.voice-btn{align-items:center;background:#222;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;margin-left:12px;width:40px}.voice-btn:hover{background:#3a3a3a}.header-right{gap:8px}.header-right,.icon-btn{align-items:center;display:flex}.icon-btn{background:none;border:none;border-radius:50%;color:#fff;cursor:pointer;height:40px;justify-content:center;width:40px}.icon-btn:hover{background:#ffffff1a}.avatar{border-radius:50%;cursor:pointer;height:32px;margin-left:8px;overflow:hidden;width:32px}.avatar img{height:100%;object-fit:cover;width:100%}.main-container{display:flex;padding-top:56px}.sidebar{background:#0f0f0f;bottom:0;left:0;overflow-y:auto;position:fixed;top:56px;transition:width .2s,transform .2s;width:240px;z-index:100}.sidebar.closed{width:72px}.sidebar.closed .sidebar-text,.sidebar.closed .sidebar-title{display:none}.sidebar.closed .sidebar-item{justify-content:center;padding:16px}.sidebar-section{padding:12px 0}.sidebar-divider{background:#303030;height:1px;margin:0 12px}.sidebar-title{color:#aaa;font-size:14px;font-weight:500;padding:8px 24px}.sidebar-item{align-items:center;color:#fff;display:flex;font-size:14px;gap:24px;padding:10px 24px;text-decoration:none;transition:background .2s}.sidebar-item.active,.sidebar-item:hover{background:#ffffff1a}.sidebar-item .material-icons{font-size:24px}.main-content{margin-left:240px;padding:24px;transition:margin-left .2s,width .2s;width:calc(100% - 240px)}.main-content.expanded{margin-left:72px;width:calc(100% - 72px)}.category-pills{background:#0f0f0f;display:flex;gap:12px;margin-bottom:24px;overflow-x:auto;padding-bottom:12px;padding-top:8px;position:-webkit-sticky;position:sticky;top:56px;z-index:10}.pill{background:#272727;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;padding:8px 16px;transition:background .2s;white-space:nowrap}.pill:hover{background:#3a3a3a}.pill.active{background:#fff;color:#0f0f0f}.video-grid{grid-gap:40px 16px;display:grid;gap:40px 16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.video-card{cursor:pointer}.thumbnail-container{aspect-ratio:16/9;border-radius:12px;overflow:hidden;position:relative}.thumbnail{height:100%;object-fit:cover;transition:transform .2s;width:100%}.video-card:hover .thumbnail{transform:scale(1.05)}.video-duration{background:#000c;border-radius:4px;bottom:8px;color:#fff;font-size:12px;font-weight:500;padding:2px 6px;position:absolute;right:8px}.video-details{display:flex;gap:12px;margin-top:12px}.channel-icon{border-radius:50%;flex-shrink:0;height:36px;width:36px}.video-meta{flex:1 1;min-width:0}.video-meta .video-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;font-size:14px;font-weight:500;line-height:1.4;margin-bottom:4px;overflow:hidden}.video-meta .channel-name{color:#aaa;font-size:12px;margin-bottom:2px}.video-meta .video-stats{color:#aaa;font-size:12px}.loading{align-items:center;display:flex;flex-direction:column;height:300px;justify-content:center}.spinner{animation:spin 1s linear infinite;border:3px solid #303030;border-radius:50%;border-top-color:red;height:40px;width:40px}@keyframes spin{to{transform:rotate(1turn)}}.video-player-container{display:flex;gap:24px}.video-player-section{flex:1 1;max-width:900px}.video-player{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;width:100%}.video-player video{height:100%;object-fit:contain;width:100%}.video-info{padding:16px 0}.video-info .video-title{font-size:20px;font-weight:600;margin-bottom:12px}.video-stats{align-items:center;border-bottom:1px solid #303030;color:#aaa;display:flex;font-size:14px;justify-content:space-between;padding-bottom:16px}.video-actions{display:flex;gap:8px}.action-btn{align-items:center;background:#272727;border:none;border-radius:20px;color:#fff;cursor:pointer;display:flex;font-size:14px;gap:6px;padding:8px 16px;transition:background .2s}.action-btn:hover{background:#3a3a3a}.action-btn .material-icons{font-size:20px}.channel-info{align-items:center;border-bottom:1px solid #303030;display:flex;gap:16px;padding:16px 0}.channel-avatar{border-radius:50%;height:48px;width:48px}.channel-details{flex:1 1}.channel-info .channel-name{font-size:16px;font-weight:500;margin-bottom:4px}.subscriber-count{color:#aaa;font-size:12px}.subscribe-btn{background:red;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:10px 20px;transition:background .2s}.subscribe-btn:hover{background:#c00}.video-description{background:#272727;border-radius:12px;margin-top:16px;padding:16px}.video-description p{color:#fff;font-size:14px;line-height:1.5}.comments-section{margin-top:24px}.comments-section h3{font-size:16px;margin-bottom:24px}.add-comment{display:flex;gap:16px;margin-bottom:24px}.comment-avatar{border-radius:50%;height:40px;width:40px}.comment-input{background:#0000;border:none;border-bottom:1px solid #303030;color:#fff;flex:1 1;font-size:14px;outline:none;padding:8px 0}.comment-input:focus{border-bottom-color:#fff}.comment{display:flex;gap:16px;margin-bottom:16px}.comment-content{flex:1 1}.comment-author{font-size:13px;font-weight:500;margin-right:8px}.comment-date{color:#aaa;font-size:12px}.comment-content p{font-size:14px;line-height:1.4;margin:8px 0}.comment-actions{display:flex;gap:16px}.comment-actions button{align-items:center;background:none;border:none;color:#aaa;cursor:pointer;display:flex;font-size:12px;gap:4px}.comment-actions button:hover{color:#fff}.comment-actions .material-icons{font-size:16px}.related-videos{flex-shrink:0;width:400px}.related-videos h3{font-size:14px;letter-spacing:.5px;margin-bottom:16px;text-transform:uppercase}.related-video-card{cursor:pointer;display:flex;gap:8px;margin-bottom:12px}.related-video-card:hover .related-info h4{color:#3ea6ff}.related-thumbnail{border-radius:8px;flex-shrink:0;height:94px;overflow:hidden;position:relative;width:168px}.related-thumbnail img{height:100%;object-fit:cover;width:100%}.related-thumbnail .duration{background:#000c;border-radius:2px;bottom:4px;color:#fff;font-size:11px;padding:2px 4px;position:absolute;right:4px}.related-info{flex:1 1;min-width:0}.related-info h4{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;font-size:14px;font-weight:500;line-height:1.3;margin-bottom:6px;overflow:hidden;transition:color .2s}.related-info .channel{display:block;margin-bottom:2px}.related-info .channel,.related-info .views{color:#aaa;font-size:12px}@media (max-width:1200px){.related-videos{width:300px}}@media (max-width:900px){.video-player-container{flex-direction:column}.related-videos{width:100%}.related-video-card{flex-direction:row}}@media (max-width:768px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0);width:240px}.main-content{margin-left:0;width:100%}.search-container{display:none}.video-grid{grid-template-columns:1fr}.video-actions{flex-wrap:wrap}.action-btn span:not(.material-icons){display:none}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0000}::-webkit-scrollbar-thumb{background:#555;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#777}
/*# sourceMappingURL=main.e3777a1d.css.map*/