:root{
  --primary:#0d6efd; /* azul hospitalar */
  --accent:#00a6a6; /* verde-água */
  --card:#ffffff;
  --bg:#f4fbff;
}
*{box-sizing:border-box;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
body,html{height:100%}
.login-root{display:flex;min-height:100vh;background:linear-gradient(180deg,var(--bg),#e9f7fb)}
.brand-panel{flex:1;background:linear-gradient(135deg,var(--primary),#2aa0f7);color:#fff;display:flex;align-items:center;justify-content:center;padding:48px}
.brand-content{max-width:420px;text-align:center;transform:translateY(0);transition:transform .8s cubic-bezier(.2,.9,.2,1)}
.brand-panel .hospital-icon{font-size:72px;background:rgba(255,255,255,.12);padding:20px;border-radius:20px;margin-bottom:20px}
.brand-content h1{font-size:28px;margin:0 0 10px}
.brand-content p{opacity:.95}
.form-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:48px}
.form-card{width:100%;max-width:420px;background:var(--card);border-radius:12px;box-shadow:0 12px 30px rgba(16,40,70,.12);padding:36px;transform:translateY(40px);opacity:0;transition:all .6s cubic-bezier(.22,.9,.25,1)}
.form-card.appear{transform:translateY(0);opacity:1}
.form-card h2{margin:0 0 6px}
.muted{color:#6c757d;margin-bottom:18px}
.input-group{margin-bottom:16px}
.input-group label{display:block;font-size:13px;color:#4b5563;margin-bottom:6px}
.input-group input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid #e6eef5;background:#fbfeff;transition:box-shadow .18s ease,border-color .18s ease}
.input-group input:focus{outline:none;border-color:var(--accent);box-shadow:0 6px 20px rgba(0,166,166,.12)}
.actions{display:flex;justify-content:flex-end;margin-top:8px}
.btn-login{background:linear-gradient(90deg,var(--accent),var(--primary));color:#fff;padding:10px 18px;border-radius:10px;border:0;cursor:pointer;font-weight:600;box-shadow:0 8px 20px rgba(13,110,253,.12);transition:transform .14s ease,box-shadow .14s ease}
.btn-login:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(13,110,253,.18)}
.error-box{background:#fff5f5;border:1px solid #ffd2d2;color:#b00020;padding:10px;border-radius:8px;margin-bottom:12px}
.help-text{font-size:13px;color:#6b7280;margin-top:14px}

@media(max-width:900px){
  .login-root{flex-direction:column}
  .brand-panel{padding:28px}
  .brand-content{transform:translateY(-6px)}
}