/* QR Maker — simple, clean dark UI */
:root{
  --bg:#0b0f14;
  --card:#111826;
  --ink:#e6ebf2;
  --muted:#9fb0c5;
  --accent:#4da3ff;
  --accent-2:#60ffa8;
  --border:#1c2636;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg,#0a0f15, #0b0f14 20%, #0b0f14);
  color:var(--ink); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.container{max-width:1100px;margin:0 auto;padding:20px}
header h1{margin:8px 0 4px;font-size:28px}
.subtitle{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
label{display:block;margin:10px 0 6px;color:var(--muted);font-size:14px}
input,select{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--border);
  background:#0e1522; color:var(--ink); outline:none;
}
input:focus,select:focus{border-color:var(--accent)}
.row{display:flex; gap:10px; align-items:flex-end}
.row .grow{flex:1}
.primary{
  margin-top:10px; padding:12px 14px; border-radius:12px; border:1px solid #2b3b55;
  background:linear-gradient(180deg,#1a2a44,#152033); color:#eaf2ff; cursor:pointer; font-weight:600;
  transition:.15s transform ease;
}
.primary:hover{transform:translateY(-1px)}
.tabs{display:flex; gap:8px; margin-bottom:6px}
.tab{
  padding:8px 12px; border:1px solid var(--border); background:#0e1522; color:var(--ink); border-radius:999px; cursor:pointer;
}
.tab.active{background:#16243a; border-color:#26446b; color:#e6f0ff}
.tab-panel.hidden{display:none}
.note{margin-top:10px;color:var(--muted)}
.qr-wrap{display:grid;place-items:center;min-height:420px;border:1px dashed #2a3852;border-radius:12px;background:#0a1220}
.placeholder{color:#5f7aa0}
.output h2{margin-top:0}
.actions{margin-top:10px}
.actions button{
  padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0e1522;color:var(--ink);cursor:pointer
}
.actions button:disabled{opacity:.5;cursor:not-allowed}
.small{color:var(--muted);word-break:break-all}
.foot{color:#7f9bbd;font-size:13px;text-align:center;opacity:.8}

@media (max-width: 900px){
  .grid{grid-template-columns:1fr;gap:12px}
  .qr-wrap{min-height:320px}
}