*{box-sizing:border-box}html,body,#root{color:#fff;background:#0b1020;min-height:100%;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}body{background:radial-gradient(circle at 0 0,#ff00642e,#0000 25%),radial-gradient(circle at 100% 0,#7800ff29,#0000 25%),#0b1020}a{color:inherit;text-decoration:none}button{font-family:inherit}.container{width:min(1280px,100% - 32px);margin:0 auto}.header{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a0e1ce0;border-bottom:1px solid #ffffff14;position:sticky;top:0}.header-content{justify-content:space-between;align-items:center;gap:20px;min-height:72px;display:flex}.logo{color:#ff3d81;font-size:28px;font-weight:800}.nav{color:#ffffffd1;gap:20px;font-size:14px;display:flex}.nav a:hover{color:#ff3d81}.main-content{padding:28px 0 40px}.hero{background:linear-gradient(135deg,#ff3d812e,#7c3aed26);border:1px solid #ffffff14;border-radius:24px;margin-bottom:28px;padding:28px}.hero-badge{color:#ff7aa9;background:#ff3d812e;border-radius:999px;margin-bottom:12px;padding:6px 12px;font-size:13px;font-weight:700;display:inline-block}.hero h1{margin:0 0 12px;font-size:34px}.hero p{color:#ffffffc7;max-width:720px;margin:0;line-height:1.6}.section-header{margin-bottom:16px}.section-header h2{margin:0;font-size:24px}.videos-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.videos-count{color:#ffffffb8;font-size:14px}.categories-bar{flex-wrap:wrap;gap:10px;margin-bottom:28px;display:flex}.category-btn{cursor:pointer;color:#e5e7eb;background:#161d35;border:none;border-radius:999px;padding:10px 16px;font-weight:700;transition:all .2s}.category-btn:hover{background:#222c4d}.category-btn.active{color:#fff;background:#ff3d81}.video-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;display:grid}.video-card{cursor:pointer;background:#12192ff2;border:1px solid #ffffff0f;border-radius:18px;transition:transform .2s,box-shadow .2s;overflow:hidden}.video-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px #00000059}.thumb-box{aspect-ratio:16/9;background:#111827;position:relative;overflow:hidden}.thumb{object-fit:cover;width:100%;height:100%;display:block}.duration{color:#fff;z-index:2;background:#000000d1;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700;position:absolute;bottom:10px;right:10px}.thumb-overlay{opacity:0;background:#0000002e;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.video-card:hover .thumb-overlay{opacity:1}.play-circle{color:#fff;background:#ff3d81eb;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-size:24px;display:flex}.card-body{padding:14px}.card-body h3{margin:0 0 10px;font-size:17px;line-height:1.35}.card-meta{color:#ffffffad;justify-content:space-between;gap:12px;font-size:13px;display:flex}.pagination{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:30px;display:flex}.page-btn{cursor:pointer;color:#fff;background:#161d35;border:none;border-radius:12px;min-width:44px;padding:10px 14px;font-weight:700;transition:all .2s}.page-btn:hover:not(:disabled){background:#222c4d}.page-btn.active{color:#fff;background:#ff3d81}.page-btn:disabled{opacity:.4;cursor:not-allowed}.modal-backdrop{z-index:50;background:#000000c7;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.video-modal{background:#0f172a;border:1px solid #ffffff14;border-radius:20px;width:min(1000px,100%);overflow:hidden}.video-modal-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;display:flex}.video-modal-header h2{margin:0;font-size:20px}.close-btn{cursor:pointer;color:#fff;background:#1f2937;border:none;border-radius:12px;width:40px;height:40px;font-size:18px}.video-player-wrapper{aspect-ratio:16/9;background:#000;width:100%}.video-player-wrapper iframe{width:100%;height:100%;display:block}.video-modal-footer{color:#ffffffd1;padding:18px 20px 24px}.video-modal-footer p{margin:8px 0;line-height:1.6}@media (width<=768px){.header-content{flex-direction:column;justify-content:center;padding:14px 0}.nav{flex-wrap:wrap;justify-content:center}.hero h1{font-size:26px}.videos-header{flex-direction:column;align-items:flex-start}.pagination{justify-content:flex-start}}