:root{font:16px/1.5 'Segoe UI',Arial,sans-serif;color:#f0f8ff;background:#03101f;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100svh;background:radial-gradient(ellipse at 5% 10%,#06396a88,transparent 42%),radial-gradient(ellipse at 95% 85%,#064a8b88,transparent 40%),linear-gradient(135deg,#020a14,#051a2d 58%,#020a15);position:relative;isolation:isolate}body::before,body::after{content:'';position:fixed;z-index:-1;width:85vw;height:45vw;border:2px solid #00b6ed55;border-radius:50%;transform:rotate(-25deg);pointer-events:none}body::before{left:-50vw;top:-32vw;box-shadow:0 0 45px #008ce444}body::after{right:-48vw;bottom:-29vw;box-shadow:0 0 40px #008ce444}.pn-login-stage{max-width:1320px;margin:auto;padding:38px 24px 26px}.pn-login-brand{text-align:center}.pn-login-brand>img{display:block;width:min(660px,90%);height:auto;aspect-ratio:3;object-fit:contain;margin:0 auto}.pn-login-brand p{font-size:20px;color:#b8e5f7;margin:12px 0 26px}.pn-login-composition{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,560px) minmax(0,1fr);gap:20px;align-items:center}.pn-login-card{grid-column:2;border:1px solid #02c6f1;border-radius:25px;background:linear-gradient(145deg,#061c2eee,#03131fee);padding:30px 34px;box-shadow:0 0 0 3px #03a9de12,0 0 22px #00bbdf24,0 18px 50px #0005}.pn-login-title{display:flex;align-items:center;justify-content:center;gap:13px}.pn-login-title h1{font-size:27px;line-height:1.25;margin:0}.pn-login-badge{width:28px;height:28px;border:2px solid #a8e9ff;border-radius:50%;position:relative;flex-shrink:0}.pn-login-badge::after{content:'';position:absolute;width:44px;height:23px;border:2px solid #a8e9ff;border-bottom:0;border-radius:30px 30px 0 0;left:-10px;top:23px;background:#061c2e}.pn-login-intro{text-align:center;color:#bbd2e3;font-size:14px;margin:23px 0 24px}label{display:block;font-size:14px;font-weight:600;margin:0 0 18px}input{display:block;width:100%;min-height:50px;padding:12px 14px;margin-top:7px;border:1px solid #3997b7;border-radius:10px;background:#0b2c40;color:#fff;font:inherit;box-shadow:inset 0 1px 4px #0002}input::placeholder{color:#b8cbd9}.pn-password-field{position:relative}.pn-password-field input{padding-right:86px}.pn-password-field>button{position:absolute;right:6px;top:6px;min-height:38px;padding:6px 9px;border:0;border-radius:7px;background:#174058;color:#d2f2ff;font-size:13px;cursor:pointer}.pn-login-submit{display:block;width:100%;min-height:52px;border:1px solid #10baf7;border-radius:11px;background:linear-gradient(135deg,#00aeef,#0666ed);color:#fff;font:700 20px 'Segoe UI',Arial,sans-serif;cursor:pointer;margin-top:22px}.pn-login-submit:hover{filter:brightness(1.1)}input:focus-visible,button:focus-visible{outline:3px solid #83eaff;outline-offset:4px}.pn-login-lab{text-align:center;font-size:12px;color:#aac9dc;margin:18px 0 0}#error{font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:#ffd0d3;margin:14px 0 0}#error:empty{display:none}.pn-login-device{min-width:0}.pn-login-device img{display:block;width:100%;max-height:300px;object-fit:contain}.pn-login-router{grid-column:1;grid-row:1}.pn-login-onu{grid-column:3;grid-row:1}footer{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:32px;color:#bbd5e8;font-size:13px}footer span+span{border-left:1px solid #2b6b8a;padding-left:16px}[hidden]{display:none!important}@media(max-width:850px){.pn-login-composition{grid-template-columns:minmax(0,1fr) minmax(280px,520px) minmax(0,1fr);gap:8px}.pn-login-stage{padding:25px 16px}.pn-login-brand p{font-size:17px}.pn-login-device img{max-height:180px}}@media(max-width:650px){.pn-login-composition{display:flex;flex-direction:column;align-items:stretch}.pn-login-card{max-width:520px;width:100%;margin:auto;padding:25px 22px}.pn-login-device{display:none}.pn-login-brand>img{width:min(520px,100%)}.pn-login-brand p{font-size:15px;margin:14px 0 24px}.pn-login-title h1{font-size:24px}footer{gap:10px;font-size:12px}footer span+span{padding-left:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

@media(max-width:650px){.pn-login-composition{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px}.pn-login-card{grid-column:1/-1;grid-row:1}.pn-login-device{display:block;justify-self:center;max-width:170px;width:100%;align-self:center}.pn-login-router{grid-column:1;grid-row:2}.pn-login-onu{grid-column:2;grid-row:2}.pn-login-device img{height:115px;max-height:115px;object-fit:contain}}

/* Correção 04: desktop dimensionado pela área útil, sem zoom ou escala da página.
   Até 650px, todas as regras aprovadas acima continuam inalteradas.
   Alturas insuficientes e mensagens longas podem rolar naturalmente. */
@media (min-width:651px){
 .pn-login-stage{
  max-width:1200px;
  padding:clamp(10px,1.6vh,20px) clamp(16px,2vw,24px);
  padding-block:clamp(10px,1.6svh,20px);
 }
 .pn-login-brand>img{
  width:min(540px,74vh,70vw);
  width:min(540px,74svh,70vw);
 }
 .pn-login-brand p{
  font-size:clamp(16px,2.3vh,18px);
  font-size:clamp(16px,2.3svh,18px);
  margin:clamp(6px,.8vh,10px) 0 clamp(10px,1.6vh,18px);
  margin-block:clamp(6px,.8svh,10px) clamp(10px,1.6svh,18px);
 }
 .pn-login-composition{
  grid-template-columns:minmax(0,1fr) minmax(280px,480px) minmax(0,1fr);
  gap:clamp(12px,2vw,20px);
 }
 .pn-login-card{
  padding:clamp(18px,2.5vh,24px) clamp(22px,2.6vw,30px);
  padding-block:clamp(18px,2.5svh,24px);
 }
 .pn-login-title h1{
  font-size:clamp(23px,3.4vh,26px);
  font-size:clamp(23px,3.4svh,26px);
 }
 .pn-login-badge{width:24px;height:24px}
 .pn-login-badge::after{width:36px;height:18px;left:-8px;top:19px}
 .pn-login-intro{
  margin:clamp(10px,1.7vh,18px) 0;
  margin-block:clamp(10px,1.7svh,18px);
 }
 .pn-login-card label{
  margin-bottom:clamp(10px,1.6vh,16px);
  margin-bottom:clamp(10px,1.6svh,16px);
 }
 .pn-login-card input{font-size:16px;min-height:46px;padding:10px 12px;margin-top:6px}
 .pn-password-field input{padding-right:86px}
 .pn-password-field>button{top:4px;right:4px}
 .pn-login-submit{
  min-height:46px;
  font-size:18px;
  margin-top:clamp(10px,1.6vh,18px);
  margin-top:clamp(10px,1.6svh,18px);
 }
 .pn-login-lab{margin-top:12px}
 .pn-login-device img{
  max-height:clamp(150px,26vh,240px);
  max-height:clamp(150px,26svh,240px);
 }
 footer{
  font-size:12px;
  margin-top:clamp(12px,2vh,24px);
  margin-top:clamp(12px,2svh,24px);
 }
}