:root{
  --bg:#0e1117; --panel:#161b22; --line:#2a3441; --txt:#e6edf3; --dim:#8b98a5;
  --acc:#3b82f6; --acc2:#2563eb; --ok:#22c55e; --bad:#ef4444; --warn:#f59e0b; --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;
  background:radial-gradient(1200px 600px at 70% -10%,#16202e,var(--bg));color:var(--txt);min-height:100vh}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:.6rem 1rem;background:var(--acc);
  color:#fff;font-weight:600;transition:.15s}
button:hover{background:var(--acc2)} button:disabled{opacity:.6;cursor:progress}
button.ghost{background:#222c38;color:var(--txt)} button.ghost:hover{background:#2b3745}
button.ghost.danger{color:#fca5a5}
button.mini{padding:.15rem .5rem;background:transparent;color:var(--dim);font-size:1rem}
button.mini:hover{color:var(--bad);background:transparent}
input{width:100%;padding:.6rem .7rem;border-radius:10px;border:1px solid var(--line);background:#0d1218;color:var(--txt);font:inherit}
input:focus{outline:0;border-color:var(--acc)}
label{display:block;font-size:.72rem;color:var(--dim);margin:.5rem 0 .25rem;text-transform:uppercase;letter-spacing:.04em}

/* login */
body.auth{display:grid;place-items:center}
.login{width:min(92vw,360px)}
.login form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem 1.6rem;
  box-shadow:0 20px 60px rgba(0,0,0,.45);text-align:center}
.login .logo{font-size:2.4rem;margin-bottom:.3rem}
.login h1{margin:.1rem 0;font-size:1.4rem}
.login .sub{margin:0 0 1.4rem;color:var(--dim);font-size:.85rem}
.login input{margin-bottom:.8rem;text-align:center}
.login button{width:100%}
.msg{margin-top:.8rem;font-size:.85rem;min-height:1.1rem}
.msg.err{color:#fca5a5}

/* app */
header{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.4rem;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:rgba(14,17,23,.85);backdrop-filter:blur(8px);z-index:5}
.brand{font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pill{font-size:.7rem;font-weight:600;color:var(--dim);background:#0d1218;border:1px solid var(--line);
  padding:.2rem .5rem;border-radius:99px;font-family:ui-monospace,monospace}
.hactions{display:flex;gap:.5rem;flex-wrap:wrap}
.hint{color:var(--dim);font-size:.82rem;padding:.9rem 1.4rem 0;line-height:1.5;max-width:820px}
.hint b{color:var(--txt);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1rem;padding:1.4rem}
.loading{color:var(--dim);padding:2rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;
  display:flex;flex-direction:column;gap:.55rem}
.chead{display:flex;justify-content:space-between;align-items:center}
.cuser{font-weight:700;font-size:1.15rem}
.ipbox{display:flex;align-items:flex-start;gap:.55rem;background:#0d1218;border:1px solid var(--line);
  border-radius:10px;padding:.6rem .7rem;min-height:2.6rem}
.ipinfo{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.iptxt{font-family:ui-monospace,monospace;color:var(--dim);font-size:.85rem;word-break:break-all}
.iptxt.good{color:var(--txt)}
.badges{display:flex;gap:.35rem;flex-wrap:wrap}
.badge{font-size:.68rem;font-weight:600;padding:.15rem .45rem;border-radius:99px;border:1px solid transparent}
.badge.ok{color:#86efac;background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3)}
.badge.warn{color:#fcd34d;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3)}
.badge.bad{color:#fca5a5;background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3)}
.badge.mob{color:#93c5fd;background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3)}
.badge.res{color:#c4b5fd;background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.3)}
.dot{width:9px;height:9px;border-radius:99px;background:var(--dim);flex:0 0 auto;margin-top:.35rem}
.dot.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)} .dot.bad{background:var(--bad)}
.dot.load{background:var(--warn);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}
.creds{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.creds code{display:block;background:#0d1218;border:1px solid var(--line);border-radius:8px;padding:.35rem .5rem;font-size:.82rem;overflow:auto}
.row{display:flex;gap:.5rem}.row>*{flex:1}
.apply{background:var(--ok)}.apply:hover{background:#16a34a}
.cmsg{font-size:.8rem;min-height:1rem;line-height:1.4}
.cmsg.err{color:#fca5a5}.cmsg.ok{color:#86efac}.cmsg.wait{color:var(--warn)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:20;padding:1rem}
.modal[hidden]{display:none}
.mbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;width:min(92vw,340px)}
.mbox h3{margin:0 0 .3rem}
.mbox .row{margin-top:1.1rem}