:root{
  --bg: #212121;
  --bg2: #262626;
  --panel: #2c2c2c;
  --panel2: #252525;
  --accent: #3ee6d8;
  --teal: #34595a;
  --text: #f2f2f0;
  --text-dim: #9a9a9d;
  --line: rgba(255,255,255,0.08);
  --green: #7ee08a;
  --blue: #7aa3f0;
  --purple: #b18cf0;
  --amber: #f0cf6a;
}
*{box-sizing:border-box;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  padding:32px 24px 60px;
}

.container{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
}
.back-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:1px solid var(--line);
  border-radius:20px;
  padding:7px 14px;
  color:var(--text);
  font-size:0.82rem;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  text-decoration:none;
}
.back-btn:hover{ border-color:var(--accent); background:var(--panel); }
.back-btn svg{ width:14px; height:14px; }

.site-nav{
  display:flex;
  gap:6px;
}
.site-nav a{
  color:var(--text-dim);
  text-decoration:none;
  font-size:0.82rem;
  padding:6px 12px;
  border-radius:16px;
  border:1px solid transparent;
}
.site-nav a:hover{ color:var(--text); border-color:var(--line); }
.site-nav a.active{
  color:var(--text);
  border-color:var(--accent);
  background:rgba(62,230,216,0.08);
}
@media (max-width:600px){
  .site-nav a{ display:none; }
  .site-nav a:nth-child(1),
  .site-nav a:nth-child(3){ display:inline-block; }
}