/* ===== QR-generator in Softrunner-huisstijl ===== */
#qr-generator{
  --deep:#040B18; --navy:#08152A; --panel:#0E1E3B; --panel2:#182F57; --line:#1E3A66;
  --gold:#F3B24E; --gold2:#FFD48A; --mist:#93A9CC; --paper:#EFF5FF;
  font-family:'Inter',system-ui,sans-serif; color:var(--paper);
  max-width:1100px; margin:0 auto; background:var(--panel); border:1px solid var(--line);
  border-radius:1.25rem; box-shadow:0 30px 80px -40px rgba(0,0,0,.9); overflow:hidden;
}
#qr-generator *{box-sizing:border-box;}
#qr-generator .qr-layout{display:flex; flex-wrap:wrap;}
#qr-generator .qr-sidebar{flex:1.1; min-width:340px; background:var(--navy); border-right:1px solid var(--line); padding:32px;}
#qr-generator .qr-main{flex:.9; min-width:340px; padding:32px; display:flex; flex-direction:column; align-items:center; background:var(--panel);}
#qr-generator .qr-sticky{position:sticky; top:96px; width:100%; display:flex; flex-direction:column; align-items:center;}

/* Tabs */
#qr-generator .qr-nav-wrap{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:26px;}
#qr-generator .qr-nav-btn{
  background:transparent; border:1px solid var(--line); color:var(--mist); font:600 13px/1 'Inter',sans-serif;
  padding:9px 14px; border-radius:999px; cursor:pointer; transition:color .2s,border-color .2s,background .2s;
}
#qr-generator .qr-nav-btn:hover{color:var(--paper); border-color:var(--gold);}
#qr-generator .qr-nav-btn.active{background:var(--gold); border-color:var(--gold); color:var(--deep);}

#qr-generator .qr-panel{display:none; animation:qrFade .3s ease-in-out;}
#qr-generator .qr-panel.active{display:block;}

/* Velden */
#qr-generator .form-group{margin-bottom:16px;}
#qr-generator label{display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--mist); margin-bottom:7px;}
#qr-generator input[type="text"],#qr-generator input[type="number"],#qr-generator input[type="email"],
#qr-generator input[type="password"],#qr-generator input[type="datetime-local"],#qr-generator textarea,#qr-generator select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:.75rem; font-size:16px;
  color:var(--paper); background:var(--deep); transition:border-color .2s; font-family:inherit;
}
#qr-generator input::placeholder,#qr-generator textarea::placeholder{color:rgba(169,183,204,.45);}
#qr-generator input:focus,#qr-generator textarea:focus,#qr-generator select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(243,178,78,.18);}
#qr-generator input[type="datetime-local"]{color-scheme:dark;}
#qr-generator select{appearance:none; -webkit-appearance:none; padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A9B7CC' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;}
#qr-generator textarea{resize:vertical; min-height:84px;}
#qr-generator .row-2{display:flex; gap:14px;}
#qr-generator .row-2 > div{flex:1;}
#qr-generator input[type="color"]{width:100%; height:46px; padding:4px; border:1px solid var(--line); border-radius:.75rem; background:var(--deep); cursor:pointer;}
#qr-generator input[type="checkbox"]{width:auto; margin-right:8px; transform:scale(1.2); accent-color:var(--gold);}
#qr-generator input[type="range"]{accent-color:var(--gold);}
#qr-generator input[type="file"]{width:100%; font-size:13px; color:var(--mist);}
#qr-generator input[type="file"]::file-selector-button{margin-right:12px; padding:9px 14px; border-radius:.6rem; border:1px solid var(--line); background:var(--panel2); color:var(--paper); font-weight:600; cursor:pointer;}
#qr-generator .qr-check{display:flex; align-items:center; text-transform:none; letter-spacing:0; font-size:14px; color:var(--paper); cursor:pointer; padding-bottom:12px;}
#qr-generator .qr-sep{border:0; border-top:1px solid var(--line); margin:16px 0;}
#qr-generator .qr-warn{background:rgba(243,178,78,.10); border:1px solid rgba(243,178,78,.35); color:var(--gold2); padding:12px 14px; border-radius:.75rem; font-size:13px; line-height:1.5; margin-bottom:16px;}

/* Presets */
#qr-generator .preset-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px;}
#qr-generator .preset-btn{
  padding:12px 14px; border:1px solid var(--line); border-radius:.75rem; cursor:pointer; font:600 13px 'Inter',sans-serif;
  display:flex; align-items:center; gap:10px; transition:border-color .2s,background .2s; background:var(--deep); color:var(--paper);
}
#qr-generator .preset-btn:hover{border-color:var(--gold); background:var(--panel2); opacity:1;}
#qr-generator .dot{width:12px; height:12px; border-radius:50%; display:inline-block; flex-shrink:0; box-shadow:0 0 0 2px rgba(255,255,255,.12);}

/* Canvas & knoppen */
#qr-generator canvas{
  max-width:100%; height:auto; margin-bottom:18px; border-radius:1rem; border:1px solid var(--line);
  box-shadow:0 25px 60px -25px rgba(0,0,0,.9),0 0 0 6px rgba(243,178,78,.08);
  background-color:#fff;
  background-image:linear-gradient(45deg,#eef0f3 25%,transparent 25%),linear-gradient(-45deg,#eef0f3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef0f3 75%),linear-gradient(-45deg,transparent 75%,#eef0f3 75%);
  background-size:20px 20px;
}
#qr-generator #status-msg{margin-bottom:14px; font-size:12px; color:var(--mist); min-height:1em; text-align:center;}
#qr-generator .btn-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:400px;}
#qr-generator .btn-grid button{padding:13px; border-radius:.6rem; font:600 14px 'Inter',sans-serif; cursor:pointer; transition:background .2s,border-color .2s,color .2s,transform .1s;}
#qr-generator .btn-grid button:active{transform:scale(.98);}
#qr-generator .btn-gen{grid-column:span 2; background:var(--gold); color:var(--deep); border:1px solid var(--gold); font-size:15px !important; padding:15px !important;}
#qr-generator .btn-gen:hover{background:var(--gold2);}
#qr-generator .btn-dl{background:transparent; color:var(--paper); border:1px solid var(--line);}
#qr-generator .btn-dl:hover{border-color:var(--gold); color:var(--gold);}
#qr-generator .btn-svg,#qr-generator .btn-zip{grid-column:span 2; background:var(--panel2); color:var(--paper); border:1px solid var(--line);}
#qr-generator .btn-svg:hover,#qr-generator .btn-zip:hover{border-color:var(--gold); color:var(--gold);}
#qr-generator button:focus-visible,#qr-generator .qr-nav-btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
#qr-generator .qr-privacy{margin-top:18px; font-size:12px; color:var(--mist); text-align:center; max-width:360px; line-height:1.5;}

#qr-generator h4{display:flex; align-items:center; gap:10px; margin:28px 0 14px; font:600 14px 'Space Grotesk',sans-serif; letter-spacing:.02em; color:var(--paper); border-top:1px solid var(--line); padding-top:22px;}
#qr-generator h4::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold);}

@media (max-width:860px){
  #qr-generator .qr-layout{flex-direction:column-reverse;}
  #qr-generator .qr-sidebar{min-width:0; border-right:none; border-top:1px solid var(--line); padding:22px;}
  #qr-generator .qr-main{min-width:0; padding:22px;}
  #qr-generator .qr-sticky{position:static;}
  #qr-generator canvas{max-width:240px;}
}
@media (max-width:520px){
  #qr-generator .row-2{flex-direction:column; gap:0;}
  #qr-generator .preset-grid{grid-template-columns:1fr;}
}
@keyframes qrFade{from{opacity:0; transform:translateY(5px);}to{opacity:1; transform:none;}}