:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #111827; color: #e5e7eb; }
body { margin: 0; padding: 2rem 1rem; } .card { max-width: 34rem; margin: 0 auto; padding: 1.5rem; background: #1f2937; border: 1px solid #374151; border-radius: .75rem; } .wide { max-width: 60rem; }
h1, h2 { margin-top: 0; } header { display:flex; align-items:start; justify-content:space-between; gap:1rem; } label { display:block; margin:.75rem 0; } input { display:block; box-sizing:border-box; width:100%; margin-top:.25rem; padding:.6rem; border:1px solid #4b5563; border-radius:.35rem; background:#111827; color:inherit; }
button { margin:.35rem .25rem .35rem 0; padding:.55rem .8rem; border:0; border-radius:.35rem; background:#2563eb; color:white; cursor:pointer; } button.danger { background:#b91c1c; } button.secondary { background:#4b5563; } code { display:block; overflow-wrap:anywhere; margin:.5rem 0; padding:.5rem; background:#111827; } #message { min-height:1.5rem; } .user { display:grid; grid-template-columns: 1fr auto; gap:.5rem; align-items:center; padding:.8rem 0; border-top:1px solid #374151; } .meta { color:#9ca3af; font-size:.9rem; } .actions { text-align:right; }