.page-header{text-align:center;padding:3rem 0 2rem}.page-header h1{font-size:2.5rem;margin-bottom:.5rem}.page-header p{color:var(--text-muted);font-size:1.1rem}.videos-section{padding:1rem 0 3rem}.videos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.video-card-wrapper{display:flex;flex-direction:column;gap:.5rem}.video-card{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/9;cursor:pointer;background:var(--card-bg)}.video-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.video-card:hover img{transform:scale(1.05)}.video-overlay{position:absolute;inset:0;background:transparent;display:flex;align-items:center;justify-content:center}.play-button{width:56px;height:56px;background:#0000004d;border:2px solid rgba(255,255,255,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#ffffff80;transition:all .3s ease;box-shadow:0 0 30px #ffffff1a;backdrop-filter:blur(4px);opacity:.5}.video-card:hover .play-button{opacity:1;background:#d4a853e6;border-color:#d4a853;color:#1a1a2e;box-shadow:0 0 40px #d4a85380}.video-info{padding:.5rem 0 0}.video-title{font-size:.9rem;font-weight:600;color:var(--text-light);margin:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-artist{color:var(--text-muted);font-size:.8rem;margin:.2rem 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.favorite-btn{position:absolute;top:8px;right:8px;background:#00000080;border:none;border-radius:50%;width:32px;height:32px;padding:0;cursor:pointer;font-size:1rem;line-height:1;color:#ffffffb3;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;backdrop-filter:blur(4px);z-index:10}.video-card-wrapper:hover .favorite-btn{opacity:1}.favorite-btn:hover{background:#000000b3;transform:scale(1.1);color:#ff6b6b}.favorite-btn .heart-filled{display:none}.favorite-btn.active{opacity:1;color:#ff4757;background:#ff475733}.favorite-btn.active .heart-outline{display:none}.favorite-btn.active .heart-filled{display:inline}.video-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s ease}.video-modal.active{opacity:1;visibility:visible}.modal-backdrop{position:absolute;inset:0;background:#000;cursor:pointer}.modal-content{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;padding:1rem;transform:scale(.95);transition:transform .3s ease}.video-modal.active .modal-content{transform:scale(1)}.modal-close{position:absolute;top:1rem;right:1rem;background:#ffffff1a;border:none;color:#fff;font-size:2rem;width:50px;height:50px;border-radius:50%;cursor:pointer;opacity:.8;transition:all .3s;z-index:10;display:flex;align-items:center;justify-content:center}.modal-close:hover{opacity:1;background:#fff3}.modal-video-container{position:relative;width:100%;max-width:100vw;height:0;padding-bottom:min(56.25%,calc(100vh - 120px));overflow:hidden;border-radius:0}.modal-video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}.modal-info{text-align:center;padding:1rem 0 .5rem;position:absolute;bottom:1rem;left:0;right:0}.modal-info h3{font-size:1.25rem;color:var(--text-light);margin-bottom:.25rem}.modal-info p{color:var(--accent-gold);font-size:.9rem;margin:0}.modal-controls{position:absolute;bottom:1rem;right:1rem;display:flex;gap:.5rem;z-index:10}.fullscreen-btn,.share-btn{background:#ffffff26;border:none;color:#fff;font-size:1.25rem;width:44px;height:44px;border-radius:8px;cursor:pointer;opacity:.8;transition:all .3s;display:flex;align-items:center;justify-content:center}.fullscreen-btn:hover,.share-btn:hover{opacity:1;background:#ffffff40}.share-btn:hover{background:#1877f2cc}.card-share-btn{position:absolute;top:8px;left:8px;background:#00000080;border:none;border-radius:50%;width:32px;height:32px;padding:0;cursor:pointer;color:#ffffffb3;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;backdrop-filter:blur(4px);z-index:10}.video-card-wrapper:hover .card-share-btn{opacity:1}.card-share-btn:hover{background:#1877f2cc;transform:scale(1.1);color:#fff}.card-share-btn svg{width:14px;height:14px}@media (max-width: 1024px){.videos-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}@media (max-width: 640px){.videos-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.page-header{padding:2rem 0 1.5rem}.page-header h1{font-size:2rem}.video-title{font-size:.85rem}.video-artist{font-size:.75rem}.play-button{width:40px;height:40px;font-size:.9rem}.favorite-btn{font-size:1rem}}.loading-placeholder{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:var(--text-muted);font-size:.9rem}.loading-spinner{width:32px;height:32px;border:2px solid rgba(212,168,83,.2);border-top-color:var(--accent-gold);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:.75rem}@keyframes spin{to{transform:rotate(360deg)}}