/* HR Workify Premium White Login */
:root{
  --bg:#ffffff;
  --text:#0b1020;
  --muted:#5b6473;
  --stroke:rgba(15,23,42,.10);

  --p1:#2f6bff;
  --p2:#23d6ee;
  --p3:#a855f7;

  --shadow: 0 22px 60px rgba(15, 23, 42, .14);
  --shadow2: 0 10px 24px rgba(15, 23, 42, .10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;
  background:var(--bg);
  color:var(--text);
}

.auth{min-height:100vh; position:relative; display:grid; place-items:center; padding:22px}
.auth__bg{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.blob{position:absolute; filter: blur(34px); opacity:.7; border-radius:999px}
.b1{width:620px;height:620px; left:-220px; top:-260px; background:rgba(47,107,255,.20)}
.b2{width:540px;height:540px; right:-240px; top:-180px; background:rgba(168,85,247,.18)}
.b3{width:520px;height:520px; left:50%; bottom:-260px; transform:translateX(-50%); background:rgba(35,214,238,.16)}

.auth__card{
  position:relative;
  width:min(1080px, 100%);
  display:grid;
  grid-template-columns:1fr 1fr;
  border-radius:30px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.88);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.auth__left{padding:40px}
.logo{height:40px}
h1{margin:18px 0 10px; font-weight:950; font-size:42px; letter-spacing:-.03em}
.sub{margin:0 0 22px;color:var(--muted);line-height:1.7;font-weight:650}

.form label{display:block; margin:12px 0 8px; font-weight:900; font-size:13px; color:#1a2237}
input{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.96);
  outline:none;
  font-weight:700;
}
input::placeholder{color:#9aa3b2}
input:focus{
  border-color: rgba(47,107,255,.45);
  box-shadow: 0 0 0 4px rgba(47,107,255,.14);
}

.pw{position:relative}
.pw button{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:0; background:none; cursor:pointer;
  font-weight:950; color:#30384a;
}

.row{display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:12px}
.check{display:flex; gap:10px; align-items:center; margin:0; color:var(--muted); font-weight:800; font-size:13px}
.check input{width:16px;height:16px;margin:0}
.link{color:#1e2a46;font-weight:950;font-size:13px}
.link:hover{color:#0b1020}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  font-weight:950;
  font-size:14px;
}
.btn--primary{
  border:0;
  color:white;
  background:linear-gradient(90deg, var(--p1), var(--p2));
  box-shadow: 0 18px 34px rgba(47,107,255,.18);
}
.btn--ghost{
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.92);
}
.full{width:100%; margin-top:16px}

.sep{display:flex;align-items:center;gap:10px;margin:14px 0 0;color:#788197;font-weight:900;font-size:12px}
.sep:before,.sep:after{content:""; flex:1; height:1px; background:rgba(15,23,42,.10)}
.gdot{width:10px;height:10px;border-radius:99px;background:conic-gradient(from 90deg, #ea4335, #fbbc05, #34a853, #4285f4, #ea4335)}
.bottom{margin:14px 0 0; color:var(--muted); font-weight:650}

.auth__right{padding:22px; display:flex; align-items:center; justify-content:center}
.showcase{
  width:100%;
  border-radius:26px;
  border:1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(700px 260px at 20% 30%, rgba(47,107,255,.16), transparent 60%),
    radial-gradient(700px 260px at 85% 10%, rgba(35,214,238,.10), transparent 60%),
    rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  padding:22px;
}
.badge{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.86);
  font-weight:950;
  font-size:12px;
  letter-spacing:.12em;
  color:#2b3550;
}
.showcase h2{margin:12px 0 10px; font-size:26px; font-weight:950}
.showcase p{margin:0 0 14px;color:var(--muted);line-height:1.65;font-weight:650}
.showcase__shot{
  border-radius:22px;
  border:1px solid rgba(15,23,42,.10);
  background:white;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}
.showcase__shot img{width:100%;display:block}

@media (max-width: 940px){
  .auth__card{grid-template-columns:1fr}
  .auth__right{display:none}
  h1{font-size:36px}
}