*{box-sizing:border-box;margin:0;padding:0}
body{font-family:PingFang SC,Segoe UI,Helvetica,Arial;background:#0f1720;color:#e6eef8}
.site-header{padding:28px 18px;text-align:center;background:linear-gradient(90deg,#071229,#0b2540);box-shadow:0 6px 18px rgba(2,6,23,.6)}
.site-header h1{margin:0;font-size:28px;color:#58a6ff}
.container{max-width:1100px;margin:30px auto;padding:0 16px}
.gallery{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.card{width:320px;background:linear-gradient(180deg,#0b1220,#091827);border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 24px rgba(2,6,23,.6);text-align:center}
.card img{width:100%;height:180px;object-fit:cover;border-radius:8px}
.card h3{margin:10px 0 4px;font-size:18px;color:#fff}
.play-btn{margin-top:10px;padding:10px 18px;border-radius:8px;background:#58a6ff;border:none;color:#042033;cursor:pointer;font-weight:600}
.play-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(88,166,255,.12);}
.modal{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center}
.modal.show{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(1,6,20,0.75);backdrop-filter:blur(2px)}
.modal-content{position:relative;max-width:1000px;width:min(95%,1200px);padding:12px;border-radius:10px;z-index:2;background:#000}
.modal-close{position:absolute;right:14px;top:10px;background:rgba(255,255,255,0.1);border:none;color:#fff;padding:8px 12px;border-radius:6px;cursor:pointer;z-index:5;font-size:18px;}
#modalVideo{width:100%;max-height:72vh;border-radius:8px;background:#000;display:block}
@media(max-width:720px){.card{width:90%}.card img{height:160px}#modalVideo{height:50vh}.modal-close{right:10px;top:6px;}}