@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2')}
/* =====================================================
   ICPL HRMS – Login page  (login.css)
   Light, modern theme. Fully independent of styles.css
   ===================================================== */
:root{
  --bg:#f3f6ff;
  --ink:#101a33;
  --ink-2:#34425f;
  --mut:#66738f;
  --line:#e0e6f4;
  --line-2:#cdd6ec;
  --card:#ffffff;
  --pri:#2f6bff;
  --pri-2:#5a8bff;
  --pri-d:#1f50d6;
  --pri-soft:#eaf0ff;
  --vio:#7c5cff;
  --ok:#12805a;  --ok-bg:#e6f7ef;  --ok-line:#b8e8d2;
  --err:#c8283b; --err-bg:#fff0f2; --err-line:#f6c4cb;
  --warn:#a15c00;
  --r-lg:28px; --r:14px;
  --shadow:0 30px 80px -20px rgba(40,70,160,.28), 0 8px 24px -8px rgba(40,70,160,.12);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html,body{min-height:100%}
body{font-family:var(--font);font-size:15px;line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input{font:inherit;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hide,[hidden]{display:none!important}

/* ---------- animated background ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(1200px 700px at 8% -10%,#dfe9ff 0%,transparent 60%),
  radial-gradient(900px 600px at 105% 10%,#efe6ff 0%,transparent 55%),
  radial-gradient(900px 700px at 50% 120%,#dcf6ee 0%,transparent 60%),
  var(--bg)}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 18s ease-in-out infinite}
.o1{width:420px;height:420px;background:#bcd2ff;left:-100px;top:12%}
.o2{width:360px;height:360px;background:#d9c9ff;right:-80px;top:-60px;animation-delay:-6s}
.o3{width:340px;height:340px;background:#bff0dd;right:18%;bottom:-140px;animation-delay:-11s}
.grid{position:absolute;inset:0;background-image:radial-gradient(rgba(47,107,255,.14) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%)}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}

/* ---------- layout ---------- */
.stage{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:28px 18px}
.shell{width:100%;max-width:1080px;display:grid;grid-template-columns:1.02fr 1fr;background:rgba(255,255,255,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- showcase (left) ---------- */
.showcase{position:relative;padding:40px 40px 34px;display:flex;flex-direction:column;gap:26px;background:
  radial-gradient(520px 320px at 90% 0%,rgba(124,92,255,.14),transparent 70%),
  radial-gradient(520px 360px at 0% 100%,rgba(47,107,255,.14),transparent 70%),
  linear-gradient(160deg,#f2f6ff 0%,#eaf0ff 100%);border-right:1px solid var(--line)}
.sc-top{display:flex;align-items:center;gap:14px}
.logo-chip{width:64px;height:48px;border-radius:12px;background:#fff;display:grid;place-items:center;padding:6px;border:1px solid var(--line);box-shadow:0 6px 16px -6px rgba(40,70,160,.25);flex:none}
.logo-chip img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.sc-brand b{display:block;font-size:17px;letter-spacing:-.2px}
.sc-brand span{font-size:12.5px;color:var(--mut)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--pri-d);background:#fff;border:1px solid var(--line);padding:6px 12px;border-radius:99px}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--pri);box-shadow:0 0 0 4px rgba(47,107,255,.18)}
.sc-copy h2{font-size:34px;line-height:1.14;letter-spacing:-.9px;font-weight:800;margin:16px 0 12px}
.sc-copy h2 em{font-style:normal;background:linear-gradient(90deg,var(--pri),var(--vio));-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-copy p{color:var(--ink-2);max-width:420px;font-size:14.5px}

/* decorative preview */
.preview{position:relative;height:210px;margin:2px 0}
.pv{position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px -16px rgba(40,70,160,.30)}
.pv-main{left:0;top:6px;width:64%;padding:16px 18px 14px;animation:bob 7s ease-in-out infinite}
.pv-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--mut);font-weight:600}
.pv-h b{color:var(--ok);background:var(--ok-bg);padding:2px 9px;border-radius:99px;font-size:12px}
.bars{display:flex;align-items:flex-end;gap:9px;height:104px;margin-top:16px}
.bars i{flex:1;height:var(--h);border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--pri-2),#bcd0ff);transform-origin:bottom;animation:grow 1s cubic-bezier(.2,.8,.2,1) both}
.bars i:nth-child(odd){background:linear-gradient(180deg,var(--vio),#d4c9ff)}
.bars i:nth-child(1){animation-delay:.1s}.bars i:nth-child(2){animation-delay:.18s}.bars i:nth-child(3){animation-delay:.26s}.bars i:nth-child(4){animation-delay:.34s}.bars i:nth-child(5){animation-delay:.42s}.bars i:nth-child(6){animation-delay:.5s}.bars i:nth-child(7){animation-delay:.58s}
@keyframes grow{from{transform:scaleY(.05);opacity:0}to{transform:none;opacity:1}}
.pv-a,.pv-b{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;white-space:nowrap}
.pv-a{right:0;top:0;animation:bob 6s ease-in-out infinite -2s}
.pv-b{right:14px;top:92px;animation:bob 8s ease-in-out infinite -4s}
.pv b{display:block;font-size:13px}
.pv small{color:var(--mut);font-size:12px}
.pv-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.pv-ic svg{width:18px;height:18px}
.pv-ic.ok{background:var(--ok-bg);color:var(--ok)}
.pv-ic.info{background:var(--pri-soft);color:var(--pri)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.sc-points{list-style:none;padding:0;display:grid;gap:10px;margin-top:auto}
.sc-points li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2);font-weight:500}
.sc-points svg{width:20px;height:20px;padding:4px;border-radius:50%;background:var(--ok-bg);color:var(--ok);flex:none;stroke-width:3}

/* ---------- panel (right) ---------- */
.panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 30px 18px;background:rgba(255,255,255,.78)}
.card{width:100%;max-width:400px}
.m-brand{display:none;align-items:center;gap:12px;margin-bottom:22px}
.m-brand b{display:block;font-size:16px}
.m-brand span{font-size:12px;color:var(--mut)}

.view{animation:swap .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes swap{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.hello{display:inline-block;font-size:13px;font-weight:700;color:var(--pri);background:var(--pri-soft);padding:5px 12px;border-radius:99px;margin-bottom:12px}
h1{font-size:27px;line-height:1.2;letter-spacing:-.6px;font-weight:800;margin-bottom:8px}
.lead{color:var(--mut);font-size:14px;margin-bottom:24px}

.badge-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:var(--pri);background:linear-gradient(145deg,#eaf0ff,#f1ebff);border:1px solid var(--line);margin-bottom:16px}
.badge-ic svg{width:24px;height:24px}

/* ---------- floating-label inputs ---------- */
.fl{position:relative;margin-bottom:14px}
.fl input{width:100%;height:56px;padding:22px 48px 6px 46px;background:#f8faff;border:1.5px solid var(--line);border-radius:var(--r);outline:0;font-size:15px;font-weight:500;transition:border-color .18s,box-shadow .18s,background .18s}
.fl input:hover{border-color:var(--line-2)}
.fl input:focus{background:#fff;border-color:var(--pri);box-shadow:0 0 0 4px rgba(47,107,255,.14)}
.fl label{position:absolute;left:46px;top:50%;transform:translateY(-50%);color:var(--mut);font-size:15px;pointer-events:none;transition:all .16s ease;transform-origin:left}
.fl input:focus + label,
.fl input:not(:placeholder-shown) + label,
.fl input:-webkit-autofill + label{top:17px;font-size:11.5px;font-weight:600;color:var(--pri)}
.fl input:not(:focus):not(:placeholder-shown) + label{color:var(--mut)}
.fl .ic{position:absolute;left:15px;top:50%;width:19px;height:19px;margin-top:-9.5px;color:#8b98b4;pointer-events:none;transition:color .18s}
.fl:focus-within .ic{color:var(--pri)}
.fl.bad input{border-color:var(--err);box-shadow:0 0 0 4px rgba(200,40,59,.10)}
.eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:none;border-radius:11px;color:#7d8aa8;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s}
.eye:hover{background:var(--pri-soft);color:var(--pri)}
.eye:focus-visible{outline:2px solid var(--pri)}
.eye svg{width:20px;height:20px}
.eye .i-hide{display:none}
.eye[aria-pressed="true"] .i-hide{display:block}
.eye[aria-pressed="true"] .i-show{display:none}

.caps{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--warn);margin:-4px 0 12px 4px}
.caps svg{width:15px;height:15px}

/* ---------- remember / forgot ---------- */
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 18px}
.check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;color:var(--ink-2);user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line-2);background:#fff;display:grid;place-items:center;transition:all .15s}
.check .box::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);margin-top:-2px;transition:transform .15s}
.check input:checked + .box{background:var(--pri);border-color:var(--pri)}
.check input:checked + .box::after{transform:rotate(45deg) scale(1)}
.check input:focus-visible + .box{box-shadow:0 0 0 4px rgba(47,107,255,.2)}
.link{background:none;border:0;padding:0;font-weight:700;font-size:14px;color:var(--pri);cursor:pointer;border-radius:6px}
.link:hover{color:var(--pri-d);text-decoration:underline;text-underline-offset:3px}
.link:focus-visible{outline:2px solid var(--pri);outline-offset:3px}

/* ---------- button ---------- */
.btn{position:relative;width:100%;height:54px;border:0;border-radius:var(--r);cursor:pointer;color:#fff;font-weight:700;font-size:15.5px;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--pri) 0%,var(--vio) 140%);box-shadow:0 14px 28px -10px rgba(47,107,255,.65);overflow:hidden;transition:transform .12s,box-shadow .2s,filter .2s}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn:hover{filter:brightness(1.05);box-shadow:0 18px 32px -10px rgba(47,107,255,.75)}
.btn:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(1px) scale(.995)}
.btn:focus-visible{outline:3px solid rgba(47,107,255,.35);outline-offset:3px}
.btn:disabled{cursor:not-allowed;filter:saturate(.7) brightness(1.02);opacity:.85}
.btn .arrow{width:19px;height:19px;transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}
.spin{display:none;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
.spin.dark{display:inline-block;border-color:rgba(47,107,255,.25);border-top-color:var(--pri);width:16px;height:16px}
.btn.busy .spin{display:inline-block}
.btn.busy .arrow{display:none}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- messages ---------- */
.msg{border-radius:12px;padding:11px 14px;font-size:13.5px;font-weight:500;margin:0 0 14px;display:flex;gap:9px;align-items:flex-start;animation:swap .25s both}
.msg.err{background:var(--err-bg);color:var(--err);border:1px solid var(--err-line)}
.msg.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.msg.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.alt{text-align:center;margin-top:20px;font-size:14px;color:var(--mut)}
.alt span{color:var(--ink-2);font-weight:600}
.back{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--mut);font-weight:600;font-size:14px;cursor:pointer;margin-bottom:18px;padding:5px 0;border-radius:6px}
.back:hover{color:var(--pri)}
.back svg{width:17px;height:17px}

/* password strength */
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:-2px 2px 0}
.meter i{height:5px;border-radius:3px;background:#e4eaf6;transition:background .2s}
.meter[data-s="1"] i:nth-child(1){background:#e5484d}
.meter[data-s="2"] i:nth-child(-n+2){background:#f0a12b}
.meter[data-s="3"] i:nth-child(-n+3){background:#7bb83a}
.meter[data-s="4"] i{background:#1fa463}
.hint{font-size:12.5px;color:var(--mut);margin:7px 2px 16px}

/* ---------- success ---------- */
.done{text-align:center;padding:10px 0 6px}
.tick{width:84px;height:84px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#17b37f,#0d9466);box-shadow:0 0 0 10px rgba(23,179,127,.14),0 18px 30px -12px rgba(13,148,102,.7);animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
.tick svg{width:40px;height:40px;stroke-width:3.2;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s .25s ease forwards}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
.done .lead{margin-bottom:14px}
.role-pill{display:inline-block;font-weight:700;color:var(--pri-d);background:var(--pri-soft);padding:3px 12px;border-radius:99px}
.redir{display:inline-flex;align-items:center;gap:10px;color:var(--mut);font-size:13.5px}

/* ---------- footer ---------- */
.foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);color:var(--mut);font-size:12.5px}
.foot svg{width:14px;height:14px}
.copy{margin-top:14px;font-size:12px;color:#8995b0;text-align:center}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .shell{grid-template-columns:.9fr 1fr}
  .showcase{padding:32px 28px}
  .sc-copy h2{font-size:29px}
  .preview{height:190px}
  .pv-b{top:84px}
}
@media (max-width:820px){
  .stage{padding:0;align-items:stretch}
  .shell{grid-template-columns:1fr;border-radius:0;min-height:100vh;border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .showcase{display:none}
  .panel{background:transparent;justify-content:flex-start;padding:34px 20px 20px}
  .card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 22px 20px;box-shadow:var(--shadow);max-width:440px}
  .m-brand{display:flex}
}
@media (max-width:420px){
  h1{font-size:23px}
  .row{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.sub{font-size:13px;color:var(--muted,#6b6880)}