:root { font-family: system-ui, Arial, sans-serif; }
body { background:#0b1220; color:#e7eefc; margin:0; }
.wrap { max-width: 920px; margin: 0 auto; padding: 18px; }
.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.brand { font-weight:700; letter-spacing:.3px; }
nav a { color:#aecdff; margin-left:12px; text-decoration:none; }
nav a:hover { text-decoration:underline; }
.card { background: linear-gradient(180deg, #111b33, #0f172a); border:1px solid #223058; border-radius:16px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.foot { opacity:.7; margin-top:12px; font-size:12px; text-align:center; }
label { display:block; margin: 12px 0 6px; font-weight:600; }
input, textarea, select { width:100%; padding:10px; border-radius:10px; border:1px solid #2a3a67; background:#0c142a; color:#e7eefc; }
textarea { min-height: 140px; }
hr { border:0; border-top:1px solid #223058; margin:16px 0; }
.small { opacity:.85; font-size:12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
/* Mobile-first improvements */
.row { display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width: 760px) { .row { grid-template-columns: 1fr 1fr; } }
button, .btn { width: 100%; }
@media (min-width: 760px) { button, .btn { width: auto; } }
.btn { display:inline-block; padding:10px 12px; border-radius:12px; border:1px solid #2f4a8a; background:#17306a; color:#fff; cursor:pointer; font-weight:700; text-decoration:none; text-align:center; }
.btn.secondary { background:#0f234e; }
.pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.pill { border:1px solid #2a3a67; padding:10px 12px; border-radius:999px; cursor:pointer; user-select:none; background:#0c142a; }
.pill.active { border-color:#7fb0ff; }