:root{
  --bg:#0e1116;--panel:#171b22;--panel2:#1e242d;--line:#2a313c;--text:#e8ecf1;--muted:#8d97a5;
  --accent:#3b82f6;--accent2:#2563eb;--ok:#22c55e;--warn:#f59e0b;--bad:#ef4444;
}
@media (prefers-color-scheme: light){:root{--bg:#f4f6f9;--panel:#fff;--panel2:#f0f3f7;--line:#dde2e9;--text:#16202c;--muted:#5b6675}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
[hidden]{display:none!important}
a{color:var(--accent)}
h1,h2{margin:0 0 .5rem}h2{font-size:1.1rem}
code,.mono,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}
.muted{color:var(--muted)}.center{text-align:center}.error{color:var(--bad);min-height:1.2em;margin:.25rem 0}.success{color:var(--ok);font-weight:600}
.brand,h1{font-weight:800;letter-spacing:-.02em}.brand span,h1 span{color:var(--accent)}
header{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
nav{display:flex;gap:.25rem;flex:1;overflow-x:auto}
nav button{background:none;border:0;color:var(--muted);padding:.5rem .8rem;border-radius:8px;cursor:pointer;font:inherit;white-space:nowrap}
nav button.active{background:var(--panel2);color:var(--text)}
main{max-width:1080px;margin:0 auto;padding:1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;margin-bottom:1rem}
.auth-card{max-width:380px;margin:12vh auto 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
label{display:block;margin:.6rem 0;font-weight:500}
label.check{display:flex;gap:.5rem;align-items:center;font-weight:400}
input,textarea,select{width:100%;padding:.55rem .7rem;margin-top:.25rem;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:inherit}
input[type=checkbox]{width:auto;margin:0}input[type=file]{padding:.4rem}
textarea{resize:vertical}
button{font:inherit;border-radius:8px;border:1px solid var(--line);padding:.5rem .9rem;cursor:pointer;background:var(--panel2);color:var(--text)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.primary:hover{background:var(--accent2)}
button.ghost{background:none}
button.danger{color:var(--bad);border-color:var(--bad)}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.row.between{justify-content:space-between}.row.end{justify-content:flex-end}
.row input{flex:1;margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem;margin-bottom:1rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem}
.stat b{display:block;font-size:1.7rem;line-height:1.1}.stat span{color:var(--muted);font-size:.85rem}
.device{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.device .info{min-width:200px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted);margin-right:.4rem}.dot.on{background:var(--ok)}
.device form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end}
.device form label{margin:0;font-size:.8rem;font-weight:400;color:var(--muted)}.device form input{width:84px}
.table-wrap{overflow-x:auto;padding:0}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:500;font-size:.8rem}
td.body{max-width:420px;white-space:pre-wrap;word-break:break-word}
.badge{display:inline-block;padding:.05rem .5rem;border-radius:99px;font-size:.78rem;background:var(--panel2);border:1px solid var(--line)}
.badge.delivered,.badge.sent{color:var(--ok);border-color:var(--ok)}.badge.failed{color:var(--bad);border-color:var(--bad)}
.badge.queued,.badge.dispatched{color:var(--warn);border-color:var(--warn)}
.list .item{display:flex;justify-content:space-between;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.list .item:last-child{border:0}
.preview{background:var(--panel2);border-radius:8px;padding:.5rem .7rem;min-height:2.2em;white-space:pre-wrap;margin-bottom:.75rem}
.key{background:var(--panel2);padding:.6rem;border-radius:8px;word-break:break-all;border:1px dashed var(--accent)}
pre{background:var(--panel2);padding:.8rem;border-radius:8px;overflow-x:auto;margin:0 0 .75rem}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);max-width:380px;width:92vw;padding:1.2rem}
dialog::backdrop{background:#0009}
.qrbox{background:#fff;border-radius:12px;padding:10px;width:fit-content;margin:.5rem auto}
.qrbox img{display:block}
.steps{padding-left:1.2rem;margin:.5rem 0}
#qrInfo{white-space:pre-line;word-break:break-all}
.pw{position:relative;display:block}
.pw input{padding-right:4.6rem}
.pw-toggle{position:absolute;right:.3rem;top:calc(50% + .125rem);transform:translateY(-50%);background:none;border:0;color:var(--accent);padding:.35rem .6rem;font-size:.85rem;font-weight:600}
.pw-toggle:hover{text-decoration:underline}
@media(max-width:600px){main{padding:.6rem}header{padding:.5rem}}