:root {
  color-scheme: light;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #241f2e;
  background: #170a2c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 15%, rgba(236, 72, 153, .28), transparent 34%),
    radial-gradient(circle at 86% 82%, rgba(168, 85, 247, .35), transparent 38%),
    linear-gradient(145deg, #230d43, #4c1d95 58%, #7c3aed);
}

.acesso-shell { width: min(100%, 440px); }

.acesso-card {
  padding: clamp(28px, 7vw, 42px);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 26px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 30px 90px rgba(11, 4, 24, .38);
}

.acesso-card img { width: 150px; height: auto; margin-bottom: 28px; }
.acesso-eyebrow { margin: 0 0 7px; color: #7c3aed; font-size: .76rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.85rem, 7vw, 2.45rem); line-height: 1.03; letter-spacing: -.04em; }
.acesso-texto { margin: 14px 0 26px; color: #6d6579; line-height: 1.55; }
form { display: grid; gap: 10px; }
label { font-size: .84rem; font-weight: 750; }
input, button { min-height: 50px; border-radius: 13px; font: inherit; }
input { width: 100%; border: 1px solid #d9d3e5; padding: 0 15px; background: #faf9fc; }
input:focus { outline: 3px solid rgba(124, 58, 237, .2); border-color: #7c3aed; }
input:focus-visible, button:focus-visible { outline: 3px solid #5b21b6; outline-offset: 3px; }
button { border: 0; padding: 0 18px; background: linear-gradient(135deg, #5b21b6, #8b5cf6); color: white; font-weight: 800; cursor: pointer; box-shadow: 0 12px 28px rgba(91, 33, 182, .24); }
button:disabled { opacity: .65; cursor: wait; }
.acesso-status { min-height: 1.4em; margin: 15px 0 0; color: #6d6579; font-size: .85rem; }
.acesso-status.erro { color: #b42318; }