:root{
  --bg:#0b0f0b;
  --panel:#101610;
  --text:#eaeaea;
  --muted:#b7b7b7;
  --accent:#7CFF6B;
  --line:#243124;
}

* { box-sizing: border-box; }

body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.wrap{
  width:min(980px,94vw);
  padding:18px;
  display:grid;
  gap:16px;
}

.hero{
  display:grid;
  place-items:center;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
}

.hero img{
  max-width:720px;
  width:100%;
  height:auto;
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  display:grid;
  gap:12px;
}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.nav a{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0f1a0f;
  color:var(--text);
  text-decoration:none;
}

.nav a.active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(124,255,107,.25) inset;
}

.row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

button{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0f1a0f;
  color:var(--text);
  cursor:pointer;
}

button.primary{
  border-color:#2f4a2f;
}

.badge{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:13px;
}

.stat{
  color:var(--muted);
}

.bar{
  width:100%;
  height:14px;
  border-radius:999px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#0b110b;
}

.bar > div{
  height:100%;
  width:0%;
}

.direct{
  font-size:14px;
  color:var(--muted);
}

.direct a{
  color:var(--accent);
  text-decoration:none;
}

.direct a:hover{
  text-decoration:underline;
}
.yt-link {
  margin-top: 24px;
  text-align: center;
}

.yt-link a {
  display: inline-block;
  padding: 12px 18px;
  background: #b91c1c; /* YouTube red (darkened) */
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.yt-link a:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(255, 0, 0, 0.6);
}

.yt-link a:active {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
}
@keyframes ytPulse {
  0% { box-shadow: 0 0 12px rgba(255,0,0,0.35); }
  50% { box-shadow: 0 0 20px rgba(255,0,0,0.7); }
  100% { box-shadow: 0 0 12px rgba(255,0,0,0.35); }
}

.yt-link a {
  animation: ytPulse 2.5s infinite;
}