/* style.css */
:root{
  --bg:#fff;
  --card:#000;
  --text:#fff;
  --muted:#ccc;
  --border:#222;
  font-family:Inter, sans-serif;
}
body{
  margin:0;padding:28px;background:var(--bg);color:#000;display:flex;justify-content:center;
}
.card{
  width:100%;max-width:520px;background:var(--card);color:var(--text);
border:1px solid var(--border);border-radius:18px;padding:26px;
box-shadow:0 18px 55px rgba(0,0,0,0.35);
}
h1{margin:0 0 4px;font-size:26px;font-weight:800;}
.lead{margin:0;color:var(--muted);font-size:14px;margin-bottom:24px;}
label{display:block;font-size:14px;margin-bottom:6px;color:#ddd;}
input,select{
  width:100%;padding:12px;border-radius:10px;border:1px solid #333;
  background:#fff;color:#000;font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,0.15);transition:.25s;
}
.row{display:flex;gap:12px;margin-top:14px;}
.btn{
  width:100%;padding:14px;background:#fff;color:#000;border:none;
  border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;margin-top:20px;
  transition:.25s;
}
.btn:hover{background:#000;color:#fff;border:1px solid #fff;}
.result{
  margin-top:22px;padding:16px;background:#fff;border:1px solid #ddd;
  border-radius:12px;font-size:18px;min-height:40px;display:flex;align-items:center;color:#000;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
}
select:hover,input:hover{
  background:#000;color:#fff;border-color:#fff;transition:.25s;
}
@media(max-width:480px){.row{flex-direction:column;}}