.hris-devices{isolation:isolate;min-height:560px}
.hris-devices::before{content:"";position:absolute;z-index:-2;inset:8% -8% 4% 2%;border-radius:28px;background:radial-gradient(circle at 68% 52%,rgba(137,39,242,.4),transparent 31%),radial-gradient(circle at 25% 58%,rgba(0,151,255,.35),transparent 38%),linear-gradient(145deg,rgba(5,40,91,.86),rgba(13,15,75,.42));filter:drop-shadow(0 26px 55px rgba(0,0,0,.22))}
.hris-devices__grid{position:absolute;z-index:-1;inset:5% -8% 0 0;opacity:.38;background-image:linear-gradient(rgba(52,135,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(52,135,255,.22) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,#000 42%,transparent 94%)}
.hris-laptop{position:absolute;z-index:2;left:4%;bottom:54px;width:82%;filter:drop-shadow(0 34px 35px rgba(0,0,0,.48));transform:perspective(1200px) rotateY(-2deg) rotateX(1deg)}
.hris-laptop__lid{position:relative;padding:12px 12px 13px;border:2px solid #4c79d3;border-radius:20px 20px 9px 9px;background:linear-gradient(145deg,#0b1c3c,#091126 70%,#12224c);box-shadow:0 0 0 1px rgba(72,192,255,.4),0 0 32px rgba(25,111,255,.52)}
.hris-laptop__camera{position:absolute;z-index:2;top:5px;left:50%;width:4px;height:4px;border-radius:50%;background:#5a7199;transform:translateX(-50%)}
.hris-laptop__screen{height:360px;overflow:hidden;border-radius:9px;background:#edf3ff}
.hris-laptop__screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.hris-laptop__base{position:relative;width:108%;height:18px;margin-left:-4%;border-radius:3px 3px 22px 22px;background:linear-gradient(#53637f,#121c30 42%,#080d18);box-shadow:0 8px 10px rgba(0,0,0,.45)}
.hris-laptop__base::after{content:"";position:absolute;right:8%;bottom:-5px;left:8%;height:6px;border-radius:0 0 50% 50%;background:#050914}
.hris-laptop__base span{position:absolute;top:0;left:44%;width:12%;height:5px;border-radius:0 0 8px 8px;background:#71809a}
.hris-mobile{position:absolute;z-index:5;right:-1%;bottom:35px;width:178px;height:356px;overflow:hidden;padding:22px 11px 12px;border:6px solid #091326;border-radius:32px;background:linear-gradient(180deg,#f7faff,#edf2fc);color:#182844;box-shadow:0 28px 55px rgba(0,0,0,.52),0 0 24px rgba(130,46,246,.58);transform:rotate(3deg)}
.hris-mobile__speaker{position:absolute;z-index:3;top:7px;left:50%;width:53px;height:7px;border-radius:0 0 9px 9px;background:#091326;transform:translateX(-50%)}
.hris-mobile__status{height:17px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;font-size:6px}.hris-mobile__status b{font-size:7px}.hris-mobile__status span{letter-spacing:1px}
.hris-mobile__brand{display:flex;align-items:center;gap:5px;padding:6px 4px 8px;border-bottom:1px solid #dce4f2}.hris-mobile__brand>span{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:linear-gradient(135deg,#12c7ff,#7957ff);color:#fff;font-size:10px;font-weight:900}.hris-mobile__brand strong,.hris-mobile__brand small{display:block;line-height:1}.hris-mobile__brand strong{font-size:8px}.hris-mobile__brand small{margin-top:2px;color:#71809a;font-size:5px;letter-spacing:.15em}.hris-mobile__brand i{margin-left:auto;font-size:7px;font-style:normal}
.hris-mobile__hello{display:flex;align-items:center;gap:7px;padding:11px 4px 8px}.hris-mobile__avatar{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#28a7ff,#7746e9);color:#fff;font-size:10px;font-weight:850}.hris-mobile__hello small,.hris-mobile__hello strong{display:block}.hris-mobile__hello small{color:#7c8ba0;font-size:5px}.hris-mobile__hello strong{font-size:10px}
.hris-mobile__attendance{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:10px;background:linear-gradient(135deg,#102b5e,#1d48a4);color:#fff;box-shadow:0 8px 16px rgba(20,61,139,.22)}.hris-mobile__attendance small,.hris-mobile__attendance strong,.hris-mobile__attendance span{display:block}.hris-mobile__attendance small{color:#a9c8ff;font-size:5px}.hris-mobile__attendance strong{margin-top:3px;font-size:14px}.hris-mobile__attendance span{margin-top:2px;color:#7ee6bd;font-size:5px}.hris-mobile__attendance>b{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#20c982;font-size:11px}
.hris-mobile__quick{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}.hris-mobile__quick>div{display:grid;padding:7px;border:1px solid #dbe5f3;border-radius:8px;background:#fff}.hris-mobile__quick span{color:#4078f2}.hris-mobile__quick svg{width:11px;height:11px}.hris-mobile__quick small{margin-top:4px;color:#7b8ba1;font-size:5px}.hris-mobile__quick strong{font-size:8px}
.hris-mobile__action{display:grid;grid-template-columns:20px 1fr auto;gap:6px;align-items:center;margin-top:7px;padding:7px;border:1px solid #dce5f2;border-radius:8px;background:#fff}.hris-mobile__action>span{width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:#eaf1ff;color:#3673f4}.hris-mobile__action svg{width:11px;height:11px}.hris-mobile__action strong,.hris-mobile__action small{display:block}.hris-mobile__action strong{font-size:7px}.hris-mobile__action small{color:#8492a6;font-size:5px}.hris-mobile__action>b{color:#7b8ba1}
.hris-mobile__nav{position:absolute;right:9px;bottom:7px;left:9px;display:flex;justify-content:space-around;padding-top:7px;border-top:1px solid #d9e2ef}.hris-mobile__nav>span{display:grid;justify-items:center;color:#9aa7b8;font-size:8px}.hris-mobile__nav small{margin-top:2px;font-size:4px}.hris-mobile__nav .is-active{color:#3779f4}
.hris-signal{position:absolute;z-index:6;display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;padding:10px 12px;border:1px solid rgba(96,149,255,.6);border-radius:12px;background:linear-gradient(135deg,rgba(12,42,98,.96),rgba(25,27,100,.94));box-shadow:0 14px 32px rgba(0,0,0,.32),inset 0 0 20px rgba(70,106,255,.12);backdrop-filter:blur(10px)}
.hris-signal>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(145deg,#176fe8,#4735b8);color:#8fe5ff}.hris-signal svg{width:18px;height:18px}.hris-signal strong,.hris-signal small{display:block;white-space:nowrap}.hris-signal strong{font-size:9px}.hris-signal small{margin-top:2px;color:#9fb3d2;font-size:6px}.hris-signal>i{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#1ed18e;color:#fff;font-size:9px;font-style:normal}.hris-signal--records{top:29px;left:1%}.hris-signal--leave{top:55px;right:0}.hris-signal--leave>i{background:#b748ed}.hris-signal--self-service{z-index:7;right:12%;bottom:7px;grid-template-columns:34px 1fr}.hris-signal--self-service>span{background:linear-gradient(145deg,#215bd9,#8f35df)}
@media(max-width:1050px){.hris-devices{width:min(800px,100%);min-height:560px}.hris-laptop{left:6%;width:78%}.hris-mobile{right:3%}}
@media(max-width:760px){.hris-devices{min-height:445px}.hris-devices::before{inset:10% -12% 2% -6%}.hris-devices__grid{inset:8% -12% 0 -6%;background-size:38px 38px}.hris-laptop{left:0;bottom:62px;width:88%;transform:none}.hris-laptop__lid{padding:8px;border-radius:13px 13px 6px 6px}.hris-laptop__screen{height:245px}.hris-laptop__base{height:13px}.hris-mobile{right:0;bottom:35px;width:128px;height:270px;padding:18px 8px 9px;border-width:4px;border-radius:25px;transform:rotate(2deg)}.hris-mobile__speaker{top:5px;width:40px;height:5px}.hris-mobile__status{height:13px}.hris-mobile__hello{padding-block:7px 6px}.hris-mobile__avatar{width:22px;height:22px}.hris-mobile__attendance{padding:7px}.hris-mobile__attendance strong{font-size:10px}.hris-mobile__attendance>b{width:20px;height:20px}.hris-mobile__quick>div{padding:5px}.hris-mobile__action{padding:5px}.hris-mobile__nav{right:6px;bottom:5px;left:6px}.hris-signal{transform:scale(.82)}.hris-signal--records{top:18px;left:-6%;transform-origin:left top}.hris-signal--leave{display:none}.hris-signal--self-service{right:0;bottom:4px;transform-origin:right bottom}}
@media(max-width:460px){.hris-devices{min-height:405px}.hris-laptop{bottom:65px;width:92%}.hris-laptop__screen{height:215px}.hris-mobile{bottom:38px;width:116px;height:246px}.hris-mobile__quick{gap:4px}.hris-mobile__quick>div:last-child{display:none}.hris-mobile__quick{grid-template-columns:1fr}.hris-mobile__action{margin-top:5px}.hris-signal--records{left:0;transform:scale(.72)}.hris-signal--self-service{transform:scale(.72)}}
@media(prefers-reduced-motion:reduce){.hris-laptop,.hris-mobile{transform:none}}