/* MedHub — Login Page */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

.mvp-login-wrap{
  font-family:'DM Sans',system-ui,sans-serif;
  max-width:420px;
  margin:0 auto;
  padding:32px 24px 48px;
  -webkit-font-smoothing:antialiased;
}

/* Header */
.mvp-login-header{display:flex;align-items:center;gap:12px;margin-bottom:32px}
.mvp-login-logo svg{width:40px;height:40px;border-radius:12px}
.mvp-login-brand{font-size:1.4rem;font-weight:700;letter-spacing:-.03em;color:#0F1F2E}
.mvp-login-brand em{font-style:normal;color:#0D9488}

/* Tabs */
.mvp-login-tabs{display:flex;background:#F1F5F9;border-radius:12px;padding:4px;margin-bottom:24px;gap:4px}
.mvp-login-tab{flex:1;padding:10px;border:none;background:transparent;border-radius:9px;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:500;cursor:pointer;color:#64748B;transition:all .2s}
.mvp-login-tab.active{background:white;color:#0F1F2E;font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* Tagline */
.mvp-login-tagline{font-size:1rem;font-weight:500;color:#475569;margin-bottom:20px;letter-spacing:-.01em}

/* Social buttons */
.mvp-social-btns{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.mvp-social-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 20px;border:1.5px solid #E2E8F0;border-radius:12px;background:white;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:500;cursor:pointer;color:#0F1F2E;transition:all .2s}
.mvp-social-btn:hover{border-color:#0D9488;box-shadow:0 2px 8px rgba(13,148,136,.1);transform:translateY(-1px)}
.mvp-social-btn:active{transform:scale(.98)}

/* Divider */
.mvp-divider{position:relative;text-align:center;margin:20px 0}
.mvp-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:#E2E8F0}
.mvp-divider span{position:relative;background:white;padding:0 12px;font-size:.78rem;color:#94A3B8;font-weight:500}

/* Form */
.mvp-auth-form{display:flex;flex-direction:column;gap:14px}
.mvp-field{display:flex;flex-direction:column;gap:6px}
.mvp-auth-label{font-size:.8rem;font-weight:600;color:#475569;letter-spacing:.02em}
.mvp-auth-input{width:100%;padding:13px 16px;border:1.5px solid #E2E8F0;border-radius:12px;font-family:'DM Sans',sans-serif;font-size:.95rem;color:#0F1F2E;background:white;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}
.mvp-auth-input:focus{border-color:#0D9488;box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.mvp-auth-input::placeholder{color:#94A3B8}

/* Role buttons */
.mvp-role-btn{flex:1;padding:10px 8px;border:1.5px solid #E2E8F0;border-radius:10px;background:white;font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:500;cursor:pointer;color:#64748B;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px}
.mvp-role-btn:hover{border-color:#0D9488}
.mvp-role-btn.selected{border-color:#0D9488;background:#F0FDFA;color:#0D9488;font-weight:600}

/* Submit button */
.mvp-auth-btn{width:100%;padding:14px;background:#0D9488;color:white;border:none;border-radius:12px;font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s;margin-top:4px;letter-spacing:.01em}
.mvp-auth-btn:hover{background:#0A7A70;transform:translateY(-1px);box-shadow:0 4px 16px rgba(13,148,136,.3)}
.mvp-auth-btn:active{transform:scale(.98)}
.mvp-auth-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* Banner */
.mvp-auth-banner{padding:12px 16px;border-radius:10px;font-size:.85rem;font-weight:500;margin-bottom:16px;line-height:1.4}
.mvp-auth-banner-error{background:#FEE2E2;color:#991B1B;border:1px solid #FECACA}
.mvp-auth-banner-success{background:#D1FAE5;color:#065F46;border:1px solid #A7F3D0}

/* Terms */
.mvp-auth-terms{font-size:.75rem;color:#94A3B8;text-align:center;margin-top:16px;line-height:1.5}
.mvp-link{color:#0D9488;text-decoration:none;font-weight:500}
.mvp-link:hover{text-decoration:underline}

/* Responsive */
@media(max-width:480px){
  .mvp-login-wrap{padding:24px 20px 40px}
}