:root { --bg:#0f172a; --card:#1e293b; --txt:#e2e8f0; --mut:#94a3b8; --pri:#3b82f6; --err:#f87171; --ok:#4ade80; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--txt); line-height:1.6; }
header, main, footer { max-width: 960px; margin: 0 auto; padding: 1rem 1.25rem; }
header { display:flex; justify-content:space-between; align-items:center; }
nav a { color:var(--mut); margin-left:1rem; text-decoration:none; }
nav a:hover { color:var(--txt); }
h1 { font-size:2.2rem; margin:.5rem 0; }
.card { background:var(--card); border-radius:10px; padding:1.25rem; margin:1rem 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.btn { display:inline-block; background:var(--pri); color:#fff; border:0; padding:.7rem 1.2rem; border-radius:8px; font-size:1rem; cursor:pointer; text-decoration:none; }
.btn[disabled], .btn.disabled { background:#475569; cursor:not-allowed; opacity:.6; pointer-events:none; }
.btn.sec { background:#334155; }
.terms-box { max-height:260px; overflow-y:auto; background:#0b1220; padding:1rem; border-radius:8px; font-size:.92rem; }
.terms-box h3 { margin:.8rem 0 .2rem; font-size:1rem; }
label { display:block; margin:.6rem 0 .2rem; }
input, textarea { width:100%; padding:.6rem; border-radius:6px; border:1px solid #334155; background:#0b1220; color:var(--txt); }
.check { display:flex; gap:.6rem; align-items:flex-start; margin:1rem 0; }
.check input { width:auto; margin-top:.35rem; }
.msg { margin:.6rem 0; min-height:1.2em; }
.msg.err { color:var(--err); } .msg.ok { color:var(--ok); }
.badge { padding:.15rem .6rem; border-radius:999px; font-size:.85rem; }
.badge.ativa { background:#14532d; color:var(--ok); } .badge.inativa { background:#7f1d1d; color:var(--err); }
table { width:100%; border-collapse:collapse; } td, th { padding:.4rem; border-bottom:1px solid #334155; text-align:left; }
details { margin:.4rem 0; } summary { cursor:pointer; }
footer { color:var(--mut); font-size:.85rem; }

.login-page {
  --glass: rgba(15, 23, 42, .72);
  --glass-border: rgba(148, 163, 184, .2);
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 18% 24%, rgba(14, 116, 144, .24), transparent 38%),
    radial-gradient(ellipse at 90% 82%, rgba(37, 99, 235, .2), transparent 36%),
    #07111f;
}
.login-page::before {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(7, 17, 31, .12), rgba(7, 17, 31, .68)), url("../img/technical-workbench.svg");
  background-position: center;
  background-size: cover;
  content: "";
  opacity: .2;
  pointer-events: none;
}
.login-header, .login-main, .login-footer { position: relative; z-index: 1; }
.login-header {
  max-width: 1240px;
  padding: 1.4rem 2rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: #f8fafc;
  font-size: 1.2rem;
  font-weight: 750;
  letter-spacing: .02em;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid rgba(103, 232, 249, .42);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(6, 182, 212, .3), rgba(37, 99, 235, .32));
  box-shadow: 0 0 24px rgba(34, 211, 238, .16);
}
.login-header nav a { color: #cbd5e1; }
.login-main {
  display: grid;
  width: min(1120px, 100%);
  min-height: calc(100vh - 142px);
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5.5rem);
  padding: 2rem 1.5rem 3.5rem;
}
.login-hero { max-width: 620px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .9rem;
  color: #67e8f9;
  font-size: .73rem;
  font-weight: 750;
  letter-spacing: .16em;
}
.eyebrow span, .status-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 13px rgba(52, 211, 153, .8);
}
.login-hero h1 {
  max-width: 580px;
  margin: 0;
  color: #f8fafc;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: 1.03;
}
.hero-description {
  max-width: 500px;
  margin: 1.15rem 0 0;
  color: #b6c4d6;
  font-size: 1.05rem;
}
.login-art {
  display: block;
  width: min(100%, 590px);
  max-height: 390px;
  margin: .7rem auto -.3rem;
  filter: drop-shadow(0 26px 35px rgba(0, 0, 0, .34));
  animation: workbench-float 7s ease-in-out infinite;
}
.hero-caption {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #b6c4d6;
  font-size: .87rem;
}
.login-panel { width: 100%; }
.login-card {
  width: 100%;
  padding: clamp(1.6rem, 4vw, 2.5rem);
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .78), var(--glass));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  animation: card-arrive .65s cubic-bezier(.2, .75, .25, 1) both;
}
.form-heading { margin-bottom: 1.65rem; }
.form-heading h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.8rem;
  letter-spacing: -.035em;
  line-height: 1.2;
}
.form-heading > p:last-child {
  margin: .55rem 0 0;
  color: #a9b8cb;
  font-size: .93rem;
}
.login-card label {
  margin: 1rem 0 .35rem;
  color: #dbeafe;
  font-size: .86rem;
  font-weight: 600;
}
.login-card input {
  min-height: 3.1rem;
  padding: .8rem .9rem;
  border-color: rgba(148, 163, 184, .28);
  border-radius: 11px;
  background: rgba(2, 6, 23, .42);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.login-card input::placeholder { color: #708198; }
.login-card input:focus {
  border-color: rgba(34, 211, 238, .8);
  outline: 0;
  background: rgba(2, 6, 23, .65);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .13);
}
.login-submit {
  width: 100%;
  min-height: 3.15rem;
  margin-top: .5rem;
  border-radius: 11px;
  background: linear-gradient(100deg, #0891b2, #2563eb);
  box-shadow: 0 8px 22px rgba(8, 145, 178, .2);
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.login-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(8, 145, 178, .34);
  filter: brightness(1.08);
}
.text-button {
  display: block;
  margin: .95rem auto 0;
  padding: .25rem;
  border: 0;
  background: transparent;
  color: #67e8f9;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}
.text-button:hover, .signup-prompt a:hover { color: #a5f3fc; }
.signup-prompt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(148, 163, 184, .18);
  color: #a9b8cb;
  font-size: .87rem;
}
.signup-prompt a {
  color: #67e8f9;
  font-weight: 700;
  text-decoration: none;
}
.privacy-note {
  margin: 1rem 0 0;
  color: #91a1b6;
  font-size: .78rem;
  text-align: center;
}
.privacy-note span { margin-right: .25rem; color: #67e8f9; }
.recovery-card .form-heading { margin-bottom: 1.1rem; }
.login-footer {
  max-width: none;
  padding: .8rem 1rem 1.25rem;
  color: #78899e;
  text-align: center;
}
@keyframes workbench-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes card-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
  .login-header { padding: 1rem 1.25rem; }
  .login-main {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem 1.15rem 2.5rem;
  }
  .login-hero { text-align: center; }
  .login-hero .eyebrow { justify-content: center; }
  .login-hero h1 { margin-inline: auto; font-size: clamp(2.35rem, 10vw, 3.5rem); }
  .hero-description { margin-inline: auto; }
  .login-art { width: min(88%, 420px); max-height: 260px; margin: .4rem auto -.4rem; }
  .hero-caption { justify-content: center; }
  .login-panel { width: min(100%, 480px); margin-inline: auto; }
}
@media (max-width: 420px) {
  .login-header nav a { margin-left: .4rem; }
  .login-card { padding: 1.35rem; border-radius: 21px; }
  .form-heading h2 { font-size: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .login-art, .login-card { animation: none; }
  .login-card input, .login-submit { transition: none; }
}