:root{
  --bg:#0b1420; --card:#0f1b2a; --text:#e8eef7; --muted:#9fb2c7;
  --border:rgba(255,255,255,.08);
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.25);
  --grad1:#34a0ff; --grad2:#18e0c6;
}
*{box-sizing:border-box} .card{max-width:640px;margin:16px auto;padding:14px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);border:1px solid var(--border)}
.title{margin:4px 0 4px;font-size:22px;line-height:1.2;font-weight:800;color:var(--text)}
.note{margin:0 0 8px;color:var(--muted);font-size:12px}
.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 10px}
.metric{border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center;background:rgba(255,255,255,.02)}
.label{color:var(--muted);font-weight:700;margin-bottom:2px}
.val{font-size:clamp(16px, 4.8vw, 24px);font-weight:900;color:var(--text);min-height:30px;line-height:1.15;word-break:break-word}
.val.ip{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; letter-spacing:.2px; word-break:break-all}
.val.rdns{font-size:clamp(12px, 3.6vw, 16px); word-break:break-word}
.unit{font-size:10px;color:var(--muted)}
.ua{margin-top:10px;border:1px solid var(--border);border-radius:12px;padding:10px;background:rgba(255,255,255,.02)}
.ua .ua-val{font-size:12px;color:var(--text);word-break:break-all}
.btn{display:inline-block;border:none;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;background:linear-gradient(90deg,var(--grad1),var(--grad2));color:#001b2b}
.btn:disabled{opacity:.6;cursor:not-allowed}
.err{margin-top:8px;color:#ff6b6b;font-weight:700;font-size:12px}
.foot{margin:6px 0 0;color:var(--muted);font-size:10px}
@media (max-width:520px){ .card{margin:10px;padding:12px} .title{font-size:20px} }
body{background:var(--bg)}


/* v1.0.2 overlap fixes */
.val.ip{white-space:nowrap; letter-spacing:.2px}
.val.ip.ipv6{white-space:normal; word-break:break-word; font-size:clamp(14px,3.8vw,20px)}
.val.rdns{font-size:clamp(12px,3.4vw,16px); word-break:break-word}
@media (max-width: 480px){
  .row{grid-template-columns: repeat(2,minmax(0,1fr))}
  .metric.ipm{grid-column: span 2}
}