:root{color-scheme:dark;--bg:#121722;--panel:#1a2231;--line:#303b50;--text:#f2f5ff;--muted:#a5b1c6;--accent:#96f2cf;--error:#ffc0bc;font:15px/1.5 system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text)}
main{max-width:1120px;margin:auto;padding:0 28px 32px}
header,.brand,.hero,.current,.table-controls,.dialog-title,.actions{display:flex;align-items:center;gap:12px}
header{justify-content:space-between;min-height:64px;border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:16px}.brand small{font-size:13px;color:var(--muted);font-weight:500}
.logo{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;color:var(--bg);background:var(--accent)}
.connection{color:var(--muted);font-size:13px;text-align:right}
.connection-controls{display:flex;align-items:center;gap:8px}
.connection-controls button{font-size:12px}
.hero{justify-content:space-between;padding:28px 0 21px}
h1,h2,p{margin:0}
h1{font-size:clamp(30px,5vw,45px);line-height:1.13;margin:5px 0 8px;letter-spacing:-.04em}
h2{font-size:18px}
p,small{color:var(--muted)}
.eyebrow{color:var(--accent);font-size:11px;font-weight:750;letter-spacing:.12em}
button,input,select,textarea{font:inherit;color:inherit}
button{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 11px;white-space:nowrap;cursor:pointer}
button:hover:not(:disabled){border-color:var(--accent)}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.primary{background:var(--accent);color:var(--bg);border:1px solid var(--accent);font-weight:750;padding:9px 15px}
.primary span{margin-left:6px}
.feedback{border-left:3px solid var(--accent);padding:8px 12px;background:var(--panel);margin:0 0 14px;color:var(--text)}
.feedback.error{border-color:var(--error);color:var(--error)}
.current{justify-content:space-between;border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:13px 16px}
.current strong{display:block;margin:2px 0;overflow-wrap:anywhere}
.current p:last-child{font-size:13px}
.table-controls{margin:18px 0 9px;flex-wrap:wrap}
.search,.filter{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
input,select,textarea{background:#151c29;border:1px solid var(--line);border-radius:8px;padding:7px 9px;color:var(--text)}
.search input{width:min(40vw,260px)}
.count{margin-left:auto;color:var(--muted);font-size:13px}
.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:11px;max-height:45vh}
table{border-collapse:collapse;text-align:left;width:100%;min-width:590px}
th,td{padding:9px 11px;border-bottom:1px solid var(--line)}
th{position:sticky;top:0;background:var(--panel);color:var(--muted);font-size:12px}
td:first-child{font-weight:600;overflow-wrap:anywhere}
td:nth-child(2){width:105px;white-space:nowrap}
td:nth-child(3){min-width:135px;max-width:250px;overflow-wrap:anywhere;white-space:pre-wrap;color:var(--muted)}
td:last-child{width:1%}
tr:last-child td{border-bottom:none}
.actions{gap:5px}
.actions button{padding:4px 7px;font-size:12px}
.actions button.registered{background:#193a38;color:var(--accent)}
.pill{border-radius:20px;padding:3px 7px;background:#262e41;color:var(--muted);font-size:12px}
.pill.ok,.pill.listening{background:#193a38;color:var(--accent)}
.pill.error{background:#412f3b;color:var(--error)}
#empty{padding:12px}
.updates{margin-top:20px}.updates p{margin-top:3px}
.updates ul{list-style:none;padding:0;margin:8px 0}
.updates li{padding:7px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}
.updates li span{display:block;color:var(--muted);font-size:12px}
dialog{width:min(92vw,570px);max-height:85vh;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:16px}
dialog::backdrop{background:#080c16cc}
#reader{width:min(94vw,680px)}
#reader-email{overflow-wrap:anywhere}
#reader-status,#mail-detail,#mail-list{margin-top:12px}
#mail-items{list-style:none;padding:0;margin:9px 0 12px}
#mail-items li{border-bottom:1px solid var(--line)}
.mail-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;
  width:100%;padding:8px 5px;text-align:left;white-space:normal;background:none;border:none}
.mail-item strong,.mail-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-item small{grid-column:1/-1}
.mail-item time{font-size:12px;color:var(--muted)}
#mail-meta{margin-bottom:10px;overflow-wrap:anywhere}
#mail-subject{margin:10px 0 4px;overflow-wrap:anywhere}
.dialog-title{justify-content:space-between;margin-bottom:9px}
.note-label{display:block;margin-top:10px;font-size:13px;color:var(--muted)}
textarea{display:block;width:100%;resize:vertical;margin:4px 0 10px}
pre{font:inherit;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:520px){main{padding:0 12px 20px}.hero{align-items:flex-start;gap:7px}.brand small{display:none}.search input{width:38vw}.current{padding:10px}.count{margin:0}.table-scroll{max-height:48vh}}