:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #09120f; color: #edf4ef; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left,#16452e,transparent 42%),#09120f; }
.card,.dashboard { width: min(980px,calc(100% - 2rem)); margin: 4rem auto; } .card { max-width: 480px; padding: 2rem; border: 1px solid #315542; border-radius: 18px; background: #0e1e16dd; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; } h1,h2,p { margin-top:0; } h1 { font-size:clamp(2rem,5vw,3.3rem); } h2 { font-size:1.15rem; } .eyebrow { color:#a6d7b8; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; }
label { display:block; margin:1rem 0; } input,select,button { min-height:2.7rem; border-radius:8px; border:1px solid #507360; padding:.65rem .8rem; font:inherit; } input,select { width:100%; color:#edf4ef; background:#10281b; } button { border:0; background:#aae0ba; color:#092010; font-weight:700; cursor:pointer; } button.secondary { background:transparent; color:#d5eadb; border:1px solid #668a72; }
.inline-form { display:flex; gap:.65rem; flex-wrap:wrap; margin:1rem 0 1.5rem; } .inline-form input { flex:1 1 220px; } .inline-form select { width:auto; } .organisation { border:1px solid #315542; padding:1rem 1.2rem; border-radius:12px; margin:1rem 0; background:#0d1a13d9; } .members { padding-left:1.1rem; color:#c9ddcf; } .message.error { border-left:3px solid #ff8a8a; padding-left:.8rem; color:#ffd3d3; } .hint { color:#a9c4b1; font-size:.86rem; }
@media (max-width:600px) { .topbar { align-items:flex-start; flex-direction:column; } .card,.dashboard { margin:2rem auto; } }