:root {
  --accent: #4132e7; --accent-hover: #201782;
  --text-1: #17181c; --text-2: #555962; --text-3: #888c96;
  --bg-1: #ffffff; --bg-2: #f6f7f9; --bg-3: #edeef3; --border: #d9dade;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3369ff; --accent-hover: #b3c7ff;
    --text-1: #ffffff; --text-2: #c1c3c8; --text-3: #888c96;
    --bg-1: #17181c; --bg-2: #23262f; --bg-3: #353841; --border: #353841;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text-1); background: var(--bg-1); }
header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
header a { color: var(--accent); text-decoration: none; font-weight: 600; }
main { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
h1 { margin: 0 0 8px; } .lede { color: var(--text-2); margin: 0 0 32px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card { display: block; padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); color: inherit; text-decoration: none; }
.card:hover { border-color: var(--accent); }
.card h2 { margin: 0 0 6px; font-size: 18px; } .card p { margin: 0; color: var(--text-2); } .card code { color: var(--text-3); font-size: 12px; }
.auth { margin-top: 40px; padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-3); }
.empty { color: var(--text-3); }