:root { --bg:#0b0d12; --card:#121622; --text:#e8ecf1; --muted:#9aa4b2; --accent:#4da3ff; --ok:#39d98a; --warn:#ffb020; --err:#ff6b6b; --border:#22283a }
*{box-sizing:border-box} html,body{height:100%}
body{ margin:0; background:radial-gradient(1200px 600px at 80% -20%, #1a2032 0%, var(--bg) 60%), var(--bg); color:var(--text); font:16px/1.5 ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial; display:grid; place-items:center; padding:14px; }
.wrap{width:100%; max-width:860px; margin:auto}
.card{ width:min(96vw, 860px); margin:auto; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--card); border:1px solid var(--border); border-radius:20px; padding:22px; box-shadow:0 8px 40px rgba(0,0,0,.35) }
header{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px}
h1{margin:0; font-size:clamp(18px,5vw,22px)}
.status{display:flex; gap:8px; align-items:center; font-size:13px}
.dot{width:10px; height:10px; border-radius:50%}
.ok{background:var(--ok)} .warn{background:var(--warn)} .err{background:var(--err)}
.ip{ font:700 clamp(22px,8vw,40px)/1.2 ui-monospace,Consolas,monospace; word-break:break-word; margin:10px 0 12px }
.actions{display:flex; gap:10px; flex-wrap:wrap}
button{ appearance:none; border:1px solid var(--border); background:#0e1320; color:var(--text); padding:9px 13px; border-radius:12px; cursor:pointer; font-weight:600; transition: 0.2s; }
button:hover { background: #1a2333; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.mini{font-size:12px; padding:5px 9px; border-radius:9px}
.grid{display:grid; gap:14px; grid-template-columns:1fr; margin-top:12px}
.kv{ border:1px solid var(--border); background:#0e1320; border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:14px; }
.label{color:var(--muted); font-size:13px; flex:0 0 auto}
.value{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font:600 16px/1.3 ui-monospace,Consolas,monospace; word-break:break-word; text-align:right; }
@media (max-width:699.98px){ header{flex-direction:column; gap:6px; align-items:flex-start} .ip{text-align:left} .grid{grid-template-columns:1fr} .kv{flex-direction:column; align-items:center; text-align:center} .label{margin:0 0 6px 0} .value{margin-left:0; text-align:center; justify-content:center} .actions{width:100%; justify-content:flex-start} }
@media (min-width:700px){ .grid{grid-template-columns:1fr 1fr} .full{grid-column:1 / -1} }