@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap";.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.mx-auto{margin-left:auto;margin-right:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.grid{display:grid}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[360px\]{max-height:360px}.min-h-0{min-height:0px}.min-h-\[24px\]{min-height:24px}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-6xl{max-width:72rem}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-\[var\(--accent\)\]{border-color:var(--accent)}.border-\[var\(--line\)\]{border-color:var(--line)}.bg-\[var\(--accent\)\]{background-color:var(--accent)}.bg-\[var\(--accent-soft\)\]{background-color:var(--accent-soft)}.bg-\[var\(--page-bg\)\]{background-color:var(--page-bg)}.bg-\[var\(--paper\)\]{background-color:var(--paper)}.bg-white\/70{background-color:#ffffffb3}.bg-white\/80{background-color:#fffc}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.font-display{font-family:Space Grotesk,IBM Plex Sans,sans-serif}.font-mono{font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,monospace}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-emerald-600{--tw-text-opacity: 1;color:rgb(5 150 105 / var(--tw-text-opacity, 1))}.text-rose-500{--tw-text-opacity: 1;color:rgb(244 63 94 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.shadow-\[0_16px_40px_rgba\(15\,23\,42\,0\.06\)\]{--tw-shadow: 0 16px 40px rgba(15,23,42,.06);--tw-shadow-colored: 0 16px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0_24px_60px_rgba\(15\,23\,42\,0\.08\)\]{--tw-shadow: 0 24px 60px rgba(15,23,42,.08);--tw-shadow-colored: 0 24px 60px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-transparent{--tw-ring-color: transparent}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-red: #FF0000;--bg-primary: #FFFFFF;--bg-secondary: #F9F9F9;--text-primary: #030303;--text-secondary: #606060;--hover-bg: #F2F2F2;--border-color: #E5E5E5;--sidebar-bg: #FFFFFF;--header-bg: #FFFFFF}[data-theme=dark]{--bg-primary: #0F0F0F;--bg-secondary: #181818;--text-primary: #FFFFFF;--text-secondary: #AAAAAA;--hover-bg: #3F3F3F;--border-color: #3F3F3F;--sidebar-bg: #212121;--header-bg: #212121}body{font-family:Roboto,Arial,sans-serif;background-color:var(--bg-secondary);color:var(--text-primary);overflow-x:hidden}#root{min-height:100vh}a{text-decoration:none;color:inherit}button{cursor:pointer;border:none;background:none;font-family:inherit}input,textarea{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#909090;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#606060}.skeleton{background:linear-gradient(90deg,var(--hover-bg) 25%,var(--bg-secondary) 50%,var(--hover-bg) 75%);background-size:200% 100%;animation:loading 1.5s ease-in-out infinite}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--text-primary);color:var(--bg-primary);padding:12px 24px;border-radius:8px;z-index:10000;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.hover\:translate-y-\[-1px\]:hover{--tw-translate-y: -1px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-slate-300:hover{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity, 1))}.focus\:ring-emerald-400\/40:focus{--tw-ring-color: rgb(52 211 153 / .4)}@media(prefers-reduced-motion:no-preference){.motion-safe\:animate-fade-in{animation:fade-in .6s ease both}.motion-safe\:animate-rise-in{animation:rise-in .7s cubic-bezier(.22,1,.36,1) both}}@media(min-width:768px){.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media(min-width:1024px){.lg\:grid-cols-\[1\.2fr_0\.8fr\]{grid-template-columns:1.2fr .8fr}}.header{position:fixed;top:0;left:0;right:0;height:56px;background-color:var(--header-bg);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:1000;border-bottom:1px solid var(--border-color)}.header-left{display:flex;align-items:center;gap:16px}.menu-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-primary);transition:background-color .2s}.menu-button:hover{background-color:var(--hover-bg)}.logo{display:flex;align-items:center;gap:4px;font-size:20px;font-weight:700;color:var(--text-primary)}.logo-icon{width:32px;height:32px;background-color:var(--primary-red);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff}.header-center{flex:1;max-width:640px;display:flex;align-items:center;gap:8px}.search-form{flex:1;display:flex;align-items:center}.search-container{flex:1;display:flex;align-items:center;border:1px solid var(--border-color);border-radius:40px;overflow:hidden}.search-input{flex:1;height:40px;padding:0 16px;border:none;background:transparent;color:var(--text-primary);font-size:16px}.search-input:focus{outline:none}.search-button{width:64px;height:40px;display:flex;align-items:center;justify-content:center;background-color:var(--hover-bg);border-left:1px solid var(--border-color);color:var(--text-primary)}.search-button:hover{background-color:var(--border-color)}.voice-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-primary);background-color:var(--hover-bg)}.voice-button:hover{background-color:var(--border-color)}.header-right{display:flex;align-items:center;gap:8px}.icon-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-primary);position:relative}.icon-button:hover{background-color:var(--hover-bg)}.notification-badge{position:absolute;top:8px;right:8px;background-color:var(--primary-red);color:#fff;font-size:10px;font-weight:700;padding:2px 4px;border-radius:10px;min-width:16px;text-align:center}.user-avatar{width:32px;height:32px;border-radius:50%;cursor:pointer;-o-object-fit:cover;object-fit:cover}.notifications-panel{position:absolute;top:56px;right:16px;width:480px;max-height:600px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 4px 16px #0003;overflow:hidden;z-index:1001}.notifications-header{padding:16px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.notifications-header h3{font-size:16px;font-weight:500}.mark-read-button{color:var(--text-secondary);font-size:14px;padding:4px 8px;border-radius:4px}.mark-read-button:hover{background-color:var(--hover-bg)}.notifications-list{max-height:500px;overflow-y:auto}.notification-item{display:flex;gap:12px;padding:12px 16px;cursor:pointer;transition:background-color .2s}.notification-item:hover{background-color:var(--hover-bg)}.notification-item.unread{background-color:var(--bg-secondary)}.notification-avatar{width:40px;height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover;flex-shrink:0}.notification-content{flex:1;min-width:0}.notification-text{font-size:14px;color:var(--text-primary);margin-bottom:4px}.notification-time{font-size:12px;color:var(--text-secondary)}.notification-thumbnail{width:100px;height:56px;border-radius:4px;-o-object-fit:cover;object-fit:cover;flex-shrink:0}.user-menu{position:absolute;top:56px;right:16px;width:300px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 4px 16px #0003;overflow:hidden;z-index:1001}.user-menu-header{padding:16px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:12px}.user-menu-avatar{width:40px;height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.user-menu-info{flex:1}.user-menu-name{font-size:14px;font-weight:500;color:var(--text-primary)}.user-menu-handle{font-size:12px;color:var(--text-secondary)}.user-menu-list{padding:8px 0}.user-menu-item{display:flex;align-items:center;gap:16px;padding:12px 16px;cursor:pointer;color:var(--text-primary);font-size:14px;transition:background-color .2s}.user-menu-item:hover{background-color:var(--hover-bg)}.user-menu-divider{height:1px;background-color:var(--border-color);margin:8px 0}.theme-toggle{display:flex;align-items:center;justify-content:space-between;width:100%}.theme-switch{width:40px;height:20px;background-color:var(--border-color);border-radius:10px;position:relative;cursor:pointer;transition:background-color .2s}.theme-switch.active{background-color:var(--primary-red)}.theme-switch-thumb{width:16px;height:16px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s}.theme-switch.active .theme-switch-thumb{transform:translate(20px)}.sidebar{position:fixed;left:0;top:56px;bottom:0;width:240px;background-color:var(--sidebar-bg);overflow-y:auto;transition:transform .2s ease,width .2s ease;z-index:999;border-right:1px solid var(--border-color)}.sidebar.mini{width:72px}.sidebar.closed{transform:translate(-100%)}.sidebar-section{border-bottom:1px solid var(--border-color);padding:12px 0}.sidebar-item{display:flex;align-items:center;gap:24px;padding:10px 24px;color:var(--text-primary);cursor:pointer;transition:background-color .2s;text-decoration:none}.sidebar-item:hover{background-color:var(--hover-bg)}.sidebar-item.active{background-color:var(--hover-bg);font-weight:500}.sidebar-item-icon{flex-shrink:0}.sidebar-item-text{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar.mini .sidebar-item{justify-content:center;padding:16px 0}.sidebar.mini .sidebar-item-text{display:none}.sidebar-section-title{padding:8px 24px;font-size:14px;font-weight:500;color:var(--text-primary)}.sidebar.mini .sidebar-section-title{display:none}.subscription-item{display:flex;align-items:center;gap:16px;padding:8px 24px;color:var(--text-primary);cursor:pointer;transition:background-color .2s;text-decoration:none}.subscription-item:hover{background-color:var(--hover-bg)}.subscription-avatar{width:24px;height:24px;border-radius:50%;-o-object-fit:cover;object-fit:cover;flex-shrink:0}.subscription-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar.mini .subscription-item{justify-content:center;padding:12px 0}.sidebar.mini .subscription-name{display:none}.show-more-button{display:flex;align-items:center;gap:24px;padding:10px 24px;color:var(--text-primary);cursor:pointer;transition:background-color .2s;font-size:14px;width:100%;text-align:left}.show-more-button:hover{background-color:var(--hover-bg)}.sidebar.mini .show-more-button{display:none}@media(max-width:1312px){.sidebar:not(.mini){transform:translate(-100%)}}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000}.modal-content{background-color:var(--bg-primary);border-radius:12px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 4px 24px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-title{font-size:20px;font-weight:500;color:var(--text-primary)}.modal-close{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);background:none;border:none;transition:background-color .2s}.modal-close:hover{background-color:var(--hover-bg)}.share-options{display:flex;flex-direction:column;gap:16px}.share-link-section{display:flex;gap:8px;align-items:center}.share-link-input{flex:1;padding:12px;border:1px solid var(--border-color);border-radius:8px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:14px}.copy-button{padding:12px 24px;border-radius:8px;background-color:var(--primary-red);color:#fff;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:background-color .2s}.copy-button:hover{background-color:#c00}.social-buttons{display:flex;gap:12px;flex-wrap:wrap}.social-button{flex:1;min-width:120px;padding:12px;border-radius:8px;background-color:var(--hover-bg);color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color .2s}.social-button:hover{background-color:var(--border-color)}.timestamp-checkbox{display:flex;align-items:center;gap:8px;padding:12px 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}.timestamp-checkbox input{width:18px;height:18px;cursor:pointer}.timestamp-checkbox label{font-size:14px;color:var(--text-primary);cursor:pointer}.playlist-modal-content{max-width:400px}.playlist-list{max-height:300px;overflow-y:auto;margin-bottom:16px}.playlist-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;cursor:pointer;transition:background-color .2s}.playlist-item:hover{background-color:var(--hover-bg)}.playlist-checkbox{width:20px;height:20px;cursor:pointer}.playlist-info{flex:1}.playlist-name{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:2px}.playlist-count{font-size:12px;color:var(--text-secondary)}.create-playlist-button{width:100%;padding:12px;border-radius:8px;background-color:var(--hover-bg);color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color .2s;margin-bottom:16px}.create-playlist-button:hover{background-color:var(--border-color)}.create-playlist-form{display:flex;flex-direction:column;gap:12px;padding:16px 0;border-top:1px solid var(--border-color)}.form-input{padding:12px;border:1px solid var(--border-color);border-radius:8px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:14px}.form-select{padding:12px;border:1px solid var(--border-color);border-radius:8px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:14px;cursor:pointer}.form-buttons{display:flex;gap:8px;justify-content:flex-end}.form-button{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:background-color .2s}.form-button.cancel{background-color:var(--hover-bg);color:var(--text-primary)}.form-button.cancel:hover{background-color:var(--border-color)}.form-button.create{background-color:var(--primary-red);color:#fff}.form-button.create:hover{background-color:#c00}.home-page{padding:24px}.category-chips{display:flex;gap:12px;margin-bottom:24px;overflow-x:auto;padding-bottom:8px}.category-chips::-webkit-scrollbar{height:4px}.category-chip{padding:8px 16px;border-radius:8px;background-color:var(--hover-bg);color:var(--text-primary);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .2s;border:1px solid var(--border-color)}.category-chip:hover{background-color:var(--border-color)}.category-chip.active{background-color:var(--text-primary);color:var(--bg-primary)}.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}@media(min-width:1024px){.videos-grid{grid-template-columns:repeat(4,1fr)}}@media(min-width:1440px){.videos-grid{grid-template-columns:repeat(5,1fr)}}.video-card{cursor:pointer;transition:transform .2s;position:relative}.video-card:hover{transform:translateY(-4px)}.video-card:hover .video-card-menu{opacity:1}.video-thumbnail-container{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background-color:var(--hover-bg)}.video-thumbnail{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.video-duration{position:absolute;bottom:8px;right:8px;background-color:#000c;color:#fff;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.video-card-menu{position:absolute;top:8px;right:8px;width:32px;height:32px;background-color:#000c;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .2s;z-index:10}.video-card-menu:hover{background-color:#000000e6}.video-info{display:flex;gap:12px;margin-top:12px}.channel-avatar-small{width:36px;height:36px;border-radius:50%;-o-object-fit:cover;object-fit:cover;flex-shrink:0}.video-details{flex:1;min-width:0}.video-title{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.video-channel-name{font-size:12px;color:var(--text-secondary);margin-bottom:2px}.video-metadata{font-size:12px;color:var(--text-secondary)}.video-menu-dropdown{position:absolute;top:48px;right:8px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 16px #0003;min-width:200px;z-index:100}.video-menu-item{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:14px;color:var(--text-primary);cursor:pointer;transition:background-color .2s}.video-menu-item:hover{background-color:var(--hover-bg)}.video-menu-item:first-child{border-radius:8px 8px 0 0}.video-menu-item:last-child{border-radius:0 0 8px 8px}.video-player-page{display:flex;gap:24px;padding:24px;max-width:1920px;margin:0 auto}.video-player-main{flex:1;min-width:0}.video-player-container{position:relative;width:100%;aspect-ratio:16/9;background-color:#000;border-radius:12px;overflow:hidden;margin-bottom:12px}.video-player{width:100%;height:100%;border:0}.video-controls-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000c);padding:48px 12px 12px;opacity:1;transition:opacity .3s}.video-player-container:not(:hover) .video-controls-overlay{opacity:0}.video-progress-bar{width:100%;height:4px;background-color:#ffffff4d;border-radius:2px;margin-bottom:8px;cursor:pointer;position:relative}.video-progress-filled{height:100%;background-color:var(--primary-red);border-radius:2px;position:relative}.video-progress-handle{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;background-color:var(--primary-red);border-radius:50%}.video-controls{display:flex;align-items:center;gap:12px;color:#fff}.control-button{background:none;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.control-button:hover{background-color:#ffffff1a}.video-time{font-size:13px;font-weight:500}.video-controls-right{margin-left:auto;display:flex;align-items:center;gap:12px}.volume-control{display:flex;align-items:center;gap:8px}.volume-slider{width:60px;height:4px;background-color:#ffffff4d;border-radius:2px;cursor:pointer;position:relative}.volume-slider-filled{height:100%;background-color:#fff;border-radius:2px}.settings-menu{position:relative}.settings-dropdown{position:absolute;bottom:40px;right:0;background-color:#1c1c1cfa;border-radius:8px;padding:8px 0;min-width:200px;box-shadow:0 4px 16px #00000080;z-index:10}.settings-item{padding:10px 16px;color:#fff;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.settings-item:hover{background-color:#ffffff1a}.settings-item.active{color:var(--primary-red)}.video-title-section{margin-bottom:12px}.video-title{font-size:20px;font-weight:500;color:var(--text-primary);margin-bottom:8px}.video-metadata-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.video-stats{font-size:14px;color:var(--text-secondary)}.video-actions{display:flex;gap:8px}.action-button{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:18px;background-color:var(--hover-bg);color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s;border:none}.action-button:hover{background-color:var(--border-color)}.action-button.liked{background-color:#ff00001a;color:var(--primary-red)}.channel-info-section{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border-color);margin-bottom:16px}.channel-info-left{display:flex;align-items:center;gap:16px}.channel-avatar-large{width:48px;height:48px;border-radius:50%;-o-object-fit:cover;object-fit:cover;cursor:pointer}.channel-details{cursor:pointer}.channel-name{font-size:16px;font-weight:500;color:var(--text-primary);margin-bottom:2px}.channel-subscribers{font-size:12px;color:var(--text-secondary)}.subscribe-section{display:flex;align-items:center;gap:8px}.subscribe-button{padding:10px 16px;border-radius:18px;background-color:var(--primary-red);color:#fff;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:background-color .2s;display:flex;align-items:center;gap:4px}.subscribe-button:hover{background-color:#c00}.subscribe-button.subscribed{background-color:var(--hover-bg);color:var(--text-primary)}.notification-bell-button{width:36px;height:36px;border-radius:50%;background-color:var(--hover-bg);color:var(--text-primary);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.notification-bell-button:hover{background-color:var(--border-color)}.video-description-section{background-color:var(--hover-bg);border-radius:12px;padding:16px;margin-bottom:24px}.description-text{font-size:14px;color:var(--text-primary);line-height:1.6;white-space:pre-wrap}.description-text.collapsed{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.show-more-button{color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;background:none;border:none;padding:8px 0 0;margin-top:8px}.comments-section{margin-top:24px}.comments-header{display:flex;align-items:center;gap:32px;margin-bottom:24px}.comments-count{font-size:16px;font-weight:500;color:var(--text-primary)}.comments-sort{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text-primary);font-size:14px;font-weight:500}.add-comment{display:flex;gap:16px;margin-bottom:32px}.comment-avatar{width:40px;height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover;flex-shrink:0}.comment-input-container{flex:1}.comment-input{width:100%;border:none;border-bottom:1px solid var(--border-color);background:transparent;color:var(--text-primary);font-size:14px;padding:8px 0;outline:none}.comment-input:focus{border-bottom-color:var(--text-primary)}.comment-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.comment-cancel{padding:8px 16px;border-radius:18px;background:none;color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;border:none}.comment-submit{padding:8px 16px;border-radius:18px;background-color:var(--primary-red);color:#fff;font-size:14px;font-weight:500;cursor:pointer;border:none}.comment-submit:disabled{background-color:var(--hover-bg);color:var(--text-secondary);cursor:not-allowed}.comments-list{display:flex;flex-direction:column;gap:24px}.comment-item{display:flex;gap:16px}.comment-content{flex:1}.comment-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.comment-author{font-size:13px;font-weight:500;color:var(--text-primary)}.comment-time{font-size:12px;color:var(--text-secondary)}.comment-text{font-size:14px;color:var(--text-primary);line-height:1.6;margin-bottom:8px}.comment-actions-row{display:flex;align-items:center;gap:16px}.comment-action{display:flex;align-items:center;gap:8px;color:var(--text-primary);font-size:12px;cursor:pointer;padding:4px 8px;border-radius:18px;transition:background-color .2s;background:none;border:none}.comment-action:hover{background-color:var(--hover-bg)}.comment-action.liked{color:var(--primary-red)}.comment-like-count{font-size:12px;color:var(--text-primary)}.comment-replies{margin-top:16px;padding-left:56px}.reply-input-section{display:flex;gap:12px;margin-top:12px;padding-left:56px}.reply-input-container{flex:1}.video-player-sidebar{width:400px;flex-shrink:0}.suggested-videos{display:flex;flex-direction:column;gap:12px}.suggested-video-item{display:flex;gap:12px;cursor:pointer;border-radius:8px;padding:4px;transition:background-color .2s}.suggested-video-item:hover{background-color:var(--hover-bg)}.suggested-thumbnail{width:168px;aspect-ratio:16/9;border-radius:8px;-o-object-fit:cover;object-fit:cover;flex-shrink:0;position:relative}.suggested-info{flex:1;min-width:0}.suggested-title{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.suggested-channel{font-size:12px;color:var(--text-secondary);margin-bottom:2px}.suggested-stats{font-size:12px;color:var(--text-secondary)}@media(max-width:1024px){.video-player-page{flex-direction:column}.video-player-sidebar{width:100%}.suggested-videos{flex-direction:row;overflow-x:auto}.suggested-video-item{flex-direction:column;min-width:200px}.suggested-thumbnail{width:100%}}.channel-page{padding:0}.channel-banner{width:100%;height:200px;-o-object-fit:cover;object-fit:cover;background-color:var(--hover-bg)}.channel-header{padding:24px;border-bottom:1px solid var(--border-color)}.channel-header-content{display:flex;align-items:center;gap:24px;margin-bottom:16px}.channel-avatar-xl{width:80px;height:80px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.channel-info{flex:1}.channel-name-large{font-size:24px;font-weight:500;color:var(--text-primary);margin-bottom:4px}.channel-handle{font-size:14px;color:var(--text-secondary);margin-bottom:4px}.channel-stats{font-size:14px;color:var(--text-secondary)}.channel-tabs{display:flex;gap:32px;padding:0 24px;border-bottom:1px solid var(--border-color)}.channel-tab{padding:12px 0;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}.channel-tab:hover{color:var(--text-primary)}.channel-tab.active{color:var(--text-primary);border-bottom-color:var(--text-primary)}.channel-content{padding:24px}.channel-videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}@media(min-width:1024px){.channel-videos-grid{grid-template-columns:repeat(4,1fr)}}.channel-about{max-width:800px}.about-section{margin-bottom:32px}.about-section h3{font-size:16px;font-weight:500;color:var(--text-primary);margin-bottom:12px}.about-section p{font-size:14px;color:var(--text-primary);line-height:1.6}.about-links{display:flex;flex-direction:column;gap:8px}.about-link{color:var(--primary-red);font-size:14px;text-decoration:none}.about-link:hover{text-decoration:underline}.search-page{padding:24px;max-width:1200px;margin:0 auto}.search-header{margin-bottom:24px}.search-query{font-size:20px;font-weight:400;color:var(--text-primary);margin-bottom:16px}.search-filters{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--border-color);margin-bottom:24px}.filter-tabs{display:flex;gap:24px;flex:1}.filter-tab{padding:12px 0;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;background:none;border-top:none;border-left:none;border-right:none}.filter-tab:hover{color:var(--text-primary)}.filter-tab.active{color:var(--text-primary);border-bottom-color:var(--text-primary)}.sort-dropdown{padding:8px 12px;border:1px solid var(--border-color);border-radius:8px;background-color:var(--bg-primary);color:var(--text-primary);font-size:14px;cursor:pointer}.search-results{display:flex;flex-direction:column;gap:16px}.search-result-item{display:flex;gap:16px;cursor:pointer;padding:8px;border-radius:8px;transition:background-color .2s}.search-result-item:hover{background-color:var(--hover-bg)}.search-result-thumbnail{width:360px;aspect-ratio:16/9;border-radius:8px;-o-object-fit:cover;object-fit:cover;flex-shrink:0;position:relative}.search-result-info{flex:1;min-width:0}.search-result-title{font-size:18px;font-weight:500;color:var(--text-primary);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.search-result-metadata{font-size:13px;color:var(--text-secondary);margin-bottom:8px}.search-result-channel{display:flex;align-items:center;gap:12px;margin-bottom:8px}.search-result-channel-avatar{width:24px;height:24px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.search-result-channel-name{font-size:13px;color:var(--text-secondary)}.search-result-description{font-size:13px;color:var(--text-secondary);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.channel-result-item{display:flex;align-items:center;gap:24px;padding:16px;border-radius:8px;transition:background-color .2s}.channel-result-item:hover{background-color:var(--hover-bg)}.channel-result-avatar{width:120px;height:120px;border-radius:50%;-o-object-fit:cover;object-fit:cover;flex-shrink:0}.channel-result-info{flex:1}.channel-result-name{font-size:20px;font-weight:500;color:var(--text-primary);margin-bottom:4px}.channel-result-handle{font-size:14px;color:var(--text-secondary);margin-bottom:8px}.channel-result-stats{font-size:13px;color:var(--text-secondary);margin-bottom:12px}.channel-subscribe-button{padding:10px 16px;border-radius:18px;background-color:var(--primary-red);color:#fff;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:background-color .2s}.channel-subscribe-button:hover{background-color:#c00}.channel-subscribe-button.subscribed{background-color:var(--hover-bg);color:var(--text-primary)}.mini-player{position:fixed;bottom:16px;right:16px;width:400px;background-color:var(--bg-primary);border-radius:12px;box-shadow:0 4px 16px #0000004d;overflow:hidden;z-index:2000;cursor:move}.mini-player-video{width:100%;aspect-ratio:16/9;background-color:#000;-o-object-fit:contain;object-fit:contain;border:0}.mini-player-controls{padding:12px;display:flex;align-items:center;gap:12px}.mini-player-info{flex:1;min-width:0}.mini-player-title{font-size:14px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-player-channel{font-size:12px;color:var(--text-secondary)}.mini-player-buttons{display:flex;gap:8px}.mini-player-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-primary);cursor:pointer}.mini-player-button:hover{background-color:var(--hover-bg)}@media(max-width:768px){.mini-player{width:calc(100% - 32px);bottom:8px;right:8px;left:8px}}.app{display:flex;flex-direction:column;min-height:100vh}.app-loading{display:flex;align-items:center;justify-content:center;min-height:100vh;font-size:16px;color:var(--text-secondary)}.app-body{display:flex;flex:1;padding-top:56px}.main-content{flex:1;transition:margin-left .2s ease;min-height:calc(100vh - 56px)}.main-content.sidebar-open{margin-left:240px}.main-content.sidebar-mini{margin-left:72px}.main-content.sidebar-closed{margin-left:0}@media(max-width:1312px){.main-content.sidebar-open{margin-left:0}}