:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body {
  min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(circle at top, #321356, #0a0710 58%); color: #f7f2ff;
}
.card {
  width: min(760px, 100%); padding: clamp(28px, 6vw, 64px); text-align: center;
  background: rgba(18, 11, 27, .86); border: 1px solid #6f3aa0; border-radius: 28px;
  box-shadow: 0 30px 90px #0009; backdrop-filter: blur(12px);
}
.eyebrow { color: #d59cff; letter-spacing: .18em; font-size: .75rem; font-weight: 800; }
h1 { margin: 8px 0 12px; font-size: clamp(2.2rem, 7vw, 5.5rem); line-height: .95; }
.intro { color: #c9bed3; font-size: 1.1rem; }
.notice { margin: 28px auto; max-width: 620px; padding: 16px; background: #ffffff0a; border-radius: 14px; color: #c9bed3; }
.notice p { margin: 5px; }
button { border: 0; border-radius: 999px; padding: 14px 24px; background: #a855f7; color: white; font-weight: 800; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.result { margin-top: 34px; padding-top: 28px; border-top: 1px solid #ffffff18; }
.label { display: block; color: #c9bed3; }
#ip { display: block; margin: 8px 0 18px; overflow-wrap: anywhere; font-size: clamp(2rem, 8vw, 5rem); color: #f0c9ff; }
.status { display: inline-block; padding: 10px 15px; border-radius: 12px; font-weight: 700; }
.warning { background: #5d2028; color: #ffc3ca; }
.clear { background: #153f31; color: #9cf3cd; }
.neutral { background: #38313d; color: #ddd2e4; }
small { display: block; margin-top: 12px; color: #8e8496; }