*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Segoe UI",sans-serif;background:#0a0e27;color:#fff}.app{display:flex;height:100vh}.sidebar{width:250px;background:rgba(20,24,50,0.95);padding:20px;display:flex;flex-direction:column}.logo{font-size:24px;font-weight:bold;margin-bottom:30px;color:#667eea}.nav-item{display:block;padding:12px 15px;color:#a0a0c0;text-decoration:none;border-radius:8px;margin-bottom:5px;transition:0.2s}.nav-item:hover,.nav-item.active{background:rgba(102,126,234,0.2);color:#fff}.user-section{margin-top:auto}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.top-bar{display:flex;padding:15px 20px;gap:15px;background:rgba(20,24,50,0.8);align-items:center}#searchInput{flex:1;padding:10px 15px;border-radius:8px;border:1px solid rgba(100,100,255,0.2);background:rgba(10,12,30,0.6);color:#fff}.video-container{width:100%;background:#000;aspect-ratio:16/9;max-height:50vh}#videoPlayer{width:100%;height:100%}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px;padding:20px;overflow-y:auto}.card{background:rgba(20,24,50,0.6);border-radius:10px;overflow:hidden;cursor:pointer;transition:0.3s}.card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,0.5)}.card img{width:100%;height:250px;object-fit:cover}.card-info{padding:10px}.card-info h4{font-size:14px;margin-bottom:5px}.card-info span{font-size:12px;color:#a0a0c0}#logoutBtn{width:100%;padding:10px;background:rgba(255,75,75,0.2);border:1px solid rgba(255,75,75,0.3);color:#ff6b6b;border-radius:8px;cursor:pointer}