/* KHR V1.8.36 — Login page: dark glass.
   Near-black page with slow-moving orange glows and a faint grid, one frosted-glass card with a
   glowing gradient edge, the Staff "KHR" logo (white + orange HR), dark glass inputs and the
   brand-orange Sign In button. Styles the standard wp_login_form() markup. */

html:has(.khr-auth),body:has(.khr-auth){background:#07080b!important;color-scheme:dark}

.khr-login-page.khr-auth{
  --a-brand:#ff8625;--a-brand-hover:#ff9640;--a-ink:#f5f6f7;--a-muted:rgba(235,238,242,.62);--a-faint:rgba(235,238,242,.42);
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  min-height:100dvh;padding:calc(40px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
  background:#07080b;color:var(--a-ink);
  font-family:"Plus Jakarta Sans","Avenir Next","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}

/* ---- Background: glows + grid ---- */
.khr-auth-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.khr-auth-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.khr-auth-glow-1{width:520px;height:520px;left:calc(50% - 520px);top:calc(50% - 470px);opacity:.62;background:radial-gradient(circle,#ff8625 0,rgba(255,134,37,0) 68%);animation:khr-auth-drift 18s ease-in-out infinite alternate}
.khr-auth-glow-2{width:540px;height:540px;right:calc(50% - 560px);bottom:calc(50% - 520px);background:radial-gradient(circle,#ff4d2e 0,rgba(255,77,46,0) 68%);opacity:.42;animation:khr-auth-drift 22s ease-in-out infinite alternate-reverse}
.khr-auth-glow-3{width:420px;height:420px;left:50%;top:50%;margin:-210px 0 0 -210px;background:radial-gradient(circle,#ffb067 0,rgba(255,176,103,0) 70%);opacity:.16;animation:khr-auth-pulse 9s ease-in-out infinite}
.khr-auth-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 0,transparent 72%)}
@keyframes khr-auth-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(60px,40px,0) scale(1.12)}}
@keyframes khr-auth-pulse{0%,100%{transform:scale(.9);opacity:.12}50%{transform:scale(1.1);opacity:.2}}

/* ---- Glass card ---- */
.khr-auth-card{
  position:relative;width:100%;max-width:440px;padding:38px 40px 30px;border-radius:28px;
  background:linear-gradient(160deg,rgba(255,255,255,.09) 0,rgba(255,255,255,.035) 55%,rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 70px rgba(255,134,37,.1),inset 0 1px 0 rgba(255,255,255,.1)
}
/* Glowing gradient edge: bright orange at the top-left, fading around the card. */
.khr-auth-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,134,37,.9) 0,rgba(255,134,37,.15) 32%,rgba(255,255,255,.06) 60%,rgba(255,77,46,.45) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* ---- Logo ---- */
.khr-auth-brand{margin-bottom:28px;text-align:center}
.khr-auth-logo{font-size:38px;font-weight:800;line-height:1.05;letter-spacing:-.055em;color:#fff}
.khr-auth-logo span{color:var(--a-brand);text-shadow:0 0 24px rgba(255,134,37,.55)}

.khr-auth h1{margin:0 0 6px;text-align:center;color:#fff;font-family:inherit;font-size:24px;font-weight:800;line-height:1.25;letter-spacing:-.02em}
.khr-auth-sub{margin:0 0 22px;text-align:center;color:var(--a-muted);font-size:14px;line-height:1.5}

/* ---- Form (wp_login_form markup) ---- */
.khr-auth #loginform{margin:0}
.khr-auth #loginform p{margin:0 0 14px}
.khr-auth #loginform label{display:block;margin:0 0 7px;color:rgba(235,238,242,.78);font-size:12.5px;font-weight:700;letter-spacing:.01em}
/* 16px text: iPhone zooms the page into any field smaller than that when it is tapped. */
.khr-auth #loginform input[type=text],
.khr-auth #loginform input[type=password]{
  box-sizing:border-box;width:100%;height:50px;margin:0;padding:0 15px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(8,10,14,.45);color:#fff;
  font-family:inherit;font-size:16px;font-weight:500;outline:0;box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease
}
.khr-auth #loginform input::placeholder{color:rgba(235,238,242,.35)}
.khr-auth #loginform input[type=text]:hover,.khr-auth #loginform input[type=password]:hover{border-color:rgba(255,255,255,.2)}
.khr-auth #loginform input[type=text]:focus,
.khr-auth #loginform input[type=password]:focus{border-color:rgba(255,134,37,.85);background:rgba(8,10,14,.6);box-shadow:0 0 0 4px rgba(255,134,37,.18),0 0 24px rgba(255,134,37,.18)}
/* Browser autofill keeps the dark field. */
.khr-auth #loginform input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #12151a inset;caret-color:#fff}

/* Show / hide password */
.khr-auth .khr-auth-pass{position:relative}
.khr-auth .khr-auth-pass input{padding-right:50px!important}
.khr-auth-eye{position:absolute;right:6px;bottom:6px;width:38px;height:38px;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer;color:rgba(235,238,242,.55);-webkit-tap-highlight-color:transparent}
.khr-auth-eye:hover,.khr-auth-eye.is-on{color:var(--a-brand)}
.khr-auth-eye::before{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.khr-auth-eye.is-on::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E")}

/* Keep me signed in */
.khr-auth #loginform .login-remember{margin:4px 0 20px}
.khr-auth #loginform .login-remember label{display:inline-flex;align-items:center;gap:10px;margin:0;color:var(--a-muted);font-size:13.5px;font-weight:500;cursor:pointer}
.khr-auth #loginform .login-remember input{appearance:none;-webkit-appearance:none;flex:0 0 20px;width:20px;height:20px;margin:0;border-radius:6px;border:1px solid rgba(255,255,255,.22);background:rgba(8,10,14,.45);cursor:pointer;display:grid;place-items:center;transition:background .15s ease,border-color .15s ease}
.khr-auth #loginform .login-remember input::after{content:"";width:10px;height:6px;margin-top:-2px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);transition:transform .15s ease}
.khr-auth #loginform .login-remember input:checked{background:var(--a-brand);border-color:var(--a-brand);box-shadow:0 0 14px rgba(255,134,37,.45)}
.khr-auth #loginform .login-remember input:checked::after{transform:rotate(-45deg) scale(1)}
.khr-auth #loginform .login-remember input:focus-visible{outline:2px solid rgba(255,134,37,.7);outline-offset:2px}

/* Sign In + already-signed-in button */
.khr-auth #loginform .login-submit{margin:0}
.khr-auth #wp-submit,.khr-auth .khr-auth-button{
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:52px;margin:0;padding:0 18px;
  border:0;border-radius:14px;background:var(--a-brand);color:#fff!important;text-decoration:none;
  font-family:inherit;font-size:15.5px;font-weight:800;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 10px 30px rgba(255,134,37,.35),inset 0 1px 0 rgba(255,255,255,.25);
  transition:background .18s ease,box-shadow .18s ease,transform .12s ease
}
.khr-auth #wp-submit:hover,.khr-auth .khr-auth-button:hover{background:var(--a-brand-hover);box-shadow:0 12px 38px rgba(255,134,37,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.khr-auth #wp-submit:active,.khr-auth .khr-auth-button:active{transform:translateY(1px)}
.khr-auth #wp-submit:focus-visible,.khr-auth .khr-auth-button:focus-visible{outline:2px solid #fff;outline-offset:3px}

.khr-auth-help{display:block;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);color:var(--a-faint);font-size:12.5px;text-align:center;text-wrap:balance}
.khr-auth-foot{color:rgba(235,238,242,.3);font-size:12px;font-weight:500}

/* ---- Phone ---- */
@media(max-width:480px){
  .khr-login-page.khr-auth{padding-top:max(32px,env(safe-area-inset-top));padding-left:36px;padding-right:36px;gap:18px}
  .khr-auth-card{padding:30px 22px 22px;border-radius:24px}
  .khr-auth .khr-auth-logo .khr-logo-img{max-height:34px}
  .khr-auth-brand{margin-bottom:24px}
  .khr-auth-logo{font-size:34px}
  .khr-auth h1{font-size:22px}
  .khr-auth-sub{margin-bottom:20px}
  .khr-auth-glow-1{width:420px;height:420px;left:-160px;top:-120px;opacity:.7}
  .khr-auth-glow-2{width:440px;height:440px;right:-200px;bottom:-140px;opacity:.55}
}
/* Older browsers without backdrop blur get a solid dark card. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.khr-auth-card{background:rgba(22,24,29,.94)}}
@media(prefers-reduced-motion:reduce){.khr-auth-glow{animation:none!important}}

/* ---- Background details: faint "live signal" rings around the card, two slow orbiting
   lights on those rings and a few twinkling sparks. Kept very low contrast on purpose. ---- */
.khr-auth-rings{position:absolute;left:50%;top:50%;width:1500px;height:1500px;margin:-750px 0 0 -750px;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 148.5px,rgba(255,255,255,.085) 149.5px,transparent 151px);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 35%,transparent 68%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 35%,transparent 68%);
  animation:khr-auth-breathe 14s ease-in-out infinite}
.khr-auth-orbit{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(255,134,37,.13);animation:khr-auth-spin linear infinite}
.khr-auth-orbit::after{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#ffb067;box-shadow:0 0 10px 2px rgba(255,134,37,.7),0 0 26px 6px rgba(255,134,37,.25)}
.khr-auth-orbit-1{width:600px;height:600px;margin:-300px 0 0 -300px;animation-duration:48s}
.khr-auth-orbit-2{width:900px;height:900px;margin:-450px 0 0 -450px;animation-duration:80s;animation-direction:reverse;border-color:rgba(255,255,255,.06)}
.khr-auth-orbit-2::after{width:4px;height:4px;margin-left:-2px;top:-2px;background:#fff;box-shadow:0 0 8px 2px rgba(255,255,255,.45)}
.khr-auth-sparks i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffd2a8;box-shadow:0 0 6px rgba(255,170,90,.8);opacity:0;animation:khr-auth-twinkle 6s ease-in-out infinite}
.khr-auth-sparks i:nth-child(1){left:12%;top:22%;animation-delay:0s}
.khr-auth-sparks i:nth-child(2){left:84%;top:16%;animation-delay:1.4s}
.khr-auth-sparks i:nth-child(3){left:22%;top:78%;animation-delay:2.6s;background:#fff}
.khr-auth-sparks i:nth-child(4){left:74%;top:70%;animation-delay:3.3s}
.khr-auth-sparks i:nth-child(5){left:6%;top:52%;animation-delay:4.1s;background:#fff}
.khr-auth-sparks i:nth-child(6){left:92%;top:44%;animation-delay:.7s}
.khr-auth-sparks i:nth-child(7){left:38%;top:9%;animation-delay:2s;background:#fff}
.khr-auth-sparks i:nth-child(8){left:60%;top:91%;animation-delay:5s}
@keyframes khr-auth-spin{to{transform:rotate(360deg)}}
@keyframes khr-auth-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.04);opacity:1}}
@keyframes khr-auth-twinkle{0%,100%{opacity:0;transform:scale(.6)}45%,55%{opacity:.75;transform:scale(1)}}
@media(max-width:480px){
  .khr-auth-orbit-1{width:440px;height:440px;margin:-220px 0 0 -220px}
  .khr-auth-orbit-2{width:680px;height:680px;margin:-340px 0 0 -340px}
}
@media(prefers-reduced-motion:reduce){.khr-auth-rings,.khr-auth-orbit,.khr-auth-sparks i{animation:none!important}.khr-auth-sparks i{opacity:.5}}
/* Failed sign-in message (?khr_login=...), shown above the form. */
.khr-auth-error{margin:0 0 16px;padding:11px 14px;border:1px solid rgba(248,113,113,.35);border-radius:12px;background:rgba(239,68,68,.12);color:#fecaca;font-size:13.5px;font-weight:600;line-height:1.45}