:root{
      --bg1:#05070d; --bg2:#0a1122; --bg3:#0b1328;
      --txt:#eaf0ff; --muted:#a7b1d6; --stroke:rgba(255,255,255,.12);
      --glass:rgba(255,255,255,.06);
      --glow-strong:0 0 40px rgba(130,160,255,.18), 0 0 120px rgba(80,120,255,.12);
      --glow-soft:0 0 20px rgba(110,140,255,.22);
      --accent:#b9c8ff; --accent2:#ffdca8;
      --green-success: #8be58b;
      --red-error: #ff8b8b;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; color:var(--txt);
      font-family:"Scheherazade New", system-ui, -apple-system, "Segoe UI", Tahoma, Arial;
      background:radial-gradient(1100px 680px at 50% -10%, var(--bg3), var(--bg2) 45%, var(--bg1) 100%);
      overflow-x:hidden; overflow-y:auto;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }

    .layer{position:fixed; inset:0; pointer-events:none}
    .stars{opacity:.22; background:
      radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.35), transparent 60%),
      radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.35), transparent 60%),
      radial-gradient(1.4px 1.4px at 30% 70%, rgba(255,255,255,.30), transparent 60%),
      radial-gradient(1.2px 1.2px at 60% 60%, rgba(255,255,255,.26), transparent 60%);
      animation: twinkle 9s ease-in-out infinite alternate}
    @keyframes twinkle{from{transform:translate3d(-0.6%,0,0)}to{transform:translate3d(0.6%,0,0)}}
    .fog::before,.fog::after{content:""; position:absolute; inset:-18vh -18vw; filter:blur(28px); mix-blend-mode:screen;
      background: radial-gradient(48vw 28vh at 18% 16%, rgba(150,180,255,.08), transparent 60%),
                  radial-gradient(40vw 30vh at 82% 12%, rgba(255,200,170,.06), transparent 60%),
                  radial-gradient(70vw 45vh at 50% 86%, rgba(180,210,255,.06), transparent 60%);
      animation:fog 80s linear infinite alternate}
    .fog::after{animation-duration:110s; transform:scale(1.1); opacity:.9}
    .grain{opacity:.05; mix-blend-mode:screen; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="1.1" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.35"/></svg>'); background-size:140px 140px}

    .wrap{min-height:100%; display:grid; place-items:center; padding:4vmin}

    .card{
      position:relative; width:min(980px, 92vw); border-radius:28px; padding:28px 26px;
      backdrop-filter: blur(14px) saturate(118%);
      background:linear-gradient(180deg, rgba(8,12,22,.55), rgba(8,12,22,.38));
      border:1px solid var(--stroke); box-shadow:var(--glow-strong)
    }
    .halo{position:absolute; inset:-2px; border-radius:28px; pointer-events:none;
      background:radial-gradient(60% 60% at 50% 0%, rgba(157,180,255,.16), transparent 60%); filter:blur(22px)}

    .topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px}
    .title{display:flex; flex-direction:column; gap:4px;}
    h1{margin:0; font-size:clamp(22px,4.4vw,40px); letter-spacing:.02em; text-shadow:var(--glow-soft)}
    .subtitle{margin:0; color:var(--muted)}

    .actions{display:flex; justify-content:center; margin:18px 0 6px; gap:12px; flex-direction:column; align-items:center}
    .btn{
      position:relative; overflow:hidden;
      border:1px solid var(--stroke);
      background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
      color:var(--txt); padding:12px 18px; border-radius:16px; cursor:pointer;
      font-size:18px; line-height:1; user-select:none;
      transition: transform .08s ease, box-shadow .25s ease, background .25s ease;
      box-shadow:0 8px 24px rgba(120,150,255,.08);
      font-family: inherit;
    }
    .btn:hover{box-shadow:0 10px 28px rgba(120,150,255,.14)}
    .btn:active{transform:translateY(1px) scale(.99)}
    .btn .pulse{
      position:absolute; inset:0; border-radius:inherit; pointer-events:none;
      background:radial-gradient(80% 100% at 50% 0%, rgba(160,190,255,.12), transparent 70%);
      opacity:0; transition:opacity .3s ease}
    .btn:active .pulse{opacity:1}

    .chips{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; color:var(--muted); margin:10px 0 12px}
    .chip{border:1px solid var(--stroke); border-radius:999px; padding:8px 12px; background:rgba(255,255,255,0.05)}

    .reader{
      position:fixed; inset:0; z-index:50;
      display:flex; flex-direction:column;
      background:linear-gradient(180deg, rgba(6,10,18,.88), rgba(6,10,18,.94));
      backdrop-filter: blur(8px);
      transform:translateY(100%);
      opacity:0;
      transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
    }
    .reader.show{ transform:translateY(0); opacity:1; }

    .reader-head{
      display:flex; align-items:center; justify-content:center; gap:10px;
      padding:10px 12px; border-bottom:1px solid var(--stroke);
      background:linear-gradient(180deg, rgba(12,16,26,.6), rgba(8,12,20,.4));
    }
    .reader-head .chip{background:rgba(255,255,255,.06)}

    /* inputs */
    .field {
      width:100%;
      max-width:420px;
      display:flex;
      gap:8px;
      flex-direction:column;
      align-items:stretch;
    }
    .field label{font-size:1rem; color:var(--muted); margin-bottom:6px}
    .input {
      padding:12px 14px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.06);
      background:rgba(255,255,255,0.02);
      color:var(--txt);
      font-size:18px;
      outline:none;
      transition: box-shadow .12s ease, transform .08s ease;
      font-family: inherit;
      text-align:right;
    }
    .input:focus{ box-shadow:0 6px 18px rgba(120,150,255,.08); transform:translateY(-2px) }
    
     .exempt{margin-top:8px;color:var(--green-success);font-weight:700;display:none;text-align:center}
    .error{color:var(--red-error);border-color:rgba(255,100,100,0.12);background:rgba(255,50,50,0.02)}

    .result {
      margin-top:12px;
      padding:10px 14px;
      border-radius:12px;
      background:rgba(255,255,255,0.03);
      border:1px solid rgba(255,255,255,0.04);
      font-size:18px;
      color:var(--accent);
      min-width:240px;
      text-align:center;
    }

    .error {
      color:var(--red-error);
      border-color: rgba(255,100,100,0.12);
      background: rgba(255,50,50,0.02);
    }

    @media (max-width:540px){
      .btn{padding:10px 14px; font-size:16px; border-radius:12px}
      h1{font-size:20px}
    }

    /* ========== slideUp animation (appear) ========== */
    @keyframes slideUp {
      to { transform: translateY(0); opacity: 1; }
    }
    .appear {
      transform: translateY(30px);
      opacity: 0;
      animation: slideUp 0.7s ease-out forwards;
    }

*{
  user-select: none;
}