.video-explore-container{padding:var(--spacing-xl) 0 var(--spacing-2xl);min-height:60vh}.video-explore-container .container{max-width:1200px}.loading-state,.error-state,.empty-state{text-align:center;padding:var(--spacing-2xl) 0}.loading-spinner{width:48px;height:48px;border:4px solid rgba(0,123,67,.1);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite,pulse 2s ease-in-out infinite;margin:0 auto var(--spacing-md);box-shadow:0 0 20px #007b4333}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{box-shadow:0 0 20px #007b4333}50%{box-shadow:0 0 40px #007b4366}}.error-message{color:#ef4444;font-size:1.125rem}.video-grid{position:relative;width:100%}.video-item{position:absolute;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .4s ease-out,visibility 0s .4s;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-secondary);box-shadow:0 2px 8px #0000000d;border:2px solid transparent}.video-item.loaded{opacity:1;visibility:visible;transition:opacity .4s ease-out,visibility 0s 0s}[data-theme=light] .video-item{background:#fff}.video-item:hover{border-color:var(--color-primary);box-shadow:0 8px 24px #007b4333;transform:translateY(-2px)}.video-item-wrapper{position:relative;overflow:hidden;border-radius:16px;background:#000}.video-item-wrapper video{width:100%;height:auto;display:block;object-fit:cover;border-radius:16px;background:#000}.play-overlay{position:absolute;top:8px;right:8px;width:32px;height:32px;background:#0000003d;backdrop-filter:blur(16px);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .25s ease;pointer-events:none;z-index:2}.play-overlay:after{content:"";width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent #ffffff;margin-left:2px}.video-item:hover .play-overlay{transform:scale(1.1);background:#0006}.play-overlay.hide{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}.video-mask{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(180deg,#0000,#000000b3);padding:12px;border-radius:0 0 16px 16px;z-index:1;transition:background .3s ease}.video-item:hover .video-mask{background:linear-gradient(180deg,#0000,#000000d9)}.video-user-info{display:flex;align-items:center;gap:8px}.video-user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.2)}.video-user-name{color:#fff;font-size:.875rem;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.5)}.load-more-container{text-align:center;padding:var(--spacing-xl) 0}.lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);animation:fadeInOverlay .3s ease-in-out}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.lightbox-overlay{position:absolute;inset:0;background:#000000f2;backdrop-filter:blur(12px)}.lightbox-content{position:relative;max-width:1200px;max-height:90vh;width:100%;display:flex;flex-direction:column;background:var(--color-bg-secondary);border-radius:var(--radius-lg);border:1px solid rgba(0,123,67,.2);overflow:hidden;box-shadow:0 20px 60px #007b434d;animation:zoomIn .3s ease-out}@keyframes zoomIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.lightbox-close{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:40px;height:40px;padding:0;background:#007b43e6;color:#fff;border:none;border-radius:50%;font-size:2rem;font-weight:300;font-family:Arial,sans-serif;line-height:40px;text-align:center;cursor:pointer;z-index:10;transition:all var(--transition-fast)}.lightbox-close:hover{background:var(--color-primary);transform:scale(1.1)}.lightbox-video-container{flex:1 1 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--spacing-lg);min-height:0;position:relative;background:#000}.lightbox-video-container video{display:block;max-width:100%;max-height:calc(90vh - 200px);width:auto;height:auto;border-radius:var(--radius-md)}.lightbox-info{padding:var(--spacing-lg);background:var(--color-bg);border-top:1px solid var(--color-border)}.lightbox-info h3{font-size:1.125rem;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm)}.lightbox-meta{font-size:.875rem;color:var(--color-text-secondary);display:flex;gap:var(--spacing-md)}