.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-6);margin-top:var(--space-8)}.video-card{background:var(--color-surface);border-radius:12px;overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;border:1px solid var(--color-border);display:flex;flex-direction:column}.video-card:hover{transform:translateY(-8px);box-shadow:0 16px 40px #0000001f}.video-thumbnail-wrapper{position:relative;width:100%;padding-bottom:56.25%;background:#000;cursor:pointer;overflow:hidden}.video-thumbnail-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.video-thumbnail-wrapper img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.video-card:hover .video-thumbnail-wrapper img{transform:scale(1.05)}.play-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0003;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;z-index:2}.video-card:hover .play-overlay{opacity:1}.play-icon{width:56px;height:56px;color:#fff;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}.video-info{padding:var(--space-4)}.video-title{font-family:var(--font-heading);font-size:1rem;margin-bottom:var(--space-2);color:var(--color-ink);font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.video-date{font-size:.85rem;color:var(--color-muted)}.loading-state{text-align:center;padding:var(--space-16);color:var(--color-muted)}.empty-state{text-align:center;padding:var(--space-16)}.empty-state i{width:64px;height:64px;color:var(--color-muted);margin-bottom:var(--space-4)}.api-notice{background:var(--color-warm-gold);border-left:4px solid var(--color-maroon);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-6);border-radius:4px}.api-notice h3{font-size:.9rem;margin:0 0 var(--space-2);color:var(--color-ink)}.api-notice p{margin:0;font-size:.85rem;color:var(--color-muted)}.video-header{text-align:center;max-width:800px;margin:0 auto var(--space-10)}.video-header .lead{font-size:1.1rem;color:var(--color-muted);margin-bottom:var(--space-6);text-align:center}.results-count{display:block;font-size:.9rem;color:var(--color-muted);margin-top:var(--space-3)}.video-controls{display:flex;justify-content:center;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap}.search-wrapper{position:relative;flex:1;max-width:500px;display:block}.search-wrapper i,.search-wrapper svg{position:absolute!important;left:1.25rem!important;top:50%!important;transform:translateY(-50%)!important;color:var(--color-maroon)!important;width:20px!important;height:20px!important;pointer-events:none;z-index:5;margin:0}.sort-wrapper{display:flex;align-items:center;gap:var(--space-2)}.sort-select{padding:var(--space-3) var(--space-4);border-radius:30px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-ink);font-family:inherit;font-size:.9rem;cursor:pointer;transition:all .2s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.sort-select:focus{outline:none;border-color:var(--color-maroon);box-shadow:0 0 0 3px #8000001a}.search-input{box-sizing:border-box;width:100%;padding:1.1rem 1.25rem 1.1rem 3.5rem!important;border:1.5px solid var(--color-border);border-radius:10px;font-family:inherit;font-size:1rem;background:var(--color-surface);color:var(--color-ink);transition:all .3s ease;margin:0;display:block;box-shadow:0 2px 8px #0000000d}.search-input:focus{outline:none;border-color:var(--color-maroon);box-shadow:0 4px 12px #8000001f;background:var(--color-surface-alt)}.skeleton-card{background:var(--color-surface);border-radius:12px;overflow:hidden;border:1px solid var(--color-border)}.skeleton-thumb{width:100%;padding-bottom:56.25%;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite}[data-theme=dark] .skeleton-thumb{background:linear-gradient(90deg,#2a2825 25%,#333028,#2a2825 75%);background-size:200% 100%}.skeleton-content{padding:var(--space-4)}.skeleton-title{height:18px;width:85%;margin-bottom:var(--space-2);background:#eee;border-radius:4px}.skeleton-meta{height:14px;width:35%;background:#eee;border-radius:4px}[data-theme=dark] .skeleton-title,[data-theme=dark] .skeleton-meta{background:#333028}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.pagination-container{display:flex;justify-content:center;align-items:center;gap:var(--space-2);margin-top:var(--space-12);padding-bottom:var(--space-8)}.pagination-btn{min-width:40px;height:40px;padding:0 var(--space-3);display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-ink);font-weight:500;cursor:pointer;transition:all .2s}.pagination-btn:hover:not(:disabled):not(.active){background:var(--color-surface-alt);border-color:var(--color-maroon);color:var(--color-maroon)}.pagination-btn.active{background:var(--color-maroon);border-color:var(--color-maroon);color:#fff;cursor:default}.pagination-btn:disabled{opacity:.4;cursor:not-allowed}.pagination-ellipsis{color:var(--color-muted);padding:0 var(--space-1)}.search-suggestions{position:absolute;top:100%;left:0;right:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;margin-top:var(--space-2);box-shadow:0 10px 25px #0000001a;z-index:100;max-height:300px;overflow-y:auto;display:none}.suggestion-item{padding:var(--space-3) var(--space-4);cursor:pointer;transition:background .2s;display:flex;align-items:center;gap:var(--space-3)}.suggestion-item:hover{background:var(--color-surface-alt)}.suggestion-item i{width:14px;height:14px;color:var(--color-muted)}@media (max-width: 768px){.video-grid{grid-template-columns:1fr}.search-wrapper{max-width:100%}.search-input{padding-left:3rem!important}.search-wrapper i,.search-wrapper svg{left:1rem!important;width:16px!important;height:16px!important}}