.videos-page{min-height:calc(100vh - 200px);padding:var(--space-xl) var(--space-md)}.videos-page .container{max-width:1400px;margin:0 auto}.videos-page .page-header{text-align:center;margin-bottom:var(--space-2xl)}.videos-page .page-title{font-size:2.5rem;font-weight:700;margin-bottom:var(--space-sm);background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-flex;align-items:center;gap:var(--space-md)}.videos-page .page-title i{font-size:2rem}.videos-page .page-subtitle{color:var(--text-secondary);font-size:1.1rem;margin:0}.videos-page .empty-state{text-align:center;padding:var(--space-2xl);max-width:500px;margin:0 auto}.videos-page .empty-state i{font-size:4rem;color:var(--text-muted);margin-bottom:var(--space-lg);display:block}.videos-page .empty-state h3{margin-bottom:var(--space-sm);color:var(--text-primary)}.videos-page .empty-state p{color:var(--text-secondary);margin:0}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}.video-card{cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;overflow:hidden;padding:0}.video-card:hover{transform:translateY(-8px);box-shadow:var(--accent-glow)}.video-thumbnail{position:relative;width:100%;padding-top:56.25%;overflow:hidden;background:var(--glass-bg)}.video-thumbnail img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.video-card:hover .video-thumbnail img{transform:scale(1.05)}.video-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,transparent 0,transparent 50%,rgba(0,0,0,.7) 100%);opacity:.5;transition:opacity .3s ease}.video-card:hover .video-overlay{opacity:.3}.video-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);width:70px;height:70px;background:var(--accent-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.3);transition:transform .3s ease,box-shadow .3s ease;z-index:2}.video-play-btn i{color:#fff;font-size:1.5rem;margin-left:4px}.video-card:hover .video-play-btn{transform:translate(-50%,-50%) scale(1.1);box-shadow:var(--accent-glow-strong)}.video-info{padding:var(--space-md)}.video-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0 0 var(--space-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.video-description{font-size:.875rem;color:var(--text-secondary);margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.video-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.video-modal.active{opacity:1;visibility:visible}.video-modal-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);backdrop-filter:blur(10px)}.video-modal-content{position:relative;width:90%;max-width:1200px;z-index:1;transform:scale(.9);transition:transform .3s ease}.video-modal.active .video-modal-content{transform:scale(1)}.video-modal-close{position:absolute;top:-50px;right:0;width:44px;height:44px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:50%;color:var(--text-primary);font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.video-modal-close:hover{background:var(--error);border-color:var(--error);color:#fff}.video-modal-wrapper{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.5)}.video-modal-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}@media (max-width:1024px){.video-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-md)}}@media (max-width:768px){.videos-page{padding:var(--space-lg) var(--space-sm)}.videos-page .page-title{font-size:2rem}.videos-page .page-title i{font-size:1.75rem}.video-play-btn{width:60px;height:60px}.video-play-btn i{font-size:1.25rem}.video-modal-close{top:-45px;width:40px;height:40px}}@media (max-width:640px){.video-grid{grid-template-columns:1fr;gap:var(--space-md)}.videos-page .page-header{margin-bottom:var(--space-xl)}.videos-page .page-title{font-size:1.75rem}.video-modal-content{width:95%}}