:root {
  --bg: #0f0f1a;
  --glass: rgba(255,255,255,0.08);
  --text: #ffffff;
  --accent: #8a5cff;
}

body.light {
  --bg: #f4f6fb;
  --glass: rgba(0,0,0,0.05);
  --text: #222;
}

body {
  margin:0;
  font-family: 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: 0.4s ease;
}

.container { width:90%; max-width:1100px; margin:auto; }

header {
  padding:20px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

button {
  padding:10px 20px;
  border:none;
  border-radius:10px;
  background: var(--accent);
  color:white;
  cursor:pointer;
}

.hero {
  text-align:center;
  padding:100px 20px;
  background: linear-gradient(135deg,#6a5cff,#a855f7);
  border-radius:20px;
  margin:30px 0;
}

.glass {
  background: var(--glass);
  backdrop-filter: blur(10px);
  padding:30px;
  border-radius:20px;
  box-shadow:0 8px 30px rgba(0,0,0,0.3);
}

input {
  width:100%;
  padding:12px;
  margin:10px 0;
  border-radius:10px;
  border:none;
}

.result-animate {
  font-size:32px;
  font-weight:bold;
  margin-top:20px;
  animation: pop 0.6s ease;
}

@keyframes pop {
  0%{ transform:scale(0.5); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}

footer { text-align:center; padding:30px; margin-top:50px; }