
:root{
  --bg:#0a0a0a;
  --fg:#e7e7e7;
  --muted:#a0a0a0;
  --accent:#e10600;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:24px}
.header{padding:40px 24px 10px;border-bottom:1px solid #151515;background:linear-gradient(180deg,#0d0d0d,transparent)}
.brand{letter-spacing:1px;font-weight:900;font-size:56px;text-align:center;margin:0}
.tag{margin:6px auto 0;text-align:center;color:var(--muted);font-size:14px}
.controls{display:flex;gap:10px;justify-content:center;margin:16px 0 6px}
.controls .dot{width:10px;height:10px;border:2px solid var(--accent);border-radius:50%}
.actions{display:flex;justify-content:flex-end;margin:10px 0 0}
.btn{border:1px solid #333;background:#111;color:var(--fg);padding:10px 14px;border-radius:8px;font-weight:600}
.btn:hover{border-color:#555;background:#151515}
.h1{font-size:18px;letter-spacing:2px;color:#bbb;margin:18px 0 10px}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:1100px){ .grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){ .grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:650px){ .grid{grid-template-columns:repeat(2,1fr)}}
.card{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid #1b1b1b;background:#0c0c0c;cursor:pointer}
.card::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(225,6,0,0.14);border-radius:12px;pointer-events:none}
.card img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.08)}
.card:hover{transform:translateY(-2px);transition:transform .2s ease}
.footer{border-top:1px solid #151515;color:#818181;text-align:center;padding:26px 0;margin-top:34px;font-size:13px}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:999}
.lightbox.open{display:flex}
.lb-img{max-width:92vw;max-height:86vh;border-radius:10px;box-shadow:0 10px 60px rgba(0,0,0,.7)}
.lb-close,.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:#0f0f10cc;border:1px solid #2a2a2a;color:#eee;display:grid;place-items:center;font-size:20px;cursor:pointer}
.lb-close{top:28px;right:28px;transform:none}
.lb-prev{left:24px}
.lb-next{right:24px}
.lb-prev:hover,.lb-next:hover,.lb-close:hover{background:#161617;border-color:#3a3a3a}
.lb-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#9c9c9c;font-size:12px;background:#0f0f10b3;padding:6px 10px;border:1px solid #2a2a2a;border-radius:999px}
