/* Native CSS depth + motion. No CDN, analytics or third-party assets. */
:root{--motion-ease:cubic-bezier(.2,.8,.2,1);--motion-shadow:0 22px 60px rgb(9 48 78 / 12%)}
body{background:#edf4f8}
.login-shell{position:relative;background:#f3f8fc;overflow:hidden}
.login-art{isolation:isolate;perspective:1000px;background:radial-gradient(ellipse at 80% 10%,#128990 0,transparent 48%),radial-gradient(ellipse at 0 80%,#175d96 0,transparent 55%),linear-gradient(150deg,#071c37,#0b3f70 55%,#064459);gap:20px;padding:40px clamp(28px,4vw,64px)}
.login-art:before{width:540px;height:540px;top:-160px;right:-200px;border:1px solid #9cf5ff40;background:radial-gradient(circle at 35% 35%,#4bdbfa20,transparent 65%);animation:portal-orbit 24s linear infinite;box-shadow:inset 0 0 80px #46d8f91c,0 0 70px #67e1ff0e}
.login-art:after{width:410px;height:410px;bottom:-240px;left:-70px;border:1px solid #b7f9ff35;animation:portal-breathe 7s ease-in-out infinite}
.login-art .brand-card{z-index:4;width:min(340px,85%);padding:16px 24px;border:1px solid #ffffff85;box-shadow:0 16px 0 -10px #0b294c,0 30px 55px #00132650;transform:rotate(-3deg);animation:portal-brand-float 6s ease-in-out infinite}
.login-intro{position:relative;z-index:3;text-align:center;transform:translateZ(32px)}
.login-kicker{margin:0 0 12px;color:#8fe5ed;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:800}
.login-intro h1{margin:0;font-size:clamp(2.5rem,4.5vw,5.2rem);font-weight:850;letter-spacing:-.065em;line-height:1.05;text-shadow:0 4px 0 #082e53,0 14px 35px #02152650}
.login-intro>p:last-child{color:#c2dcec;font-size:.94rem;margin:14px 0 0}
.login-copy{z-index:3;max-width:510px}.login-copy>p{font-size:.85rem;line-height:1.7;color:#c2dcec}
.login-feature-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.login-feature-chips span{font-size:.7rem;font-weight:700;border:1px solid #ffffff25;border-radius:999px;padding:7px 11px;background:#ffffff0d;backdrop-filter:blur(8px)}
.animated-mascots{z-index:4;max-width:480px;transform:none}
.login-panel{position:relative;isolation:isolate;background:radial-gradient(ellipse at 90% 0,#d8f1f3,transparent 45%),linear-gradient(135deg,#f7fbfe,#edf4f8);padding:42px clamp(26px,4vw,70px)}
.login-panel:before{content:"";position:absolute;z-index:-1;inset:0;background-image:radial-gradient(#87aabb35 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(#000,transparent 80%)}
.login-box{position:relative;width:100%;max-width:490px;padding:32px clamp(22px,3vw,40px);border-radius:30px;border:1px solid #fff;background:#fffffff2;box-shadow:0 4px 0 #d4e4ec,0 30px 80px #153e6520;animation:portal-login-enter .8s var(--motion-ease) both}
.login-box h2{font-size:clamp(2rem,3vw,3rem);letter-spacing:-.05em;margin:12px 0}.login-box .lead{font-size:.94rem;line-height:1.6;margin-bottom:24px}
.login-box .eyebrow{font-size:.65rem;color:#61788e;letter-spacing:.2em;margin-top:22px}
.login-leave-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border:1px solid #bddedb;border-radius:16px;background:linear-gradient(115deg,#ecf8f7,#f6fcfc);text-decoration:none;transition:transform .25s var(--motion-ease),box-shadow .25s}
.login-leave-link>span{font-size:.75rem;color:#446a72}.login-leave-link strong{font-size:.9rem;color:#087a78}.login-leave-link:hover{transform:translateY(-3px);box-shadow:0 10px 20px #0b7c7515}
.login-box input{background:#f8fbfd;border-color:#cbdbe4;transition:box-shadow .2s,background .2s,transform .2s}
.login-box input:focus{background:#fff;box-shadow:0 0 0 4px #17b8b31c;transform:translateY(-1px)}
.login-box .microsoft-login{border-radius:14px;background:linear-gradient(115deg,#103f70,#0c6484);box-shadow:0 5px 0 #082a4a}
.login-box #loginForm .btn-primary{background:linear-gradient(120deg,#079990,#057571);box-shadow:0 5px 0 #065c5b,0 10px 20px #068a8a20;border:0;width:100%}
.login-box .sso-divider{font-size:.74rem;margin:20px 0}.login-session-note{font-size:.72rem}
.portal-depth-scene{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;transform-style:preserve-3d}
.portal-depth-ring{position:absolute;width:330px;height:330px;left:-210px;top:36%;border:1px solid #90f5ee60;border-radius:50%;transform:rotateY(55deg) rotateX(20deg);animation:portal-ring 18s linear infinite;box-shadow:0 0 0 24px #ffffff03,0 0 0 48px #ffffff02}
.portal-depth-tile{position:absolute;display:grid;place-items:center;width:58px;height:58px;border-radius:18px;border:1px solid #ffffff55;color:#c3ffff;background:linear-gradient(145deg,#ffffff30,#ffffff06);box-shadow:0 5px 0 #07435c,0 18px 40px #00142755;backdrop-filter:blur(10px);font-size:25px;font-weight:500;animation:portal-tile-float 7s ease-in-out infinite}
.portal-depth-tile.t1{left:8%;top:31%;--float-turn:-14deg}.portal-depth-tile.t2{right:8%;top:56%;--float-turn:14deg;animation-delay:-2.5s;color:#ffe2a0}.portal-depth-tile.t3{left:11%;bottom:14%;width:42px;height:42px;border-radius:13px;--float-turn:12deg;animation-delay:-4.3s}
.portal-scene-grid{position:absolute;inset:58% -70% -40%;background-image:linear-gradient(#6acfe020 1px,transparent 1px),linear-gradient(90deg,#6acfe020 1px,transparent 1px);background-size:55px 55px;transform:perspective(600px) rotateX(65deg);mask-image:linear-gradient(transparent,#000 40%,transparent);animation:portal-grid 18s linear infinite}
.workspace-shell{background:radial-gradient(ellipse at 100% 10%,#dff3f6,transparent 50%),linear-gradient(#f9fcff,#edf4f8)}
.workspace-top,.topbar{background:#fffffff0;backdrop-filter:blur(16px);box-shadow:0 8px 24px #173e6210}
.workspace-content>h1{letter-spacing:-.055em;font-size:clamp(2.2rem,4vw,3.8rem)}
.workspace-card,.card{box-shadow:0 3px 0 #dce7ef,0 12px 35px #13354f06;transition:box-shadow .3s,border-color .3s,transform .3s var(--motion-ease)}
.workspace-card{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;background:linear-gradient(115deg,#fff,#f8fcff);padding:26px;transform-style:preserve-3d}
.workspace-card:after{content:"";position:absolute;z-index:-1;width:180px;height:180px;border-radius:50%;right:-80px;top:-110px;background:#2bbab010;transition:transform .5s var(--motion-ease)}
.workspace-card:hover:after{transform:scale(2)}
.workspace-badge{background:linear-gradient(145deg,#e7fbf7,#c6e7f0);color:#075b75;box-shadow:0 5px 0 #a8cfde;border-radius:18px;transform:rotate(-5deg);transition:transform .3s}
.workspace-card:hover .workspace-badge{transform:rotate(3deg) translateY(-4px)}
.portal-tilt:hover{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px);box-shadow:0 8px 0 -4px #d8e6ef,0 28px 55px #0b425c16;border-color:#a2cfdc}
.stat-card{border-top:3px solid #24adb1}.stat-card:nth-child(2){border-top-color:#30ae83}.stat-card:nth-child(3){border-top-color:#e2ad42}.stat-card:nth-child(4){border-top-color:#e07d73}
.stat-card:after{background:linear-gradient(130deg,#39c6c433,#49c8e20a);transform:translateZ(20px);animation:portal-stat-orb 8s ease-in-out infinite}
.stat-card strong{letter-spacing:-.055em;color:#123d5f}
.sidebar{background:linear-gradient(180deg,#fff,#f1f8fc);box-shadow:8px 0 35px #214d7410}.nav button{transition:transform .25s,background .25s,box-shadow .25s}.nav button:hover{transform:translateX(4px)}.nav button.active{background:linear-gradient(100deg,#daf2ef,#edf9fb);box-shadow:inset 3px 0 #078c89}
.page-head h1,.lw-main>h1{letter-spacing:-.045em}.page-head .eyebrow{color:#178181}
.btn,.lw-button{transition:transform .22s var(--motion-ease),box-shadow .22s,background .22s}
.btn-primary,.lw-primary{box-shadow:0 3px 0 #066b6825}.btn:hover,.lw-button:hover{transform:translateY(-3px);box-shadow:0 9px 22px #123c5915}.btn:active,.lw-button:active{transform:translateY(1px)}
.modal-backdrop{backdrop-filter:blur(7px);animation:portal-backdrop-in .22s ease both}.modal{box-shadow:0 9px 0 -4px #b9d3df,0 40px 100px #041f4a55;animation:portal-modal-in .42s var(--motion-ease) both}
.cal-event{transition:transform .18s,box-shadow .18s}.cal-event:hover{transform:translateY(-2px);box-shadow:0 5px 12px #10415f15}.cal-day:not(.muted):hover{background:#f7fcff}.cal-num{color:#244761}
#leaveStaffHint{display:block;margin-top:8px;line-height:1.5;font-size:.78rem;color:#487285}#leaveStaffHint.calendar-form-error{color:#b42318}
.lw-header{background:#fffffff2;backdrop-filter:blur(16px)}.lw-main{position:relative}.lw-card,.lw-request{box-shadow:0 4px 0 #dce9ef,0 18px 50px #174c7410;transition:transform .25s,box-shadow .25s}.lw-request:hover{transform:translateY(-3px);box-shadow:0 18px 32px #174c7414}.lw-availability{border-top:4px solid #078c8c}
.portal-enter{animation:portal-surface-in .65s var(--motion-ease) both;animation-delay:var(--enter-delay,0ms)}
/* Keep long forms, short laptop screens and mobile footers reachable. */
.modal-head,.modal-foot{flex-shrink:0}.modal-body{min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable}.modal-foot{gap:10px;flex-wrap:wrap}.modal-head h2{min-width:0;overflow-wrap:anywhere}.modal-head .icon-btn{flex-shrink:0}.table-wrap,.calendar-card,.nav{overscroll-behavior:contain}.table-wrap{max-width:100%}.toast{max-width:calc(100vw - 24px);overflow-wrap:anywhere;pointer-events:none}input,select,textarea{scroll-margin-block:110px}
body:has(.modal-backdrop) .toast{top:12px;bottom:auto;right:12px}
@media(min-width:761px) and (max-width:1180px){.calendar-layout{grid-template-columns:minmax(0,1fr)}.calendar-side{grid-template-columns:repeat(2,minmax(0,1fr))}.calendar-card{overflow:auto}.calendar-grid{min-width:650px}}
@media(max-width:420px){.modal-foot>.btn{flex:1;min-width:0;padding:12px 10px}.top-actions{gap:5px}.top-user{gap:5px;margin-left:0}.logout-btn{min-width:60px;margin-left:0}.login-leave-link{gap:8px}.login-leave-link>span{font-size:.68rem}}
@keyframes portal-surface-in{from{opacity:0;transform:perspective(1100px) translateY(28px) rotateX(7deg) scale(.97)}to{opacity:1;transform:none}}
@keyframes portal-login-enter{from{opacity:0;transform:perspective(1200px) rotateY(-12deg) translateY(35px) scale(.94)}to{opacity:1;transform:none}}
@keyframes portal-modal-in{from{opacity:0;transform:perspective(1000px) rotateX(8deg) translateY(35px) scale(.96)}to{opacity:1;transform:none}}
@keyframes portal-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes portal-brand-float{0%,100%{transform:perspective(1000px) rotateY(-5deg) rotate(-3deg) translateY(0)}50%{transform:perspective(1000px) rotateY(5deg) rotate(-1deg) translateY(-9px)}}
@keyframes portal-tile-float{0%,100%{transform:perspective(700px) rotateY(-15deg) rotate(var(--float-turn)) translateY(0)}50%{transform:perspective(700px) rotateY(15deg) rotate(calc(var(--float-turn) + 8deg)) translateY(-20px)}}
@keyframes portal-orbit{to{transform:rotate(360deg)}}
@keyframes portal-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes portal-ring{0%{transform:perspective(700px) rotateX(30deg) rotateY(60deg) rotateZ(0)}100%{transform:perspective(700px) rotateX(30deg) rotateY(60deg) rotateZ(360deg)}}
@keyframes portal-grid{to{background-position:55px 110px}}
@keyframes portal-stat-orb{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(8px) scale(1.2)}}
@media(max-width:1100px){.login-intro h1{font-size:3.1rem}.login-art{padding:32px 24px}.login-box{padding:28px 24px}.portal-depth-tile.t1{left:3%;top:38%}.portal-depth-tile.t2{right:2%}}
@media(max-width:760px){.login-art{padding:26px 22px 22px;gap:14px}.login-art .brand-card{width:220px;padding:12px 18px}.login-intro h1{font-size:2.5rem}.login-intro>p:last-child{font-size:.8rem;margin-top:9px}.login-kicker{font-size:.6rem;margin-bottom:8px}.animated-mascots{max-width:390px;max-height:190px}.login-copy>p{font-size:.78rem}.login-feature-chips{margin-top:12px}.login-feature-chips span{font-size:.6rem;padding:5px 9px}.login-panel{padding:26px 18px 40px}.login-box{max-width:490px;margin:auto;padding:24px 22px;border-radius:25px}.portal-depth-tile{width:40px;height:40px;font-size:19px;border-radius:12px}.portal-depth-tile.t1{top:35%;left:5%}.portal-depth-tile.t2{top:65%;right:4%}.portal-depth-tile.t3{display:none}.login-leave-link strong{font-size:.82rem}}
/* Full motion is default. Respect device accessibility settings without hiding content. */
@media(prefers-reduced-motion:reduce){.portal-enter,.login-box,.portal-depth-tile,.portal-depth-ring,.portal-scene-grid,.login-art:before,.login-art:after,.brand-card,.stat-card:after,.modal,.modal-backdrop{animation:none!important}.portal-tilt:hover,.btn:hover,.lw-button:hover,.nav button:hover,.cal-event:hover,.lw-request:hover,.animated-mascots{transform:none!important}*,*:before,*:after{transition:none!important}}