* { box-sizing: border-box; margin: 0; }
body {
  background: #101216; color: #e6e4de; font: 16px/1.45 system-ui, sans-serif;
  min-height: 100dvh; padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
}
main { max-width: 30rem; margin: 0 auto; padding: 16px 0; }
.hidden { display: none !important; }
.card { background: #16191f; border: 1px solid #262b34; border-radius: 12px; padding: 20px; }
h1 { font-size: 22px; margin-bottom: 4px; }
.sub { color: #8b9099; font-size: 13px; margin-bottom: 12px; }
.bad { color: #d47c72; font-size: 13px; margin-top: 8px; }
label { display: block; font-size: 13px; color: #8b9099; margin: 10px 0; }
input {
  display: block; width: 100%; margin-top: 4px; padding: 10px; border-radius: 8px;
  border: 1px solid #262b34; background: #101216; color: #e6e4de; font-size: 16px;
}
button {
  border: 1px solid #262b34; border-radius: 10px; background: #1b1f27; color: #e6e4de;
  padding: 10px 14px; font-size: 15px; cursor: pointer;
}
button.primary { background: #e8b04b; border-color: #e8b04b; color: #17130a; font-weight: 700; }
button.big { width: 100%; padding: 16px; font-size: 18px; margin-top: 10px; }
button.on { background: #4b8f5d; border-color: #4b8f5d; color: #0d130e; }
header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#me { font-weight: 700; }
.pill {
  font-size: 12px; border: 1px solid #262b34; border-radius: 999px; padding: 2px 10px;
  color: #8b9099;
}
.pill.ok { color: #7dbb8b; border-color: #2f4a37; }
.room { margin-bottom: 10px; }
.room > button.name {
  width: 100%; text-align: left; display: flex; gap: 8px; align-items: center;
}
.room > button.name.here { border-color: #e8b04b; }
.room .n { margin-left: auto; color: #8b9099; font-size: 13px; }
.member { display: flex; gap: 8px; align-items: center; padding: 4px 12px; font-size: 14px; color: #b9bec7; }
.member.talking { color: #e8b04b; }
.member .tag { font-size: 11px; color: #8b9099; border: 1px solid #262b34; border-radius: 6px; padding: 0 5px; }
.member .follow { margin-left: auto; cursor: pointer; font-size: 12px; }
.member .follow.on { color: #e8b04b; border-color: #e8b04b; }
#chatcard { margin-top: 12px; }
#chat-msgs { max-height: 45dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cmsg { font-size: 14px; line-height: 1.35; }
.cmsg .who { color: #8b9099; font-size: 12px; margin-right: 6px; }
.cmsg.mine .who { color: #e8b04b; }
.cmsg.deleted { color: #8b9099; font-style: italic; }
.cmsg .chip { font-size: 10px; text-transform: uppercase; border: 1px solid #262b34; border-radius: 5px; padding: 0 4px; color: #8b9099; margin-right: 4px; }
.chatline { display: flex; gap: 8px; }
.chatline input { flex: 1; margin-top: 0; }