.hero { text-align:center; padding:70px 20px 50px; position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 0%,rgba(107,33,212,.15),transparent 60%); }

    /* ── MAIN ── */
    .main { max-width:1000px; margin:0 auto; padding:48px 24px 100px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }

    /* ── INPUT PANEL ── */
    .input-panel {}
    .panel-title { font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:3px; color:var(--white); margin-bottom:24px; }
    .panel-title span { color:var(--purple-light); }

    .input-field { margin-bottom:20px; }
    .input-field label { font-size:8px; letter-spacing:3px; color:rgba(255,255,255,.3); text-transform:uppercase; display:block; margin-bottom:8px; }
    .qr-textarea {
      width:100%; padding:16px 18px; min-height:120px; resize:vertical;
      background:rgba(255,255,255,.04); border:1px solid rgba(107,33,212,.35);
      color:#fff; font-family:'Space Mono',monospace; font-size:13px; letter-spacing:1px;
      outline:none; transition:border-color .3s, background .3s; line-height:1.6;
    }
    .qr-textarea:focus { border-color:var(--purple-light); background:rgba(107,33,212,.05); }
    .char-count { font-size:9px; letter-spacing:2px; color:rgba(255,255,255,.25); text-align:right; margin-top:6px; }
    .char-count.warn { color:rgba(255,100,100,.7); }

    .options-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
    .opt-select:focus, .opt-color:focus { border-color:var(--purple-light); }

    .btn-row { display:flex; gap:10px; }
    .btn-dl {
      padding:16px 20px; background:rgba(255,255,255,.04); border:1px solid rgba(107,33,212,.3);
      color:rgba(155,95,227,.8); cursor:pointer; font-family:'Bebas Neue',sans-serif;
      font-size:22px; letter-spacing:2px; transition:border-color .3s, color .3s, background .3s;
    }
    .btn-dl:hover { border-color:var(--purple-light); color:#fff; background:rgba(107,33,212,.12); }
    .btn-dl:disabled { opacity:.3; cursor:not-allowed; }

    /* ── QR DISPLAY ── */
    .qr-panel {}
    .qr-frame {
      position:relative; padding:32px; background:rgba(255,255,255,.02);
      border:1px solid rgba(107,33,212,.25); text-align:center;
      margin-bottom:20px; overflow:hidden; min-height:320px;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
    }
    /* Corner decorations */
    .qr-frame::before,.qr-frame::after { content:''; position:absolute; width:20px; height:20px; border-color:var(--purple-light); border-style:solid; }
    .qr-frame::before { top:8px; left:8px; border-width:2px 0 0 2px; }
    .qr-frame::after  { bottom:8px; right:8px; border-width:0 2px 2px 0; }
    /* Scan line animation */
    .qr-scan { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--purple-light),transparent); top:-2px; animation:scan 2s linear infinite; opacity:.6; }
    @keyframes scan { to{top:100%;} }
    .qr-scan.paused { animation-play-state:paused; opacity:0; }

    #qrCanvas { max-width:260px; position:relative; z-index:1; display:none; image-rendering:pixelated; }
    #qrCanvas.show { display:block; animation:qrPop .4s cubic-bezier(.16,1,.3,1); }
    @keyframes qrPop { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
    .qr-idle-icon { font-size:72px; animation:idleF 3s ease-in-out infinite; }
    @keyframes idleF { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    .qr-idle-text { font-size:10px; letter-spacing:3px; color:rgba(255,255,255,.2); margin-top:12px; display:block; }
    .qr-loading { display:none; }
    .qr-loading.show { display:flex; flex-direction:column; align-items:center; gap:14px; }
    .qr-ring { width:44px; height:44px; border-radius:50%; border:3px solid rgba(107,33,212,.2); border-top-color:var(--purple-light); animation:spin .7s linear infinite; }
    .qr-loading-txt { font-size:9px; letter-spacing:3px; color:rgba(255,255,255,.3); animation:eb 1s ease-in-out infinite; }

    .qr-url { font-size:9px; letter-spacing:1px; color:rgba(255,255,255,.2); word-break:break-all; margin-top:10px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* ya comment */

    /* history */
    .history-wrap { grid-column:span 2; margin-top:8px; }
    .history-title { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:3px; color:var(--white); margin-bottom:16px; }
    .history-title span { color:var(--purple-light); }
    .history-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
    .h-card { padding:12px 10px; background:rgba(255,255,255,.02); border:1px solid rgba(107,33,212,.15); cursor:pointer; text-align:center; transition:border-color .3s, background .3s, transform .2s; }
    .h-card:hover { border-color:var(--purple-light); background:rgba(107,33,212,.08); transform:translateY(-3px); }
    .h-card img { width:100%; image-rendering:pixelated; margin-bottom:6px; display:block; }
    .h-card-txt { font-size:8px; letter-spacing:1px; color:rgba(255,255,255,.3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    @media(max-width:760px){ .main{grid-template-columns:1fr;} .history-wrap{grid-column:1;} .history-grid{grid-template-columns:repeat(3,1fr);} }