/* One-time sign-up over the FUNAAB gate photo (same look as the volunteer page) + live counter pill */
.su{position:fixed;inset:0;z-index:2100;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#14211a;opacity:0;transition:opacity .35s ease}
.su.in{opacity:1}
.su.out{opacity:0;transition:opacity .4s ease}
.su-bg{position:fixed;inset:0;pointer-events:none}
.su-bg img{width:100%;height:100%;object-fit:cover;object-position:47% 42%;display:block}
.su-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,20,12,.45) 0%,rgba(6,20,12,.74) 38%,rgba(6,20,12,.92) 100%)}
.su-wrap{position:relative;min-height:100%;display:flex;align-items:center;justify-content:center;padding:calc(20px + var(--safe-t,0px)) 18px calc(28px + var(--safe-b,0px))}
.su-card{width:100%;max-width:420px;color:#fff;transform:translateY(18px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.su.in .su-card{transform:none}
.su.out .su-card{transform:translateY(-10px)}
.su-logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px}
.su-logo img{width:34px;height:34px;border-radius:9px;background:#fff}
.su h1{margin:18px 0 6px;font-size:28px;line-height:1.15;letter-spacing:-.3px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.su-lead{margin:0 0 20px;font-size:16.5px;line-height:1.4;color:rgba(255,255,255,.92)}
.su-f{display:block;position:relative;margin-bottom:14px}
.su-f>span{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.su-f input{width:100%;box-sizing:border-box;min-height:56px;font:inherit;font-size:17.5px;border:2px solid transparent;background:#fff;color:#18211c;border-radius:12px;padding:12px 14px;outline:none;-webkit-appearance:none;appearance:none}
.su-f input::placeholder{color:#8a948f}
.su-f input:focus{border-color:#7fd3a3;box-shadow:0 0 0 3px rgba(127,211,163,.45)}
.su-f input.bad{border-color:#ffb4a6;box-shadow:0 0 0 3px rgba(255,120,100,.35)}
.su-f.combo input{padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='22' height='22'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%230b6b3a' stroke-width='2.2'/%3E%3Cpath d='M15 15l5 5' stroke='%230b6b3a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center}
.su-err{display:block;margin:6px 2px 0;font-size:14px;font-weight:600;color:#ffcfc6}
.su-hint{display:block;margin:6px 2px 0;font-size:13.5px;color:rgba(255,255,255,.72)}
.su-hint:empty{display:none}
.su-list{list-style:none;margin:6px 0 0;padding:4px;background:#fff;border-radius:12px;max-height:min(46vh,300px);overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.35);color:#18211c;-webkit-overflow-scrolling:touch}
.su-list li{display:flex;align-items:center;gap:10px;min-height:50px;padding:8px 10px;border-radius:9px;font-size:15.5px;line-height:1.3;cursor:pointer}
.su-list li b{flex:none;min-width:76px;font-size:12.5px;letter-spacing:.3px;color:#0b6b3a;background:#e7f2ec;border-radius:6px;padding:4px 6px;text-align:center}
.su-list li.on,.su-list li:active{background:#eef7f1}
.su-list li.free span{color:#0b6b3a;font-weight:600}
.su-list li.none{color:#5e6863;cursor:default;font-size:14.5px}
.su-go{width:100%;margin-top:8px;height:58px;border:0;border-radius:14px;background:#1f9d55;color:#fff;font:inherit;font-size:18px;font-weight:700;box-shadow:0 3px 12px rgba(0,0,0,.3);transition:transform .1s,background .2s}
.su-go:active{transform:scale(.98);background:#17803f}
.su-privacy{display:flex;gap:8px;align-items:flex-start;margin:14px 2px 0;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.8)}
.su-privacy svg{flex:none;margin-top:1px}
.su-done{display:none;text-align:center;font-size:24px;font-weight:700;margin-top:6px}
.su.done form{display:none}
.su.done .su-done{display:block;animation:suPop .45s cubic-bezier(.2,1.4,.4,1)}
.su-tick{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:#1f9d55;display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.35)}
@keyframes suPop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.shake{animation:suShake .35s}
@keyframes suShake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
html.su-open .modescreen .mode-inner{visibility:hidden}
.hi-line{color:var(--green,#0b6b3a);font-weight:600}
@media(max-height:640px){.su h1{font-size:23px;margin-top:12px}.su-lead{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.su,.su-card{transition:none}.shake,.su.done .su-done{animation:none}}
/* live counter */
.live-count{display:inline-flex;align-items:center;gap:6px;margin-top:2px;height:28px;padding:0 11px 0 9px;border-radius:14px;background:rgba(255,255,255,.96);
  color:#2c3631;font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.18);pointer-events:auto;transition:opacity .25s}
.live-count b{color:#0b6b3a;font-variant-numeric:tabular-nums;font-size:13.5px}
.live-count .lc-dot{width:8px;height:8px;border-radius:50%;background:#1f9d55;box-shadow:0 0 0 0 rgba(31,157,85,.6);animation:lcPulse 2.4s infinite}
.live-count.wait b{color:#8a948f}
.live-count.bump{animation:lcBump .6s ease}
@keyframes lcPulse{0%{box-shadow:0 0 0 0 rgba(31,157,85,.55)}70%{box-shadow:0 0 0 7px rgba(31,157,85,0)}100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}}
@keyframes lcBump{30%{transform:scale(1.08);background:#e7f2ec}100%{transform:none}}
body.navigating .live-count,body.pinning .live-count{display:none}
html.su-open .uo-pill{visibility:hidden}