:root{
  --navy:#15213B;
  --navy-deep:#0D1526;
  --teal:#2DD4BF;
  --bg:#F6F7FA;
  --text:#1F2433;
  --muted:#6B7280;
  --border:#DDE1E8;
}
*{ box-sizing:border-box; }
html, body{ min-height:100vh; }
body{
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Painel de marca (desktop) */
.brand-panel{
  background:linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  position:relative;
  overflow:hidden;
  color:#fff;
}
.clock-face{
  position:absolute;
  top:50%; left:50%;
  width:440px; height:440px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.16) 0deg 1deg, transparent 1deg 30deg);
  opacity:.7;
}
.clock-hand{
  position:absolute;
  top:50%; left:50%;
  width:1px; height:180px;
  background:linear-gradient(to top, var(--teal), transparent);
  transform-origin:bottom center;
  transform:translate(-50%, -100%) rotate(0deg);
  animation:tick 22s linear infinite;
  opacity:.6;
}
@keyframes tick{ to{ transform:translate(-50%, -100%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .clock-hand{ animation:none; }
}

.brand-content{ position:relative; z-index:2; }
.brand-mark{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:800;
  font-size:1.6rem;
}
.brand-mark span{ color:var(--teal); }
.brand-tagline{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:600;
  font-size:2.1rem;
  line-height:1.25;
  max-width:380px;
}
.brand-sub{ color:rgba(255,255,255,.65); max-width:360px; }

/* Painel do formulário */
.form-panel{ background:var(--bg); }
.login-card{ width:100%; max-width:380px; }
.small-mark{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:800;
  font-size:1.3rem;
  color:var(--navy);
}
.small-mark span{ color:var(--teal); }

.login-title{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:700;
  font-size:1.7rem;
}
.login-sub{ color:var(--muted); font-size:.95rem; }

label.form-label{ font-weight:600; font-size:.85rem; color:var(--text); }
.form-control{
  border-radius:10px;
  border:1px solid var(--border);
  padding:.65rem .9rem;
  font-size:.95rem;
}
.form-control:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(45,212,191,.18);
}
.input-group .form-control{ border-radius:10px 0 0 10px; }
.toggle-pass{
  border:1px solid var(--border);
  border-left:none;
  border-radius:0 10px 10px 0;
  background:#fff;
  color:var(--muted);
}
.toggle-pass:hover{ color:var(--navy); }

.btn-login{
  background:var(--navy);
  border:none;
  border-radius:10px;
  padding:.7rem 1rem;
  font-weight:600;
  transition:background .15s ease;
}
.btn-login:hover{ background:var(--navy-deep); }

.forgot-link{
  font-size:.9rem;
  color:var(--navy);
  text-decoration:none;
  font-weight:600;
}
.forgot-link:hover{ color:var(--teal); }

.alert-error{ border-radius:10px; font-size:.9rem; }

/* Overlay de estado do login (spinner / sucesso / erro) */
.status-overlay{
  position:fixed;
  inset:0;
  background:rgba(13,21,38,.55);
  backdrop-filter:blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease;
  z-index:1050;
}
.status-overlay.active{
  opacity:1;
  visibility:visible;
}
.status-card{
  background:#fff;
  border-radius:16px;
  padding:2.25rem 2.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  min-width:220px;
  box-shadow:0 20px 60px rgba(13,21,38,.25);
}
.status-icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.spinner{
  width:40px;
  height:40px;
  border:3px solid var(--border);
  border-top-color:var(--navy);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.icon-success-circle, .icon-error-circle{
  stroke-width:3;
  stroke-miterlimit:10;
  stroke-dasharray:151;
  stroke-dashoffset:151;
  animation:circleDraw .35s ease forwards;
}
.icon-success-circle{ stroke:var(--teal); }
.icon-error-circle{ stroke:#E2574C; }

.icon-success-check{
  stroke:var(--teal);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:36;
  stroke-dashoffset:36;
  animation:checkDraw .3s .25s ease forwards;
}
.icon-error-x{
  stroke:#E2574C;
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:30;
  stroke-dashoffset:30;
  animation:checkDraw .3s .25s ease forwards;
}
@keyframes circleDraw{ to{ stroke-dashoffset:0; } }
@keyframes checkDraw{ to{ stroke-dashoffset:0; } }

.status-text{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:600;
  color:var(--text);
  margin:0;
  text-align:center;
  font-size:.95rem;
}
.button-navi{ background-color:var(--navy); }