/* ======================================
   AUTH PAGE
====================================== */

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

body{
  background:#f5f7fb;
  font-family:system-ui,sans-serif;
  overflow-x:hidden;
}

/* PAGE */
.auth-page{
  min-height:100vh;

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

  padding:40px 16px;
}

/* CARD */
.auth-card{
  width:100%;
  max-width:480px;

  background:#fff;

  border-radius:24px;

  padding:32px;

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

/* LOGO */
.auth-logo{
  text-align:center;
  margin-bottom:28px;
}

.auth-logo a{
  font-size:2.4rem;
  font-weight:800;

  text-decoration:none;

  background:linear-gradient(
    135deg,
    #0284C7,
    #38BDF8,
    #7C3AED
  );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}

.auth-logo p{
  margin-top:10px;
  color:#64748B;
}

/* TABS */
.auth-tabs{
  display:flex;

  background:#f1f5f9;

  padding:6px;

  border-radius:14px;

  margin-bottom:24px;
}

.auth-tabs a{
  flex:1;

  height:48px;

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

  text-decoration:none;

  border-radius:12px;

  font-size:1rem;
  font-weight:700;

  color:#64748b;

  transition:0.3s;
}

.auth-tabs a.active{
  background:#fff;

  color:#0284C7;

  box-shadow:
  0 4px 10px rgba(0,0,0,0.06);
}

/* FORM */
.auth-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* INPUT */
.input-group{
  display:flex;
  flex-direction:column;
}

.input-group label{
  margin-bottom:8px;

  font-size:0.95rem;
  font-weight:600;

  color:#1e293b;
}

.input-group input{
  width:100%;

  height:56px;

  border:1px solid #dbe2ea;

  border-radius:14px;

  padding:0 18px;

  font-size:1rem;

  outline:none;

  transition:0.3s;
}

.input-group input:focus{
  border-color:#0284C7;

  box-shadow:
  0 0 0 4px rgba(2,132,199,0.10);
}

/* BUTTON */
.auth-btn{
  width:100%;

  height:56px;

  border:none;

  border-radius:14px;

  background:linear-gradient(
    135deg,
    #0284C7,
    #0EA5E9
  );

  color:#fff;

  font-size:1rem;
  font-weight:700;

  cursor:pointer;

  transition:0.3s;
}

.auth-btn:hover{
  transform:translateY(-2px);

  box-shadow:
  0 10px 25px rgba(2,132,199,0.25);
}

/* ERROR */
.error-box{
  margin-top:18px;

  padding:14px;

  border-radius:12px;

  background:#fee2e2;

  color:#b91c1c;

  font-size:0.92rem;
}

/* HIDDEN */
.hidden{
  display:none;
}

/* MOBILE */
@media(max-width:768px){

  .auth-card{
    padding:24px 18px;

    border-radius:20px;
  }

  .auth-logo a{
    font-size:2rem;
  }

}