:root{--bg:#fff;--fg:#111;--hint:#7d7d7d;--link:#2481cc;--btn:#2481cc;--btn-fg:#fff;--sec:#f1f1f1}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden}
main{flex:1;min-height:0;display:flex;flex-direction:column}
section{flex:1;min-height:0;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:12px}
section[hidden]{display:none}
a{color:var(--link)}
nav{display:flex;border-top:1px solid var(--sec);background:var(--sec);padding-bottom:env(safe-area-inset-bottom)}
nav a{flex:1;text-align:center;padding:10px 2px;font-size:12px;color:var(--hint);text-decoration:none;position:relative}
nav a.on{color:var(--link);font-weight:600}
#badge{background:#e53935;color:#fff;border-radius:9px;font-size:11px;padding:0 5px;margin-left:3px}
#chat{padding:0}
#log{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:92%;padding:8px 12px;border-radius:14px;background:var(--sec);overflow-wrap:anywhere}
.msg.user{align-self:flex-end;background:var(--btn);color:var(--btn-fg);white-space:pre-wrap}
.msg>:first-child{margin-top:0}.msg>:last-child{margin-bottom:0}
.msg pre{overflow-x:auto;background:rgba(0,0,0,.08);padding:8px;border-radius:8px}
.msg img{max-width:100%}
.step{color:var(--hint);font-size:13px}
.err{color:#e53935}
#composer{display:flex;gap:8px;padding:8px 16px;align-items:flex-end;border-top:1px solid var(--sec)}
#text{flex:1;resize:none;max-height:120px;padding:8px 10px;border-radius:12px;border:1px solid var(--sec);background:var(--bg);color:var(--fg);font:inherit}
button{font:inherit;border:0;border-radius:10px;padding:8px 14px;background:var(--btn);color:var(--btn-fg)}
button.sec{background:var(--sec);color:var(--fg)}
button:disabled{opacity:.5}
.icon{font-size:22px;padding:6px 0}
#attached{padding:0 16px;color:var(--hint);font-size:13px}
.card{border:1px solid var(--sec);border-radius:14px;overflow:hidden;background:var(--bg);color:var(--fg)}
.card>*{margin:0;padding:0 12px}
.card img{width:100%;max-height:200px;object-fit:cover;padding:0;display:block}
.card h4{padding-top:10px}
.card ul{padding-left:30px}
.card .row{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px 12px}
.card small{display:block;color:var(--hint);padding-bottom:4px}
.card pre{white-space:pre-wrap}
.hint{color:var(--hint);margin:0}
#accounts{padding:0}
#accounts .hint{padding:8px 16px}
#vnc{flex:1;min-height:0;background:#000}
#vncpass{display:flex;gap:8px;padding:0 16px 8px}#vncpass input{flex:1}
.fact{display:flex;gap:8px;align-items:center}.fact span{flex:1}
.fact input{flex:1;font:inherit}
.contacts .fact{flex-wrap:wrap}
h3{margin:8px 0 0;font-size:14px;color:var(--hint);text-transform:uppercase}
.j{font-size:14px}.j time{color:var(--hint);display:block;font-size:12px}