:root{
  --bg:#0d0d0d; --card:#171717; --accent:#FF7518; --accent2:#5C2E91; --text:#f2f2f2;
}
*{box-sizing:border-box} body{
  margin:0; font-family:system-ui,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text);
  min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.card{
  width:100%; max-width:420px; background:var(--card); border:1px solid #222; border-radius:14px; padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
h1,h2{margin:.2rem 0 1rem} h1{font-size:1.6rem}
label{display:block; font-size:.95rem; margin:.6rem 0 .3rem}
input,select,button{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #2a2a2a; background:#111; color:var(--text);
}
button{
  background:linear-gradient(90deg,var(--accent),var(--accent2)); border:none; cursor:pointer; font-weight:600; margin-top:12px;
}
button:hover{filter:brightness(1.05)}
.row{display:flex; gap:10px} .row > *{flex:1}
.list{display:grid; gap:10px; margin-top:10px}
.note{font-size:.9rem; opacity:.85; margin-top:8px}
.center{text-align:center}
.small{font-size:.88rem; opacity:.8}
hr{border:none; border-top:1px solid #2a2a2a; margin:14px 0}
a{color:var(--accent)}
.msg{background:#111; border:1px solid #2a2a2a; padding:12px; border-radius:10px; margin:10px 0}