:root{
  --bg:#0b0b10; --fg:#e9e9f4; --ring:#28283a; --card:#141421;
  --violet:#9b87f5; --red:#ff2748; --gold:#ffbb33;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:20px 14px 60px}
header{padding:24px 16px;border-bottom:1px solid var(--ring);background:radial-gradient(1000px 320px at 5% -10%, rgba(155,135,245,.18), transparent 60%),radial-gradient(900px 320px at 95% -10%, rgba(255,39,72,.14), transparent 70%)}
h1{margin:0 0 6px;font-size:clamp(28px,4vw,42px)}
nav{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
nav a{background:#1b1b2a;border:1px solid var(--ring);padding:6px 10px;border-radius:10px}
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;padding:16px;margin:16px 0}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
figure{position:relative;margin:0;background:var(--card);border:1px solid var(--ring);border-radius:16px;overflow:hidden}
figure img{display:block;width:100%;height:320px;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
figcaption{padding:10px 12px;font-size:13px;opacity:.85}
.badge{position:absolute;top:10px;left:10px;background:#1c1c2b;color:#ffd;border:1px solid var(--ring);padding:3px 8px;border-radius:999px;font-size:12px;opacity:.9}
footer{border-top:1px solid var(--ring);padding:24px;text-align:center;color:#b9bbca}
/* Effects */
.sun-glow::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 65% 35%, rgba(255,222,120,.55), transparent 35%),radial-gradient(circle at 65% 35%, rgba(255,187,51,.45), transparent 55%);mix-blend-mode:screen;filter:blur(1px)}
.sun-rays::before{content:"";position:absolute;inset:-30%;pointer-events:none;opacity:.55;mix-blend-mode:screen;background:conic-gradient(from 0deg, rgba(255,197,92,.0) 0deg, rgba(255,197,92,.75) 6deg, rgba(255,197,92,.0) 12deg, rgba(255,197,92,.0) 24deg, rgba(255,197,92,.7) 30deg, rgba(255,197,92,.0) 36deg);animation:spin 24s linear infinite;filter:blur(1px)}
.neon-red{box-shadow:0 0 0 1px rgba(255,39,72,.5) inset, 0 0 22px rgba(255,39,72,.45), 0 0 60px rgba(255,39,72,.25)}
.neon-red img{filter:drop-shadow(0 0 8px rgba(255,39,72,.55)) saturate(1.08)}
.neon-red::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.6;background:radial-gradient(45% 45% at 52% 48%, rgba(255,39,72,.25), transparent 60%)}
.neon-violet{box-shadow:0 0 0 1px rgba(155,135,245,.5) inset, 0 0 24px rgba(155,135,245,.5), 0 0 64px rgba(110,91,240,.28)}
.neon-violet img{filter:hue-rotate(10deg) saturate(1.08) drop-shadow(0 0 10px rgba(155,135,245,.55))}
.neon-violet::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.55;background:radial-gradient(38% 38% at 40% 50%, rgba(155,135,245,.26), transparent 60%),radial-gradient(50% 50% at 70% 40%, rgba(110,91,240,.22), transparent 70%)}
.red-reflect::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-6%;height:40%;pointer-events:none;opacity:.85;mix-blend-mode:screen;background:radial-gradient(60% 80% at 50% 100%, rgba(255,39,72,.6), transparent 60%);filter:blur(12px)}
figure:hover{transform:translateY(-2px);transition:.25s ease;box-shadow:0 18px 40px rgba(0,0,0,.35)}
@keyframes spin{to{transform:rotate(360deg)}}
.toggle{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.toggle button{background:#202031;color:#e9e9f4;border:1px solid var(--ring);border-radius:10px;padding:6px 10px;cursor:pointer}
.toggle button.active{outline:2px solid var(--violet)}