:root {
  --bg: #0b0b0b;
  --card: #0f0f12;
  --muted: #9aa3b2;
  --accent: #6be6ff;
  --accent-2: #7ef0a6;
  --glass: rgba(255,255,255,0.04);
  --maxw:1100px;
  --radius:14px;
  --ff:"Aclonica", Inter, system-ui;
}

*{box-sizing:border-box;}

body{
margin:0;
font-family:var(--ff);
background:linear-gradient(180deg,#050509 0%,#0b0b0b 100%);
color:#e8eef6;
}

.wrap{
max-width:var(--maxw);
margin:40px auto;
padding:0 20px;
}

.card{
background:var(--card);
border-radius:var(--radius);
padding:26px;
border:1px solid rgba(255,255,255,0.05);
}

h1{margin-top:0;font-size:34px;}

p{color:var(--muted)}

select,input,textarea{
width:100%;
padding:12px;
margin-top:8px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.08);
background:#0f0f12;
color:white;
}

textarea{height:100px}

.controls{
display:flex;
flex-wrap:wrap;
gap:20px;
margin-top:16px;
}

.control{
flex:1;
min-width:140px;
}

button{
margin-top:18px;
padding:12px 18px;
border:none;
border-radius:10px;
font-weight:700;
background:var(--accent);
color:#061125;
cursor:pointer;
}

button:hover{opacity:.9}

.qr-result{
margin-top:30px;
text-align:center;
}

#qrcode canvas{
background:white;
padding:10px;
border-radius:10px;
}

.download{
display:inline-block;
margin-top:14px;
padding:10px 14px;
border-radius:10px;
background:var(--accent);
color:#061125;
font-weight:700;
text-decoration:none;
margin-right:8px;
}

.hidden{display:none}