:root{
  --bg:#07090d;--panel:#10141b;--panel2:#0c1016;--text:#f4f7fb;--muted:#8993a3;
  --line:#202733;--accent:#63e6be;--accent2:#2dd4bf;--danger:#ff6b6b;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 50% -10%,#18222a 0,#07090d 42%);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);min-height:100vh}
.app{width:min(920px,calc(100% - 32px));margin:auto;padding:34px 0 26px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:72px}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border:1px solid #31404a;border-radius:12px;
display:grid;place-items:center;font-weight:800;letter-spacing:-1px;background:#0d1318;color:var(--accent)}
.brand strong{display:block;font-size:17px}.brand span{display:block;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.privacy{font-size:12px;color:#aeb8c5}.privacy:first-letter{color:var(--accent)}
.hero{max-width:700px;margin-bottom:34px}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--accent);font-weight:800}
h1{font-size:clamp(42px,7vw,72px);line-height:.98;letter-spacing:-.055em;margin:13px 0 20px}
h1 em{font-style:normal;color:#8793a2} .hero p{font-size:16px;line-height:1.7;color:var(--muted);max-width:650px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#c9d3df}
.card{background:linear-gradient(180deg,#11161e,#0c1016);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 24px 80px #0006}
label{display:block;font-size:13px;font-weight:700;margin-bottom:10px;color:#dbe2ea}
.input-wrap{display:flex;background:#080b10;border:1px solid #27303b;border-radius:14px;overflow:hidden}
input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:white;padding:17px;font-size:15px;font-family:ui-monospace,monospace}
.icon-btn{border:0;background:transparent;color:var(--muted);padding:0 16px;cursor:pointer}.icon-btn:hover{color:white}
.actions{display:flex;gap:10px;margin-top:13px}.actions button{border-radius:12px;padding:14px 18px;font-weight:800;cursor:pointer}
.primary{border:1px solid var(--accent);background:var(--accent);color:#07100d;flex:1}.secondary{border:1px solid #303a46;background:#151b23;color:#e9eef4}
.primary:hover{background:#82f1cf}.secondary:hover{background:#1a222c}
.result{margin-top:22px;border:1px solid #27333a;border-radius:16px;padding:20px;background:#080d11}
.account{display:flex;justify-content:space-between;gap:20px;align-items:center}.account span{font-weight:800}.account small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:15px}.code{font:800 clamp(40px,9vw,62px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.copy{border:1px solid #34414d;background:#141b23;color:#fff;padding:11px 15px;border-radius:10px;cursor:pointer}.copy:hover{border-color:var(--accent)}
.timer-line{display:flex;align-items:center;gap:12px;margin-top:18px}.progress{height:5px;flex:1;background:#202730;border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;width:100%;background:var(--accent);transition:width .2s linear}.timer-line>span{width:34px;text-align:right;color:var(--muted);font:600 12px ui-monospace,monospace}
.error{margin-top:14px;padding:12px 14px;border:1px solid #5a2b2b;background:#211112;color:#ffb4b4;border-radius:10px;font-size:13px}
.hidden{display:none!important}.scanner{margin-top:18px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#080b10}.text-btn{margin-top:12px;border:0;background:none;color:var(--muted);cursor:pointer}
#reader{width:100%;max-width:420px;margin:auto}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.features article{border:1px solid var(--line);border-radius:16px;padding:19px;background:#0c1016}.features b{color:var(--accent);font:700 11px ui-monospace,monospace}.features h3{margin:10px 0 5px;font-size:15px}.features p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
footer{display:flex;justify-content:space-between;color:#687281;font-size:11px;margin-top:28px;padding:0 4px}
@media(max-width:620px){.app{padding-top:22px}.header{margin-bottom:50px}.privacy{display:none}.card{padding:18px}.actions{flex-direction:column}.features{grid-template-columns:1fr}.code-row{align-items:flex-start;flex-direction:column}.copy{width:100%}footer{flex-direction:column;gap:7px}}