:root{
  --bg:#060a1a;
  --glass:#0e1633cc;
  --card:#0f1736;
  --ink:#e9eefc;
  --muted:#a9b6ff;
  --accent:#7c4dff;
  --accent-2:#53e3fb;
  --border:#24306a;
  --ok:#87fbb3;
  --err:#ff9aa9;
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{
  margin:0; padding:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell;
  background: var(--bg); color: var(--ink);
}
a{ text-decoration: none; color: inherit }

.bg-gradient{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 800px at 20% -10%, #2b3aa9 0%, transparent 60%),
    radial-gradient(900px 700px at 120% 10%, #7c4dff44 0%, transparent 60%),
    radial-gradient(800px 800px at 40% 120%, #53e3fb22 0%, transparent 60%);
  filter: blur(22px);
  animation: floatGlow 12s ease-in-out infinite alternate;
}
@keyframes floatGlow{ 0%{transform: translateY(0)} 100%{transform: translateY(-10px)} }

.header{
  width:100%; max-width:1200px; margin:20px auto 0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border:1px solid var(--border);
  background: linear-gradient(180deg, #10193a, #0b1230cc);
  border-radius:16px; box-shadow: 0 12px 40px #00000055;
  backdrop-filter: saturate(120%) blur(6px);
}
.logo{ font-size:22px; font-weight:800; letter-spacing:.5px }
.logo span{ color: var(--accent) }

.wrap{ width:100%; max-width:1000px; margin:20px auto; padding:16px }

.footer{
  width:100%; max-width:1200px; margin:10px auto 30px;
  color:var(--muted); text-align:center; font-size:13px;
}

.card{
  background: linear-gradient(180deg, #0e1633cc, #0b1230cc);
  border:1px solid var(--border);
  border-radius:18px; padding:24px;
  box-shadow: 0 20px 50px #0008;
  backdrop-filter: blur(8px) saturate(120%);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 70px #000a;
  border-color: #2c3a85;
}
.center{text-align:center}

.pill{
  display:inline-block; font-size:12px; color: var(--muted);
  background:#0b1230; border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; margin-bottom:8px;
}

h1{ margin:8px 0 12px; font-size:28px; letter-spacing:.2px }
h2{ margin:16px 0 8px; font-size:18px; color: var(--muted) }

.hint{ color: var(--muted); font-size:14px }
.muted{ color: #9bb0ff88; font-size:12px }
.ok{ color: var(--ok); font-weight:700 }
.err{ color: var(--err); font-weight:700 }
.badge{ background:#0b1230; border:1px solid var(--border); padding:6px 12px; border-radius:999px }

.input{
  width:100%; padding:12px 14px; font-size:16px; color: var(--ink);
  background:#0b1230; border:1px solid var(--border);
  border-radius:12px; outline:none; transition:.2s;
  box-shadow: 0 6px 18px #0004 inset;
}
.input:focus{ border-color:#4b5af7; box-shadow: 0 0 0 3px #4b5af733 }

.range{ width:100% }
.row{ display:flex; gap:10px; flex-wrap:wrap }

.btn{
  background: linear-gradient(180deg, #5e3af7, #7c4dff);
  border:none; color:#fff; padding:12px 16px; font-weight:800;
  border-radius:14px; cursor:pointer; transition:.18s; box-shadow: 0 10px 30px #0006;
  letter-spacing:.2px; text-decoration: none;
}
.btn:hover{ transform: translateY(-1px) scale(1.01) }
.btn:active{ transform: translateY(0) scale(0.99) }
.btn.secondary{
  background: linear-gradient(180deg, #0f1640, #0c1333);
  border:1px solid var(--border); color: #cdd6ff;
}
.btn.icon{
  width:48px; height:48px; padding:0; display:grid; place-items:center;
  border-radius:12px;
}
.btn.icon svg{ width:22px; height:22px }

.encoded{
  font-size:22px; line-height:1.6; letter-spacing:.4px;
  background:#0b1230; border:1px dashed #2a3875;
  padding:16px; border-radius:14px; user-select:text;
  box-shadow: 0 10px 28px #0005 inset;
}

.imgbox{
  position:relative; border-radius:16px;
  border:1px solid var(--border); background:#070d24;
  padding:8px; display:inline-block;
  box-shadow: 0 16px 36px #0007;
}
#canvas{
  display:block; max-width:100%; height:auto; border-radius:12px;
}

.qr {
  max-width: 80vw;
  height: auto;
  background: #fff;              /* 👈 marco blanco alrededor */
  padding: 16px;                 /* 👈 espacio interno blanco */
  border-radius: 12px;           /* bordes ligeramente redondeados */
  box-shadow: 0 20px 40px #0007; /* sombra elegante */
  transition: transform .25s ease;
}

.qr:hover {
  transform: scale(1.02);
}

.nav{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px }
.sp{ height:12px }

@media (max-width: 520px){
  .header{ margin:12px auto 0; padding:10px }
  .wrap{ padding:12px }
  h1{ font-size:24px }
  .btn{ width:100% }
}