:root{--login-indigo:#2638c4;--login-blue:#0878e7;--login-cyan:#16c8e7;--login-violet:#8247e5;--login-ink:#17213d;--login-muted:#6e7893}
.login-page{min-height:100vh;margin:0;overflow-x:hidden;background:#eef4ff;color:var(--login-ink);position:relative}.login-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(135deg,#eaf2ff 0%,#f6f4ff 48%,#e6fbff 100%)}.login-grid{position:absolute;inset:0;opacity:.3;background-image:linear-gradient(rgba(59,96,182,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(59,96,182,.06) 1px,transparent 1px);background-size:40px 40px}.login-blob{position:absolute;border-radius:50%;filter:blur(2px)}.blob-a{width:420px;height:420px;left:-170px;top:-140px;background:radial-gradient(circle,#54c9ff,rgba(84,201,255,0));opacity:.35}.blob-b{width:430px;height:430px;right:-160px;bottom:-180px;background:radial-gradient(circle,#9f7aea,rgba(159,122,234,0));opacity:.3}.blob-c{width:270px;height:270px;right:22%;top:-150px;background:radial-gradient(circle,#45e2cf,rgba(69,226,207,0));opacity:.2}.login-shell{width:min(1220px,calc(100% - 42px));min-height:min(760px,calc(100vh - 42px));margin:21px auto;display:grid;grid-template-columns:1.08fr .92fr;border:1px solid rgba(255,255,255,.8);border-radius:32px;overflow:hidden;box-shadow:0 35px 90px rgba(40,60,126,.2),0 5px 18px rgba(38,56,120,.08);position:relative;z-index:1;background:rgba(255,255,255,.7);backdrop-filter:blur(24px)}
.login-showcase{position:relative;overflow:hidden;padding:42px 46px 30px;color:#fff;display:flex;flex-direction:column;background:radial-gradient(circle at 16% 18%,rgba(27,218,236,.35),transparent 31%),radial-gradient(circle at 86% 73%,rgba(180,83,255,.34),transparent 34%),linear-gradient(145deg,#11276d 0%,#1b3fbd 47%,#087acc 100%)}.login-showcase:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent 86%)}.login-showcase:after{content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(255,255,255,.16);border-radius:50%;right:-130px;top:90px;box-shadow:0 0 0 48px rgba(255,255,255,.035),0 0 0 96px rgba(255,255,255,.025)}.showcase-glow{position:absolute;width:210px;height:210px;border-radius:50%;left:24%;bottom:-90px;background:#2ae5d5;filter:blur(90px);opacity:.32}.login-brand{display:flex;align-items:center;gap:13px;position:relative;z-index:2}.login-logo{width:49px;height:49px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:1.45rem;background:linear-gradient(135deg,#41e7e2,#4b65ff 70%,#b65cff);box-shadow:0 10px 26px rgba(3,15,65,.32),inset 0 1px rgba(255,255,255,.5)}.login-logo.image-logo{background:#fff;padding:4px}.login-logo img{width:100%;height:100%;object-fit:contain;border-radius:12px}.login-brand>span:last-child{display:flex;flex-direction:column}.login-brand strong{font-size:1.02rem;letter-spacing:.01em}.login-brand small{font-size:.7rem;opacity:.72;letter-spacing:.04em}.showcase-content{position:relative;z-index:2;margin:auto 0;padding:64px 0 94px}.showcase-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:99px;background:rgba(255,255,255,.09);backdrop-filter:blur(10px);font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.09em;color:#dffbff}.showcase-kicker i{color:#65f4e5}.showcase-content h1{margin:22px 0 16px;font-size:clamp(2.8rem,4.5vw,4.5rem);line-height:.98;letter-spacing:-.055em;font-weight:850}.showcase-content h1 span{color:#7feafa;text-shadow:0 10px 35px rgba(66,237,245,.2)}.showcase-content>p{max-width:510px;font-size:1.04rem;line-height:1.7;color:#d8e6ff}.showcase-features{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px;max-width:560px}.showcase-features>div{padding:13px 10px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);display:flex;align-items:center;gap:9px;min-width:0}.feature-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;flex:0 0 auto}.feature-icon.cyan{background:rgba(29,232,222,.2);color:#76fff1}.feature-icon.violet{background:rgba(191,128,255,.22);color:#dfb4ff}.feature-icon.coral{background:rgba(255,138,142,.2);color:#ffbdc0}.showcase-features strong,.showcase-features small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.showcase-features strong{font-size:.72rem}.showcase-features small{font-size:.59rem;color:#bdd2f6;margin-top:2px}.floating-card{position:absolute;z-index:3;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(10,26,83,.48);backdrop-filter:blur(17px);box-shadow:0 18px 42px rgba(4,13,58,.23)}.attendance-preview{right:34px;bottom:61px;width:265px;padding:15px}.preview-head{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;font-weight:700;color:#d7e6ff}.preview-head>span:first-child{display:flex;gap:6px}.live-label{display:flex;align-items:center;gap:5px;color:#77f3d6}.live-label i{width:6px;height:6px;border-radius:50%;background:#48efc7;box-shadow:0 0 0 4px rgba(72,239,199,.14)}.preview-body{display:flex;align-items:end;gap:13px;margin-top:14px}.mini-chart{height:45px;flex:1;display:flex;align-items:end;gap:5px}.mini-chart i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(to top,#4d6dff,#55e9e0)}.preview-body strong,.preview-body small{display:block}.preview-body strong{font-size:1.25rem}.preview-body small{font-size:.58rem;color:#b8cbed}.showcase-footer{position:relative;z-index:2;display:flex;align-items:center;gap:18px;font-size:.66rem;color:#b9cced}.showcase-footer span{display:flex;align-items:center;gap:6px}.showcase-footer span:last-child{margin-left:auto}.showcase-footer i{color:#71f3e2}
.login-form-panel{padding:42px 56px 27px;display:flex;flex-direction:column;justify-content:center;position:relative;background:radial-gradient(circle at 100% 0,rgba(137,97,255,.12),transparent 35%),radial-gradient(circle at 5% 95%,rgba(25,199,225,.12),transparent 32%),rgba(255,255,255,.94)}.mobile-brand{display:none}.login-form-card{width:min(410px,100%);margin:auto}.welcome-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:1.4rem;color:#fff;background:linear-gradient(135deg,#6557e9,#147dde,#17bfcf);box-shadow:0 12px 30px rgba(60,87,212,.25);margin-bottom:20px}.form-kicker{font-size:.68rem;text-transform:uppercase;letter-spacing:.11em;font-weight:800;color:#5a67cf}.login-form-card h2{font-size:2.35rem;letter-spacing:-.04em;font-weight:850;margin:5px 0 8px;color:#182343}.form-intro{color:var(--login-muted);line-height:1.6;margin-bottom:25px}.login-alert{display:flex;gap:9px;align-items:flex-start;border:0;border-radius:13px;font-size:.78rem;padding:12px 14px;background:#fff0f2;color:#b4233c}.login-field label{font-size:.77rem;font-weight:780;color:#34405e;margin-bottom:7px}.label-row{display:flex;align-items:center;justify-content:space-between}.label-row a{font-size:.72rem;font-weight:750;color:#5264d9}.login-input{height:53px;border:1px solid #dce3f1;border-radius:14px;background:#f9fbff;display:grid;grid-template-columns:45px 1fr auto;align-items:center;transition:.2s ease;box-shadow:inset 0 1px 2px rgba(33,51,98,.02)}.login-input:focus-within{border-color:#6673e8;background:#fff;box-shadow:0 0 0 4px rgba(92,105,221,.11),0 9px 22px rgba(40,58,130,.07)}.login-input>span{display:grid;place-items:center;color:#7c88a5;font-size:1.02rem}.login-input input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#1c2744;font:inherit;padding:0 8px 0 0}.login-input input::placeholder{color:#a3acc0}.login-input button{border:0;background:transparent;color:#7b86a0;width:44px;height:44px;border-radius:11px}.login-input button:hover{background:#eef2fb;color:#4255d0}.login-options{display:flex;align-items:center;justify-content:space-between;margin:19px 1px 21px;font-size:.7rem;color:#616d88}.login-options label{display:flex;align-items:center;gap:7px;cursor:pointer}.login-options input{accent-color:#5265db;width:15px;height:15px}.secure-note{display:flex;align-items:center;gap:5px;color:#26977d}.login-submit{width:100%;height:55px;border:0;border-radius:15px;color:#fff;background:linear-gradient(105deg,#4857d6 0%,#197add 48%,#10bfc9 100%);display:flex;justify-content:center;align-items:center;gap:12px;font-weight:800;box-shadow:0 14px 30px rgba(37,93,201,.26);transition:.2s ease;position:relative;overflow:hidden}.login-submit:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-110%);transition:.5s}.login-submit:hover{transform:translateY(-2px);box-shadow:0 18px 35px rgba(37,93,201,.32)}.login-submit:hover:before{transform:translateX(110%)}.login-divider{display:flex;align-items:center;gap:12px;margin:25px 0 15px;color:#9aa4ba;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em}.login-divider:before,.login-divider:after{content:"";height:1px;background:#e7ebf4;flex:1}.security-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;color:#758098;font-size:.62rem}.security-row span{display:flex;align-items:center;gap:4px}.security-row i{color:#4f6bd8}.login-copyright{text-align:center;font-size:.62rem;color:#9aa4ba;margin:23px 0 0}
@media(max-width:1050px){.login-shell{grid-template-columns:.96fr 1.04fr}.login-showcase{padding:35px}.showcase-content h1{font-size:3rem}.showcase-features{grid-template-columns:1fr}.showcase-features>div{max-width:260px}.attendance-preview{right:25px}.login-form-panel{padding:38px}}
@media(max-width:820px){.login-page{background:#f4f7ff}.login-shell{width:min(560px,calc(100% - 26px));min-height:auto;margin:13px auto;grid-template-columns:1fr;border-radius:25px}.login-showcase{display:none}.login-form-panel{min-height:calc(100vh - 26px);padding:30px 35px}.mobile-brand{display:flex;color:#1d2a4c;margin-bottom:55px}.mobile-brand .login-brand small{color:#77839d}.login-form-card{margin:auto}.login-copyright{margin-top:55px}}
@media(max-width:480px){.login-shell{width:100%;margin:0;min-height:100vh;border:0;border-radius:0}.login-form-panel{padding:25px 22px}.mobile-brand{margin-bottom:38px}.login-logo{width:44px;height:44px;border-radius:14px}.welcome-icon{width:44px;height:44px;border-radius:14px;margin-bottom:16px}.login-form-card h2{font-size:2rem}.form-intro{font-size:.84rem;margin-bottom:21px}.login-input{height:51px}.login-options{font-size:.65rem}.secure-note{display:none}.security-row{gap:8px}.login-copyright{margin-top:35px}}
@media(prefers-reduced-motion:reduce){.login-submit,.login-submit:before{transition:none}}