@import url('base.css');

body{
    background:var(--primary-bg);
    color:var(--text-primary);
    font-family:Arial,Helvetica,sans-serif;
    overflow-x:hidden;
    padding-top:0;
}

/* ─── brand block ────────────────────────────────────────── */
.auth-header{
    margin-top:40px;
    display:flex;
    flex-direction:column;      /* stack logo over text */
    align-items:center;
    gap:14px;
}

.auth-logo{
    width:140px;
    height:auto;
}

.auth-brand{
    font-size:48px;
    font-weight:400;            /* Endolum light */
    color:var(--text-primary);
    text-align:center;
}

.highlight{
    color:var(--accent-purple);
    font-weight:800;            /* Academy bold */
}

/* ─── card ──────────────────────────────────────────────── */
.auth-main{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:calc(100vh - 420px);
}

.auth-card{
    width:100%;
    max-width:420px;
    background:linear-gradient(145deg,var(--secondary-bg),var(--primary-bg));
    border:2px solid var(--accent-purple);
    border-radius:14px;
    padding:48px 42px;
    box-shadow:0 6px 18px rgba(0,0,0,.45);
    animation:slideInUp .8s ease-out;
}

.auth-title{
    text-align:center;
    font-size:34px;
    margin-bottom:32px;
    color:var(--accent-purple);
}

.auth-form{display:flex;flex-direction:column;gap:22px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group label{font-weight:700;color:var(--accent-green)}
.form-group input{
    background:var(--border-color);
    color:var(--text-primary);
    border:2px solid transparent;
    border-radius:8px;
    padding:13px 15px;
    font-size:15px;
    transition:border-color .3s,box-shadow .3s;
}
.form-group input:focus{
    outline:none;
    border-color:var(--accent-purple);
    box-shadow:0 0 10px rgba(140,82,255,.6);
}

.auth-form .button{
    padding:15px;
    font-size:17px;
}

.switch-text{text-align:center;margin-top:10px;font-size:14px}
.switch-text a{color:var(--accent-purple);text-decoration:none}
.switch-text a:hover{text-decoration:underline}

.forgot-password-link{
    text-align:right;
    margin-top:8px;
}
.forgot-password-link a{
    color:var(--accent-purple);
    text-decoration:none;
    font-size:13px;
    opacity:0.8;
    transition:opacity .3s ease;
}
.forgot-password-link a:hover{
    opacity:1;
    text-decoration:underline;
}

/* ─── responsive tweaks ────────────────────────────────── */
@media(max-width:768px){
  .auth-header{margin-top:25px;gap:10px}
  .auth-logo{width:110px}
  .auth-brand{font-size:36px}
  .auth-card{padding:38px 28px}
  .auth-title{font-size:28px}
}