:root{
  --bg:#07070a;
  --panel: rgba(0,0,0,0.72);
  --panel2: rgba(255,255,255,0.04);
  --text:#f2f2f4;
  --muted: rgba(242,242,244,0.72);
  --line: rgba(255,255,255,0.14);
  --red: #ff3b3b;
  --red2:#b30000;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(255,59,59,0.18), transparent 55%),
    radial-gradient(700px 500px at 85% 20%, rgba(179,0,0,0.16), transparent 55%),
    linear-gradient(180deg, #050507, #0a0a10);
  padding: 26px 14px 40px;
}

.wrap{ max-width: 980px; margin:0 auto; }

.banner{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: 0 12px 26px rgba(0,0,0,0.45);
  padding: 16px 16px 12px;
}

h1{ margin:0 0 6px; letter-spacing: 0.4px; }
.tag{ margin:0; color: var(--muted); font-size: 13px; }

.grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 900px){ .grid{ grid-template-columns: 1fr; } }

.card{
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 10px 22px rgba(0,0,0,0.38);
  padding: 14px;
}

.kbd{
  font-family: "Courier New", Courier, monospace;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.05);
  padding: 2px 6px;
}

a{ color: #ffd6d6; }
a:hover{ color: white; }

.btn{
  display:inline-block;
  border: 1px solid rgba(255,59,59,0.35);
  background: linear-gradient(180deg, rgba(255,59,59,0.18), rgba(255,59,59,0.06));
  color: var(--text);
  text-decoration:none;
  padding: 9px 11px;
  font-weight: 700;
}
.btn:hover{ filter: brightness(1.06); text-decoration:none; }

.small{ color: var(--muted); font-size: 13px; }
hr{ border:0; border-top:1px solid rgba(255,255,255,0.12); margin: 12px 0; }