:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#000; color:#f5f5f5; }
* { box-sizing:border-box; }
body { margin:0; background:#000; }
main { min-height:100dvh; display:grid; place-items:center; padding:24px; }
#login form,.device-card { width:min(100%,380px); display:flex; flex-direction:column; gap:14px; }
h1 { margin:0 0 8px; font-size:27px; }
input,textarea,button { font:inherit; }
#login input { width:100%; border:1px solid #333; border-radius:12px; padding:14px; background:#151515; color:white; }
button { border:0; border-radius:12px; padding:13px 18px; background:#f5f5f5; color:#111; font-weight:650; }
.error { color:#ff6b6b; min-height:1em; }
.device-card p { color:#aaa; line-height:1.5; }
#chat { min-height:100dvh; height:100dvh; display:flex; flex-direction:column; max-width:760px; margin:0 auto; }
header { height:58px; padding:0 16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #222; }
.link { background:transparent; color:#aaa; padding:8px; }
.family-title { display:flex; align-items:center; gap:9px; padding:8px 0; background:transparent; color:#f5f5f5; font-weight:650; }
.chevron { color:#888; font-size:18px; }
.family-panel { position:fixed; inset:0; z-index:5; display:grid; place-items:start center; padding:72px 16px 16px; background:#0009; }
.family-card { width:min(100%,420px); max-height:min(70vh,560px); overflow:auto; padding:18px; border:1px solid #333; border-radius:18px; background:#151515; box-shadow:0 16px 48px #0009; }
.family-heading { display:flex; align-items:center; justify-content:space-between; }
.family-heading h2 { margin:0; font-size:20px; }
.family-error { color:#aaa; margin:8px 0; }
.family-members { list-style:none; margin:12px 0 0; padding:0; }
.family-members li { padding:13px 2px; border-top:1px solid #292929; }
.family-you { color:#999; font-size:13px; margin-left:6px; }
.notification-hint { padding:8px 14px; color:#aaa; font-size:13px; }
#list { flex:1; overflow:auto; padding:14px; }
.composer { display:flex; gap:10px; padding:12px; border-top:1px solid #222; align-items:end; }
textarea { flex:1; resize:none; border:0; border-radius:18px; padding:12px 15px; color:white; background:#171717; }
.send { border-radius:50%; width:42px; height:42px; padding:8px; }
.row { display:flex; margin:8px 0; }
.bubble { max-width:82%; padding:10px 13px; border-radius:16px; background:#1a1a1a; overflow-wrap:anywhere; }
.row.mine { justify-content:flex-end; }.row.mine .bubble { background:#292929; }
.name { font-size:12px; margin-bottom:4px; }.time { color:#888; font-size:10px; margin-top:5px; }
.photo { display:block; max-width:min(70vw,360px); max-height:55vh; border-radius:12px; }
.banner { padding:8px 14px; color:#ffb4a9; }
#viewer[hidden], [hidden] { display:none !important; }
@media (max-width:520px) { #chat { width:100%; } }