:root{
  --jct-login-gold:#d4af37;
  --jct-login-gold-bright:#f4d35e;
  --jct-login-gold-soft:#e0b92f;
  --jct-login-canvas:#080909;
  --jct-login-surface:rgba(18,19,20,.88);
  --jct-login-text:#f5f5f3;
  --jct-login-muted:#a2a3a5;
  --jct-login-border:rgba(216,173,53,.46);
  --jct-login-field:rgba(31,33,35,.92);
  --jct-login-field-border:rgba(255,255,255,.20);
  --jct-login-danger:#ef7a7a;
  --jct-login-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

html{background:var(--jct-login-canvas);color-scheme:dark}
body.login{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  padding:max(28px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));
  overflow-x:hidden;
  background:
    radial-gradient(circle at 7% 8%,rgba(212,165,55,.18),transparent 28rem),
    radial-gradient(circle at 94% 95%,rgba(212,165,55,.20),transparent 32rem),
    radial-gradient(circle at 50% 47%,rgba(255,255,255,.018),transparent 36rem),
    linear-gradient(135deg,#090a0a 0%,#080909 55%,#0a0907 100%);
  color:var(--jct-login-text);
  font-family:var(--jct-login-font);
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
body.login *{box-sizing:border-box}

/* Decorative arcs: visual only, never interactive. */
body.login::before,
body.login::after{
  content:"";
  position:fixed;
  z-index:-1;
  width:min(72vw,920px);
  aspect-ratio:1;
  border:1px solid rgba(216,173,53,.50);
  border-radius:50%;
  pointer-events:none;
  box-shadow:0 0 44px rgba(216,173,53,.05);
}
body.login::before{top:-48vw;left:-40vw}
body.login::after{right:-42vw;bottom:-50vw}

body.login #login{
  width:min(440px,calc(100vw - 64px));
  padding:0;
  margin:0;
}

body.login h1{
  margin:0 0 22px;
  text-align:center;
}
body.login h1 a{
  display:block;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  background:none!important;
  color:transparent;
  font-size:0;
  line-height:1;
  text-indent:0;
  overflow:visible;
  filter:none;
}
body.login h1 a::before{
  content:"JCTGBTG DXB";
  display:block;
  color:#e0b92f!important;
  -webkit-text-fill-color:#e0b92f!important;
  font-size:clamp(24px,2.7vw,31px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:.22em;
  text-shadow:0 0 22px rgba(216,173,53,.14);
}
body.login h1 a::after{
  content:"ONE GOD, ONE FAITH, ONE VOICE.";
  display:block;
  margin-top:12px;
  color:#dedede;
  font-size:11px;
  line-height:1.4;
  font-weight:650;
  letter-spacing:.28em;
}

body.login form{
  position:relative;
  margin:0;
  padding:30px 32px 28px;
  border:1px solid var(--jct-login-border);
  border-radius:20px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),transparent 35%),
    var(--jct-login-surface);
  box-shadow:
    0 34px 90px rgba(0,0,0,.56),
    0 0 0 1px rgba(255,255,255,.018) inset,
    0 1px 0 rgba(255,255,255,.05) inset;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
body.login form::before{
  content:"";
  position:absolute;
  inset:-1px auto auto 22px;
  width:74px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--jct-login-gold-bright),transparent);
  box-shadow:0 0 12px rgba(246,213,106,.45);
}

body.login label{
  color:#ececec;
  font-size:14px;
  font-weight:650;
}
body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"]{
  width:100%;
  min-height:52px;
  margin:8px 0 20px;
  padding:13px 16px;
  border:1px solid var(--jct-login-field-border);
  border-radius:12px;
  background:var(--jct-login-field);
  color:var(--jct-login-text);
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset;
  font-size:16px;
  line-height:1.35;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease;
}
body.login form .input:hover{border-color:rgba(255,255,255,.32)}
body.login form .input:focus{
  border-color:var(--jct-login-gold);
  background:rgba(24,26,27,.98);
  box-shadow:0 0 0 3px rgba(216,173,53,.11),0 0 24px rgba(216,173,53,.05);
  outline:0;
}

body.login .wp-pwd{margin-bottom:20px}
body.login .wp-pwd .input{margin-bottom:0;padding-right:52px}
body.login .button.wp-hide-pw{
  min-width:48px;
  min-height:48px;
  margin-top:14px;
  color:#c9c9c9;
  border:0;
  background:transparent;
  box-shadow:none;
}
body.login .button.wp-hide-pw:hover,
body.login .button.wp-hide-pw:focus{color:var(--jct-login-gold-bright);box-shadow:none;outline:none}

body.login .forgetmenot{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  min-height:36px;
  margin:0 0 14px;
}
body.login .forgetmenot > input[type="checkbox"]{
  flex:0 0 19px;
  align-self:center !important;
  margin:0 !important;
  vertical-align:middle !important;
  top:auto !important;
}
body.login .forgetmenot > label{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  line-height:19px !important;
}
body.login input[type="checkbox"]{
  position:relative;
  flex:0 0 19px;
  width:19px;
  height:19px;
  margin:0;
  border:1px solid #65676a;
  border-radius:4px;
  background:#111213;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
}
body.login input[type="checkbox"]:checked{border-color:var(--jct-login-gold);background:var(--jct-login-gold)}
body.login input[type="checkbox"]:checked::before{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  margin:0;
  border:solid #111;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
body.login input[type="checkbox"]:focus{border-color:var(--jct-login-gold);box-shadow:0 0 0 3px rgba(212,175,55,.12)}

body.login .submit{margin:0;clear:both}
body.login .submit .button-primary,
body.login .button-primary{
  width:100%;
  min-height:52px;
  padding:0 22px;
  float:none;
  border:1px solid var(--jct-login-gold-bright);
  border-radius:12px;
  background:linear-gradient(105deg,#f6d566 0%,#d8ad35 62%,#e4bb46 100%);
  color:#111;
  font-size:16px;
  font-weight:850;
  letter-spacing:.015em;
  text-shadow:none;
  box-shadow:0 14px 34px rgba(216,173,53,.16),inset 0 1px 0 rgba(255,255,255,.34);
}
body.login .submit .button-primary:hover,
body.login .submit .button-primary:focus{
  border-color:#ffe58a;
  background:linear-gradient(105deg,#ffe581 0%,#e0b63b 62%,#efc84e 100%);
  color:#080808;
  transform:translateY(-1px);
  box-shadow:0 17px 38px rgba(216,173,53,.24),0 0 0 3px rgba(216,173,53,.10);
}

body.login #nav,
body.login #backtoblog{
  margin:18px 0 0;
  padding:0;
  text-align:center;
  color:var(--jct-login-muted);
  font-size:13px;
}
body.login #nav{margin-top:22px}
body.login #backtoblog{margin-top:12px}
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a{
  color:#c6c7c8;
  text-decoration:none;
  transition:color .16s ease;
}
body.login #nav a{color:var(--jct-login-gold-bright);text-decoration:underline;text-underline-offset:3px}
body.login #backtoblog a{color:var(--jct-login-gold-bright);font-weight:700}
body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus,
body.login .privacy-policy-page-link a:hover,
body.login .privacy-policy-page-link a:focus{color:#ffe58a}

body.login .message,
body.login .notice,
body.login #login_error{
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.13);
  border-left:3px solid var(--jct-login-gold);
  border-radius:12px;
  background:rgba(18,20,21,.95);
  color:#ececec;
  box-shadow:0 14px 40px rgba(0,0,0,.22);
}
body.login #login_error{border-left-color:var(--jct-login-danger)}
body.login .message a,
body.login .notice a,
body.login #login_error a{color:var(--jct-login-gold-bright)}

body.login .language-switcher{margin:20px auto 0}
body.login .language-switcher select{
  min-height:44px;
  border:1px solid #3e4144;
  border-radius:9px;
  background:#111315;
  color:#ddd;
  font-size:16px;
}
body.login .language-switcher .button{
  min-height:44px;
  border:1px solid rgba(216,173,53,.35);
  border-radius:9px;
  background:#151719;
  color:#ddd;
}
body.login .privacy-policy-page-link{margin:16px auto 0;color:var(--jct-login-muted)}

@media(max-width:600px){
  body.login{align-items:center;padding-left:32px;padding-right:32px}
  body.login #login{width:min(100%,360px)}
  body.login h1{margin-bottom:18px}
  body.login h1 a::before{font-size:23px;letter-spacing:.14em}
  body.login h1 a::after{font-size:9px;letter-spacing:.18em;margin-top:10px}
  body.login form{padding:24px 20px 22px;border-radius:18px}
  body.login form .input,
  body.login input[type="text"],
  body.login input[type="password"],
  body.login input[type="email"]{min-height:50px}
  body.login .forgetmenot{float:none;margin-bottom:14px}
  body.login .submit .button-primary{min-height:50px}
}

@media(max-height:720px) and (min-width:601px){
  body.login{align-items:flex-start;padding-top:28px;padding-bottom:28px}
  body.login h1{margin-bottom:18px}
  body.login form{padding-top:30px;padding-bottom:28px}
}

@media(prefers-reduced-motion:reduce){body.login *{transition:none!important}}