:root{ --ax-green: var(--theme-color, #625BF6); --ax-green-d: var(--theme-color-dark, #4F48D1); --ax-ink:#1a2b4a; --ax-muted:#5b6472; --ax-line:#d7dde5; --ax-bg:#fff; --ax-err:#e5484d; --ax-link:#2f6bff; --ax-head:'Plus Jakarta Sans','Poppins',Arial,sans-serif; } *{box-sizing:border-box;} html, body{margin:0;padding:0;} body{ font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--ax-ink); -webkit-font-smoothing:antialiased; } .ax-page{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:46px 16px; /* --ax-auth-bg is set inline in only when the admin uploads a custom background via Manage Section > auth_section; falls back to the shipped default image otherwise. */ background: linear-gradient(135deg, rgba(40,38,90,.82) 0%, rgba(10,10,10,.90) 100%), var(--ax-auth-bg, url(../../images/auth_section/authimage.png)) center center / cover no-repeat; background-attachment:fixed; } .ax-logo{display:inline-flex; align-items:center; margin-bottom:24px;} .ax-logo img{height:50px; width:auto; max-width:230px; object-fit:contain;} .ax-card{ width:100%; max-width:480px; background:#fff; border-radius:12px; padding:34px 38px; box-shadow:0 26px 70px rgba(0,0,0,.30); } .ax-card-wide{max-width:640px;} .ax-card-title{ font-family:var(--ax-head); font-size:1.5rem; font-weight:700; text-align:center; color:var(--ax-ink); margin:0 0 22px; } .ax-card-title-lg{font-size:1.7rem;} .ax-card-desc{color:var(--ax-muted); font-size:.92rem; line-height:1.65; margin:0 0 22px;} .ax-top-link{font-size:.9rem; color:var(--ax-muted); margin:0 0 18px;} .ax-top-link a{color:var(--ax-ink); font-weight:700; text-decoration:underline;} .ax-form-hd{text-align:center; margin-bottom:22px;} .ax-form-title{font-family:var(--ax-head); font-size:1.5rem; font-weight:700; margin:0 0 6px; color:var(--ax-ink);} .ax-form-sub{color:var(--ax-muted); font-size:.9rem;} .ax-alert{padding:11px 15px; border-radius:8px; font-size:.86rem; margin-bottom:16px;} .ax-alert-ok{background:rgba(98,91,246,.1); color:var(--ax-green-d); border:1px solid rgba(98,91,246,.3);} .ax-err{color:var(--ax-err);} .ax-alert.ax-err{background:rgba(229,72,77,.08); border:1px solid rgba(229,72,77,.28);} .ax-recaptcha-err{display:none; font-size:.8rem; margin-top:6px;} .ax-field{margin-bottom:18px;} .ax-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;} .ax-label{display:block; font-size:.8rem; font-weight:500; color:var(--ax-muted); margin-bottom:7px;} .ax-link{font-size:.88rem; color:var(--ax-link); text-decoration:none;} .ax-link:hover{text-decoration:underline;} .ax-link-row{display:flex; justify-content:flex-end; margin:-6px 0 16px;} .ax-inp{ width:100%; height:48px; border:1px solid var(--ax-line); background:#fff; border-radius:6px; padding:0 14px; font-size:.95rem; color:var(--ax-ink); transition:border-color .15s, box-shadow .15s; outline:none; } .ax-inp::placeholder{color:#9aa3b2;} .ax-inp:focus{border-color:var(--ax-green); box-shadow:0 0 0 3px rgba(98,91,246,.15);} select.ax-inp{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6472' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; cursor:pointer;} .ax-check{display:flex; align-items:center; gap:8px; margin:2px 0 18px; font-size:.88rem; color:var(--ax-muted);} .ax-check input{width:16px; height:16px; accent-color:var(--ax-green); cursor:pointer;} .ax-check label{cursor:pointer;} .ax-check-row{display:flex; align-items:center; justify-content:space-between; margin:2px 0 18px;} .ax-check-row .ax-check{margin:0;} .ax-btn, button.hn_btn_solid, .hn_btn_solid{ width:100%; min-height:48px; border:none; border-radius:6px; cursor:pointer; background:var(--ax-green); color:#fff; font-size:.98rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:filter .15s, transform .08s; text-decoration:none; } .ax-btn:hover, .hn_btn_solid:hover{filter:brightness(1.07); color:#fff;} .ax-btn:active, .hn_btn_solid:active{transform:translateY(1px);} .ax-bottom-link{text-align:center; font-size:.9rem; color:var(--ax-muted); margin-top:18px;} .ax-bottom-link a{color:var(--ax-green); font-weight:700; text-decoration:none;} .ax-bottom-link a:hover{text-decoration:underline;} .ax-divider{display:flex; align-items:center; text-align:center; color:#9aa3b2; font-size:.78rem; margin:22px 0 16px;} .ax-divider::before, .ax-divider::after{content:""; flex:1; height:1px; background:var(--ax-line);} .ax-divider span{padding:0 14px;} .ax-socials{display:grid; grid-template-columns:1fr 1fr; gap:11px;} .ax-soc-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; height:46px; border:1px solid var(--ax-line); border-radius:6px; background:#fff; color:var(--ax-ink); font-size:.86rem; font-weight:600; text-decoration:none; transition:.15s;} .ax-soc-btn:hover{border-color:var(--ax-green); color:var(--ax-green);} .ax-soc-btn .fa-google{color:#ea4335;} .ax-soc-btn .fa-facebook-f{color:#1877f2;} .ax-otp{display:flex; gap:10px; justify-content:space-between; margin:6px 0 22px;} .ax-otp-box{width:100%; aspect-ratio:1/1; max-height:58px; text-align:center; font-size:1.4rem; font-weight:700; color:var(--ax-ink); border:1px solid var(--ax-line); background:#fff; border-radius:8px; outline:none; transition:border-color .15s, box-shadow .15s;} .ax-otp-box:focus{border-color:var(--ax-green); box-shadow:0 0 0 3px rgba(98,91,246,.15);} .ax-otp-resend{text-align:center; font-size:.86rem; color:var(--ax-muted); margin-top:18px; display:flex; align-items:center; justify-content:center; gap:6px;} .ax-otp-resend-form{display:inline;} .ax-link-btn{border:none; background:transparent; color:var(--ax-green); font-weight:700; font-size:.86rem; cursor:pointer; padding:0; text-decoration:none;} .ax-link-btn:hover{text-decoration:underline;} @media(max-width:420px){ .ax-otp{gap:7px;} .ax-otp-box{font-size:1.2rem;} } .form-group{margin-bottom:18px;} .form-label{display:block; font-size:.8rem; font-weight:500; color:var(--ax-muted); margin-bottom:7px;} .form-control{ width:100%; height:48px; border:1px solid var(--ax-line); background:#fff; border-radius:6px; padding:0 14px; font-size:.95rem; color:var(--ax-ink); outline:none; transition:border-color .15s, box-shadow .15s; } .form-control:focus{border-color:var(--ax-green); box-shadow:0 0 0 3px rgba(98,91,246,.15);} .nx-input-icon{position:relative; display:flex; align-items:center;} .nx-input-icon-left{position:absolute; left:14px; color:var(--ax-muted); font-size:1rem; pointer-events:none;} .nx-input-icon .form-control{padding-left:42px;} .nx-input-icon-right{position:absolute; right:12px; color:var(--ax-muted); cursor:pointer;} .nx-auth-title{font-family:var(--ax-head); font-size:1.5rem; font-weight:700; text-align:center; color:var(--ax-ink); margin:0 0 6px;} .nx-auth-sub{text-align:center; color:var(--ax-muted); font-size:.92rem; line-height:1.6; margin:0 0 18px;} .nx-feature-icon, .nx-icon-circle{width:54px; height:54px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(98,91,246,.12); color:var(--ax-green); font-size:1.4rem; margin-bottom:6px;} .nx-muted{color:var(--ax-muted); font-size:.85rem;} .text-center{text-align:center;} .mb-3{margin-bottom:1rem;} .mb-4{margin-bottom:1.5rem;} .mt-3{margin-top:1rem;} .mx-auto{margin-left:auto; margin-right:auto;} .w-100{width:100%;} .justify-content-center{justify-content:center;} .g-recaptcha{transform-origin:left top;} .hidden{display:none;} @media(max-width:540px){ .ax-card{padding:26px 22px;} .ax-card-wide{max-width:480px;} .ax-row{grid-template-columns:1fr; gap:0;} .ax-socials{grid-template-columns:1fr;} .ax-logo img{height:42px;} }