* { box-sizing: border-box; }
body { font: 16px/1.5 system-ui, sans-serif; margin: 0; padding: 1rem; max-width: 640px; margin-inline: auto; background: #f7f7f8; color: #222; }
h1 { font-size: 1.25rem; margin: 0 0 .25rem; }
#status { font-size: .85rem; color: #777; margin-bottom: 1rem; }
#messages { list-style: none; padding: 0; margin: 0 0 1rem; }
#messages li { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: .75rem; margin-bottom: .5rem; }
#messages li.empty { color: #888; text-align: center; border-style: dashed; }
#messages time { display: block; font-size: .75rem; color: #888; }
#messages .body { word-break: break-all; }
#messages a { color: #0b57d0; font-weight: 600; }
form { display: flex; gap: .5rem; margin-bottom: 1rem; }
input[type=text], input[type=password] { flex: 1; padding: .6rem; font-size: 1rem; border: 1px solid #bbb; border-radius: 6px; }
button { padding: .6rem 1rem; font-size: 1rem; border: 0; border-radius: 6px; background: #0b57d0; color: #fff; cursor: pointer; }
button.secondary { background: #888; }
.actions { display: flex; gap: .5rem; }
.error { color: #b00020; }