/* RESET */
* {
  box-sizing: border-box;
}

body {

    margin:0;

    font-family:Inter, sans-serif;

    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

    overflow:hidden;

    position:relative;

    background:
      linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed,
        #9333ea
      );
      -webkit-font-smoothing: antialiased;
touch-action: manipulation;
}

body::before,
body::after {

    content:'';

    position:fixed;

    width:420px;
    height:420px;

    border-radius:50%;

    filter:blur(90px);

    opacity:.35;

    z-index:-1;

    animation:floatBlob 18s ease-in-out infinite;
}

body::before {

    background:#38bdf8;

    top:-120px;
    left:-120px;
}

body::after {

    background:#d946ef;

    bottom:-120px;
    right:-120px;

    animation-delay:6s;
}

@keyframes floatBlob {

    0%{
        transform:translate(0,0) scale(1);
    }

    33%{
        transform:translate(60px,-40px) scale(1.12);
    }

    66%{
        transform:translate(-40px,50px) scale(.92);
    }

    100%{
        transform:translate(0,0) scale(1);
    }
}



.login-box {

    width:100%;
    max-width:490px;

    padding:50px 48px;

    border-radius:32px;

    position:relative;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,0.10),
        rgba(255,255,255,0.04)
      );

    border:
      1px solid rgba(255,255,255,0.14);

    box-shadow:
      0 20px 50px rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(255,255,255,0.08);
}

.login-box h2 {
  margin-bottom: 20px;
}

input {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
}

button {
  width: 100%;
  padding: 12px;
  background: #4f46e5;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}




.password-field {
  position: relative;
}
.password-field input {

    padding-right:58px;
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 12px;
  color: #6b7280;
}


/* ===================================== */
/* LOGO */
/* ===================================== */

.login-logo-wrap {

    display:flex;
    justify-content:center;

    margin-bottom:22px;
}

.login-logo {

    width:150px;
    height:auto;

    display:block;

    filter:
      drop-shadow(0 10px 24px rgba(0,0,0,0.10));

    transition:.25s ease;
}

.login-logo:hover {

    transform:translateY(-2px);
}

/* ===================================== */
/* GOOGLE LOGIN */
/* ===================================== */

.google-login-btn {

    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:12px;

    margin-bottom:20px;

    border-radius:12px;

    text-decoration:none;

    font-size:14px;
    font-weight:600;

    color:#111827;

    background:white;

    border:1px solid rgba(0,0,0,0.06);

    box-shadow:
      0 6px 20px rgba(0,0,0,0.06);

    transition:.2s ease;
}

.google-login-btn:hover {

    transform:translateY(-2px);
}

/* divider */

.login-divider {

    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:18px;
}

.login-divider::before,
.login-divider::after {

    content:'';

    flex:1;

    height:1px;

    background:rgba(0,0,0,0.08);
}

.login-divider span {

    font-size:12px;

    color:#6b7280;
}



.login-footer {

    margin-top:18px;

    text-align:center;

    font-size:13px;

    color:#6b7280;
}

.login-footer a {

    color:#4f46e5;

    text-decoration:none;

    font-weight:700;
}

.logo-sub {

    margin:4px 0 24px;

    text-align:center;

    font-size:13px;

    color:rgba(255,255,255,0.72);

    letter-spacing:.02em;
}

.login-box h2 {

    color:white;

    text-align:center;

    font-size:28px;

    margin-bottom:10px;
}

.login-footer {

    color:rgba(255,255,255,0.75);
}

.login-footer a {

    color:white;
}

.login-divider span {

    color:rgba(255,255,255,0.7);
}

.login-divider::before,
.login-divider::after {

    background:rgba(255,255,255,0.16);
}


/* ========================= */
/* 📱 MOBILE APP STYLE */
/* ========================= */

@media (max-width: 768px) {
    

.login-box {

    width:100%;
    max-width:390px;

    padding:32px 28px;

    border-radius:32px;

    position:relative;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,0.10),
        rgba(255,255,255,0.04)
      );

    border:
      1px solid rgba(255,255,255,0.14);

    box-shadow:
      0 20px 50px rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(255,255,255,0.08);
}

  .login-box h2 {
    font-size: 26px;
    text-align: center;
    color: white;
    margin-bottom: 16px;
  }

input {

    width:100%;

    padding:14px 16px;

    margin-bottom:14px;

    border:none;

    border-radius:16px;

    font-size:16px;

    color:white;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,0.16),
        rgba(255,255,255,0.08)
      );

    backdrop-filter:blur(10px);

    transition:.2s ease;
}

input::placeholder {

    color:rgba(255,255,255,0.58);
}

input:focus {

    outline:none;

    box-shadow:
      0 0 0 3px rgba(255,255,255,0.08);
}


   .toggle-password {
    color: rgba(255,255,255,0.85);
  }
  
  input {
    background: rgba(255,255,255,0.12);
    color: white;
  }

  input::placeholder {
    color: rgba(255,255,255,0.65);
  }
}


@media (max-width:768px) {

    .login-footer {

        color:rgba(255,255,255,0.75);
    }

    .login-footer a {

        color:white;
    }
}
@media (max-width: 768px) {


  .mobile-hero h1 {
    font-size: 20px;
    margin: 0;
  }

  .mobile-hero p {
    font-size: 13px;
    opacity: 0.85;
    margin-top: 4px;
  }

}

/* mobile glass version */

@media (max-width:768px) {

    .login-logo {

        width:135px;
    }

    .google-login-btn {

        background:
          rgba(255,255,255,0.92);

        color:#111827;
    }

    .login-divider span {

        color:rgba(255,255,255,0.75);
    }

    .login-divider::before,
    .login-divider::after {

        background:rgba(255,255,255,0.18);
    }
}