@font-face{font-family:Comfortaa;src:url('/fonts/Comfortaa-Regular.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
:root{--auth-green:#3d8f0f;--auth-bg:#f7f8f6;--auth-card:#fff;--auth-surface:#f6f7f4;--auth-ink:#1c211b;--auth-muted:#656c61;--auth-line:#e1e5dc;color-scheme:light}html.dark{--auth-bg:#0b0b0c;--auth-card:#171719;--auth-surface:#212124;--auth-ink:#f1f3ee;--auth-muted:#b0b5aa;--auth-line:#343438;color-scheme:dark}.penzi-auth-page{margin:0;min-height:100dvh;display:grid;place-items:center;background:var(--auth-bg);color:var(--auth-ink);font-family:Comfortaa,system-ui,sans-serif;padding:28px;box-sizing:border-box}.penzi-auth-page *{box-sizing:border-box}.auth-shell{width:min(100%,470px)}.auth-brand{display:flex;align-items:center;gap:13px;margin-bottom:22px}.auth-brand img{width:70px;height:48px;object-fit:contain;background:#fff;padding:4px}.auth-brand strong{display:block;font-size:14px}.auth-brand span{display:block;font-size:10px;color:var(--auth-muted);margin-top:5px}.auth-theme{margin-left:auto;width:38px;height:38px;border:1px solid var(--auth-line);background:var(--auth-card);color:var(--auth-ink);border-radius:10px;font-size:20px;cursor:pointer}.auth-card{padding:32px;background:var(--auth-card);border:1px solid var(--auth-line);border-radius:22px;box-shadow:0 18px 70px #00000008;animation:auth-appear .2s ease-out}.auth-emblem{width:45px;height:45px;background:color-mix(in srgb,var(--auth-green) 10%,transparent);color:var(--auth-green);border-radius:13px;display:grid;place-items:center;margin-bottom:22px}.auth-emblem svg{width:26px;height:26px}.auth-eyebrow{font-size:9px;letter-spacing:.14em;color:var(--auth-muted)}.auth-card h1{font-size:27px;line-height:1.3;margin:10px 0}.auth-card p{font-size:12px;line-height:1.8;color:var(--auth-muted)}.auth-label{display:block;margin-top:25px;font-size:11px;font-weight:700}.otp-stage{position:relative;height:100px;--tile:42px;--gap:10px}.auth-code{width:100%;height:55px;margin-top:20px;background:var(--auth-surface);border:1px solid var(--auth-line);border-radius:10px;font:20px Comfortaa;color:var(--auth-ink);text-align:center}.otp-tiles,.otp-ring,.otp-success{display:none}.otp-enhanced .otp-stage{height:180px;transition:height .2s}.otp-enhanced .auth-code{position:absolute;inset:0;margin:0;width:100%;height:100%;opacity:0;cursor:text;z-index:4}.otp-enhanced .otp-tiles{display:block;position:absolute;inset:0;transform-origin:center}.otp-tile{position:absolute;left:50%;top:50%;width:var(--tile);height:50px;transform:translate(-50%,-50%) translate(calc((var(--index) - 2.5)*(var(--tile) + var(--gap))),0);transition:transform .3s ease,opacity .25s;border:1px solid var(--auth-line);background:var(--auth-surface);border-radius:11px;display:grid;place-items:center;font-size:23px;color:var(--auth-ink)}.otp-tile.active{border-color:var(--auth-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--auth-green) 12%,transparent)}.otp-tile.filled{border-color:color-mix(in srgb,var(--auth-green) 45%,var(--auth-line))}.otp-tile.digit-pop span{animation:digit-pop .2s ease-out}.otp-status{min-height:20px;margin:0 0 12px;text-align:center;font-size:11px;color:var(--auth-muted)}.auth-trust{display:flex;align-items:flex-start;gap:11px;font-size:11px;line-height:1.6;margin:15px 0 20px}.auth-trust input{accent-color:var(--auth-green);width:17px;height:17px;margin:0;flex-shrink:0}.auth-trust strong{font-weight:500}.auth-trust small{display:block;color:var(--auth-muted);font-size:10px;margin-top:4px}.auth-submit{width:100%;height:49px;border:0;border-radius:11px;background:color-mix(in srgb,var(--auth-green) 88%,#000);color:#fff;font:700 12px Comfortaa;cursor:pointer}.auth-submit:disabled{opacity:.65;cursor:default}.auth-recovery{display:block;margin:18px auto 0;color:var(--auth-muted);border:0;background:none;font:11px Comfortaa;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.auth-restart{font-size:11px;color:var(--auth-green)}.auth-footnote{text-align:center;border-top:1px solid var(--auth-line);padding-top:18px;margin:22px 0 0!important;font-size:10px!important}.auth-tagline{text-align:center;font-size:9px;color:var(--auth-muted);line-height:1.7;margin:20px 0}.auth-error{padding:12px;border:1px solid #d8505066;background:#d8505011;color:#bb3535;font-size:11px;line-height:1.7;border-radius:9px;margin-bottom:15px}.dark .auth-error{color:#ffa3a3}.auth-card[data-state=pending] .otp-tiles{animation:otp-orbit 2.4s linear .3s infinite}.auth-card[data-state=pending] .otp-tile{transform:translate(-50%,-50%) translate(var(--orbit-x),var(--orbit-y));border-color:color-mix(in srgb,var(--auth-green) 60%,var(--auth-line));box-shadow:0 0 15px color-mix(in srgb,var(--auth-green) 8%,transparent)}.auth-card[data-state=pending] .otp-tile span{animation:otp-counter 2.4s linear .3s infinite}.auth-card[data-state=pending] .otp-ring{display:block;position:absolute;left:50%;top:50%;width:128px;height:128px;margin:-64px;border:1px solid color-mix(in srgb,var(--auth-green) 18%,transparent);border-radius:50%;opacity:0;animation:ring-appear .3s ease .2s forwards}.otp-ring:after{content:'';position:absolute;inset:-5px;border:2px solid transparent;border-top-color:var(--auth-green);border-radius:50%;animation:otp-orbit 1.3s linear infinite}.auth-card[data-state=success] .otp-tile{transform:translate(-50%,-50%) scale(.15);opacity:0}.auth-card[data-state=success] .otp-success{display:grid;place-items:center;position:absolute;left:50%;top:50%;width:75px;height:75px;margin:-37.5px;border-radius:50%;background:var(--auth-green);color:#fff;animation:success-pulse .4s ease-out}.otp-success svg{width:55px;height:55px;fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:55;stroke-dashoffset:55;animation:check-draw .3s ease .05s forwards}.otp-success i{position:absolute;left:50%;top:50%;width:4px;height:4px;background:var(--auth-green);border-radius:50%;animation:particle .4s ease-out forwards;--angle:calc(var(--particle)*45deg)}.auth-card[data-state=success] .otp-status{color:var(--auth-green)}.auth-card[data-state=error] .otp-tile{border-color:#d85050}.recovery-mode .otp-tiles,.recovery-mode .otp-ring{display:none!important}.otp-enhanced.recovery-mode .otp-stage{height:95px}.otp-enhanced.recovery-mode .auth-code{position:relative;inset:auto;opacity:1;height:52px;margin-top:18px;font-size:16px;letter-spacing:.08em}.recovery-mode[data-state=pending] .auth-code{opacity:.5}[hidden]{display:none!important}.auth-card :is(button,a,input):focus-visible,.auth-theme:focus-visible{outline:3px solid var(--auth-green);outline-offset:4px}.otp-enhanced .auth-code:focus-visible{outline:none}.otp-enhanced .otp-stage:focus-within .otp-tile.active{border-color:var(--auth-green)}
@keyframes auth-appear{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes digit-pop{50%{transform:scale(1.15);color:var(--auth-green)}}@keyframes otp-orbit{to{transform:rotate(360deg)}}@keyframes otp-counter{to{transform:rotate(-360deg)}}@keyframes ring-appear{to{opacity:1}}@keyframes check-draw{to{stroke-dashoffset:0}}@keyframes success-pulse{from{box-shadow:0 0 0 0 #3d8f0f33;transform:scale(.75)}to{box-shadow:0 0 0 24px #3d8f0f00;transform:scale(1)}}@keyframes particle{from{transform:rotate(var(--angle)) translateX(20px);opacity:1}to{transform:rotate(var(--angle)) translateX(90px);opacity:0}}
@media(max-width:480px){.penzi-auth-page{padding:20px 14px}.auth-card{padding:25px 18px}.auth-card h1{font-size:25px}.otp-stage{--tile:36px;--gap:8px}.auth-brand{gap:10px}.auth-brand span{font-size:9px}}@media(prefers-reduced-motion:reduce){.penzi-auth-page *,.penzi-auth-page *:before,.penzi-auth-page *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.auth-card[data-state=pending] .otp-tile{transform:translate(-50%,-50%) translate(calc((var(--index) - 2.5)*(var(--tile) + var(--gap))),0)}.auth-card[data-state=pending] .otp-ring{display:none}.otp-success svg{stroke-dashoffset:0}}
.auth-card[data-state=success] .auth-code{opacity:0!important}.auth-card[data-state=pending] .auth-trust{pointer-events:none}.auth-card[data-state=pending] .auth-trust input{opacity:.6}

@media(max-height:850px){.auth-card{padding:25px 28px}.auth-emblem{width:38px;height:38px;margin-bottom:15px}.auth-card h1{font-size:25px}.auth-label{margin-top:18px}.auth-trust{margin:10px 0 16px}.auth-footnote{margin-top:17px!important;padding-top:14px}.auth-brand{margin-bottom:17px}.auth-tagline{margin:15px 0}}
html.dark .penzi-hero:before{background:none}