:root{
  --hna-green:#075b7b;
  --hna-green-2:#087ca8;
  --hna-mint:#39a8d1;
  --hna-ink:#17303d;
  --hna-muted:#74837e;
  --hna-line:#dce9ef;
}

html,body.hn-auth-brand{min-height:100%}

body.hn-auth-brand{
  margin:0!important;
  min-height:100vh!important;
  background:#eef6fa!important;
  color:var(--hna-ink)!important;
}

body.hn-auth-brand .hn-login-shell{
  display:grid!important;
  grid-template-columns:minmax(320px,36%) minmax(0,64%)!important;
  width:100%!important;
  max-width:none!important;
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  align-items:stretch!important;
}

body.hn-auth-brand .hn-login-shell::before{
  display:none!important;
  content:none!important;
}

.hn-auth-brand-panel{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 14%,rgba(57,168,209,.22),transparent 28%),
    radial-gradient(circle at 88% 84%,rgba(8,124,168,.18),transparent 30%),
    linear-gradient(155deg,#032c40 0%,#064e6c 48%,#087ca8 100%);
  color:#fff;
}

.hn-auth-brand-panel::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-120px;
  width:320px;
  height:320px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  box-shadow:
    0 0 0 44px rgba(255,255,255,.035),
    0 0 0 88px rgba(255,255,255,.02);
}

.hn-auth-brand-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding:38px 42px 32px;
  box-sizing:border-box;
}

.hn-auth-brand-logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.hn-auth-brand-mark{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  font-size:19px;
  font-weight:950;
}

.hn-auth-brand-mark img{width:39px;height:31px;object-fit:contain;display:block}
.hn-auth-brand-logo strong{
  display:block;
  font-size:19px;
  letter-spacing:.03em;
}
.hn-auth-brand-logo strong span{color:#52bce2}
.hn-auth-brand-logo small{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.58);
  font-size:7px;
  font-weight:850;
  letter-spacing:.14em;
}

.hn-auth-brand-copy{
  margin:auto 0;
  max-width:470px;
}
.hn-auth-brand-kicker{
  display:block;
  margin-bottom:12px;
  color:#70c8e8;
  font-size:8px;
  font-weight:950;
  letter-spacing:.15em;
}
.hn-auth-brand-copy h2{
  margin:0;
  font-size:clamp(30px,3vw,48px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.hn-auth-brand-copy p{
  max-width:430px;
  margin:18px 0 0;
  color:rgba(255,255,255,.70);
  font-size:12px;
  line-height:1.65;
}

.hn-auth-brand-points{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px;
}
.hn-auth-brand-points span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.83);
  font-size:8px;
  font-weight:800;
}
.hn-auth-brand-foot{
  margin-top:auto;
  color:rgba(255,255,255,.42);
  font-size:8px;
  letter-spacing:.06em;
}

/* Right side: center the actual auth content */
body.hn-auth-brand .hn-login-shell > .hn-brand{
  display:none!important;
}

body.hn-auth-brand .hn-login-card{
  align-self:center!important;
  justify-self:center!important;
  width:min(100% - 44px,460px)!important;
  max-width:460px!important;
  margin:40px auto!important;
  padding:30px!important;
  border:1px solid rgba(209,225,219,.95)!important;
  border-radius:26px!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 30px 80px rgba(22,66,56,.12)!important;
  box-sizing:border-box!important;
}

body.hn-auth-brand .hn-login-card::before{
  content:"";
  position:absolute;
  left:0;top:0;right:0;
  height:4px;
  background:linear-gradient(90deg,#075b7b,#087ca8,#39a8d1);
}

body.hn-auth-brand .hn-login-card{
  position:relative!important;
  overflow:hidden!important;
}

body.hn-auth-brand .hn-login-heading h1{
  margin:0 0 7px!important;
  font-size:31px!important;
  letter-spacing:-.045em!important;
  color:#172f3a!important;
}
body.hn-auth-brand .hn-login-heading p{
  color:#75857f!important;
  line-height:1.55!important;
}

body.hn-auth-brand .hn-login-card .hn-field{
  display:grid!important;
  gap:7px!important;
}
body.hn-auth-brand .hn-login-card .hn-field > span{
  color:#4c6672!important;
  font-size:9px!important;
  font-weight:900!important;
}
body.hn-auth-brand .hn-login-card input[type=email],
body.hn-auth-brand .hn-login-card input[type=password],
body.hn-auth-brand .hn-login-card input[type=text]{
  width:100%!important;
  min-height:48px!important;
  padding:11px 13px!important;
  box-sizing:border-box!important;
  border:1px solid #d4e1dc!important;
  border-radius:13px!important;
  background:#fbfdfc!important;
  color:#203946!important;
  outline:none!important;
}
body.hn-auth-brand .hn-login-card input:focus{
  border-color:#61acd0!important;
  box-shadow:0 0 0 4px rgba(8,124,168,.10)!important;
}

body.hn-auth-brand .hn-btn-primary{
  background:linear-gradient(135deg,#0b91c4,#087ca8)!important;
  border-color:#087ca8!important;
  box-shadow:0 10px 24px rgba(8,124,168,.18)!important;
}
body.hn-auth-brand .hn-btn-primary:hover{
  filter:brightness(1.03);
}

.hn-auth-password-wrap{
  position:relative;
}
.hn-auth-password-wrap input{
  padding-right:64px!important;
}
.hn-auth-password-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  min-width:46px;
  height:32px;
  border:0;
  border-radius:9px;
  background:#edf5f2;
  color:#426674;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

body.hn-auth-brand .hn-login-footer{
  display:none!important;
}

@media(max-width:900px){
  body.hn-auth-brand .hn-login-shell{
    display:flex!important;
    flex-direction:column!important;
    min-height:100vh!important;
  }

  .hn-auth-brand-panel{
    min-height:auto;
    background:linear-gradient(135deg,#064e6c,#075b7b)!important;
  }

  .hn-auth-brand-inner{
    min-height:auto;
    padding:18px 20px 20px;
  }

  .hn-auth-brand-copy{
    margin:18px 0 0;
  }

  .hn-auth-brand-copy h2{
    font-size:25px;
  }

  .hn-auth-brand-copy p,
  .hn-auth-brand-points,
  .hn-auth-brand-foot{
    display:none;
  }

  body.hn-auth-brand .hn-login-card{
    width:min(100% - 30px,460px)!important;
    margin:26px auto 34px!important;
  }
}

@media(max-width:520px){
  .hn-auth-brand-logo small{display:none}
  .hn-auth-brand-copy h2{font-size:22px}
  body.hn-auth-brand .hn-login-card{
    width:calc(100% - 24px)!important;
    padding:22px 18px!important;
    border-radius:22px!important;
  }
  body.hn-auth-brand .hn-login-heading h1{
    font-size:28px!important;
  }
}


/* =========================================================
   HABNEX Auth Polish v2
   Finishing pass: eye icon, centered links, footer/security
   ========================================================= */

body.hn-auth-brand .hn-login-card{
  display:flex!important;
  flex-direction:column!important;
}

body.hn-auth-brand .hn-login-heading{
  text-align:left!important;
}

body.hn-auth-brand .hn-login-card form{
  display:grid!important;
  gap:14px!important;
  width:100%!important;
}

.hn-auth-password-wrap{
  position:relative!important;
  display:block!important;
  width:100%!important;
}

.hn-auth-password-wrap input{
  width:100%!important;
  padding-right:54px!important;
}

.hn-auth-password-toggle{
  position:absolute!important;
  top:50%!important;
  right:9px!important;
  transform:translateY(-50%)!important;
  display:grid!important;
  place-items:center!important;
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#557580!important;
  cursor:pointer!important;
  box-shadow:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}

.hn-auth-password-toggle:hover{
  background:#eef6f3!important;
  color:#087ca8!important;
}

.hn-auth-password-toggle:focus-visible{
  outline:2px solid rgba(13,146,124,.30)!important;
  outline-offset:2px!important;
}

.hn-eye-icon{
  position:relative;
  display:block;
  width:18px;
  height:12px;
  border:1.8px solid currentColor;
  border-radius:50% / 60%;
  box-sizing:border-box;
}

.hn-eye-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:currentColor;
}

.hn-auth-password-toggle.is-visible .hn-eye-icon::before{
  content:"";
  position:absolute;
  left:-2px;
  top:5px;
  width:22px;
  height:1.8px;
  transform:rotate(-35deg);
  transform-origin:center;
  border-radius:999px;
  background:currentColor;
}

body.hn-auth-brand .hn-login-links{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  width:100%!important;
  margin-top:20px!important;
  text-align:center!important;
}

body.hn-auth-brand .hn-login-help,
body.hn-auth-brand .hn-login-back{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  margin:0!important;
  padding:7px 9px!important;
  border-radius:9px!important;
  color:#4e707c!important;
  font-size:10px!important;
  font-weight:850!important;
  line-height:1!important;
  text-decoration:none!important;
}

body.hn-auth-brand .hn-login-help{
  color:#087ca8!important;
}

body.hn-auth-brand .hn-login-help:hover,
body.hn-auth-brand .hn-login-back:hover{
  background:#f0f6f4!important;
  color:#075b7b!important;
}

body.hn-auth-brand .hn-login-security{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:calc(100% + 60px)!important;
  margin:22px -30px -30px!important;
  padding:12px 16px!important;
  box-sizing:border-box!important;
  border-top:1px solid #e4ece9!important;
  background:#f7faf9!important;
  color:#7d8c87!important;
  text-align:center!important;
}

body.hn-auth-brand .hn-security-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:18px!important;
  height:18px!important;
  border-radius:50%!important;
  background:#e4f5ef!important;
  color:#087ca8!important;
  font-size:10px!important;
  font-weight:950!important;
}

body.hn-auth-brand .hn-login-security small{
  font-size:8.5px!important;
  line-height:1.35!important;
}

body.hn-auth-brand .hn-login-card .hn-alert{
  margin:0 0 16px!important;
}

body.hn-auth-brand .hn-login-card .hn-btn-primary{
  min-height:48px!important;
  margin-top:2px!important;
  border-radius:13px!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
}

body.hn-auth-brand .hn-login-card .hn-remember-row{
  display:flex!important;
  align-items:flex-start!important;
  gap:9px!important;
  margin-top:0!important;
}

body.hn-auth-brand .hn-login-card .hn-remember-row input[type="checkbox"]{
  margin-top:1px!important;
  accent-color:#0b91c4!important;
}

body.hn-auth-brand .hn-login-card .hn-remember-row span{
  display:block!important;
  color:#536f7b!important;
  font-size:10px!important;
  font-weight:800!important;
}

body.hn-auth-brand .hn-login-card .hn-remember-row small{
  display:block!important;
  margin-top:2px!important;
  color:#8a9692!important;
  font-size:8px!important;
  font-weight:500!important;
}

@media(max-width:900px){
  body.hn-auth-brand .hn-login-links{
    gap:10px!important;
  }
}

@media(max-width:520px){
  body.hn-auth-brand .hn-login-links{
    flex-direction:column!important;
    gap:4px!important;
    margin-top:16px!important;
  }

  body.hn-auth-brand .hn-login-security{
    width:calc(100% + 36px)!important;
    margin:20px -18px -22px!important;
  }
}


/* GESA-NO-GREEN */
body.hn-auth-brand input[type="checkbox"],
body.hn-auth-brand input[type="radio"]{accent-color:#087ca8!important;}
body.hn-auth-brand .hn-remember-row input[type="checkbox"]{accent-color:#087ca8!important;}