:root{
  --bg: #07101a;
  --card: #08202a;
  --accent: #06b6d4;
  --muted: #94a3b8;
  --glass: rgba(255,255,255,0.02);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:linear-gradient(180deg,#03060a 0%,#07101a 100%);
  color:#e6eef6;min-height:100vh;
}
.site-header{padding:28px 16px;text-align:center}
.site-header h1{margin:0;font-size:1.9rem}
.site-header .tag{color:var(--muted);margin-top:6px}
.container{max-width:960px;margin:18px auto;padding:0 16px 100px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border-radius:10px;padding:18px;margin-bottom:18px;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.reveal .step{opacity:0;transform:translateY(8px);transition:all 360ms cubic-bezier(.2,.9,.2,1);padding:8px 0;border-bottom:1px dashed rgba(255,255,255,0.03)}
.reveal .step.show{opacity:1;transform:none}
.value{color:var(--muted);margin-left:8px}
.controls{margin-top:12px;display:flex;gap:8px}
.row{display:flex;gap:8px;align-items:center;margin-top:8px}
.btn{background:var(--accent);color:#012428;border:none;padding:10px 12px;border-radius:8px;cursor:pointer}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.btn-danger{background:#ef4444;color:white}
.checkbox{display:flex;align-items:center;gap:8px;margin-top:8px}
.ipresult{margin-top:12px;color:var(--muted)}
.note{color:var(--muted);margin-top:8px}
.footer{text-align:center;color:var(--muted);font-size:0.9rem}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:9999}
.modal-inner{width:92%;max-width:760px;background:var(--card);padding:22px;border-radius:12px;text-align:left}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}