:root {
  --bg:#0b0c10;
  --card:#101217;
  --text:#e8e8e8;
  --muted:#a9a9a9;
  --accent:#50c878;
  --accent-weak:#2d7a51;
  --disabled:#444;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin:0; background: linear-gradient(180deg, #0b0c10, #151922);
  color:var(--text); font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.container {
  max-width: 840px; margin: 4rem auto; padding: 2rem;
  background: var(--card); border-radius: 18px; box-shadow: 0 10px 35px rgba(0,0,0,.35);
}
header h1 { margin: 0 0 .25rem; font-size: clamp(1.4rem, 2.8vw, 2rem); }
header p { margin: 0; color: var(--muted); }
.buttons { display:flex; gap: .8rem; flex-wrap: wrap; margin: 1.25rem 0 0; }
.btn {
  appearance: none; border: 1px solid #222; background: #1a1f2b; color: var(--text);
  padding: .85rem 1.1rem; border-radius: 12px; font-weight: 700; letter-spacing: .02em;
  transition: transform .06s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); background:#243048; }
.btn.active { background: var(--accent); border-color: var(--accent-weak); color:#06140c; }
.btn.disabled { background: #1b1b1b; color:#777; cursor:not-allowed; }
.list {
  margin-top: 1rem; background:#0f1219; border-radius: 12px; padding:.5rem;
}
.list a {
  display:flex; justify-content: space-between; align-items:center;
  padding:.8rem 1rem; border-radius:10px; color:#cfe6ff; text-decoration:none;
}
.list a:hover { background:#192132; }
.meta { color:#9ab; font-size:.9rem; }
footer { margin-top:1.5rem; color: var(--muted); }
.back { display:inline-block; margin:.75rem 0 1rem; color:#9ad; text-decoration:none; }
.back:hover { text-decoration:underline; }
.note { background:#192132; border:1px solid #223149; padding:.75rem 1rem; border-radius:10px; color:#cfd9ea; }