:root{
  --brand:#dc1f26;
  --text:#1a1f36;
  --muted:#697386;
  --bg:#fff;
  --card:#fff;
  --shadow:0 7px 14px rgba(60,66,87,.12),0 3px 6px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
body{background:#ffffff;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif}
a{color:var(--brand);text-decoration:none}

.gn-auth-root{
  height:90vh; /* cap page height to 90vh */
  display:flex; align-items:center; justify-content:center;
  padding:30px 16px; position:relative; overflow:auto;
}
.gn-auth-bg{position:fixed;inset:0;z-index:0;background:linear-gradient(#fff 0%, #f7fafc 33%)}
.gn-auth-wrap{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;align-items:center}
.gn-auth-brand{display:flex;justify-content:center}
.gn-logo-link img{display:block;max-width:200px;height:auto}

.gn-auth-card{background:var(--card);border-radius:10px;box-shadow:var(--shadow);max-width:520px;width:100%}
.gn-auth-inner{padding:40px 36px}

.gn-title{font-size:24px;margin:0 0 14px;color:#1a1f36}
.gn-sub{font-size:14px;color:var(--muted);margin:0 0 18px}

.gn-sso{text-align:center;margin-bottom:12px}
.gn-divider{display:flex;align-items:center;gap:12px;margin:10px 0 18px}
.gn-divider:before,.gn-divider:after{content:"";flex:1;height:1px;background:#e3e8ee}
.gn-divider span{font-size:12px;color:var(--muted)}

.field{margin-bottom:18px}
.field input[type="text"], .field input[type="email"], .field input[type="password"]{
  width:100%;min-height:44px;padding:8px 14px;border-radius:6px;border:1px solid #d7dbe2;
  outline-color:color-mix(in oklab, var(--brand) 50%, transparent);
}
.field-checkbox{display:flex;align-items:center}
.field-checkbox label{display:flex;gap:8px;align-items:center;margin:0;font-weight:500}

/* Eye icon inside password field */
.password-wrap{position:relative}
.password-wrap input{padding-right:44px}
.password-wrap .pw-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; cursor:pointer; padding:4px;
  color:var(--brand); line-height:0;
}

.reset-pass{margin-top:6px;text-align:left;}
.reset-pass a{font-size:13px;font-weight:600;color:var(--brand)}

.pwd-hint{font-size:12px;margin-top:6px;color:#b45309}

input[type="submit"]{
  appearance:none;border:0;border-radius:8px;background:var(--brand);color:#fff;font-weight:700; width: 100%;
  padding:12px 16px;cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.12),0 2px 5px rgba(60,66,87,.08)
}
input[type="submit"]:hover{filter:brightness(.95)}

.gn-footer{margin-top:12px;text-align:center}
.gn-footer span{font-size:14px}
.gn-auth-legal{display:flex;gap:16px;justify-content:center;font-size:13px;margin-top:14px}
.gn-auth-legal, .gn-auth-legal a{color:#000}

.gn-notice{padding:10px 12px;border-radius:8px;margin-bottom:14px;font-size:14px}
.gn-notice.is-success{background:#ecfdf5;border:1px solid #a7f3d0}
.gn-notice.is-error{background:#fef2f2;border:1px solid #fecaca}

.phone-row{display:flex;gap:8px}
.phone-row .phone-cc{
  min-width:200px;border:1px solid #d7dbe2;border-radius:6px;min-height:44px;padding:8px 10px;background:#fff
}

@media (max-width:520px){
  .gn-auth-inner{padding:28px 20px}
  .phone-row .phone-cc{min-width:140px}
}