:root{
  --bg:#050505; --card:#101010; --border:#1f1f1f; --text:#eaeaea; --muted:#777; --green:#00ff9c; --glow:rgba(0,255,156,0.25);
}
body{
  margin:0;
  font-family:Inter;
  background:radial-gradient(circle at 20% 10%, #0a0a0a, transparent), radial-gradient(circle at 80% 90%, #0f0f0f, transparent), var(--bg);
  color:var(--text);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:100vh;
  padding:20px;
}
.wrapper{width:100%;max-width:1100px;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:900px){.grid{grid-template-columns:1fr;}}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:20px;
  transition:.3s;
}
.card:hover{box-shadow:0 0 40px var(--glow);}
h2{margin-top:0;}
.input{
  width:100%;
  padding:12px;
  margin-bottom:10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0d0d0d;
  color:var(--text);
  transition: 0.2s;
}
.input.invalid{border-color:red;}
.btn{
  width:100%;
  padding:12px;
  margin-top:5px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,#00ff9c,#00cc77);
  color:black;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}
.btn:hover{transform:scale(1.03);}
.link{
  background:#0d0d0d;
  padding:10px;
  border-radius:10px;
  margin-top:5px;
  word-break:break-all;
  cursor:pointer;
  transition:.3s;
}
.link:hover{box-shadow:0 0 20px var(--glow);}
.label{color:var(--muted);}
.output div{margin-top:4px;}
.tooltip{
  position:relative;
  cursor:help;
}
.tooltip span{
  visibility:hidden;
  background:var(--green);
  color:black;
  text-align:center;
  border-radius:6px;
  padding:5px 8px;
  position:absolute;
  z-index:1;
  bottom:125%;
  left:50%;
  transform:translateX(-50%);
  opacity:0;
  transition:.3s;
  white-space:nowrap;
}
.tooltip:hover span{visibility:visible;opacity:1;}