:root{
  --bg:#0a0e13;
  --fg:#e8eef5;
  --muted:#9fb0c0;
  --accent:#6aa84f;
  --mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  --sans: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  min-height:100%;
  display:grid;
  place-items:center;
  padding:24px;
  background:linear-gradient(#4a90d9 0%, #8ec9f0 55%, #cfe9f7 100%);
  color:var(--fg);
  font-family:var(--sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

#bg{
  position:fixed;
  inset:0;
  display:block;
  z-index:0;
}

.vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(0,0,0,0) 45%, rgba(4,9,15,.55) 100%),
    linear-gradient(to bottom, rgba(4,9,15,.10) 0%, rgba(4,9,15,.30) 55%, rgba(4,9,15,.72) 100%);
}

.card{
  position:relative;
  z-index:2;
  width:min(540px, 100%);
  padding:36px 30px 30px;
  text-align:center;
  background:rgba(9,13,18,.80);
  border:2px solid rgba(255,255,255,.10);
  border-radius:3px;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.65),
    0 22px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
}

.title{
  margin:0;
  font-family:var(--mono);
  font-weight:800;
  font-size:clamp(46px, 12vw, 76px);
  line-height:1;
  letter-spacing:.06em;
  color:#f2f9ff;
  text-shadow:
    0 3px 0 #2c4a67,
    0 6px 0 #1a2c3e,
    0 10px 22px rgba(0,0,0,.65);
  user-select:none;
}

.tagline{
  margin:14px 0 0;
  font-size:clamp(14px, 3.4vw, 16px);
  color:var(--muted);
  letter-spacing:.01em;
}

.ipbox{
  margin:26px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.ipbox-label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#7f8fa0;
}

.ip{
  font-family:var(--mono);
  font-size:clamp(15px, 4vw, 19px);
  font-weight:700;
  color:#eafff0;
  padding:13px 20px;
  cursor:pointer;
  background:#22362a;
  border:2px solid #0a130d;
  border-radius:2px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -3px 0 rgba(0,0,0,.45),
    0 4px 0 #0a130d;
  transition: background .15s ease, transform .06s ease, box-shadow .06s ease;
  touch-action:manipulation;
}

.ip:hover{ background:#2b4534; }
.ip:focus-visible{ outline:2px solid #9fe08a; outline-offset:3px; }

.ip:active{
  transform:translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(0,0,0,.45),
    0 1px 0 #0a130d;
}

.oldip{
  margin:22px 0 0;
  font-size:13px;
  color:#7f8fa0;
}

.oldip-value{
  font-family:var(--mono);
  color:#b9c8d6;
}

.toast{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:3;
  transform:translate(-50%, 16px);
  padding:11px 18px;
  font-family:var(--mono);
  font-size:13px;
  color:#eafff0;
  background:rgba(12,20,15,.94);
  border:2px solid #0a130d;
  border-radius:2px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}

.toast.show{ opacity:1; transform:translate(-50%, 0); }

@media (max-width:420px){
  .card{ padding:28px 20px 24px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}