:root{
    --paper:#f3eddf;
    --paper-light:#fbf8ef;
    --ink:#26342e;
    --muted:#6d756f;
    --green:#173a2d;
    --green-soft:#285744;
    --gold:#b78a35;
    --gold-light:#d8bb75;
    --danger:#8b423b;
    --success:#2f674c;
    --line:rgba(67,70,55,.18);
    --shadow:0 22px 56px rgba(40,42,33,.14);
}

*{
    box-sizing:border-box;
}

html,
body{
    min-height:100%;
}

html{
    background:var(--paper);
}

body.auth-page{
    min-height:100vh;
    height:auto;
    overflow:auto;
    margin:0;
    padding:28px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink);
    background:
        radial-gradient(circle at 12% 8%,rgba(183,138,53,.11),transparent 28rem),
        repeating-linear-gradient(0deg,rgba(61,55,43,.025) 0,rgba(61,55,43,.025) 1px,transparent 1px,transparent 5px),
        var(--paper);
    font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
    line-height:1.6;
}

.login-box,
.card,
.error-card{
    width:100%;
    max-width:470px;
    margin:auto;
    padding:30px;
    color:var(--ink);
    background:rgba(251,248,239,.96);
    border:1px solid var(--line);
    border-top:4px solid var(--gold);
    border-radius:0;
    box-shadow:var(--shadow);
}

.login-box::before,
.card::before,
.error-card::before{
    content:"UNIK1 - PUSAT PEMBIMBING UMRAH";
    display:block;
    margin:-4px 0 22px;
    color:var(--gold);
    font-size:9px;
    font-weight:800;
    letter-spacing:.17em;
    text-align:center;
    text-transform:uppercase;
}

.logo{
    margin:0 0 20px;
    text-align:center;
}

.logo img{
    width:min(170px,60%);
    max-height:72px;
    object-fit:contain;
    filter:none;
}

.title,
.card h2,
.error-card h1{
    margin:0 0 8px;
    color:var(--green);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(26px,7vw,34px);
    font-weight:700;
    line-height:1.15;
    text-align:center;
}

.subtitle{
    margin:0 0 24px;
    color:var(--muted);
    font-size:13px;
    line-height:1.7;
    text-align:center;
}

.field-label{
    display:block;
    margin:0 0 6px;
    color:var(--green);
    font-size:10px;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.input,
.card .input{
    width:100%;
    height:52px;
    margin:0 0 14px;
    padding:0 15px;
    color:var(--ink);
    background:#fffdf7;
    border:1px solid var(--line);
    border-radius:0;
    outline:none;
}

.input::placeholder{
    color:#929891;
}

.input:focus,
.card .input:focus{
    border:1px solid var(--gold);
    outline:none;
    box-shadow:0 0 0 3px rgba(183,138,53,.12);
}

.password-field{
    position:relative;
}

.password-field .input{
    padding-right:88px;
}

.password-toggle{
    position:absolute;
    right:10px;
    top:26px;
    transform:translateY(-50%);
    min-width:68px;
    height:34px;
    padding:0 9px;
    color:var(--green);
    background:transparent;
    border:1px solid var(--line);
    border-radius:0;
    cursor:pointer;
    font-size:11px;
    font-weight:800;
}

.login-btn,
.btn,
.error-card .back,
#verifyBtn{
    width:100%;
    min-height:52px;
    margin-top:5px;
    padding:13px 16px;
    display:grid;
    place-items:center;
    color:var(--paper-light);
    background:var(--green);
    border:1px solid var(--green);
    border-radius:0;
    cursor:pointer;
    font-size:13px;
    font-weight:800;
    letter-spacing:.03em;
    text-decoration:none;
}

.secondary-link,
.forgot-link{
    width:100%;
    min-height:48px;
    margin-top:10px;
    padding:12px 15px;
    display:grid;
    place-items:center;
    color:var(--green);
    background:transparent;
    border:1px solid var(--green);
    border-radius:0;
    font-size:12px;
    font-weight:800;
    text-align:center;
    text-decoration:none;
}

.forgot-link{
    color:var(--danger);
    border-color:rgba(139,66,59,.45);
}

.note,
.footer{
    margin-top:22px;
    color:var(--muted);
    font-size:11px;
    letter-spacing:.04em;
    text-align:center;
}

.success,
.error{
    margin:0 0 18px;
    padding:13px 14px;
    border-radius:0;
    color:var(--ink);
    background:rgba(47,103,76,.09);
    border:1px solid rgba(47,103,76,.27);
    border-left:4px solid var(--success);
    font-size:13px;
    line-height:1.6;
    text-align:left;
}

.error{
    background:rgba(139,66,59,.08);
    border-color:rgba(139,66,59,.24);
    border-left-color:var(--danger);
}

.register-heading{
    margin-bottom:6px!important;
}

.register-intro{
    margin:0 0 24px;
    color:var(--muted);
    font-size:13px;
    text-align:center;
}

.icon,
.error-card .icon{
    width:66px;
    height:66px;
    margin:0 auto 18px;
    display:grid;
    place-items:center;
    color:var(--paper-light);
    background:var(--green);
    border:0;
    border-radius:50%;
    box-shadow:none;
    font-family:Georgia,"Times New Roman",serif;
    font-size:15px;
    font-weight:800;
    letter-spacing:.06em;
}

.error-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
    text-align:center;
}

.email{
    margin:16px 0 0;
    color:var(--green);
    font-family:Georgia,"Times New Roman",serif;
    font-size:17px;
    font-weight:700;
    text-align:center;
}

#otpForm{
    margin-top:26px;
}

.otp-wrapper{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:7px;
}

.otp{
    width:100%;
    max-width:none;
    height:62px;
    color:var(--ink);
    background:#fffdf7;
    border:1px solid var(--line);
    border-radius:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:28px;
    font-weight:700;
    text-align:center;
}

.otp:focus{
    border-color:var(--gold);
    outline:none;
    box-shadow:0 0 0 3px rgba(183,138,53,.12);
    transform:none;
}

.otp.filled{
    color:var(--green);
    background:rgba(183,138,53,.08);
    border-color:var(--gold);
}

#verifyBtn:disabled{
    opacity:.48;
    cursor:not-allowed;
}

.countdown{
    margin-top:20px;
    color:var(--muted);
    font-size:12px;
    text-align:center;
}

.countdown b{
    display:block;
    margin-top:3px;
    color:var(--gold);
    font-family:Georgia,"Times New Roman",serif;
    font-size:22px;
}

#resendForm{
    margin-top:14px;
}

.resend,
#resendBtn{
    width:100%;
    min-height:46px;
    margin:0;
    color:var(--green);
    background:transparent;
    border:1px solid var(--green);
    border-radius:0;
    cursor:pointer;
    font-size:12px;
    font-weight:800;
}

#resendBtn:disabled{
    color:var(--muted);
    border-color:var(--line);
    cursor:not-allowed;
}

@media(max-width:430px){
    body.auth-page{
        padding:18px 12px;
        align-items:flex-start;
    }

    .login-box,
    .card,
    .error-card{
        padding:24px 18px;
    }

    .otp{
        height:54px;
        font-size:23px;
    }
}

@media(prefers-reduced-motion:reduce){
    *{
        animation:none!important;
        transition:none!important;
    }
}