:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #101510; color: #e8e8e2;
  -webkit-text-size-adjust: 100%;
}
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 1rem; background: #1b2a1b; border-bottom: 2px solid #4a6b3a;
  position: sticky; top: 0;
}
.brand { font-weight: 800; letter-spacing: .12em; color: #b8d68a; }
.me { font-size: .85rem; color: #9aa79a; }
.wrap { max-width: 560px; margin: 0 auto; padding: 1rem .9rem 4rem; }
.tagline { color: #b8d68a; font-size: 1.05rem; }
.card {
  background: #182218; border: 1px solid #33442f; border-radius: 10px;
  padding: 1rem; margin: 1rem 0;
}
.card h2, .card h3 { margin-top: 0; }
input {
  width: 100%; padding: .7rem; margin: .35rem 0; font-size: 1rem;
  border: 1px solid #33442f; border-radius: 8px;
  background: #0e130e; color: #e8e8e2;
}
button, .btn {
  display: inline-block; padding: .7rem 1.1rem; margin-top: .5rem;
  font-size: 1rem; font-weight: 700; border: none; border-radius: 8px;
  background: #5a8f3c; color: #0e130e; cursor: pointer; text-decoration: none;
}
button.ghost { background: transparent; color: #9aa79a; border: 1px solid #33442f; }
button.danger { background: #8f3c3c; color: #fff; }
button.small { padding: .3rem .6rem; font-size: .8rem; margin: 0 0 0 .4rem; }
form.inline { display: inline; }
.error { background: #3a1a1a; border: 1px solid #8f3c3c; padding: .7rem; border-radius: 8px; }
.fine { color: #9aa79a; font-size: .85rem; }
.newcode { background: #1d2f1d; border: 1px solid #5a8f3c; padding: .8rem; border-radius: 8px; }
.chatlist { list-style: none; padding: 0; }
.chatlist li { margin: .4rem 0; }
.chatlist a {
  display: flex; justify-content: space-between; align-items: center;
  background: #182218; border: 1px solid #33442f; border-radius: 10px;
  padding: .9rem; color: #e8e8e2; text-decoration: none;
}
.ctitle { font-weight: 700; }
.cmeta { font-size: .75rem; color: #9aa79a; }
.messages { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.msg {
  background: #182218; border: 1px solid #33442f; border-radius: 10px;
  padding: .6rem .8rem; max-width: 92%;
}
.msg.mine { align-self: flex-end; background: #22331f; border-color: #4a6b3a; }
.sender { display: block; font-size: .75rem; color: #b8d68a; font-weight: 700; }
.text { white-space: pre-wrap; word-break: break-word; }
.ts { display: block; font-size: .7rem; color: #9aa79a; margin-top: .25rem; }
.unreadable { color: #c98a8a; font-style: italic; }
.sendbar { display: flex; gap: .5rem; position: sticky; bottom: 0; padding: .5rem 0; background: #101510; }
.sendbar input { flex: 1; margin: 0; }
.sendbar button { margin: 0; white-space: nowrap; }
.roster { list-style: none; padding: 0; }
.roster li { padding: .5rem 0; border-bottom: 1px solid #2a382a; }
.pill {
  font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 20px;
  margin-left: .4rem; text-transform: uppercase;
}
.pill.open { background: #5a8f3c; color: #0e130e; }
.pill.used { background: #3a4a5a; color: #dfe7ef; }
.pill.revoked { background: #8f3c3c; color: #fff; }
.pill.admin { background: #b8d68a; color: #0e130e; }
details.card summary { cursor: pointer; font-weight: 700; }
a { color: #b8d68a; }