body{
    margin:0;
    font-family:Inter, "Segoe UI", system-ui;
    background:  #f68d2d;
    background-image: url(/src/assets/img/pattern/11.svg) !important;
   
}


.erp-login-wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.erp-login-card{
  width:100%;
  max-width:420px;
  background:#fff;
  padding:50px 40px;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.15);
}

.erp-logo{
  text-align:center;
  margin-bottom:40px;
}

.erp-logo img{
  max-height:60px;
  margin-bottom:10px;
}

.erp-title{
  font-size:16px;
  color:#666;
}

.erp-form{
  display:grid;
  gap:20px;
}

.erp-field{
  display:flex;
  flex-direction:column;
}

.erp-field label{
  font-size:13px;
  color:#777;
  margin-bottom:6px;
}

.erp-field input{
  height:44px;
  border-radius:6px;
  border:1px solid #dcdfe4;
  padding:0 12px;
  font-size:14px;
}

.erp-field input:focus{
  outline:none;
  border-color:#f58220;
}

.password{
  position:relative;
}

.password span{
  position:absolute;
  right:12px;
  top:36px;
  cursor:pointer;
  opacity:.5;
}

.erp-btn{
  height:46px;
  border:none;
  border-radius:6px;
  background:#f58220;
  color:white;
  font-weight:600;
  cursor:pointer;
}

.erp-btn:hover{
  background:#e07018;
}

.erp-status{
  font-size:12px;
  color:#f58220;
  text-align:center;
}

/* ===== PROTEIN FOOTER ===== */
.erp-footer{
    position:fixed;
    bottom:15px;
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    pointer-events:none;
}

.erp-footer img{
    height:32px;
    filter: brightness(0) invert(2);
}

.protein-link{
    position:relative;
    display:inline-block;
    opacity:.45;
    transition:.25s;
    pointer-events:auto;   /* ← FIX */
}

.protein-link:hover{
    opacity:.85;
}

/* TOOLTIP */
.protein-link::after{
    content: attr(data-tooltip);
    position:absolute;
    bottom: 104%;
    left:50%;
    transform:translateX(-50%);
    background:#2c2c2c;
    color:white;
    font-size:11px;
    padding:6px 10px;
    border-radius:6px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:.2s;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
}

.protein-link::before{
    content:"";
    position:absolute;
    bottom: 119%;
    left:50%;
    transform: translateX(-49%);
    border-width:6px;
    border-style:solid;
    border-color:#2c2c2c transparent transparent transparent;
    opacity:0;
    transition:.2s;
}

.protein-link:hover::after,
.protein-link:hover::before{
    opacity:1;
}