.intern-login {
  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 120px 20px;

  background:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url("../images/intern-bg.jpg");

  background-size: cover;
  background-position: center;
}

.login-card {
  width: 100%;
  max-width: 500px;

  background: white;

  padding: 40px;

  border-radius: 20px;

  text-align: center;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.login-card h1 {
  margin: 15px 0;
}

.login-card p {
  color: #666;

  margin-bottom: 30px;
}

.input-group {
  text-align: left;

  margin-bottom: 20px;
}

.input-group label {
  display: block;

  margin-bottom: 8px;

  font-weight: 600;
}

.input-group input {
  width: 100%;

  padding: 14px;

  border: 1px solid #ddd;

  border-radius: 10px;

  outline: none;
}

.login-card button {
  width: 100%;
}
@media (max-width: 768px) {
  .login-card {
    padding: 30px 25px;
  }
}
.portal-divider {
  margin: 25px 0;

  position: relative;

  text-align: center;
}

.portal-divider::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;

  width: 100%;
  height: 1px;

  background: #ddd;
}

.portal-divider span {
  position: relative;

  background: #fff;

  padding: 0 15px;

  color: #777;
}

.apply-btn {
  display: block;

  text-decoration: none;

  text-align: center;

  padding: 14px;

  border: 2px solid #f4a825;

  color: #f4a825;

  border-radius: 10px;

  font-weight: 600;

  transition: 0.3s ease;
}

.apply-btn:hover {
  background: #f4a825;

  color: white;
}
.portal-note {
  margin-top: 25px;

  font-size: 14px;

  line-height: 1.7;

  color: #666;

  text-align: center;
}
.login-message {
  display: none;

  margin: 15px 0;

  padding: 12px;

  border-radius: 8px;

  text-align: center;

  font-size: 14px;

  font-weight: 500;
}

.login-message.success {
  display: block;

  background: #e8f5e9;

  color: #2e7d32;

  border: 1px solid #81c784;
}

.login-message.error {
  display: block;

  background: #ffebee;

  color: #c62828;

  border: 1px solid #ef9a9a;
}
.intern-login {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  background: #08111f;
}

#particles-js {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.login-container {
  position: relative;
  z-index: 2;
}
.intern-login{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:#07111d;
}

.login-container{
    position:relative;
    z-index:2;
}
/* ===========================================
   FIRST TIME SETUP MODAL
=========================================== */

.setup-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    padding:20px;

    background:rgba(8,17,31,.72);

    backdrop-filter:blur(12px);

    z-index:99999;

    animation:fadeIn .3s ease;

}

.setup-modal.show{

    display:flex;

}

.setup-card{

    position:relative;

    width:100%;

    max-width:520px;

    max-height:90vh;

    overflow-y:auto;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.4);

    border-radius:24px;

    padding:28px;

    box-shadow:
        0 30px 70px rgba(0,0,0,.25);

    animation:popup .35s ease;

}

.setup-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        #16a34a,
        #22c55e,
        #84cc16
    );

}

.setup-icon{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    color:white;

    font-size:28px;

    margin-bottom:15px;

}
.setup-card h2{

    text-align:center;

    font-size:13px;

    font-weight:700;

    color:#111827;

    margin-bottom:8px;

}

.setup-card > p{

    text-align:center;

    color:#6b7280;

    line-height:1.4;

    font-size:14px;

    margin-bottom:20px;

}

.setup-card .input-group{

    margin-bottom:14px;

}

.setup-card label{

    display:block;

    margin-bottom:5px;

    font-size:14px;

    font-weight:600;

    color:#1f2937;

}

.setup-card input{

    width:100%;

    padding:12x 15x;

    border:2px solid #ececec;

    border-radius:14px;

    background:#fafafa;

    font-size:14x;

    transition:.25s;

}

.setup-card input:focus{

    outline:none;

    background:#fff;

    border-color:#22c55e;

    box-shadow:
        0 0 0 5px rgba(34,197,94,.15);

}

.setup-card input[readonly]{

    background:#f3f4f6;

    color:#555;

    cursor:not-allowed;

}

#setup-btn{

    width:100%;

    margin-top:5px;

    padding: 14px;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

#setup-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 15px 30px rgba(34,197,94,.35);

}

#setup-message{

    margin-bottom:18px;

}

body.modal-open{

    overflow:hidden;

}

@keyframes popup{

    from{

        opacity:0;

        transform:
            translateY(30px)
            scale(.95);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@media(max-width:768px){

    .setup-card{

        padding:30px;

        border-radius:22px;

    }

    .setup-icon{

        width:75px;

        height:75px;

        font-size:32px;

    }

    .setup-card h2{

        font-size:30px;

    }

}

@media(max-width:480px){

    .setup-card{

        padding:22px;

    }

    .setup-card h2{

        font-size:26px;

    }

    .setup-card > p{

        font-size:14px;

    }

}
.forgot-password{

    margin-top:18px;

    text-align:center

}

.forgot-password a{

    color:#16a34a;

    text-decoration:none;

    font-size:14px;

    font-weight:500;

}

.forgot-password a:hover{

    text-decoration:underline;

}