:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#0a0a0a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{width:100%}button{font-family:inherit}a{text-decoration:none;color:inherit}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:#0a0a0a80}::-webkit-scrollbar-thumb{background:#8b000066;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#8b000099}*{margin:0;padding:0;box-sizing:border-box}body{background:#0a0a0a;color:#c4c4c4;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow-x:hidden}.app{min-height:100vh;background:linear-gradient(135deg,#0a0a0a,#1a0f0f,#0a0a0a);position:relative}.app:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(139,0,0,.15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(75,0,130,.1) 0%,transparent 50%);pointer-events:none;z-index:0}.content-wrapper{display:flex;padding-top:56px;position:relative;z-index:1}.main-content{flex:1;display:flex;gap:24px;padding:24px;transition:margin-left .3s ease;min-height:calc(100vh - 56px)}.main-content.sidebar-open{margin-left:240px}.main-content.sidebar-closed{margin-left:72px}.video-section{flex:1;max-width:1280px}.recommendations-section{width:400px;flex-shrink:0}@media (max-width: 1200px){.main-content{flex-direction:column}.recommendations-section{width:100%}}@media (max-width: 768px){.main-content.sidebar-open,.main-content.sidebar-closed{margin-left:0}.recommendations-section{width:100%}}.header{position:fixed;top:0;left:0;right:0;height:56px;background:#0a0a0af2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(139,0,0,.3);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:1000;box-shadow:0 2px 20px #8b000033}.header-left{display:flex;align-items:center;gap:16px}.icon-button{background:none;border:none;color:#c4c4c4;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.icon-button:hover{background:#8b000033;color:#f44;box-shadow:0 0 15px #8b00004d}.logo{display:flex;align-items:center;gap:8px;cursor:pointer}.logo-text{font-size:20px;font-weight:700;color:#c4c4c4;letter-spacing:1px}.logo-accent{color:#8b0000;font-weight:900;text-shadow:0 0 10px rgba(139,0,0,.5)}.header-center{flex:1;max-width:600px;margin:0 40px}.search-container{display:flex;height:40px;border:1px solid rgba(139,0,0,.3);border-radius:24px;overflow:hidden;transition:all .3s ease;background:#140a0a80}.search-container:focus-within{border-color:#8b0000;box-shadow:0 0 20px #8b00004d}.search-input{flex:1;background:none;border:none;padding:0 20px;color:#c4c4c4;font-size:14px;outline:none}.search-input::placeholder{color:#666;font-style:italic}.search-button{width:64px;background:#8b00004d;border:none;border-left:1px solid rgba(139,0,0,.3);color:#c4c4c4;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.search-button:hover{background:#8b000080;color:#f44}.header-right{display:flex;align-items:center;gap:8px}.profile-button{padding:4px}.profile-icon{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#8b0000,indigo);display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;box-shadow:0 0 15px #8b000066}@media (max-width: 768px){.header-center{display:none}}.sidebar{position:fixed;top:56px;left:0;bottom:0;background:#0f0a0af2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid rgba(139,0,0,.2);transition:all .3s ease;overflow-y:auto;overflow-x:hidden;z-index:100;box-shadow:2px 0 20px #00000080}.sidebar.open{width:240px}.sidebar.closed{width:72px}.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-track{background:#0a0a0a80}.sidebar::-webkit-scrollbar-thumb{background:#8b00004d;border-radius:4px}.sidebar::-webkit-scrollbar-thumb:hover{background:#8b000080}.sidebar-nav{padding:12px 0}.nav-item{display:flex;align-items:center;gap:24px;padding:10px 24px;color:#c4c4c4;text-decoration:none;transition:all .3s ease;cursor:pointer;white-space:nowrap;font-size:14px;font-weight:500}.sidebar.closed .nav-item{justify-content:center;padding:10px 0}.nav-item:hover{background:#8b000033;color:#f44;box-shadow:inset 3px 0 #8b0000}.nav-item.active{background:#8b00004d;color:#f44;box-shadow:inset 3px 0 #8b0000}.nav-divider{height:1px;background:#8b000033;margin:12px 0}.nav-section-title{padding:8px 24px;font-size:11px;font-weight:700;color:#666;letter-spacing:1px;margin-top:12px}@media (max-width: 768px){.sidebar.open{transform:translate(0)}.sidebar.closed{transform:translate(-100%)}}.video-player-container{width:100%;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #000c,0 0 40px #8b00004d;border:1px solid rgba(139,0,0,.2)}.video-player{position:relative;width:100%;padding-top:56.25%;background:#000;cursor:pointer}.video-thumbnail{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#000c,#14000099,#000000e6),radial-gradient(circle at 30% 40%,rgba(139,0,0,.3) 0%,transparent 60%),radial-gradient(circle at 70% 60%,rgba(75,0,130,.2) 0%,transparent 50%)}.video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0000004d;transition:all .3s ease;z-index:10}.video-player:hover .video-overlay{background:#00000080}.play-button{background:none;border:none;color:#fff;cursor:pointer;transition:all .3s ease;filter:drop-shadow(0 0 20px rgba(139,0,0,.8))}.play-button:hover{transform:scale(1.1);color:#f44;filter:drop-shadow(0 0 30px rgba(255,68,68,1))}.video-controls{background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.9) 100%);padding:8px 16px 16px}.progress-bar{margin-bottom:12px}.progress-slider{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:#fff3;border-radius:2px;outline:none;cursor:pointer}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:#8b0000;border-radius:50%;cursor:pointer;box-shadow:0 0 10px #8b0000cc;transition:all .3s ease}.progress-slider::-webkit-slider-thumb:hover{background:#f44;box-shadow:0 0 20px #f44;transform:scale(1.2)}.progress-slider::-moz-range-thumb{width:14px;height:14px;background:#8b0000;border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 10px #8b0000cc}.controls-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}.controls-left,.controls-right{display:flex;align-items:center;gap:8px}.control-button{background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.control-button:hover{background:#8b00004d;color:#f44}.volume-control{display:flex;align-items:center;margin-left:8px}.volume-slider{width:80px;height:4px;-webkit-appearance:none;appearance:none;background:#fff3;border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:#8b0000;border-radius:50%;cursor:pointer}.volume-slider::-moz-range-thumb{width:12px;height:12px;background:#8b0000;border-radius:50%;cursor:pointer;border:none}.time-display{font-size:13px;color:#fff;font-variant-numeric:tabular-nums;margin-left:8px}@media (max-width: 768px){.volume-control{display:none}.controls-left,.controls-right{gap:4px}}.video-info{margin-top:16px;padding:20px;background:linear-gradient(135deg,#140a0a99,#0a0a0acc);border-radius:12px;border:1px solid rgba(139,0,0,.2);box-shadow:0 4px 20px #00000080}.video-title{font-size:20px;font-weight:600;color:#e8e8e8;margin-bottom:12px;line-height:1.4;text-shadow:0 2px 10px rgba(0,0,0,.5)}.video-meta{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid rgba(139,0,0,.2);margin-bottom:16px}.meta-left{display:flex;align-items:center;gap:8px;font-size:14px;color:#999}.separator{color:#666}.meta-right{display:flex;align-items:center;gap:8px}.action-button{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#8b000033;border:1px solid rgba(139,0,0,.3);border-radius:20px;color:#c4c4c4;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.action-button:hover{background:#8b000066;border-color:#8b0000;color:#f44;box-shadow:0 0 15px #8b00004d}.action-button.active{background:#8b000080;border-color:#8b0000;color:#f44}.channel-info{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid rgba(139,0,0,.2);margin-bottom:16px}.channel-left{display:flex;align-items:center;gap:12px}.channel-avatar{width:40px;height:40px;border-radius:50%;background:#140a0acc;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px #8b00004d}.channel-details{display:flex;flex-direction:column;gap:2px}.channel-name{font-size:14px;font-weight:600;color:#e8e8e8}.subscriber-count{font-size:12px;color:#999}.subscribe-button{padding:10px 24px;background:#8b0000;border:none;border-radius:20px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 15px #8b000066}.subscribe-button:hover{background:#a00000;box-shadow:0 6px 20px #8b000099;transform:translateY(-2px)}.subscribe-button.subscribed{background:#8b00004d;border:1px solid rgba(139,0,0,.5)}.video-description{font-size:14px;line-height:1.6;color:#c4c4c4;position:relative;max-height:60px;overflow:hidden;transition:max-height .3s ease}.video-description.expanded{max-height:500px}.video-description p{margin-bottom:12px}.show-more-button{background:none;border:none;color:#8b0000;font-size:14px;font-weight:600;cursor:pointer;padding:8px 0 0;transition:color .3s ease;text-transform:uppercase;letter-spacing:.5px}.show-more-button:hover{color:#f44}@media (max-width: 768px){.video-meta{flex-direction:column;align-items:flex-start;gap:12px}.meta-right{width:100%;flex-wrap:wrap}.action-button span{display:none}.action-button{padding:8px}}.comments-section{margin-top:24px;padding:24px;background:linear-gradient(135deg,#140a0a99,#0a0a0acc);border-radius:12px;border:1px solid rgba(139,0,0,.2);box-shadow:0 4px 20px #00000080}.comments-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.comments-count{font-size:18px;font-weight:600;color:#e8e8e8}.sort-button{display:flex;align-items:center;gap:8px;background:none;border:none;color:#c4c4c4;font-size:14px;font-weight:500;cursor:pointer;padding:8px 12px;border-radius:8px;transition:all .3s ease}.sort-button:hover{background:#8b000033;color:#f44}.add-comment{display:flex;gap:16px;margin-bottom:32px;align-items:center}.comment-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;flex-shrink:0;box-shadow:0 0 10px #8b00004d;font-size:16px}.user-avatar{background:linear-gradient(135deg,#8b0000,indigo)}.avatar-1{background:linear-gradient(135deg,#5b0000,#2b0042)}.avatar-2{background:linear-gradient(135deg,#3b0000,#1b0062)}.avatar-3{background:linear-gradient(135deg,#6b0000,#3b0052)}.avatar-4{background:linear-gradient(135deg,#4b0000,#2b0072)}.comment-input{flex:1;background:#140a0a80;border:none;border-bottom:1px solid rgba(139,0,0,.3);padding:8px 0;color:#c4c4c4;font-size:14px;outline:none;transition:border-color .3s ease}.comment-input::placeholder{color:#666;font-style:italic}.comment-input:focus{border-bottom-color:#8b0000}.comments-list{display:flex;flex-direction:column;gap:24px}.comment{display:flex;gap:16px}.comment-content{flex:1}.comment-header-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.comment-author{font-size:13px;font-weight:600;color:#e8e8e8}.comment-time{font-size:12px;color:#999}.comment-text{font-size:14px;line-height:1.5;color:#c4c4c4;margin-bottom:8px}.comment-actions{display:flex;align-items:center;gap:8px}.comment-action-button{display:flex;align-items:center;gap:6px;background:none;border:none;color:#999;font-size:12px;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:6px;transition:all .3s ease}.comment-action-button:hover{background:#8b000033;color:#f44}.reply-button{padding:6px 12px}.view-replies{display:flex;align-items:center;gap:8px;background:none;border:none;color:#8b0000;font-size:13px;font-weight:600;cursor:pointer;padding:8px 0;margin-top:8px;transition:color .3s ease}.view-replies:hover{color:#f44}@media (max-width: 768px){.comments-section{padding:16px}.comment-avatar{width:32px;height:32px;font-size:14px}}.recommendations{position:sticky;top:80px}.recommendations-title{font-size:16px;font-weight:600;color:#e8e8e8;margin-bottom:16px;padding:0 8px}.recommendations-list{display:flex;flex-direction:column;gap:12px}.recommendation-card{display:flex;gap:12px;cursor:pointer;padding:8px;border-radius:8px;transition:all .3s ease;background:#140a0a4d;border:1px solid rgba(139,0,0,.1)}.recommendation-card:hover{background:#8b000033;border-color:#8b00004d;box-shadow:0 4px 15px #0006}.recommendation-thumbnail{position:relative;width:168px;height:94px;border-radius:8px;flex-shrink:0;overflow:hidden}.gradient1{background:linear-gradient(135deg,#1a0000,indigo)}.gradient2{background:linear-gradient(135deg,#2b0000,#5b0082)}.gradient3{background:linear-gradient(135deg,#0a0a0a,#8b0000)}.gradient4{background:linear-gradient(135deg,#1b0052,#3b0000)}.gradient5{background:linear-gradient(135deg,#4b0000,#2b0072)}.gradient6{background:linear-gradient(135deg,#0a0a0a,#3b0062)}.gradient7{background:linear-gradient(135deg,#5b0000,#1b0042)}.gradient8{background:linear-gradient(135deg,#2b0042,#4b0000)}.video-duration{position:absolute;bottom:4px;right:4px;background:#000000e6;color:#fff;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;box-shadow:0 2px 8px #00000080}.recommendation-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.recommendation-title{font-size:13px;font-weight:500;color:#e8e8e8;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}.recommendation-meta{display:flex;flex-direction:column;gap:2px}.recommendation-channel,.recommendation-stats{font-size:12px;color:#999}@media (max-width: 1200px){.recommendations{position:static}.recommendations-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.recommendation-card{flex-direction:column}.recommendation-thumbnail{width:100%;height:180px}}