:root{--navy:#081828;--navy2:#0f2740;--cyan:#00e1ff;--ice:#f2f2f2;--sky:#58c0e0;--gold:#e8b050;--err:#ff7a7a;
  --st:env(safe-area-inset-top);--sb:env(safe-area-inset-bottom)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--navy);color:var(--ice);overscroll-behavior:none;
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.screen{min-height:100dvh;padding:calc(28px + var(--st)) 22px calc(28px + var(--sb));max-width:480px;margin:0 auto;display:flex;flex-direction:column}
.center{align-items:center;justify-content:center;text-align:center;gap:14px}
.logo{display:block;margin:6px 0 34px}.logo.sm{margin:0 0 4px;height:auto}
h1{font-size:34px;line-height:1.05;margin:0 0 8px;letter-spacing:-.02em}
h2{font-size:26px;margin:0}
.lead{color:#b9c6d4;margin:0 0 26px;font-size:17px}
form{display:flex;flex-direction:column;gap:16px}
label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;color:#b9c6d4}
input{font:inherit;font-size:17px;color:var(--ice);background:var(--navy2);border:1.5px solid #234062;border-radius:14px;padding:16px;width:100%;min-height:54px;appearance:none;-webkit-appearance:none}
input::placeholder{color:#5f7690}
input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px #00e1ff26}
input.bad{border-color:var(--err)}
.btn{font:inherit;font-weight:800;font-size:18px;min-height:58px;border:0;border-radius:16px;background:var(--cyan);color:var(--navy);padding:0 22px;width:100%;cursor:pointer;margin-top:6px;transition:transform .1s}
.btn:active{transform:scale(.98)}.btn[disabled]{opacity:.6}
.err{color:var(--err);margin:0;font-size:14px;font-weight:600}
.fine{color:#7f93a8;font-size:13px;margin:22px 0 0}
.link{background:none;border:0;color:inherit;font:inherit;font-size:13px;text-decoration:underline;opacity:.75;padding:10px;cursor:pointer}
.install{margin-top:18px;padding:14px 16px;border:1px dashed #2d4d75;border-radius:14px;font-size:14px;color:#b9c6d4}
.install b{color:var(--cyan)}
.spinner{width:46px;height:46px;border:4px solid #234062;border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.icon{width:76px;height:76px;border-radius:50%;background:#ffffff14;display:grid;place-items:center;font-size:42px;font-weight:800;color:var(--cyan)}
.icon.warn{color:var(--gold)}
#issue .btn{margin-top:14px}

/* Tela cheia de confirmação */
.pass{position:fixed;inset:0;max-width:none;z-index:9;align-items:center;justify-content:center;text-align:center;gap:14px;overflow:hidden;color:var(--navy)}
.pass.comum{background:linear-gradient(160deg,#7fd3ee,var(--sky) 55%,#3fa8cc)}
.pass.vip{background:linear-gradient(160deg,#f6cf8a,var(--gold) 55%,#c98d2c)}
.pass>*{position:relative;z-index:1}
.pass .logo{filter:brightness(0) saturate(100%) invert(9%) sepia(37%) saturate(1400%) hue-rotate(178deg)}
.check{width:104px;height:104px;fill:none;stroke:var(--navy);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;margin-top:6px}
.check circle{fill:#08182814;stroke-dasharray:151;stroke-dashoffset:151;animation:draw .6s ease-out forwards}
.check path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .4s .5s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.k{margin:6px 0 0;font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pass h2{font-size:34px;line-height:1.1;letter-spacing:-.02em;padding:0 10px}
.ticket{background:var(--navy);color:var(--ice);border-radius:22px;padding:14px 30px;margin-top:6px;box-shadow:0 10px 30px #0824}
.ticket span{white-space:nowrap;font-size:26px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.pass.vip .ticket span{color:var(--gold)}
.band{width:calc(100% - 44px);max-width:420px;height:34px;border-radius:6px;margin-top:12px;background:var(--navy);overflow:hidden;box-shadow:0 4px 14px #0823}
.band i{display:block;height:100%;background:var(--sky);-webkit-mask-image:url(/logo-mark.svg);mask-image:url(/logo-mark.svg);-webkit-mask-size:auto 58%;mask-size:auto 58%;-webkit-mask-repeat:space;mask-repeat:space;-webkit-mask-position:center;mask-position:center}
.pass.vip .band i{background:var(--gold)}
.pulseira{margin:0;font-weight:700;font-size:15px;opacity:.85}
.foot{position:absolute;bottom:calc(14px + var(--sb));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.foot time{font-variant-numeric:tabular-nums;font-size:26px;font-weight:800}
.hint{font-size:13px;font-weight:700;opacity:.8}
.shine{position:absolute!important;inset:-20%;z-index:0!important;background:linear-gradient(105deg,transparent 40%,#ffffff55 50%,transparent 60%);animation:shine 3.2s linear infinite}
@keyframes shine{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
@media (prefers-reduced-motion:reduce){.shine,.check circle,.check path{animation:none;stroke-dashoffset:0}.shine{display:none}}

.code{margin:0;font-size:15px;font-weight:700;opacity:.9}.code b{font-variant-numeric:tabular-nums;letter-spacing:.12em;font-size:20px}
a{color:inherit}
.h2{font-size:19px;margin:18px 0 6px}.txt{font-size:15px;color:#b9c6d4;margin:0}