:root {color-scheme:dark; --bg:#101724;--panel:#1a2536;--muted:#a4b2c8;--border:#34445b;--accent:#82c9f8;--danger:#e49b9b}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#ecf2fa;font-family:system-ui,-apple-system,sans-serif;line-height:1.5}
header{min-height:64px;padding:14px max(16px,calc((100vw - 1080px)/2));display:flex;align-items:center;gap:14px;background:#151f2f;border-bottom:1px solid var(--border)}.brand{font-size:1.3rem;color:var(--accent)}.tagline,.hint,small{color:var(--muted)}#identity{margin-left:auto}
main{max-width:1080px;margin:24px auto;padding:0 16px}.panel{padding:24px;background:var(--panel);border:1px solid var(--border);border-radius:16px;min-height:180px}.narrow{max-width:420px;margin:9vh auto}h1{font-size:1.5rem;margin:0 0 14px}h2{font-size:1.15rem}h3{font-size:1rem}p{margin:6px 0 16px}
label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}input,select{font:inherit;border:1px solid #50617a;border-radius:8px;padding:10px;color:#fff;background:#121b28;min-width:0}input:focus,select:focus{outline:2px solid var(--accent)}button{font:inherit;color:#0b1828;background:var(--accent);font-weight:600;border:0;border-radius:9px;padding:10px 15px;cursor:pointer}button:hover{filter:brightness(1.08)}button:disabled{opacity:.55;cursor:default}button.secondary,nav button,#refresh,#load-more,#logout{background:#2c4058;color:#edf5ff}
form{display:grid;gap:14px}.inline-form{display:flex;align-items:end;gap:14px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--border)}.inline-form label{flex:1 1 180px}.inline-form button{margin-bottom:1px}nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}nav button.active{background:var(--accent);color:#0c1726}
.heading{display:flex;justify-content:space-between;align-items:center}.filters{margin:12px 0 20px}.messages{display:grid;gap:12px}.message{background:#131d2c;border:1px solid var(--border);border-radius:10px;padding:14px}.message.unread{border-left:4px solid var(--accent)}.message p{white-space:pre-wrap;overflow-wrap:anywhere}.message-title{display:flex;justify-content:space-between;gap:14px;align-items:start}.message-title h2{margin:0}.meta{font-size:.8rem;color:var(--muted);margin-top:8px}.row-item{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#152132;border-radius:9px;margin-top:10px;padding:12px;flex-wrap:wrap}.row-item p{margin:0}.row-item strong{overflow-wrap:anywhere}.row-item .actions{display:flex;gap:8px;flex-wrap:wrap}.row-item button{font-size:.85rem}.danger{color:var(--danger)}#status{position:sticky;bottom:12px;max-width:720px;margin:18px auto;padding:0;white-space:pre-wrap}#status:not(:empty){background:#2a4257;border:1px solid #4e7495;border-radius:10px;padding:10px 14px}.secret-dialog{max-width:min(94vw,620px);border:1px solid var(--border);border-radius:12px;padding:20px;background:#192638;color:white}.secret-dialog::backdrop{background:#050a12bb}.secret{display:block;white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;background:#0c1420;margin:15px 0}.secret-dialog button{margin-right:9px}
@media(max-width:640px){header{flex-wrap:wrap}.tagline{display:none}.panel{padding:15px}.message-title{display:block}.inline-form{display:grid}.narrow{margin:5vh auto}}

.token-secret { display: block; max-width: min(70vw, 48rem); overflow-wrap: anywhere; margin-top: .35rem; user-select: all; }
