:root{
    --paper:#F3F3EF;
    --paper-raised:#FFFFFF;
    --ink:#41236c;
    --ink-soft:#53565E;
    --line:#DCDCD5;
    --accent:#1D4ED8;
    --accent-soft:#E7ECFB;
    --success:#1F7A54;
    --success-soft:#E4F4EC;
    --danger:#C1352B;
    --danger-soft:#FBEAE8;
    --radius:10px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background-color:var(--paper);
    background-image:
      radial-gradient(var(--line) 1px, transparent 1px);
    background-size: 22px 22px;
    color:var(--ink);
    font-family:'Inter', system-ui, sans-serif;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding: 56px 20px 80px;
  }
  .eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:14px;
  }
  .eyebrow .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  h1{
    font-family:'Anton', sans-serif;
    font-weight:700;
    font-size:clamp(28px, 4vw, 38px);
    margin:0 0 8px;
    text-align:center;
    letter-spacing:-0.01em;
  }
  .sub{
    color:var(--ink-soft);
    font-size:15px;
    text-align:center;
    max-width:440px;
    margin:0 0 40px;
    line-height:1.5;
  }
  .sub strong{color:var(--ink);}

  .card{
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:32px;
    width:100%;
    max-width:520px;
    box-shadow: 0 1px 2px rgba(20,20,20,0.04), 0 12px 32px -18px rgba(20,20,20,0.18);
  }
  label.field-label{
    display:block;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:8px;
  }
  textarea#qr-input{
    width:100%;
    min-height:88px;
    resize:vertical;
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px 14px;
    font-family:'Inter', sans-serif;
    font-size:15px;
    color:var(--ink);
    background:var(--paper);
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  textarea#qr-input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  .counter{
    display:flex;
    justify-content:flex-end;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--ink-soft);
    margin-top:6px;
  }

  details.adv{
    margin-top:18px;
    border-top:1px dashed var(--line);
    padding-top:14px;
  }
  details.adv summary{
    cursor:pointer;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    list-style:none;
    display:flex;
    align-items:center;
    gap:6px;
  }
  details.adv summary::-webkit-details-marker{display:none;}
  details.adv summary::before{
    content:'+';
    font-family:'JetBrains Mono', monospace;
    display:inline-block;
    width:14px;
  }
  details.adv[open] summary::before{content:'–';}
  .adv-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:14px;
  }
  .adv-grid select{
    width:100%;
    padding:9px 10px;
    border-radius:7px;
    border:1px solid var(--line);
    background:var(--paper);
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    color:var(--ink);
  }

  button#generate-btn{
    width:100%;
    margin-top:22px;
    background:var(--ink);
    color:var(--paper-raised);
    border:none;
    border-radius:8px;
    padding:14px 18px;
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:background .15s ease, transform .05s ease;
  }
  button#generate-btn:hover{background:var(--accent);}
  button#generate-btn:active{transform:scale(0.99);}
  button#generate-btn:disabled{opacity:.55;cursor:not-allowed;}

  .msg{
    margin-top:14px;
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    padding:10px 12px;
    border-radius:7px;
    display:none;
  }
  .msg.show{display:block;}
  .msg.error{background:var(--danger-soft);color:var(--danger);}
  .msg.success{background:var(--success-soft);color:var(--success);}

  /* ---- Result panel ---- */
  #result{
    display:none;
    margin-top:32px;
    padding-top:28px;
    border-top:1px solid var(--line);
  }
  #result.show{display:block;}

  .frame{
    position:relative;
    width:220px;
    height:220px;
    margin:0 auto 18px;
    padding:14px;
  }
  .frame img{
    width:100%;
    height:100%;
    display:block;
    border:1px solid var(--line);
    border-radius:4px;
    background:#fff;
  }
  .mark{
    position:absolute;
    width:14px;
    height:14px;
    pointer-events:none;
  }
  .mark::before, .mark::after{
    content:'';
    position:absolute;
    background:var(--ink);
  }
  .mark::before{width:14px;height:1.5px;top:6.25px;left:0;}
  .mark::after{height:14px;width:1.5px;left:6.25px;top:0;}
  .mark.tl{top:-2px;left:-2px;}
  .mark.tr{top:-2px;right:-2px;}
  .mark.bl{bottom:-2px;left:-2px;}
  .mark.br{bottom:-2px;right:-2px;}

  .scan-sweep{
    position:absolute;
    top:14px;left:14px;right:14px;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity:0;
  }
  @media (prefers-reduced-motion: no-preference){
    .scan-sweep.animate{
      animation: sweep 0.7s ease-out;
    }
  }
  @keyframes sweep{
    0%{ top:14px; opacity:1; }
    100%{ top:calc(100% - 16px); opacity:0; }
  }

  .encoded-line{
    font-family:'JetBrains Mono', monospace;
    font-size:11.5px;
    color:var(--ink-soft);
    text-align:center;
    word-break:break-all;
    margin:0 0 20px;
    padding:0 8px;
  }
  .encoded-line span{color:var(--ink);}

  .actions{
    display:flex;
    gap:10px;
  }
  .btn{
    flex:1;
    text-align:center;
    padding:12px 14px;
    border-radius:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
    text-decoration:none;
    border:1px solid var(--ink);
    transition:background .15s ease, color .15s ease;
  }
  .btn.solid{background:var(--ink);color:var(--paper-raised);}
  .btn.solid:hover{background:var(--accent);border-color:var(--accent);}
  .btn.outline{background:transparent;color:var(--ink);}
  .btn.outline:hover{background:var(--ink);color:var(--paper-raised);}

  .email-panel{
    display:none;
    margin-top:14px;
    gap:8px;
  }
  .email-panel.show{display:flex;}
  .email-panel input[type=email]{
    flex:1;
    padding:11px 12px;
    border-radius:7px;
    border:1px solid var(--line);
    font-family:'Inter', sans-serif;
    font-size:14px;
    outline:none;
  }
  .email-panel input[type=email]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
  .email-panel button{
    padding:11px 16px;
    border-radius:7px;
    border:none;
    background:var(--accent);
    color:#fff;
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    text-transform:uppercase;
    cursor:pointer;
  }
  .email-panel button:disabled{opacity:.55;cursor:not-allowed;}

  footer{
    margin-top:40px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--ink-soft);
    text-align:center;
  }

  /* honeypot field, hidden from real users */
  .hp{position:absolute;left:-9999px;top:-9999px;}