:root{
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  color:#f7fbff;
  background:#03182b;
  --cyan:#15aefe;
  --panel:#0b2847;
  --panel2:#0a223d;
  --line:#2e5b82;
  --muted:#afc2d5;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;min-width:0;min-height:100%;background:#03182b}
body{min-height:100svh;overflow:hidden}
button,input{font:inherit}
button{border:0}

.page-shell{width:100%;min-height:100svh;background:#03182b}
.stage{
  position:relative;
  width:100%;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:#03182b;
}

/* Preenche toda a tela sem deformar a arte principal. As sobras laterais/verticais
   usam a própria arte ampliada e suavizada, em vez de faixas sólidas. */
.stage::before{
  content:"";
  position:absolute;
  inset:-28px;
  z-index:-2;
  background:url('/access-assets/access-cover.png?v=072-responsive') center/cover no-repeat;
  filter:blur(20px) brightness(.43) saturate(.9);
  transform:scale(1.04);
}
.stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(2,20,38,.36),rgba(2,20,38,.08) 45%,rgba(2,20,38,.32));
  pointer-events:none;
}

/* Artboard único: imagem e formulário usam a mesma geometria. Assim o card
   permanece preso ao mesmo ponto da arte ao redimensionar a janela. */
.artboard{
  position:relative;
  width:min(100vw,calc(100svh * 1403 / 1121));
  aspect-ratio:1403/1121;
  max-width:100vw;
  max-height:100svh;
  container-type:inline-size;
}
.hero-clip{position:absolute;inset:0;overflow:hidden}
.cover-reference{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
  user-select:none;
  pointer-events:none;
}

.login-card{
  position:absolute;
  z-index:5;
  left:73.20%;
  top:15.95%;
  width:26.70%;
  height:47.05%;
  min-height:0;
  padding:2.05cqw 1.95cqw 1.55cqw;
  border:1px solid #1d70ad;
  border-radius:1.45cqw;
  background:linear-gradient(155deg,var(--panel),var(--panel2));
  box-shadow:0 22px 60px rgba(0,0,0,.42),0 0 34px rgba(5,139,230,.14);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.card-heading h1{margin:0;color:#fff;font-size:clamp(18px,1.65cqw,27px);line-height:1.1;font-weight:800;letter-spacing:-.025em}
.card-heading p{margin:.65cqw 0 1.75cqw;color:var(--muted);font-size:clamp(9px,.86cqw,14px);line-height:1.3}
#loginForm{display:block}
.field{height:3.2cqw;min-height:40px;max-height:55px;border:1px solid #3c5f7e;border-radius:.75cqw;background:#132f4c;display:flex;align-items:center;padding:0 .95cqw;transition:.16s ease}
.field+.field{margin-top:.78cqw}
.field:focus-within{border-color:#18aaff;box-shadow:0 0 0 2px rgba(18,170,255,.15)}
.field-icon{width:1.75cqw;min-width:22px;color:#c3d7e9;font-size:clamp(11px,1cqw,16px)}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:clamp(10px,.9cqw,14px)}
.field input::placeholder{color:#8aa2b9}
.eye{background:transparent;color:#c0d2e3;cursor:pointer;padding:.45cqw;font-size:clamp(10px,.9cqw,14px)}
.options-row{display:flex;justify-content:space-between;align-items:center;gap:.7cqw;margin:1.25cqw 0 .25cqw}
.remember{display:flex;align-items:center;gap:.5cqw;font-size:clamp(8px,.72cqw,11px);color:#e4edf6;white-space:nowrap}
.remember input{accent-color:#11a9ff;width:.9cqw;height:.9cqw;min-width:12px;min-height:12px;margin:0}
.link-button{background:transparent;color:#18adff;cursor:pointer;padding:0;font-size:clamp(8px,.7cqw,11px);white-space:nowrap}
.message{min-height:1.2cqw;margin:.2cqw 0 .25cqw;color:#ff9cab;font-size:clamp(8px,.65cqw,10px);text-align:center;line-height:1.2}
.message.success{color:#74e4ac}
.primary-button{width:100%;height:3.35cqw;min-height:42px;max-height:55px;border-radius:.72cqw;background:linear-gradient(90deg,#078ff0,#14b5ff);color:#fff;font-weight:800;font-size:clamp(11px,.95cqw,15px);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:1.2cqw;box-shadow:0 9px 24px rgba(7,142,229,.34)}
.primary-button:hover{filter:brightness(1.05)}
.primary-button:disabled{opacity:.65;cursor:wait}
.divider{display:flex;align-items:center;gap:.85cqw;margin:1.55cqw 0 1.15cqw;color:#b0c3d4}
.divider span{height:1px;flex:1;background:#35536d}
.divider em{font-style:normal;font-size:clamp(8px,.72cqw,11px)}
.no-access{text-align:center;color:#c2d0dc;font-size:clamp(9px,.85cqw,13px);margin:0 0 .8cqw}
.administrator-contact{width:100%;height:3.35cqw;min-height:42px;max-height:55px;border:1px solid #177bb8;border-radius:.72cqw;background:#0b2a49;color:#eaf5ff;display:flex;align-items:center;justify-content:center;gap:.7cqw;cursor:pointer;font-size:clamp(10px,.9cqw,14px)}
.administrator-contact span{color:#19b2ff;font-size:1.15em}
.administrator-contact:hover{border-color:#1cb4ff;background:#0d3152}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.setup-modal[hidden]{display:none}
.setup-modal{position:fixed;inset:0;z-index:30;background:rgba(1,12,24,.84);display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(5px)}
.setup-card{position:relative;width:min(460px,92vw);border:1px solid #1c80c7;border-radius:20px;background:linear-gradient(155deg,#0c2949,#081c34);box-shadow:0 24px 80px #000b;padding:30px;color:#fff}
.setup-close{position:absolute;right:15px;top:10px;background:transparent;color:#a8c4dd;font-size:28px;cursor:pointer}
.setup-kicker{font-size:10px;letter-spacing:2.4px;color:#23b7ff}
.setup-card h2{margin:8px 0 6px}
.setup-card p{margin:0 0 18px;color:#a9bfd3;font-size:13px;line-height:1.5}
.setup-card form{display:grid;gap:11px}
.setup-card label{display:grid;gap:5px;color:#c9d9e7;font-size:12px}
.setup-card input,.setup-card form>button{height:44px;border-radius:9px}
.setup-card input{border:1px solid #355d7d;background:#102d49;color:#fff;padding:0 12px;outline:0}
.setup-card input:focus{border-color:#17aaff}
.setup-card form>button{background:linear-gradient(90deg,#078ff0,#13b5ff);color:#fff;font-weight:800;cursor:pointer}
.setup-message{min-height:16px;color:#ff9cab;font-size:12px}

/* Tablet e celular: hero vira um bloco próprio e o formulário entra no fluxo.
   A arte é ampliada para manter a parte esquerda e deixar o card desenhado fora do recorte. */
@media (max-width:900px){
  body{overflow:auto}
  .page-shell{min-height:100svh}
  .stage{display:block;min-height:100svh;overflow:visible;padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .stage::before{position:fixed;inset:-24px;filter:blur(24px) brightness(.32) saturate(.85)}
  .stage::after{position:fixed;background:rgba(2,20,38,.42)}
  .artboard{width:100%;max-width:none;max-height:none;aspect-ratio:auto;container-type:normal}
  .hero-clip{position:relative;width:100%;height:clamp(300px,72vw,540px);overflow:hidden;background:#041b31}
  .cover-reference{left:0;top:0;right:auto;bottom:auto;width:140%;height:auto;max-width:none;object-fit:unset;object-position:unset}
  .login-card{position:relative;left:auto;top:auto;width:min(92%,560px);height:auto;min-height:0;margin:18px auto 32px;padding:28px 22px;border-radius:20px;overflow:visible}
  .card-heading h1{font-size:28px}
  .card-heading p{font-size:14px;margin:9px 0 22px}
  .field{height:54px;max-height:none;border-radius:11px;padding:0 14px}
  .field+.field{margin-top:14px}
  .field-icon{width:28px}
  .field input{font-size:14px}
  .eye{padding:8px;font-size:14px}
  .options-row{margin:16px 0 4px;gap:10px}
  .remember,.link-button{font-size:12px}
  .remember input{width:14px;height:14px}
  .message{min-height:18px;margin:6px 0;font-size:12px}
  .primary-button,.administrator-contact{height:54px;max-height:none;border-radius:11px;font-size:14px}
  .divider{margin:22px 0 16px;gap:12px}
  .no-access{font-size:13px;margin-bottom:12px}
}

@media (max-width:540px){
  .hero-clip{height:clamp(285px,82vw,380px)}
  .cover-reference{width:145%}
  .login-card{width:calc(100% - 20px);margin:12px auto 24px;padding:24px 18px;border-radius:18px}
  .card-heading h1{font-size:25px}
  .card-heading p{font-size:13px;margin-bottom:18px}
  .options-row{align-items:flex-start;flex-wrap:wrap}
  .setup-modal{padding:12px}
  .setup-card{padding:26px 18px}
}

@media (max-width:380px){
  .hero-clip{height:300px}
  .cover-reference{width:150%}
  .login-card{width:calc(100% - 16px);padding:22px 14px}
  .card-heading h1{font-size:23px}
  .remember,.link-button{font-size:11px}
}