:root{
  --bg:#141414;
  --panel:#1b1b1b;
  --accent:#c80000; /* red */
  --muted:#bfbfbf;
  --gold:#c6a04a;
  --max-width:1100px;
  --sans: "Inter", "Arial", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:#eee;font-family:var(--sans)}
a{color:var(--muted);text-decoration:none}
a:hover{color:var(--accent)}

.header{
  background:linear-gradient(180deg, #1f1f1f 0%, #111 100%);
  padding:34px 0;
  border-bottom:4px solid rgba(200,0,0,0.15);
}
.container{max-width:var(--max-width);margin:0 auto;padding:22px}
.brand{font-size:44px;color:var(--accent);font-weight:800;letter-spacing:1px;text-align:center}
.lead{color:var(--muted);text-align:center;margin-top:8px;margin-bottom:14px}

.nav{display:flex;justify-content:center;gap:28px;margin-top:18px}
.nav a{font-weight:700;color:#ddd}

.main{padding:48px 0}
.panel{background: rgba(0,0,0,0.18); border-radius:6px; padding:28px; margin-bottom:20px; box-shadow: 0 6px 20px rgba(0,0,0,0.5)}
.h1{font-size:28px;color:#fff;margin:0 0 12px 0}
.p{color:var(--muted);line-height:1.7}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));border-radius:6px;padding:14px;border:1px solid rgba(255,255,255,0.03)}
.card img{width:100%;height:auto;border-radius:4px;display:block}
.card img {
  max-width: 50%;
  height: auto;
  display: block;
  margin: 0 auto;
  }

.footer{padding:26px 0;text-align:center;color:#888;font-size:13px;border-top:1px solid rgba(255,255,255,0.02);}

.warn{background:#1c0c0c;border-left:4px solid var(--gold);padding:14px;color:#f3e8d6;border-radius:5px}