:root{
  --bg:#0b0b0b;
  --fg:#f8f8f8;
  --muted:rgba(255,255,255,.70);
  --card:rgba(0,0,0,.70);
  --line:rgba(255,255,255,.12);
  --accent:#9bbd9b;
}

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.return-btn{
  position:fixed;
  top:18px; left:18px;
  z-index:10;
  text-decoration:none;
  color:var(--fg);
  background:rgba(0,0,0,.7);
  border:1px solid var(--line);
  padding:.6rem .9rem;
  border-radius:999px;
}
.wrap{
  max-width:900px;
  margin:0 auto;
  padding:90px 18px 60px;
}
.hero{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
}
.hero h1{ margin:0; letter-spacing:.12em; }
.hero p{ margin:.35rem 0 0; color:var(--muted); }

.top-msg{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  background:rgba(150,40,40,.22);
  border:1px solid rgba(255,120,120,.25);
}

.card{
  margin-top:16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
}

input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--fg);
  outline:none;
}

/* ✅ ADD: make dropdown options readable in Windows/Chromium */
select{
  color: var(--fg);
  background: rgba(255,255,255,.05);
}

option{
  color: var(--fg);
  background: var(--bg);
}
/* ✅ END ADD */

.btn{
  margin-top:6px;
  padding:12px 14px;
  border-radius:14px;
  border:0;
  background:var(--accent);
  color:#000;
  font-weight:800;
  cursor:pointer;
}

.result{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
}