:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin: 0; background: #0b0f14; color: #e8eef6; }
a { color: #9bd1ff; text-decoration: none; }
.container { max-width: 980px; margin: 0 auto; padding: 18px; }

.nav { display:flex; justify-content:space-between; align-items:center; padding: 12px 0; }
.brand { font-weight: 800; letter-spacing: .5px; }
.navlinks a, .navlinks button { margin-left: 12px; }

.btn { background:#1f6feb; color:#fff; padding:10px 14px; border-radius:10px; display:inline-block; border:1px solid transparent; }
.btn:hover{filter:brightness(1.05)}
.ghost { padding:10px 14px; border-radius:10px; border:1px solid #2a3a52; color:#e8eef6; display:inline-block; margin-left: 8px; background: transparent; }
.ghost:hover{border-color:#3a5173}
.link { background: transparent; border: 0; color:#9bd1ff; cursor:pointer; }

.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; }
.card { background:#0f1621; border:1px solid #1f2b3a; border-radius:14px; padding:14px; }
.form { max-width: 520px; display:flex; flex-direction:column; gap: 10px; }
input, select { padding:10px; border-radius:10px; border:1px solid #1f2b3a; background:#0b0f14; color:#e8eef6; }
label { color:#b7c6d8; font-size: 14px; }
.alert { background:#2a1c1c; border:1px solid #5a2a2a; padding:10px; border-radius:10px; margin: 10px 0; }
.muted { color:#b7c6d8; }
.list .card { margin-bottom: 10px; }
.row { display:flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.pill { display:inline-block; padding: 2px 8px; border:1px solid #2a3a52; border-radius: 999px; margin-left: 8px; font-size: 12px; color:#b7c6d8; }
.hero { padding: 34px 0 18px; }
.hero h1 { font-size: 42px; margin: 0 0 10px; }
.sub { color: #b7c6d8; max-width: 60ch; }