@font-face{font-family:ETCFont;src:url("../fonts/ETCFont.ttf") format("truetype");font-display:swap}
:root{--purple:#4800ff;--black:#000;--white:#fff;--bg:#f5f5fb;--soft:#ddddf5;--muted:#666;--danger:#a90024;--radius:14px;--shadow:0 8px 22px rgba(0,0,0,.09)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;scroll-behavior:smooth}
body{font-family:Bahnschrift,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 0 0,#fff 0,#f0ecff 45%,#fff 80%);color:var(--black);display:flex;flex-direction:column;min-height:100vh}
button,input{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.hero{background:var(--purple);color:var(--white);padding:20px max(18px,env(safe-area-inset-left));box-shadow:0 8px 18px rgba(0,0,0,.25)}
.hero__inner{max-width:720px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px}
.hero h1,.reader h2,.setup h2,dialog h2{font-family:ETCFont,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.16em;margin:0;image-rendering:pixelated;-webkit-font-smoothing:none}
.hero h1{font-size:clamp(1.75rem,8vw,2.4rem);white-space:nowrap}.subtitle{font-size:.86rem;line-height:1.4;margin:7px 0 0;opacity:.9;max-width:25rem}
.tap-mark{width:68px;height:68px;flex:0 0 68px;background:#fff;color:#000;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.35);display:grid;place-content:center;text-align:center;border:7px solid #fff;outline:4px solid #000;outline-offset:-11px}
.tap-mark span,.tap-mark strong{font-family:ETCFont,system-ui;font-size:.55rem;letter-spacing:.1em}.tap-mark strong{font-size:.9rem;color:var(--purple)}
.page{width:min(100%,720px);margin:0 auto;padding:14px 18px 42px;flex:1}
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.connection{font-size:.78rem;color:#555}.connection__dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#0ecc00;margin-right:7px;box-shadow:0 0 0 3px rgba(14,204,0,.13)}
.icon-button{width:42px;height:42px;border:1px solid var(--soft);border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.6rem}.icon-button svg{width:20px;fill:#111}
.card{background:var(--bg);border:1px solid var(--soft);border-radius:var(--radius);box-shadow:0 4px 8px rgba(0,0,0,.05)}
.reader{min-height:430px;padding:34px 22px;display:grid;place-items:center;text-align:center;border-top:7px solid var(--purple);overflow:hidden;position:relative}
.reader>div{width:100%}.reader h2,.setup h2,dialog h2{font-size:1.3rem;line-height:1.35;margin:8px 0 12px}.reader p{line-height:1.55;margin:0 auto 20px;max-width:27rem;color:#444}
.eyebrow{font-family:ETCFont,system-ui,sans-serif!important;text-transform:uppercase;letter-spacing:.2em;font-size:.67rem!important;color:#666!important;margin:0 0 6px!important}.eyebrow--light{color:#fff!important;opacity:.8}
.nfc-rings{height:112px;width:112px;margin:0 auto 22px;position:relative;display:grid;place-items:center}.nfc-rings i{position:absolute;border:4px solid var(--purple);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(45deg)}.nfc-rings i:nth-child(1){width:42px;height:42px}.nfc-rings i:nth-child(2){width:72px;height:72px}.nfc-rings i:nth-child(3){width:102px;height:102px}.nfc-rings span{width:12px;height:12px;background:#000;border-radius:2px}
.button{width:100%;min-height:50px;border:0;border-radius:10px;padding:12px 18px;font-family:ETCFont,system-ui,sans-serif;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;transition:transform .15s,opacity .15s}.button:active{transform:translateY(1px)}.button:disabled{opacity:.55;cursor:wait}.button--primary{background:var(--purple);color:#fff;box-shadow:0 5px 12px rgba(72,0,255,.2)}.button--dark{background:#111;color:#fff}.button--danger{background:#3b0000;color:#fff}.button--sound{margin-top:14px;background:#fff;border:1px solid var(--soft);color:#111}.button--sound.is-enabled{background:#111;color:#fff}
.spinner{width:68px;height:68px;margin:0 auto 26px;border:6px solid var(--soft);border-top-color:var(--purple);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.result-icon{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:#111;color:#fff;font-family:ETCFont;font-size:2rem;box-shadow:0 0 0 8px rgba(72,0,255,.12)}.reader.is-success{border-top-color:#0ecc00}.reader.is-success .result-icon{background:#0b7e03}.reader.is-error{border-top-color:var(--danger)}.reader.is-error .result-icon{background:var(--danger)}
.result-message{font-size:.93rem}.receipt{background:#fff;border:1px solid var(--soft);border-radius:12px;margin:22px 0;padding:4px 15px;text-align:left}.receipt div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid #ececf5}.receipt div:last-child{border:0}.receipt dt{color:#666;font-size:.82rem}.receipt dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.setup{padding:24px 20px;border-left:8px solid var(--purple)}.setup>p{line-height:1.6;font-size:.92rem}.command-row{display:flex;align-items:stretch;margin:18px 0}.command{min-width:0;flex:1;padding:14px 12px;background:#111;color:#fff;border-radius:9px 0 0 9px;font-size:.84rem;overflow:auto;white-space:nowrap}.copy-button{border:0;background:var(--purple);color:#fff;padding:0 13px;border-radius:0 9px 9px 0;font-size:.75rem;font-weight:700}
.code-form{display:grid;gap:9px}.code-form label,.settings-section>label{font-size:.79rem;font-weight:700}.code-form input{width:100%;border:1px solid #bbb;border-radius:9px;background:#fff;padding:14px;font-size:1.2rem;letter-spacing:.2em;font-variant-numeric:tabular-nums}.code-form input:focus{outline:3px solid rgba(72,0,255,.17);border-color:var(--purple)}.field-error{color:var(--danger);font-size:.78rem;margin:0}.sound-note{text-align:center;color:#777;font-size:.72rem;margin:8px 0}
dialog{width:min(calc(100% - 24px),600px);max-height:calc(100dvh - 24px);border:0;border-radius:16px;padding:0;box-shadow:0 22px 70px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(0,0,0,.55)}.dialog__head{display:flex;justify-content:space-between;align-items:center;padding:20px;background:var(--purple);color:#fff}.dialog__head .eyebrow{color:#fff!important}.dialog__head h2{font-size:1.05rem}.settings-section{padding:20px;border-bottom:1px solid var(--soft)}.settings-section h3{font-family:ETCFont;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px}.settings-section p{font-size:.84rem;color:#555}.settings-section--danger{background:#fff8f8}.stored-code-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;background:var(--bg);padding:13px;border-radius:9px}.stored-code-row code{letter-spacing:.16em;font-size:1rem}.text-button{border:0;background:none;color:var(--purple);font-weight:700}.code-form--compact{margin-top:15px}
footer{padding:18px;text-align:center;background:#fafafa;border-top:1px solid var(--soft);color:#777;font-size:.75rem}
@media(min-width:620px){.page{padding-top:22px}.reader{min-height:460px;padding:45px}.button{width:auto;min-width:220px}.setup .button,.settings-section .button{width:100%}.hero{padding-block:24px}.tap-mark{width:78px;height:78px;flex-basis:78px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.spinner{animation-duration:1.8s}}