*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 50% 0%, rgba(35,88,150,.35), transparent 36%),linear-gradient(180deg,#051425,#071221 40%,#030a13 100%);color:#fff;min-height:100vh}
.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px}
.card{width:min(820px,100%);background:rgba(5,14,26,.9);border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:28px;box-shadow:0 25px 60px rgba(0,0,0,.35)}
.pill{display:inline-block;padding:8px 12px;border-radius:999px;background:#17365d;color:#d5e8ff;font-size:13px;margin-bottom:10px}
h1{margin:0;font-size:50px;line-height:1.05}
.sub{margin:10px 0 20px;font-size:20px;color:#b8cde8}
.panel{background:#0b213d;border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:16px 18px;margin-bottom:14px}
.panel.small{padding-bottom:10px}
.label{font-size:13px;color:#8ab1e1;margin-bottom:8px}
.status{font-size:34px;font-weight:700}
.status.ok{color:#80f0a8}
.status.err{color:#ff9999}
.status.loading{color:#ffd67b}
.meta{margin-top:6px;color:#a7bdd8;font-size:15px;line-height:1.45}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.btn{appearance:none;border:none;background:#e24545;color:#fff;border-radius:14px;padding:12px 18px;cursor:pointer;font-size:16px;font-weight:700}
.btn.secondary{background:#1f3f69}
.alerts{display:grid;gap:12px}
.alert{background:linear-gradient(180deg,#6b1717,#431010);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:15px 16px}
.alertTitle{font-size:24px;font-weight:700;margin-bottom:8px}
.alertType{display:inline-block;margin-bottom:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:6px 10px;font-size:14px;font-weight:700}
.alertMeta{font-size:14px;color:#f3cccc}
.empty{background:#102742;color:#d3e1f4;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:18px}
.log{font-size:14px;color:#c6d7ec;line-height:1.6;max-height:150px;overflow:auto}
.log div{padding:2px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.popup{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:#d62828;color:#fff;padding:16px 24px;border-radius:16px;font-size:24px;font-weight:700;z-index:100;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.hidden{display:none}
.flash{animation:flashBg .8s ease-in-out 4}
@keyframes flashBg{0%,100%{background:radial-gradient(circle at 50% 0%, rgba(35,88,150,.35), transparent 36%),linear-gradient(180deg,#051425,#071221 40%,#030a13 100%)}50%{background:radial-gradient(circle at 50% 0%, rgba(180,20,20,.25), transparent 36%),linear-gradient(180deg,#230505,#180707 40%,#100303 100%)}}
.note{color:#87a6ca;font-size:13px;margin-top:14px;line-height:1.5}
@media (max-width:680px){.wrap{padding:12px}.card{padding:20px;border-radius:22px}h1{font-size:34px}.sub{font-size:17px}.status{font-size:27px}.alertTitle{font-size:21px}}