:root{
  --bg:oklch(0.988 0.003 170);--surface:oklch(0.974 0.005 170);--surface-2:oklch(0.954 0.007 168);
  --ink:oklch(0.24 0.032 172);--ink-2:oklch(0.43 0.028 172);--ink-3:oklch(0.55 0.024 172);
  --line:oklch(0.905 0.012 168);--line-2:oklch(0.86 0.016 168);
  --brand:oklch(0.40 0.05 168);--brand-2:oklch(0.34 0.045 170);
  --accent:oklch(0.56 0.145 44);--accent-2:oklch(0.50 0.150 42);--accent-hi:oklch(0.66 0.16 50);--accent-soft:oklch(0.93 0.045 55);
  --ok:oklch(0.52 0.11 165);--gold:#f6b73c;
  --canvas:oklch(0.205 0.024 174);--canvas-2:oklch(0.15 0.018 178);
  --canvas-ink:oklch(0.965 0.01 120);--canvas-ink-2:oklch(0.80 0.018 130);--canvas-line:oklch(0.33 0.022 174);
  --display:"Cabinet Grotesk","General Sans",ui-sans-serif,system-ui,sans-serif;
  --sans:"General Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}

.auth{display:grid;grid-template-columns:1.02fr .98fr;min-height:100vh}

/* form side */
.form-side{display:flex;align-items:center;justify-content:center;padding:48px 40px;border-left:1px solid var(--line)}
.formwrap{width:min(400px,100%)}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:46px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--ink)}
.logo .m{width:32px;height:32px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.logo .m::after{content:"";width:11px;height:11px;border:2.4px solid var(--accent-hi);border-radius:3px}
.langpill{font-size:13px;font-weight:700;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px}
.langpill b{color:var(--brand)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,38px);letter-spacing:-.03em;line-height:1.02;color:var(--ink);margin-bottom:10px}
.sub{color:var(--ink-2);font-size:15.5px;line-height:1.55;margin-bottom:30px}
.sub a{color:var(--accent-2);font-weight:700}
form{display:flex;flex-direction:column}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field .ip{position:relative}
.field input{width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:11px;font-family:var(--sans);font-size:15px;background:oklch(1 0 0 / .72);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:var(--ink-3)}
.field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--accent-soft)}
.field .show{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12.5px;font-weight:700;color:var(--ink-3);cursor:pointer}
.rowline{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;margin:2px 0 22px}
.check{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.check input{width:16px;height:16px;accent-color:var(--brand)}
.rowline a{color:var(--accent-2);font-weight:600}
.btn{width:100%;padding:14px;border:0;border-radius:11px;background:var(--accent);color:#fff;font-weight:700;font-size:15.5px;font-family:var(--sans);cursor:pointer;transition:transform .14s,box-shadow .14s;box-shadow:0 14px 30px -16px var(--accent)}
.btn:hover{transform:translateY(-1px)}
.divider{display:flex;align-items:center;gap:14px;color:var(--ink-3);font-size:12.5px;margin:22px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.google{width:100%;padding:12px;border:1px solid oklch(1 0 0 / .6);border-radius:11px;background:oklch(1 0 0 / .55);backdrop-filter:blur(8px);color:var(--ink);font-weight:600;font-size:14.5px;font-family:var(--sans);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.google .g{width:18px;height:18px;border-radius:50%;background:conic-gradient(#ea4335,#fbbc05,#34a853,#4285f4);}
.alt{text-align:center;margin-top:26px;font-size:14px;color:var(--ink-2)}
.alt a{color:var(--accent-2);font-weight:700}
.legal{margin-top:16px;font-size:12px;color:var(--ink-3);line-height:1.5}
.legal a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);margin-bottom:20px;line-height:1.5}
.consent input{width:16px;height:16px;margin-top:2px;accent-color:var(--brand);flex:none}
.consent a{color:var(--accent-2);font-weight:600}

/* brand side */
.brand-side{background:radial-gradient(72% 60% at 84% 4%, oklch(0.92 0.06 55 / .55), transparent 55%),radial-gradient(60% 60% at 6% 92%, oklch(0.94 0.035 168 / .6), transparent 52%),linear-gradient(165deg,var(--surface),var(--surface-2));color:var(--ink);padding:56px 52px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.brand-side .logo{color:var(--ink)}
.brand-side .logo .m{background:var(--brand);color:#fff}
.bhead h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.2vw,42px);line-height:1.03;letter-spacing:-.025em;max-width:15ch;margin-bottom:16px}
.bhead h2 .clay{color:var(--accent-2)}
.bhead p{color:var(--ink-2);font-size:16px;line-height:1.55;max-width:42ch}
.bdevice{margin:6px 0;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 80px -40px oklch(0.2 0.03 150 / .45);transform:perspective(1600px) rotateY(-6deg)}
.bdevice .bar{display:flex;align-items:center;gap:6px;padding:9px 13px;background:var(--surface);border-bottom:1px solid var(--line)}
.bdevice .bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.bdevice .bar i:nth-child(1){background:#ff5f57}.bdevice .bar i:nth-child(2){background:#febc2e}.bdevice .bar i:nth-child(3){background:#28c840}
.bdevice img{display:block;width:100%}
.bbadges{display:flex;gap:12px;flex-wrap:wrap}
.bbadge{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-2);border-radius:11px;padding:9px 13px;font-size:13px;font-weight:600;color:var(--ink)}
.bbadge .ck{width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);display:grid;place-items:center;font-size:11px;font-weight:800}

@media(max-width:880px){
  .auth{grid-template-columns:1fr}
  .brand-side{display:none}
  .form-side{padding:40px 24px;border-left:0}
}

/* single-column centered layout */
.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:56px 24px;background:linear-gradient(150deg, oklch(0.42 0.06 168 / .52), oklch(0.5 0.1 46 / .34)),url("/assets/team.jpg") center/cover no-repeat}
.card{width:min(540px,100%);background:oklch(1 0 0 / .58);backdrop-filter:blur(26px) saturate(1.35);-webkit-backdrop-filter:blur(26px) saturate(1.35);border:1px solid oklch(1 0 0 / .5);border-radius:24px;padding:46px 54px;box-shadow:0 44px 96px -42px rgba(0,0,0,.5)}
.card>.logo{justify-content:center;margin:0 0 26px}
.card h1{text-align:center}
.card .sub{text-align:center}
.card .legal{text-align:center}
.floatlang{position:fixed;top:22px;right:24px;background:oklch(1 0 0 / .55);backdrop-filter:blur(12px);border-color:oklch(1 0 0 / .5)}

/* registration: match ClickxHR staffing schema */
.field label .opt{font-weight:500;color:var(--ink-3);font-size:11px;margin-left:6px}
.ip .suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--ink-3);pointer-events:none}
.field select{width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:11px;font-family:var(--sans);font-size:15px;background:oklch(1 0 0 / .72);color:var(--ink);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23586a83' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--accent-soft)}
.consent b{color:var(--ink);display:block;margin-bottom:2px}