:root{color-scheme:dark;--bg: #0f1117;--panel: #1a1d27;--border: #2d3348;--text: #e8eaef;--muted: #9aa3b5;--accent: #6c8cff;--accent-hover: #8aa4ff;--ok: #3dd68c;--warn: #f5a524;--error: #f87171;--own: #252b3d}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}#app{max-width:720px;margin:0 auto;padding:1.5rem 1rem 2rem}header{text-align:center;margin-bottom:1.5rem}header h1{margin:0 0 .25rem;font-size:1.75rem;font-weight:700}.tagline{margin:0;color:var(--muted);font-size:.9rem}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.5rem}.panel h2{margin:0 0 .75rem;font-size:1.1rem}.hint{color:var(--muted);font-size:.875rem;margin:0 0 1rem}label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.35rem}textarea,input[type=text]{width:100%;padding:.65rem .75rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;resize:vertical}textarea:focus,input:focus{outline:2px solid var(--accent);outline-offset:1px}.actions{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}button{padding:.55rem 1rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;cursor:pointer}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.primary:hover{background:var(--accent-hover)}.error{color:var(--error);font-size:.875rem;margin:.75rem 0 0}.status-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem;font-size:.875rem}.status.ok{color:var(--ok)}.status.warn{color:var(--warn)}#peer-count{color:var(--muted);margin-right:auto}.identity-line{font-size:.875rem;color:var(--muted);margin:0 0 1rem}.identity-line code{color:var(--accent);background:var(--bg);padding:.15rem .4rem;border-radius:4px}.room-count{margin:0 0 1rem;font-size:.95rem;font-weight:600;color:var(--accent)}.room-count.warn{color:var(--warn)}.relay-panel{margin:0 0 1rem;padding:.75rem .85rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:.8125rem}.relay-panel h3{margin:0 0 .5rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.relay-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}.relay-item{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center}.relay-dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.relay-item.connected .relay-dot{background:var(--ok);box-shadow:0 0 6px var(--ok)}.relay-item.disconnected .relay-dot,.relay-item.pending .relay-dot{background:var(--muted)}.relay-item.error .relay-dot,.relay-item.warn .relay-dot{background:var(--warn)}.relay-label{font-family:ui-monospace,monospace;font-size:.75rem;color:var(--text)}.relay-detail{color:var(--muted);font-size:.7rem;text-align:right;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.relay-item.connected .relay-detail{color:var(--ok)}.relay-item.error .relay-detail{color:var(--warn)}#messages{list-style:none;margin:0 0 1rem;padding:0;max-height:50vh;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}.message{padding:.65rem .85rem;border-radius:8px;background:var(--bg);border:1px solid var(--border)}.message.own{background:var(--own);border-color:#3d4a6a}.message.unverified{border-color:var(--warn)}.meta{display:flex;gap:.5rem;align-items:baseline;font-size:.75rem;margin-bottom:.25rem}.author{font-weight:600;color:var(--accent)}.time,.badge{color:var(--muted)}.message.verified .badge{color:var(--ok)}.message.unverified .badge{color:var(--warn)}.text{margin:0;word-break:break-word}#message-form{display:flex;gap:.5rem}#message-form input{flex:1}#message-form button{flex-shrink:0}