:root { color-scheme:dark; font-family:system-ui,sans-serif; background:#101923; color:#eaf2f7 } * { box-sizing:border-box } body { margin:0; min-height:100vh; background:radial-gradient(circle at top,#20394a,#101923 52%) } main { width:min(760px,calc(100% - 32px)); margin:0 auto; padding:56px 0 } header { margin-bottom:28px } h1 { margin:.2rem 0; font-size:clamp(2rem,6vw,3.4rem) } h2,h3,p { margin-top:0 } .eyebrow { color:#91d4df; letter-spacing:.18em; font-weight:700; font-size:.78rem }.card { background:#182734; border:1px solid #355063; border-radius:18px; padding:24px; margin:18px 0; box-shadow:0 18px 55px #05090d55 } form { display:grid; gap:16px } label { display:grid; gap:7px; color:#c7d7df } input { width:100%; padding:12px 14px; border-radius:10px; border:1px solid #557184; background:#0d1820; color:#fff; font:inherit } button { border:0; border-radius:10px; padding:12px 16px; background:#8dd5df; color:#0d2027; font:inherit; font-weight:750; cursor:pointer } button.secondary { background:#263b49; color:#eaf2f7; border:1px solid #557184 } button.danger { background:#71353b; color:#fff } button:disabled { opacity:.55; cursor:not-allowed }.toolbar,.user { display:flex; align-items:center; justify-content:space-between; gap:12px }.toolbar h2 { margin:0 }.users { display:grid; gap:12px }.user { padding:14px 0; border-top:1px solid #304858; flex-wrap:wrap }.user:first-child { border-top:0 }.user-actions { display:flex; gap:8px; flex-wrap:wrap }.user-actions button { padding:8px 10px }.meta,.hint { color:#9eb2bd; font-size:.9rem }.hint { margin:14px 0 0 } #message { min-height:1.5em; color:#f5d88b } @media (min-width:620px) { #create-form { grid-template-columns:1fr 1fr auto; align-items:end } }