:root{
  --bg:#080809;
  --panel:#111214;
  --text:#f5f5f3;
  --muted:#8a8d92;
  --yellow:#ffcb05;
  --yellow-2:#f5b900;
  --yellow-soft:#ffe36b;
  --danger:#ff817a;
  --font-ui:"Bahnschrift SemiCondensed","Bahnschrift","Arial Narrow","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  min-height:100%;margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-ui);overflow-x:hidden;
}
button,input{font-family:inherit}
button{touch-action:manipulation}
.auth-background,.auth-overlay{position:fixed;inset:0;pointer-events:none}
.auth-background{
  z-index:0;background:url("../assets/vloz-auth-background.webp") center/cover no-repeat;
  transform:scale(1.012);
}
.auth-overlay{
  z-index:1;
  background:
    linear-gradient(180deg,rgba(2,2,3,.40) 0%,rgba(2,2,3,.24) 25%,rgba(2,2,3,.43) 64%,rgba(2,2,3,.78) 100%),
    radial-gradient(circle at 50% 32%,transparent 0 29%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.60) 100%);
}
.page-shell{position:relative;z-index:2;width:min(100%,760px);margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom))}
.auth-view{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.auth-view.is-leaving{animation:authLeave .30s ease both}
@keyframes authLeave{to{opacity:0;transform:translateY(-6px) scale(.987)}}

.brand-block{width:100%;text-align:center;padding-top:2px}
.brand-logo{display:block;width:min(76vw,440px);height:auto;margin:0 auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.74))}
.brand-kicker{margin:6px 0 0;color:#d5d5d1;font-size:10px;font-weight:900;letter-spacing:.21em}

.feature-rail{
  width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;
  border:1px solid rgba(255,255,255,.23);border-radius:18px;
  background:linear-gradient(180deg,rgba(17,17,18,.82),rgba(7,7,8,.89));
  box-shadow:0 18px 46px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.feature-item{position:relative;min-width:0;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:11px 6px;text-align:center}
.feature-item:not(:last-child)::after{content:"";position:absolute;right:0;top:18%;bottom:18%;width:1px;background:rgba(255,255,255,.15)}
.feature-icon{width:32px;height:32px;display:grid;place-items:center;color:var(--yellow)}
.feature-icon svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(255,203,5,.18))}
.feature-item strong{color:#f4f4f0;font-size:10px;line-height:1.12;font-weight:900;letter-spacing:.035em}

/* Relógio: estrutura e tipografia copiadas da linguagem do código-base; cromia adaptada para Vloz. */
.auth-digital-clock{
  position:relative;width:100%;max-width:570px;min-height:106px;margin:0 auto;padding:17px 16px 14px;
  display:grid;grid-template-columns:1.18fr repeat(3,1fr);align-items:center;
  border:1px solid rgba(176,179,184,.26);border-radius:17px;overflow:hidden;
  background:linear-gradient(100deg,#050607 0%,#0d0e10 28%,#1a1b1e 62%,#303237 100%);
  box-shadow:inset 1px 1px 0 rgba(190,193,198,.10),inset -8px -8px 20px rgba(0,0,0,.24),0 16px 34px rgba(0,0,0,.36);
  font-family:var(--font-ui)
}
.auth-digital-clock::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(190,193,198,.075),transparent 38%),radial-gradient(circle at 88% 18%,rgba(180,184,190,.08),transparent 29%)}
.auth-digital-clock .clock-col{position:relative;z-index:1;min-width:0;text-align:center;padding:2px 9px}
.auth-digital-clock .clock-col:not(:last-child)::before,.auth-digital-clock .clock-col:not(:last-child)::after{content:"";position:absolute;right:-2px;width:4px;height:4px;border-radius:50%;background:rgba(174,177,183,.54);box-shadow:0 0 6px rgba(150,154,160,.12)}
.auth-digital-clock .clock-col:not(:last-child)::before{top:33%}.auth-digital-clock .clock-col:not(:last-child)::after{top:54%}
.clock-timer,.clock-label{margin:0;padding:0}
.clock-timer{color:#f7f7f4;font-size:30px;line-height:1;font-weight:900;letter-spacing:.025em;text-transform:uppercase;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(255,255,255,.10)}
.clock-col-day .clock-timer{color:#c8cbd0;font-size:25px;letter-spacing:.055em;text-shadow:0 0 10px rgba(190,194,200,.08)}
.clock-label{margin-top:8px;color:rgba(205,208,213,.52);font-size:9px;line-height:1;font-weight:900;letter-spacing:.095em;text-transform:uppercase}

.auth-card{
  width:min(100%,570px);padding:23px 22px 18px;border:1px solid rgba(255,255,255,.28);border-radius:23px;
  background:radial-gradient(circle at 50% 0%,rgba(255,203,5,.035),transparent 36%),linear-gradient(180deg,rgba(28,28,29,.93),rgba(8,8,9,.95));
  box-shadow:0 26px 58px rgba(0,0,0,.54),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.auth-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:20px;color:var(--yellow);font-size:10px;font-weight:950;letter-spacing:.21em}
.auth-heading-line{height:1px;background:linear-gradient(90deg,transparent,var(--yellow));opacity:.72}.auth-heading-line:last-child{background:linear-gradient(90deg,var(--yellow),transparent)}

/* Campo Gestor: CSS-base preservado e convertido do ciano para amarelo Vloz. */
.auth-user-field{display:grid;gap:6px;width:100%;margin:0 auto}
.auth-user-label{color:#85888e;font-size:10px;font-weight:950;letter-spacing:.13em}
.auth-user-control{
  min-height:56px;padding:6px 12px 6px 7px;border:1px solid rgba(255,203,5,.22);border-radius:16px;
  display:grid;grid-template-columns:42px minmax(0,1fr);gap:9px;align-items:center;
  background:linear-gradient(145deg,rgba(55,51,38,.74),rgba(13,13,12,.94));
  box-shadow:inset 2px 2px 2px rgba(255,255,255,.04),inset -5px -6px 12px rgba(0,0,0,.16),0 9px 18px rgba(0,0,0,.18);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease
}
.auth-user-control input{width:100%;min-width:0;height:42px;border:0;outline:0;background:transparent;color:#f6f6f2;caret-color:var(--yellow);font-size:16px;font-weight:850;letter-spacing:.015em;-webkit-appearance:none;appearance:none}
.auth-user-control input::placeholder{color:#77746b;font-weight:700}
.auth-user-orb{
  position:relative;width:39px;height:39px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#7d7660,#5d563d 40%,#3f3925 75%,#2c281a);
  border:1px solid rgba(255,237,172,.20);
  box-shadow:inset 2px 2px 5px rgba(255,255,255,.10),inset -4px -5px 8px rgba(18,14,2,.44),0 6px 10px rgba(0,0,0,.28)
}
.auth-user-orb::before{content:"";position:absolute;inset:10px;border-radius:50%;border:2px solid rgba(214,167,0,.30);box-shadow:inset 0 2px 5px rgba(0,0,0,.24);transition:.18s ease}
.auth-user-field.is-focused .auth-user-control{border-color:rgba(255,203,5,.82);box-shadow:0 0 0 3px rgba(255,203,5,.055),0 10px 22px rgba(0,0,0,.20),inset 2px 2px 2px rgba(255,255,255,.035)}
.auth-user-field.is-focused .auth-user-orb::before,.auth-user-field.has-value .auth-user-orb::before{border-color:#ffdb31;box-shadow:0 0 6px #ffc400,0 0 14px rgba(255,196,0,.72),inset 0 0 7px rgba(255,221,71,.74)}
.auth-user-field.has-value .auth-user-orb{animation:userOrbBreath 2.25s ease-in-out infinite}
@keyframes userOrbBreath{0%,100%{box-shadow:inset 2px 2px 5px rgba(255,255,255,.10),inset -4px -5px 8px rgba(18,14,2,.44),0 6px 10px rgba(0,0,0,.28),0 0 0 rgba(255,203,5,0)}50%{box-shadow:inset 2px 2px 5px rgba(255,255,255,.10),inset -4px -5px 8px rgba(18,14,2,.44),0 6px 10px rgba(0,0,0,.28),0 0 17px rgba(255,203,5,.18)}}

/* V14 — PIN amarelo premium em profundidade; dígitos e máscara em preto. */
.pin-access{position:relative;width:100%;margin:15px auto 0;padding-top:2px}
.pin-hidden-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;border:0;outline:0}
.pin-digits{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;cursor:text;user-select:none}
.pin-digit{position:relative;height:72px;min-width:0;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(138,91,0,.78);border-radius:14px;background:linear-gradient(145deg,#ffd11a 0%,#f2b600 48%,#cf8c00 100%);box-shadow:0 14px 23px rgba(0,0,0,.38),0 6px 11px rgba(63,39,0,.28),inset 0 2px 0 rgba(255,219,51,.45),inset 0 -3px 0 rgba(112,67,0,.32);transition:border-color .25s,box-shadow .25s,transform .25s,filter .25s}
.pin-digit::before,.pin-digit::after{content:"";position:absolute;z-index:2;transition:opacity .25s,transform .25s}
.pin-digit::before{left:15%;bottom:0;width:70%;height:3px;border-radius:10px;background:#111214;opacity:0;transform:translateY(0);box-shadow:0 1px 0 rgba(255,202,10,.20)}
.pin-digit::after{width:20px;height:20px;border-radius:50%;background:#111214;opacity:0;transform:scale(.25);box-shadow:inset 0 1px 0 rgba(54,55,58,.60),0 2px 4px rgba(83,52,0,.20)}
.pin-digit.focused{border-color:#e5ae00;filter:brightness(1.035);box-shadow:0 16px 27px rgba(0,0,0,.42),0 7px 13px rgba(65,40,0,.31),0 0 0 2px rgba(255,202,10,.16),inset 0 2px 0 rgba(255,219,51,.50),inset 0 -3px 0 rgba(112,67,0,.34)}
.pin-digit.focused::before{animation:pinBlink 2s ease-in-out infinite;opacity:1;transform:translateY(-10px)}
@keyframes pinBlink{0%,100%{opacity:1}50%{opacity:.35}}
.pin-digit.hidden::after{opacity:1;transform:scale(1)}
.pin-digit-value{position:relative;z-index:1;color:#101112;font-family:var(--font-ui);font-size:31px;font-weight:950;line-height:1;text-shadow:0 1px 0 rgba(255,216,45,.26);transition:opacity .25s,transform .25s}
.pin-digit.hidden .pin-digit-value{opacity:0;transform:scale(.25)}
.pin-caption{min-height:30px;margin:9px 0 0;display:flex;align-items:center;justify-content:center;gap:7px;color:#f0f0ec;font-size:12px}
.pin-caption strong{font-weight:900}.pin-caption button{min-height:30px;padding:0 3px;border:0;background:transparent;color:#7e7e7b;font:inherit;font-weight:700;cursor:pointer}.pin-caption button:focus-visible{outline:2px solid rgba(255,203,5,.52);outline-offset:2px;border-radius:4px}
.login-message{width:100%;min-height:20px;margin:0 auto;text-align:center;color:#999b9e;font-size:12px;font-weight:750}.login-message.ok{color:#ffe471}.login-message.err{color:var(--danger)}
.pin-access.pin-error{animation:authShake .28s linear 1}@keyframes authShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.pin-access.pin-error .pin-digit{border-color:rgba(239,83,80,.88);box-shadow:0 14px 23px rgba(0,0,0,.38),0 0 0 2px rgba(239,83,80,.14),inset 0 2px 0 rgba(255,219,51,.42),inset 0 -3px 0 rgba(112,67,0,.32)}

.access-button{width:100%;min-height:50px;margin:8px auto 0;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid rgba(255,203,5,.72);border-radius:12px;background:linear-gradient(180deg,#ffd72d,#f6bd00);color:#111214;font-size:13px;font-weight:950;letter-spacing:.14em;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.30),0 0 18px rgba(255,203,5,.08);transition:transform .14s ease,filter .2s ease,box-shadow .2s ease}
.access-button svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.access-button:hover{filter:brightness(1.05);box-shadow:0 12px 32px rgba(0,0,0,.34),0 0 22px rgba(255,203,5,.14)}.access-button:active{transform:scale(.985)}.access-button:focus-visible{outline:2px solid #fff;outline-offset:3px}.access-button:disabled{opacity:.68;cursor:wait}

/* Status: mesmas ondas circulares do CSS-base. */
.system-status{width:255px;max-width:100%;min-height:42px;margin:15px auto 2px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--yellow);font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;text-shadow:0 0 12px rgba(255,203,5,.48)}
.status-tool{position:relative;width:28px;height:28px;display:grid;place-items:center;color:var(--yellow)}
.status-tool::before,.status-tool::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(255,203,5,.42);animation:statusPulse 1.8s ease-out infinite}.status-tool::after{animation-delay:.9s}
.status-tool svg{position:relative;z-index:2;width:21px;height:21px;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(255,203,5,.78))}
@keyframes statusPulse{0%{transform:scale(.74);opacity:0}32%{opacity:.72}100%{transform:scale(1.45);opacity:0}}

.system-footer{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:1px 8px 0;color:#d6d6d2;text-align:center;font-size:10px;font-weight:700;letter-spacing:.025em;text-shadow:0 2px 9px rgba(0,0,0,.85)}
.footer-lock{flex:0 0 24px;width:24px;height:24px;display:grid;place-items:center;color:var(--yellow);border:1px solid rgba(255,203,5,.42);border-radius:50%;background:rgba(0,0,0,.38);box-shadow:0 0 10px rgba(255,203,5,.08)}
.footer-lock svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.loader-view{display:none;width:100%;min-height:calc(100vh - 44px);align-items:center;justify-content:center}
.loader-view.active{display:flex;animation:loaderIn .34s ease both}@keyframes loaderIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.loader-card{width:min(100%,580px);padding:34px 26px 30px;border:1px solid rgba(255,255,255,.26);border-radius:26px;background:radial-gradient(circle at 50% 0%,rgba(255,203,5,.055),transparent 38%),linear-gradient(180deg,rgba(27,27,29,.95),rgba(8,8,9,.97));box-shadow:0 30px 68px rgba(0,0,0,.62);backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px);text-align:center}
.loader-logo{display:block;width:min(74%,360px);height:auto;margin:0 auto 22px}.loader-kicker{display:block;margin-bottom:9px;color:var(--yellow);font-size:10px;font-weight:950;letter-spacing:.23em}.loader-card h1{margin:0;color:#f5f5f2;font-size:clamp(24px,6vw,34px);font-weight:900;letter-spacing:-.01em}.loader-card p{min-height:22px;margin:9px 0 24px;color:#a4a6ab;font-size:13px;font-weight:700}
.progress-shell{position:relative;height:9px;overflow:hidden;border:1px solid rgba(255,255,255,.17);border-radius:999px;background:#080809}.progress-shell span{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,#dca800,var(--yellow),#ffe27d);box-shadow:0 0 18px rgba(255,203,5,.34);transition:width .56s ease}.progress-shell span::after{content:"";position:absolute;top:0;right:0;width:44px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.78));animation:progressShimmer 1s ease-in-out infinite}@keyframes progressShimmer{0%,100%{opacity:.15}50%{opacity:.85}}
.progress-value{display:block;margin-top:8px;color:var(--yellow);font-family:var(--font-ui);font-size:15px;font-weight:900}
.loader-stages{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:26px}.loader-stages::before{content:"";position:absolute;left:16%;right:16%;top:5px;height:1px;background:rgba(255,203,5,.18)}
.loader-stage{position:relative;padding-top:22px;color:#777970;font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.loader-stage i{position:absolute;z-index:2;top:0;left:50%;width:11px;height:11px;transform:translateX(-50%);border-radius:50%;background:#4f4a35;box-shadow:0 0 0 4px rgba(16,15,10,.86)}
.loader-stage.active{color:#ffe36b}.loader-stage.active i{background:var(--yellow);box-shadow:0 0 0 4px rgba(16,15,10,.86),0 0 14px rgba(255,203,5,.72)}.loader-stage.complete{color:#e7d27b}.loader-stage.complete i{background:#e3b800;box-shadow:0 0 0 4px rgba(16,15,10,.86),0 0 12px rgba(255,203,5,.48)}

@media(min-width:700px){.page-shell{padding-top:28px;padding-bottom:28px}.auth-view{gap:18px}.feature-item{min-height:100px}.feature-item strong{font-size:11px}.auth-card{padding:27px 30px 20px}.pin-digit{height:76px}}
@media(max-width:420px){
  .page-shell{padding-left:12px;padding-right:12px;padding-top:max(14px,env(safe-area-inset-top))}
  .auth-view{gap:12px}.brand-logo{width:min(82vw,390px)}.brand-kicker{font-size:9px;letter-spacing:.17em}
  .feature-item{min-height:78px;padding:9px 4px;gap:5px}.feature-icon{width:28px;height:28px}.feature-item strong{font-size:8px}
  .auth-digital-clock{max-width:100%;min-height:92px;padding:14px 8px 12px;border-radius:15px}.auth-digital-clock .clock-col{padding-left:5px;padding-right:5px}.clock-timer{font-size:27px}.clock-col-day .clock-timer{font-size:22px}.clock-label{margin-top:6px;font-size:8px}
  .auth-card{padding:20px 16px 13px;border-radius:20px}.auth-heading{margin-bottom:16px;font-size:9px;gap:8px;letter-spacing:.16em}
  .auth-user-control{grid-template-columns:39px minmax(0,1fr);min-height:53px}.auth-user-orb{width:36px;height:36px}.auth-user-control input{font-size:15px}
  .pin-access{margin-top:13px}.pin-digits{gap:8px}.pin-digit{height:65px}.pin-digit-value{font-size:28px}.system-status{margin-top:12px;font-size:11px;letter-spacing:.10em}.system-footer{font-size:9px}
}
@media(max-width:360px){.brand-logo{width:84vw}.feature-item strong{font-size:7.5px}.auth-digital-clock{padding-left:6px;padding-right:6px}.clock-timer{font-size:25px}.clock-col-day .clock-timer{font-size:20px}.pin-digits{gap:7px}.pin-digit{height:61px}.auth-user-control input{font-size:14.5px}}
@media(prefers-reduced-motion:reduce){.auth-user-field.has-value .auth-user-orb,.status-tool::before,.status-tool::after,.pin-digit.focused::before,.progress-shell span::after{animation:none}.progress-shell span{transition:none}}