*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f4f6f9;color:#172033}body{overflow-x:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}
:root{--ink:#152033;--ink2:#253752;--muted:#7e8a9c;--line:#e6eaf0;--paper:#fff;--bg:#f4f6f9;--accent:#b89552;--green:#27804b;--red:#a83d3d}
/* Cinematic login */
.login-page{background:#07101b;color:#fff}.login-scene{min-height:100vh;position:relative;overflow:hidden;background:radial-gradient(circle at 58% 45%,rgba(96,127,160,.22),transparent 25%),radial-gradient(circle at 82% 18%,rgba(184,149,82,.08),transparent 22%),linear-gradient(115deg,#04080d 0%,#0a1420 48%,#17283b 100%);isolation:isolate}.login-scene:after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.34));pointer-events:none;z-index:1}.login-scene:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 32% 68%,rgba(184,149,82,.08),transparent 18%),linear-gradient(90deg,transparent 0 67%,rgba(255,255,255,.025) 67.1% 67.2%,transparent 67.3% 74%,rgba(255,255,255,.018) 74.1% 74.2%,transparent 74.3%);animation:officeLight 9s ease-in-out infinite alternate}.scene-glow{position:absolute;width:62vw;height:62vw;max-width:850px;max-height:850px;border-radius:50%;right:8%;top:0;background:radial-gradient(circle,rgba(173,201,224,.13),transparent 66%);filter:blur(2px);z-index:-1;animation:ambientGlow 7s ease-in-out infinite alternate}.scene-floor{position:absolute;left:-5%;right:-5%;bottom:-12%;height:38%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.25)),linear-gradient(8deg,#05080c,#0b131c);transform:skewY(-2deg);z-index:-1}.scene-window{position:absolute;top:0;right:0;width:43%;height:70%;border-left:1px solid rgba(255,255,255,.07);background:linear-gradient(90deg,transparent,rgba(140,173,205,.04));z-index:-1}.scene-window:after{content:"";position:absolute;inset:8% 12%;background:repeating-linear-gradient(90deg,transparent 0 22%,rgba(255,255,255,.035) 22.2% 22.6%),repeating-linear-gradient(0deg,transparent 0 24%,rgba(255,255,255,.025) 24.2% 24.6%)}.login-brand{position:absolute;left:44px;top:36px;display:flex;align-items:center;gap:12px;z-index:8}.brand-mark{width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.06);backdrop-filter:blur(12px);font-weight:900;letter-spacing:.08em}.login-brand small{display:block;color:rgba(255,255,255,.5);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.login-brand strong{font-size:13px;letter-spacing:.02em}.walker{position:absolute;left:-18%;bottom:15%;width:190px;height:290px;z-index:5;animation:walkJourney 5.8s cubic-bezier(.18,.82,.2,1) forwards;filter:drop-shadow(0 20px 22px rgba(0,0,0,.34));will-change:transform,left}.walk-shadow{position:absolute;left:38px;bottom:3px;width:112px;height:20px;border-radius:50%;background:rgba(0,0,0,.34);filter:blur(7px);animation:shadowWalk 5.8s ease-out forwards}.walker:before{content:"";position:absolute;left:18px;bottom:24px;width:140px;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(205,177,112,.25),transparent);filter:blur(4px);opacity:.55;animation:trailPulse .9s ease-in-out infinite alternate}.walker .head{position:absolute;left:72px;top:7px;width:45px;height:45px;border-radius:50%;background:linear-gradient(145deg,#d9a681,#9a6246);box-shadow:inset -8px -4px 0 rgba(0,0,0,.12);z-index:3}.walker .head:after{content:"";position:absolute;right:-2px;top:22px;width:5px;height:7px;border-radius:50%;background:#9a6246}.walker .hair{position:absolute;left:68px;top:1px;width:53px;height:28px;border-radius:28px 28px 14px 14px;background:#1b1e23;z-index:4}.walker .eye{position:absolute;top:20px;width:4px;height:4px;border-radius:50%;background:#20262c;opacity:0;animation:faceBlink 5.8s linear forwards}.walker .eye.left{left:13px}.walker .eye.right{right:13px}.walker .neck{position:absolute;left:85px;top:43px;width:18px;height:18px;border-radius:0 0 8px 8px;background:#b77b5a;z-index:2}.walker .body{position:absolute;left:50px;top:53px;width:88px;height:120px;border-radius:32px 32px 18px 18px;background:linear-gradient(145deg,#2b4057,#142031);transform-origin:50% 0;animation:bodyWalk .52s ease-in-out infinite alternate}.walker .body:after{content:"";position:absolute;left:17px;right:17px;bottom:13px;height:1px;background:rgba(255,255,255,.1)}.shirt-line{position:absolute;left:50%;top:0;height:35px;width:1px;background:rgba(255,255,255,.07)}.walker .arm{position:absolute;width:20px;height:104px;border-radius:20px;background:#1b2a3b;top:61px;transform-origin:10px 10px}.walker .arm.a{left:41px;transform:rotate(16deg);animation:armA .52s ease-in-out infinite alternate}.walker .arm.b{left:126px;transform:rotate(-18deg);animation:armB .52s ease-in-out infinite alternate}.walker .hand{position:absolute;width:20px;height:20px;border-radius:50%;background:#b97e5b;top:154px;transform-origin:10px 10px}.walker .hand.a{left:41px;animation:handA .52s ease-in-out infinite alternate}.walker .hand.b{left:126px;animation:handB .52s ease-in-out infinite alternate}.walker .leg{position:absolute;width:26px;height:128px;border-radius:20px;background:#101923;top:151px;transform-origin:13px 13px}.walker .leg.a{left:58px;transform:rotate(8deg);animation:legA .52s ease-in-out infinite alternate}.walker .leg.b{left:102px;transform:rotate(-12deg);animation:legB .52s ease-in-out infinite alternate}.walker .shoe{position:absolute;width:43px;height:16px;border-radius:15px 18px 8px 8px;background:#080c11;top:268px}.walker .shoe.a{left:48px;transform:rotate(8deg);animation:shoeA .52s ease-in-out infinite alternate}.walker .shoe.b{left:97px;transform:rotate(-8deg);animation:shoeB .52s ease-in-out infinite alternate}.bag{position:absolute;left:131px;top:98px;width:54px;height:68px;border-radius:12px 12px 15px 15px;background:linear-gradient(145deg,#796248,#332b24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 24px rgba(0,0,0,.18);transform-origin:80% 60%;animation:bagJourney 5.8s cubic-bezier(.2,.8,.2,1) forwards;z-index:4}.bag:before{content:"";position:absolute;left:11px;top:-19px;width:30px;height:26px;border:5px solid #514635;border-bottom:0;border-radius:18px 18px 0 0}.bag:after{content:"";position:absolute;left:9px;right:9px;top:17px;height:2px;background:rgba(255,255,255,.12)}.login-panel{position:absolute;right:8%;top:50%;width:min(440px,88vw);transform:translateY(-46%);z-index:7;opacity:0;animation:panelReveal 1.05s 4.95s cubic-bezier(.16,.82,.2,1) forwards}.login-card{background:rgba(9,17,27,.76);border:1px solid rgba(255,255,255,.12);box-shadow:0 32px 100px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.025),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(24px);border-radius:30px;padding:34px;position:relative;overflow:hidden}.login-card:after{content:"";position:absolute;left:-30%;top:-20%;width:50%;height:160%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);transform:rotate(16deg);animation:glassSweep 5.5s 5.55s ease-in-out infinite}.login-card:before{content:"";display:block;width:58px;height:3px;background:linear-gradient(90deg,var(--accent),rgba(184,149,82,0));margin-bottom:24px}.login-card .eyebrow{color:#bfa775}.login-card h1{margin:0;font-size:30px;letter-spacing:-.04em}.login-card p{margin:7px 0 26px;color:#9caabd}.login-card form{display:grid;gap:15px;position:relative;z-index:2}.login-card label{display:flex;flex-direction:column;gap:7px;color:#c6d0dc;font-size:12px;font-weight:700}.login-card input{width:100%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055);color:#fff;border-radius:12px;padding:12px 13px;outline:none}.login-card input:focus{border-color:rgba(191,167,117,.7);box-shadow:0 0 0 3px rgba(184,149,82,.1)}.login-card .btn.primary{background:#d1b06d;color:#17120a;border-color:#d1b06d}.login-card .btn.primary:hover{filter:brightness(1.07);transform:translateY(-1px)}.login-footer{position:absolute;left:0;right:0;bottom:19px;text-align:center;color:rgba(255,255,255,.48);font-size:11px;letter-spacing:.02em;z-index:6}.login-footer strong{font-weight:600}.login-panel .logo-mark{display:none}.form-error{min-height:18px;color:#ff9d9d;font-size:12px}@keyframes ambientGlow{to{transform:translate3d(-12px,8px,0) scale(1.04);opacity:.82}}@keyframes officeLight{to{transform:translateX(18px);opacity:.72}}@keyframes trailPulse{to{opacity:.12;transform:scaleX(.55)}}@keyframes walkJourney{0%{left:-20%;transform:translate3d(0,0,0) scale(.92)}10%{transform:translate3d(0,-2px,0) scale(.95)}24%{left:2%;transform:translate3d(0,2px,0) scale(.97)}40%{left:20%;transform:translate3d(0,-2px,0) scale(.99)}55%{left:31%;transform:translate3d(0,2px,0) scale(1)}68%{left:38%;transform:translate3d(0,-1px,0) scale(1)}78%{left:41%;transform:translate3d(0,1px,0) scale(1)}86%{left:42%;transform:translate3d(4px,0,0) rotate(0)}92%{left:42%;transform:translate3d(13px,2px,0) rotate(-4deg)}100%{left:42%;transform:translate3d(20px,7px,0) rotate(-8deg)}}@keyframes shadowWalk{0%{transform:scaleX(.7);opacity:.2}65%{transform:scaleX(1);opacity:.34}100%{transform:translateX(15px) scaleX(.9);opacity:.24}}@keyframes bodyWalk{0%{transform:rotate(1deg) translateY(0)}50%{transform:rotate(-2deg) translateY(2px)}100%{transform:rotate(1deg) translateY(0)}}@keyframes armA{0%{transform:rotate(18deg)}50%{transform:rotate(-24deg)}100%{transform:rotate(18deg)}}@keyframes armB{0%{transform:rotate(-20deg)}50%{transform:rotate(24deg)}100%{transform:rotate(-20deg)}}@keyframes handA{to{transform:translateY(-2px) rotate(-8deg)}}@keyframes handB{to{transform:translateY(-2px) rotate(8deg)}}@keyframes legA{0%{transform:rotate(14deg)}50%{transform:rotate(-24deg) translateY(3px)}100%{transform:rotate(14deg)}}@keyframes legB{0%{transform:rotate(-18deg)}50%{transform:rotate(22deg) translateY(3px)}100%{transform:rotate(-18deg)}}@keyframes shoeA{0%{transform:translate(3px,0) rotate(10deg)}50%{transform:translate(-6px,4px) rotate(3deg)}100%{transform:translate(3px,0) rotate(10deg)}}@keyframes shoeB{0%{transform:translate(-3px,2px) rotate(-10deg)}50%{transform:translate(6px,0) rotate(-3deg)}100%{transform:translate(-3px,2px) rotate(-10deg)}}@keyframes faceBlink{0%,43%,49%,100%{opacity:0}45%,47%{opacity:1}}@keyframes bagJourney{0%,55%{transform:rotate(0) translate(0,0);opacity:1}65%{transform:rotate(-12deg) translate(28px,-6px)}72%{transform:rotate(-28deg) translate(78px,-18px)}82%{transform:rotate(55deg) translate(170px,-28px)}91%{transform:rotate(190deg) translate(275px,-12px);opacity:.75}100%{transform:rotate(340deg) translate(360px,8px);opacity:0}}@keyframes panelReveal{from{opacity:0;transform:translate(45px,-46%) scale(.97)}to{opacity:1;transform:translate(0,-46%) scale(1)}}@keyframes glassSweep{0%{left:-30%}45%,100%{left:125%}}.app-shell{min-height:100vh;display:grid;grid-template-columns:240px 1fr}.sidebar{background:#101a29;color:#dce5ef;padding:22px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.side-brand{display:flex;align-items:center;gap:10px;padding:4px 10px 24px;border-bottom:1px solid rgba(255,255,255,.07)}.side-brand .brand-mark{width:38px;height:38px;font-size:12px}.side-brand strong{font-size:13px}.side-brand small{display:block;color:#718197;font-size:10px;margin-top:2px}.nav{display:grid;gap:5px;margin-top:20px}.nav button{border:0;background:transparent;color:#93a3b7;text-align:left;padding:11px 12px;border-radius:11px;font-weight:700;font-size:12px}.nav button:hover,.nav button.active{background:rgba(255,255,255,.07);color:#fff}.nav-section{color:#5f7086;font-size:9px;letter-spacing:.14em;font-weight:900;padding:14px 12px 5px}.side-footer{margin-top:auto;padding:12px;color:#64748a;font-size:10px;line-height:1.6}.main{min-width:0}.topbar{height:72px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.mobile-menu{display:none}.brand-title strong{font-size:14px}.brand-title small{display:block;color:#8a95a7;font-size:10px;margin-top:2px}.user-area{display:flex;align-items:center;gap:9px;font-size:12px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#1a2a42;color:#fff;font-weight:800}.role,.pill{border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800}.role{background:#eef1f5;color:#566376}.content{max-width:1500px;margin:auto;padding:28px}.hero{background:linear-gradient(135deg,#142238,#263a58);color:#fff;border-radius:26px;padding:34px;display:flex;justify-content:space-between;align-items:flex-end;box-shadow:0 18px 45px rgba(25,45,75,.13);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:320px;height:320px;right:-80px;top:-150px;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.02)}.eyebrow{font-size:10px;letter-spacing:.15em;font-weight:900;color:#8c9ab0}.hero .eyebrow{color:#aebbd0}.hero h1{margin:8px 0 7px;font-size:31px;letter-spacing:-.045em;position:relative;z-index:1}.hero p{margin:0;color:#c1ccda;font-size:13px;position:relative;z-index:1}.hero-side{position:relative;z-index:2;text-align:right}.hero-date{font-size:11px;color:#aebbd0}.hero-role{display:inline-block;margin-top:8px;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 11px;font-size:10px;font-weight:800}.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:16px 0}.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:17px 18px;min-width:0;box-shadow:0 7px 24px rgba(28,48,75,.035)}.stat span{display:block;color:#8a95a4;font-size:10px;font-weight:700}.stat b{font-size:23px;display:block;margin-top:6px;letter-spacing:-.03em}.stat .mini{font-size:10px;color:#a0a8b5;margin-top:4px}.grid-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr);gap:16px}.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:21px;box-shadow:0 8px 28px rgba(28,48,75,.035)}.toolbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:18px}.toolbar h2{margin:0 0 3px;font-size:18px}.muted{color:#7d899a;font-size:12px;margin:0}.actions{display:flex;gap:8px;flex-wrap:wrap}.search,select,input,textarea{border:1px solid #dce3eb;background:#fff;border-radius:11px;padding:10px 12px;outline:none;color:#172033}.search{min-width:260px}input:focus,select:focus,textarea:focus{border-color:#7185a4;box-shadow:0 0 0 3px rgba(72,96,132,.08)}.btn{border:1px solid #dce3eb;background:#fff;color:#344154;border-radius:10px;padding:9px 13px;font-weight:700;font-size:11px}.btn.primary{background:#172942;border-color:#172942;color:#fff}.btn.danger{background:#fff0f0;border-color:#f0c8c8;color:#b33a3a}.btn.ghost{background:#fff}.btn.small{padding:7px 10px}.btn.full{width:100%;padding:12px}.btn.gold{background:#c5a363;border-color:#c5a363;color:#1c160c}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th{text-align:left;font-size:9px;color:#8994a4;text-transform:uppercase;letter-spacing:.08em;padding:12px;border-bottom:1px solid #e9edf2}td{padding:13px 12px;border-bottom:1px solid #eef1f5;font-size:12px}td small{display:block;color:#9aa4b2;font-size:10px;margin-top:2px}.green{background:#e9f8ef;color:#27804b}.gray{background:#eef1f4;color:#687382}.empty{text-align:center;padding:34px;color:#8994a4}.error-text{color:#b33a3a}.pagination{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:16px;font-size:11px;color:#7c8796}.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}.section-head h3{margin:0;font-size:14px}.section-head p{margin:4px 0 0}.dept-list{display:grid;gap:13px}.dept-row{display:grid;grid-template-columns:110px 1fr 32px;gap:10px;align-items:center;font-size:11px}.dept-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#586577}.bar{height:7px;border-radius:99px;background:#edf0f4;overflow:hidden}.bar i{display:block;height:100%;background:#263b58;border-radius:99px}.dept-num{text-align:right;font-weight:800}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick{border:1px solid #e8ebef;background:#fafbfc;padding:13px;border-radius:13px;text-align:left}.quick strong{display:block;font-size:11px}.quick span{display:block;color:#8c97a6;font-size:9px;margin-top:3px}.modal-backdrop{position:fixed;inset:0;background:rgba(10,18,30,.58);display:grid;place-items:center;padding:18px;z-index:30}.modal{background:#fff;width:min(980px,100%);max-height:92vh;overflow:auto;border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.2)}.modal.wide{width:min(1120px,100%)}.modal-head{display:flex;justify-content:space-between;padding:24px 26px 14px;border-bottom:1px solid #edf0f4}.modal h2{margin:4px 0 0;font-size:21px}.icon-btn{border:0;background:#f2f4f7;border-radius:50%;width:34px;height:34px;font-size:22px;color:#687382}.tabs{display:flex;gap:4px;padding:13px 26px 0;border-bottom:1px solid #edf0f4;overflow:auto}.tab{border:0;background:transparent;padding:10px 11px;font-size:11px;font-weight:800;color:#8994a4;white-space:nowrap;border-bottom:2px solid transparent}.tab.active{color:#172942;border-color:#172942}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px 26px}.form-grid label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:700;color:#4e5a6c}.form-grid input,.form-grid textarea,.form-grid select{width:100%;margin:0}.full-field{grid-column:1/-1}.form-grid textarea{min-height:90px;resize:vertical}.modal-foot{padding:16px 26px;border-top:1px solid #edf0f4;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.profile-panel{padding:22px 26px}.profile-strip{display:grid;grid-template-columns:80px 1fr auto;gap:16px;align-items:center;background:#f7f8fa;border:1px solid #e8ebef;border-radius:16px;padding:15px;margin-bottom:15px}.profile-avatar{width:60px;height:60px;border-radius:16px;background:#172942;color:#fff;display:grid;place-items:center;font-size:20px;font-weight:900}.profile-strip strong{font-size:15px}.profile-strip small{display:block;color:#8c97a6;margin-top:4px}.subsection{border:1px solid #e9edf2;border-radius:15px;padding:15px;margin-bottom:12px}.subsection h4{margin:0 0 12px;font-size:12px}.inline-form{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.inline-form input,.inline-form select{width:100%;font-size:11px}.mini-table{min-width:0}.mini-table th,.mini-table td{padding:9px 7px}.timeline{display:grid;gap:0}.timeline-item{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid #eef1f5}.timeline-item:last-child{border-bottom:0}.timeline-date{font-size:10px;color:#8b96a5}.timeline-item strong{font-size:11px}.timeline-item p{margin:3px 0 0;color:#7d899a;font-size:10px}.user-status{display:flex;align-items:center;gap:6px}.toast{position:fixed;right:20px;bottom:20px;background:#172942;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.15);opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s;z-index:50;font-size:12px}.toast.show{opacity:1;transform:none}.toast.error{background:#a53232}
@media(max-width:1180px){.stats{grid-template-columns:repeat(3,1fr)}.grid-main{grid-template-columns:1fr}.sidebar{width:220px}.app-shell{grid-template-columns:220px 1fr}}
@media(max-width:850px){.app-shell{display:block}.sidebar{position:fixed;left:-250px;top:0;width:240px;z-index:40;transition:.25s}.sidebar.open{left:0;box-shadow:20px 0 50px rgba(0,0,0,.2)}.mobile-menu{display:grid;place-items:center;border:0;background:#f0f2f5;border-radius:10px;width:36px;height:36px}.topbar{padding:0 16px}.content{padding:16px}.hero{padding:25px}.hero-side{display:none}.stats{grid-template-columns:1fr 1fr}.toolbar{align-items:stretch;flex-direction:column}.actions{width:100%}.search{min-width:0;flex:1}.inline-form{grid-template-columns:1fr 1fr}.profile-strip{grid-template-columns:60px 1fr}.profile-strip .btn{grid-column:1/-1}.login-brand{left:20px;top:20px}.login-panel{right:50%;transform:translate(50%,-46%);width:min(420px,calc(100vw - 32px))}.walker{opacity:.32;transform:scale(.8);left:-25%}.login-footer{bottom:13px;font-size:10px}@keyframes panelReveal{from{opacity:0;transform:translate(50%,calc(-46% + 45px)) scale(.97)}to{opacity:1;transform:translate(50%,-46%) scale(1)}}}
@media(max-width:600px){.stats{grid-template-columns:1fr 1fr}.stat{padding:14px}.stat:nth-child(n+5){display:none}.hero h1{font-size:25px}.form-grid{grid-template-columns:1fr;padding:18px}.full-field{grid-column:auto}.modal-head,.modal-foot{padding-left:18px;padding-right:18px}.tabs{padding-left:18px;padding-right:18px}.profile-panel{padding:18px}.inline-form{grid-template-columns:1fr}.login-card{padding:27px;border-radius:24px}.login-card h1{font-size:25px}.scene-floor{height:30%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.leave-summary,.payroll-total{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}.leave-summary>div,.payroll-total>div{background:#f7f8fa;border:1px solid #e9edf2;border-radius:15px;padding:15px}.leave-summary b,.payroll-total b{display:block;font-size:18px}.leave-summary span,.payroll-total span{display:block;color:#8994a4;font-size:10px;margin-top:3px}.pill.red{background:#fff0f0;color:#b33a3a}.employee-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.employee-card{display:grid;grid-template-columns:42px 1fr 20px;gap:10px;align-items:center;text-align:left;background:#fafbfc;border:1px solid #e7ebf0;border-radius:15px;padding:12px}.employee-card:hover{border-color:#cfd7e2;transform:translateY(-1px)}.employee-card b{display:block;font-size:11px;color:#263247}.employee-card small{display:block;color:#8994a4;font-size:9px;margin-top:3px}.profile-avatar.small{width:42px;height:42px;border-radius:12px;font-size:13px}@media(max-width:700px){.leave-summary,.payroll-total,.employee-cards{grid-template-columns:1fr}.leave-summary>div,.payroll-total>div{padding:12px}}
.organization-page{overflow:hidden}.org-toolbar{align-items:flex-start}.org-toolbar>div:first-child{max-width:760px}.org-toolbar h2{margin:4px 0 5px}.org-scope{padding:10px 13px;border:1px solid #e6eaf0;border-radius:13px;background:#fafbfc;min-width:150px}.org-scope span{display:block;font-size:8px;letter-spacing:.13em;color:#98a2b0;font-weight:800}.org-scope strong{display:block;margin-top:5px;font-size:11px;color:#253752}.org-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:16px 0 18px}.org-metrics>div{padding:16px 17px;border:1px solid #e4e9ef;border-radius:16px;background:linear-gradient(145deg,#fff,#f8fafc)}.org-metrics span{display:block;font-size:10px;color:#8994a4}.org-metrics b{display:block;font-size:25px;margin-top:7px;color:#172942}.org-tree{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.org-unit{border:1px solid #e1e6ec;border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 8px 26px rgba(29,48,75,.035)}.org-unit-head{display:flex;justify-content:space-between;gap:15px;padding:20px 20px 16px;border-bottom:1px solid #edf0f4;background:linear-gradient(135deg,#fbfcfd,#f5f7f9)}.org-unit-head h3{margin:4px 0 0;font-size:17px}.org-unit-total{text-align:right;min-width:72px}.org-unit-total b{display:block;font-size:24px;color:#172942}.org-unit-total small{font-size:8px;color:#929cab}.org-position-list{padding:12px}.org-position{border:1px solid #edf0f4;border-radius:15px;overflow:hidden;margin-bottom:9px}.org-position:last-child{margin-bottom:0}.org-position-head{padding:11px 12px;background:#f8fafc}.org-position-head strong{display:block;font-size:11px;color:#334258}.org-position-head small{display:block;margin-top:3px;font-size:9px;color:#9aa4b1}.org-people{display:grid}.org-person{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid #f0f2f5;background:#fff}.org-person strong{display:block;font-size:10px;color:#253752}.org-person small{display:block;margin-top:3px;font-size:8px;color:#8e99a8}.org-person .btn{flex:0 0 auto}.org-unassigned{margin-top:16px;border:1px solid #eadfc7;border-radius:18px;background:#fffaf1;overflow:hidden}.org-unassigned-head{display:flex;justify-content:space-between;gap:12px;padding:18px 19px;border-bottom:1px solid #eee4d2}.org-unassigned-head h3{margin:4px 0 3px;font-size:14px}.org-unassigned-head p{margin:0;max-width:730px}.org-unassigned-head>b{font-size:24px;color:#9b7940}.org-empty-state{grid-column:1/-1;padding:50px 24px;text-align:center;border:1px dashed #d9dfe7;border-radius:18px;background:linear-gradient(180deg,#fff,#fafbfc)}.org-empty-icon{width:46px;height:46px;border-radius:14px;margin:0 auto 10px;display:grid;place-items:center;background:#eff3f7;color:#526073;font-size:19px}.org-empty-state h3{margin:0;color:#334258;font-size:15px}.org-empty-state p{margin:6px auto 15px;max-width:500px;color:#8c97a6;font-size:11px}.org-note{margin-top:16px;padding:13px 15px;border:1px solid #e7ebf0;border-radius:13px;background:#f8fafc;color:#7a8594;font-size:10px;line-height:1.6}.org-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.org-card{border:1px solid #e8ebef;border-radius:18px;padding:18px;background:linear-gradient(145deg,#fff,#fafbfc)}.org-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding-bottom:13px;border-bottom:1px solid #edf0f4}.org-head h3{margin:4px 0 0;font-size:16px}.org-head>b{font-size:24px;color:#172942}.org-positions{display:grid;gap:7px;margin-top:12px}.org-positions div{display:flex;justify-content:space-between;padding:9px 10px;background:#f7f8fa;border-radius:10px;font-size:11px}.org-positions strong{font-size:11px}.blue{background:#eaf1ff;color:#315f9c}@media(max-width:900px){.org-tree{grid-template-columns:1fr}.org-metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.org-toolbar{display:block}.org-scope{margin-top:12px}.org-metrics{grid-template-columns:1fr 1fr;gap:8px}.org-metrics>div{padding:13px}.org-metrics b{font-size:21px}.org-unit-head{padding:16px}.org-position-list{padding:9px}.org-person{align-items:flex-start}.org-person .btn{padding:7px 9px;font-size:9px}.org-note{font-size:9px}.org-empty-state{padding:38px 17px}}

/* V6 — Employee 360 */
.employee360{display:grid;gap:18px}.employee-hero{display:flex;align-items:center;gap:18px;padding:22px;border:1px solid var(--line,#e5e7eb);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(247,249,252,.92))}.employee-avatar{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;font-size:22px;font-weight:800;background:#101828;color:#fff;flex:none}.employee-identity{min-width:0;flex:1}.employee-identity h2{margin:3px 0 4px;font-size:26px}.employee-identity p{margin:0;color:#667085}.employee-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.employee-actions{display:flex;gap:8px}.profile-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.profile-kpis>div{padding:15px 16px;border:1px solid var(--line,#e5e7eb);border-radius:16px;background:#fff}.profile-kpis small,.detail-grid small{display:block;color:#667085;font-size:11px;text-transform:uppercase;letter-spacing:.05em}.profile-kpis strong{display:block;margin-top:6px;font-size:20px}.employee360-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.detail-grid b{display:block;margin-top:5px;font-size:14px;line-height:1.4}.profile-panel{padding:18px;border:1px solid var(--line,#e5e7eb);border-radius:18px;background:#fff}.profile-panel .section-head{margin-bottom:15px}.profile-panel h3{margin:0}.profile-panel .timeline{margin-top:4px}.profile-panel .timeline-item{padding-bottom:14px}.profile-panel .timeline-date{min-width:100px}@media(max-width:900px){.employee-hero{align-items:flex-start;flex-wrap:wrap}.employee-actions{width:100%}.profile-kpis{grid-template-columns:repeat(2,1fr)}.employee360-grid{grid-template-columns:1fr}}@media(max-width:600px){.employee-avatar{width:58px;height:58px;border-radius:17px}.employee-identity h2{font-size:21px}.profile-kpis{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr}.employee-actions .btn{flex:1}}
.leave-balance{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.leave-balance>div{padding:16px 18px;border:1px solid rgba(20,35,55,.10);border-radius:16px;background:rgba(255,255,255,.62)}.leave-balance span{display:block;font-size:12px;color:#718096;margin-bottom:5px}.leave-balance b{font-size:20px;color:#172942}@media(max-width:700px){.leave-balance{grid-template-columns:1fr}}
.self-list{display:grid;gap:10px}.self-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border:1px solid var(--line,#e7ebf2);border-radius:14px;background:rgba(255,255,255,.55)}.self-row>div{min-width:0}.self-row b{display:block}.self-row small{display:block;color:var(--muted,#667085);margin-top:4px}.approval-note{display:block;margin-top:4px;color:#55706a}.leave-balance{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.leave-balance>div{padding:16px;border:1px solid var(--line,#e7ebf2);border-radius:16px;background:linear-gradient(180deg,#fff,#f8fafc)}.leave-balance span,.leave-summary span{display:block;color:var(--muted,#667085);font-size:12px}.leave-balance b{display:block;font-size:24px;margin-top:5px}.leave-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.leave-summary>div{padding:12px 14px;border-radius:14px;background:#f7f9fc}.leave-summary b{font-size:20px;display:block}.pill{white-space:nowrap}@media(max-width:720px){.leave-balance,.leave-summary{grid-template-columns:1fr 1fr}.self-row{align-items:flex-start;flex-direction:column}} 
/* Premium dashboard V12 */
.dashboard-hero{position:relative;min-height:260px;border-radius:30px;overflow:hidden;background:linear-gradient(115deg,#0c1827 0%,#162a43 52%,#203b5d 100%);color:#fff;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 24px 60px rgba(21,41,66,.18);isolation:isolate}.dashboard-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 48%,rgba(191,167,117,.16),transparent 24%),linear-gradient(90deg,rgba(0,0,0,.18),transparent 60%);z-index:-2}.dashboard-hero:after{content:"";position:absolute;inset:auto -8% -42%;height:150px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.22));transform:rotate(-2deg);z-index:-1}.dashboard-hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.dashboard-hero-bg span,.dashboard-hero-bg i,.dashboard-hero-bg b{position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%;display:block}.dashboard-hero-bg span{width:430px;height:430px;right:-150px;top:-170px}.dashboard-hero-bg i{width:610px;height:610px;right:-240px;top:-260px}.dashboard-hero-bg b{width:790px;height:790px;right:-340px;top:-355px}.dashboard-hero-main{position:relative;z-index:2;max-width:700px}.dashboard-kicker{font-size:10px;letter-spacing:.17em;font-weight:900;color:#c8b581;display:flex;align-items:center;gap:8px}.dashboard-kicker em{font-style:normal;color:rgba(255,255,255,.25)}.live-dot{width:7px;height:7px;border-radius:50%;background:#c8b581;box-shadow:0 0 0 5px rgba(200,181,129,.09);animation:dashboardPulse 2.2s ease-in-out infinite}.dashboard-hero h1{font-size:37px;line-height:1.08;margin:13px 0 10px;letter-spacing:-.05em;font-weight:500}.dashboard-hero h1 strong{font-weight:800}.dashboard-hero p{margin:0;color:#aebed0;font-size:13px}.hero-meta{display:flex;align-items:center;gap:12px;margin-top:25px;color:#8fa2b7;font-size:10px}.hero-divider{width:24px;height:1px;background:rgba(255,255,255,.15)}.hero-orbit{position:relative;width:220px;height:220px;margin-right:45px;flex:0 0 220px;display:grid;place-items:center}.orbit-ring{position:absolute;border:1px solid rgba(205,184,132,.22);border-radius:50%;transform:rotate(-15deg)}.orbit-ring.r1{width:150px;height:150px;border-left-color:rgba(205,184,132,.65);border-bottom-color:rgba(205,184,132,.08);animation:orbitSpin 14s linear infinite}.orbit-ring.r2{width:205px;height:205px;border-right-color:rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.03);animation:orbitSpinReverse 20s linear infinite}.orbit-core{width:76px;height:76px;border-radius:24px;background:linear-gradient(145deg,rgba(205,184,132,.2),rgba(255,255,255,.04));border:1px solid rgba(205,184,132,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 15px 40px rgba(0,0,0,.2);display:grid;place-items:center;align-content:center;position:relative;z-index:2}.orbit-core span{font-size:18px;font-weight:900;letter-spacing:.1em}.orbit-core small{font-size:8px;letter-spacing:.2em;color:#b9c4d2;margin-top:2px}.dashboard-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;margin:16px 0}.premium-stat{min-height:142px;background:rgba(255,255,255,.96);border:1px solid #e5e9ef;border-radius:20px;padding:17px;box-shadow:0 9px 28px rgba(29,48,75,.045);position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.premium-stat:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(29,48,75,.08);border-color:#d9dee7}.premium-stat:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:#172942;opacity:.12}.premium-stat.accent:after{background:#b89655;opacity:1}.premium-stat.alert:after{background:#9f5c48;opacity:.9}.stat-top,.stat-bottom{display:flex;justify-content:space-between;align-items:center}.stat-top span:first-child{font-size:10px;color:#718094;font-weight:800}.stat-index{font-size:8px;letter-spacing:.12em;color:#b4bdc8}.stat-value{font-size:31px;line-height:1;margin:19px 0 15px;letter-spacing:-.055em;font-weight:800;color:#172033}.stat-bottom{font-size:9px;color:#9aa4b2}.stat-arrow{font-size:13px;color:#aeb6c1}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,.7fr);gap:16px}.premium-card{background:#fff;border:1px solid #e4e9ef;border-radius:22px;box-shadow:0 9px 30px rgba(29,48,75,.035);overflow:hidden}.premium-card-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;padding:23px 24px 18px;border-bottom:1px solid #edf0f4}.section-kicker{display:block;font-size:9px;letter-spacing:.17em;font-weight:900;color:#9b8352;margin-bottom:5px}.premium-card-head h3{margin:0;color:#172033;font-size:16px;letter-spacing:-.02em}.premium-card-head p{margin:5px 0 0;color:#8995a5;font-size:10px}.premium-link{border:0;background:transparent;color:#596a80;font-size:10px;font-weight:800;padding:8px 0}.premium-link span{margin-left:5px;color:#b08e4f;font-size:14px}.distribution-list{padding:7px 24px 16px}.distribution-row{display:grid;grid-template-columns:28px 170px minmax(100px,1fr) 35px;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #f0f2f5}.distribution-row:last-child{border-bottom:0}.distribution-rank{font-size:9px;color:#b1bac6;font-weight:900}.distribution-name{min-width:0}.distribution-name strong{display:block;font-size:11px;color:#445268;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.distribution-name small{display:block;margin-top:3px;color:#a1aab7;font-size:9px}.distribution-track{height:8px;background:#f0f2f5;border-radius:99px;overflow:hidden}.distribution-track i{display:block;height:100%;background:linear-gradient(90deg,#172942,#b08e4f);border-radius:99px;min-width:5px;transition:width .6s cubic-bezier(.2,.8,.2,1)}.distribution-value{text-align:right;font-size:11px;font-weight:900;color:#172033}.premium-empty{text-align:center;padding:42px 10px;color:#9aa4b2;font-size:11px}.premium-empty span{display:block;font-size:26px;color:#c0c7d0;margin-bottom:7px}.focus-card{min-height:100%}.focus-list{padding:12px}.focus-item{width:100%;border:1px solid #edf0f4;background:#fafbfc;border-radius:15px;padding:14px 13px;display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;text-align:left;margin-bottom:8px;color:#172033;transition:.2s ease}.focus-item:hover{transform:translateX(2px);border-color:#d9dfe7;background:#fff}.focus-item.primary-focus{background:#172942;border-color:#172942;color:#fff}.focus-badge{font-size:7px;font-weight:900;letter-spacing:.1em;border-radius:999px;padding:6px 7px;background:#edf0f3;color:#6d7a8c}.primary-focus .focus-badge{background:rgba(255,255,255,.1);color:#d5c08f}.focus-item strong{display:block;font-size:11px}.focus-item small{display:block;margin-top:3px;font-size:9px;color:#909baa}.primary-focus small{color:#aebbc9}.focus-go{font-size:15px;color:#b08e4f}.primary-focus .focus-go{color:#d7bf88}.focus-empty{padding:28px 12px;text-align:center;color:#8d99a8}.focus-empty span{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;margin:0 auto 9px;background:#eef7f1;color:#27804b;font-weight:900}.focus-empty strong{display:block;font-size:11px;color:#526073}.focus-empty small{display:block;font-size:9px;margin-top:4px}.quick-strip{display:grid;grid-template-columns:220px 1fr;gap:20px;margin-top:16px;padding:22px 24px;border:1px solid #e3e8ee;border-radius:22px;background:linear-gradient(120deg,#fdfdfd,#f8fafc);box-shadow:0 9px 30px rgba(29,48,75,.025)}.quick-intro h3{margin:0;font-size:15px;color:#172033}.quick-intro p{margin:5px 0 0;color:#8d98a7;font-size:10px;line-height:1.5}.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.quick-premium{border:1px solid #e4e8ee;background:#fff;border-radius:15px;padding:13px;display:grid;grid-template-columns:32px 1fr auto;gap:9px;align-items:center;text-align:left;transition:.2s ease}.quick-premium:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(27,43,65,.07);border-color:#d7dde6}.quick-icon{width:32px;height:32px;border-radius:10px;background:#f1f3f6;display:grid;place-items:center;color:#172942;font-weight:900}.quick-premium div{min-width:0}.quick-premium strong{display:block;font-size:10px;color:#334258}.quick-premium small{display:block;font-size:8px;color:#9aa4b1;margin-top:3px;white-space:nowrap}.quick-premium>b{font-size:13px;color:#b08e4f}@keyframes dashboardPulse{0%,100%{opacity:.55;box-shadow:0 0 0 4px rgba(200,181,129,.07)}50%{opacity:1;box-shadow:0 0 0 7px rgba(200,181,129,.12)}}@keyframes orbitSpin{to{transform:rotate(345deg)}}@keyframes orbitSpinReverse{to{transform:rotate(-360deg)}}
@media(max-width:1180px){.dashboard-stats{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr}.quick-strip{grid-template-columns:1fr}.quick-actions{grid-template-columns:repeat(4,1fr)}}
@media(max-width:850px){.dashboard-hero{padding:28px;min-height:235px}.hero-orbit{width:160px;height:160px;margin-right:5px;flex-basis:160px}.orbit-ring.r1{width:112px;height:112px}.orbit-ring.r2{width:150px;height:150px}.orbit-core{width:62px;height:62px;border-radius:20px}.dashboard-hero h1{font-size:30px}.dashboard-stats{grid-template-columns:repeat(2,1fr)}.quick-actions{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dashboard-hero{min-height:270px;padding:24px}.hero-orbit{position:absolute;right:-42px;bottom:-55px;opacity:.5}.dashboard-hero h1{font-size:26px;max-width:90%}.hero-meta{margin-top:20px;flex-wrap:wrap}.dashboard-stats{grid-template-columns:1fr 1fr;gap:9px}.premium-stat{min-height:126px;padding:14px}.stat-value{font-size:27px;margin:15px 0 12px}.dashboard-grid{gap:12px}.premium-card-head{padding:18px 17px 14px;align-items:flex-start}.distribution-list{padding:5px 17px 12px}.distribution-row{grid-template-columns:22px 1fr 30px;gap:9px}.distribution-track{grid-column:2/4;grid-row:2}.distribution-name small{font-size:8px}.distribution-value{grid-column:3;grid-row:1}.quick-strip{padding:18px 16px}.quick-actions{grid-template-columns:1fr 1fr}.quick-premium{grid-template-columns:30px 1fr}.quick-premium>b{display:none}}
@media(prefers-reduced-motion:reduce){.live-dot,.orbit-ring{animation:none}.premium-stat,.focus-item,.quick-premium{transition:none}}

.leave-policy-page .toolbar{align-items:flex-start}.policy-hero{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.policy-hero>div{padding:18px;border:1px solid var(--line,#e7ebf2);border-radius:16px;background:linear-gradient(180deg,#fff,#f8fafc)}.policy-hero span{display:block;color:var(--muted,#667085);font-size:12px}.policy-hero b{display:block;font-size:24px;margin-top:7px;color:#172942}.policy-form{border:1px solid var(--line,#e7ebf2);border-radius:18px;padding:20px;background:#fff}.policy-form>div:first-child{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:680px}.policy-form label{display:block;font-size:12px;color:#5d6878}.policy-form input[type=number]{display:block;width:100%;margin-top:7px;padding:12px 13px;border:1px solid #dfe5ec;border-radius:12px;font:inherit}.policy-check{display:flex!important;gap:12px;align-items:flex-start;margin-top:18px;padding:14px;border:1px solid #e6ebf1;border-radius:14px;background:#f8fafc}.policy-check input{margin-top:3px}.policy-check strong,.policy-check small{display:block}.policy-check small{margin-top:4px;color:#7b8796}.policy-actions{margin-top:18px}.policy-note{margin-top:14px;padding:13px 15px;border-radius:13px;background:#f7f8fa;color:#667085;font-size:12px;line-height:1.6}@media(max-width:800px){.policy-hero{grid-template-columns:1fr 1fr}}@media(max-width:560px){.policy-hero,.policy-form>div:first-child{grid-template-columns:1fr}.policy-form{padding:15px}}

/* V18 — leave print actions */
.actions-cell{white-space:nowrap;vertical-align:middle}
.actions-cell .btn{margin:2px 0}
@media(max-width:900px){.actions-cell{white-space:normal;min-width:180px}.actions-cell .btn{margin:2px 2px 2px 0}}

/* V19 — employee photo profile */
.employee-photo-wrap{position:relative;flex:0 0 72px;width:72px;height:72px}
.employee-avatar.photo-trigger{position:relative;width:72px;height:72px;padding:0;border:0;border-radius:22px;overflow:hidden;cursor:pointer;display:grid;place-items:center;background:#142238;color:#fff;box-shadow:0 12px 28px rgba(20,34,56,.16)}
.employee-avatar.photo-trigger img{width:100%;height:100%;display:block;object-fit:cover}
.employee-avatar.photo-trigger span{font-size:25px;font-weight:800;letter-spacing:-.04em}
.employee-avatar.photo-trigger .photo-camera{position:absolute;right:5px;bottom:5px;width:23px;height:23px;border-radius:8px;background:rgba(255,255,255,.94);color:#172942;font-size:14px;display:grid;place-items:center;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.16)}
.employee-avatar.photo-trigger:hover{transform:translateY(-1px);box-shadow:0 15px 32px rgba(20,34,56,.22)}
.employee-avatar.photo-trigger:disabled{opacity:.6;cursor:wait}
@media(max-width:650px){.employee-photo-wrap,.employee-avatar.photo-trigger{width:62px;height:62px}.employee-avatar.photo-trigger span{font-size:22px}.employee-avatar.photo-trigger .photo-camera{width:21px;height:21px;border-radius:7px}}

/* V19 — leave approval chain */
.approval-flow-note{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-top:15px;padding:14px 16px;border:1px solid #e4e9ef;border-radius:15px;background:linear-gradient(135deg,#fafbfc,#f5f7fa)}
.approval-flow-note>div:not(.flow-arrow){min-width:0}
.approval-flow-note span{display:block;font-size:8px;letter-spacing:.14em;font-weight:900;color:#a1844d}
.approval-flow-note strong{display:block;margin-top:4px;font-size:12px;color:#172033}
.approval-flow-note small{display:block;margin-top:3px;color:#7b8796;font-size:10px}
.approval-flow-note .flow-arrow{font-size:20px;color:#b08e4f}
@media(max-width:620px){.approval-flow-note{grid-template-columns:1fr}.approval-flow-note .flow-arrow{transform:rotate(90deg);justify-self:center}}

/* V20 — approval role/name hierarchy */
.approval-flow-note strong{display:block}.approval-flow-note .approval-person{display:block;margin-top:3px;font-size:12px;color:#172942}.approval-flow-note small{display:block;margin-top:3px;color:#8994a4}
.field-help{display:block;margin-top:5px;color:#718096;font-size:11px;line-height:1.4}
.birthday-focus{margin-top:8px;border:1px solid #ece6d8;background:linear-gradient(145deg,#fffdf7,#faf8f2);border-radius:16px;padding:13px}.birthday-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.birthday-head>div{min-width:0}.birthday-head strong{display:block;margin-top:7px;font-size:11px;color:#172033}.birthday-head small{display:block;margin-top:3px;font-size:9px;color:#969eaa}.birthday-badge{display:inline-block!important;background:#f2ead7!important;color:#8b6c2f!important}.birthday-count{display:grid;place-items:center;min-width:28px;height:28px;border-radius:10px;background:#172942;color:#fff;font-size:10px;font-weight:900}.birthday-list{margin-top:9px}.birthday-row{display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:center;padding:8px 0;border-top:1px solid #eee9de}.birthday-avatar{width:30px;height:30px;border-radius:10px;overflow:hidden;background:#f1eadc;display:grid;place-items:center;font-size:15px}.birthday-avatar img{width:100%;height:100%;object-fit:cover}.birthday-person{min-width:0}.birthday-person strong{display:block;font-size:10px;color:#3e4b5f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.birthday-person small{display:block;margin-top:2px;font-size:8px;color:#9aa3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.birthday-wa{display:grid;place-items:center;min-width:31px;height:25px;border-radius:8px;background:#eaf7ef;color:#287749;text-decoration:none;font-size:8px;font-weight:900}.birthday-no-wa{font-size:10px;color:#b6bec7}@media(max-width:600px){.birthday-focus{padding:12px}.birthday-row{grid-template-columns:30px 1fr auto}}

/* V25 — responsive polish & safe one-time WJP import */
.import-wjp-btn{min-width:150px;transition:all .2s ease}.import-wjp-btn.is-loading{opacity:.72;cursor:wait}.import-wjp-btn.is-locked{background:#f5f7f9;color:#7b8795;border-color:#e1e6ec;cursor:not-allowed}.import-wjp-btn.is-locked:before{content:'✓ ';color:#27804b;font-weight:900}
@media(max-width:850px){
  .topbar{min-height:64px;gap:10px}.user-area{min-width:0;gap:6px}.user-area>span:first-child{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-area .role{display:none}.user-area .btn{padding:8px 9px;font-size:10px}.content{max-width:100%;overflow-x:hidden}.card{padding:17px;border-radius:18px}.toolbar .actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.toolbar .search{grid-column:1/-1;width:100%}.toolbar .actions select,.toolbar .actions .btn{min-height:40px}.table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}.table-wrap table{min-width:720px}.modal{max-height:94vh;border-radius:20px}.modal.wide{width:100%}
}
@media(max-width:600px){
  .topbar{padding:0 12px}.brand-title strong{font-size:13px}.brand-title small{font-size:8px}.mobile-menu{flex:none}.user-area>span:first-child{display:none}.user-area .btn{font-size:9px;padding:8px}.content{padding:12px}.card{padding:14px}.toolbar{gap:12px}.toolbar h2{font-size:17px}.toolbar .actions{grid-template-columns:1fr 1fr}.toolbar .actions .import-wjp-btn,.toolbar .actions #add{width:100%}.pagination{justify-content:center}.modal-backdrop{padding:8px}.modal{max-height:96vh;border-radius:18px}.modal-head{padding:18px 16px 12px}.modal h2{font-size:18px}.tabs{padding:10px 16px 0}.form-grid{padding:16px}.modal-foot{padding:12px 16px}.modal-foot .btn{flex:1;min-width:120px}.import-wjp-btn{min-width:0}
}
@media(max-width:380px){.toolbar .actions{grid-template-columns:1fr}.toolbar .actions .search{grid-column:auto}.dashboard-stats{grid-template-columns:1fr}.quick-actions{grid-template-columns:1fr}.login-panel{width:calc(100vw - 24px)}.login-card{padding:22px}.login-card h1{font-size:23px}}

/* V26 mobile navigation: tap outside always closes the drawer */
.sidebar-overlay{display:none;border:0;background:rgba(7,13,22,.38);padding:0;margin:0;position:fixed;inset:0;z-index:35;cursor:pointer;backdrop-filter:blur(2px)}
@media(max-width:850px){
  .sidebar{z-index:40}
  .sidebar-overlay.show{display:block}
  body.menu-open{overflow:hidden}
  .toolbar .actions .import-wjp-btn{order:3;grid-column:1/-1;min-height:42px}
}
@media(max-width:600px){
  .sidebar{width:min(86vw,300px);left:calc(-1 * min(86vw,300px) - 12px)}
  .sidebar.open{left:0}
  .sidebar-overlay.show{display:block}
  .toolbar .actions .import-wjp-btn{font-size:11px;min-height:44px}
}

/* V30 — employee extension CRUD */
.extension-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.extension-editor-head h4{margin:0}.extension-editor-head .muted{margin-top:4px}.record-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.record-actions .btn{white-space:nowrap}.extension-form-grid{padding:6px 0 12px!important}.extension-form-grid + .btn{margin-top:2px}.mini-table td:last-child,.mini-table th:last-child{white-space:nowrap}.mini-table .record-actions{margin-top:0}.subsection{overflow:hidden}
@media(max-width:900px){.inline-form{grid-template-columns:repeat(2,minmax(0,1fr))}.extension-editor-head{align-items:center}.record-actions{margin-top:9px}}
@media(max-width:600px){.inline-form{grid-template-columns:1fr}.extension-editor-head{flex-direction:column;align-items:flex-start}.record-actions .btn{flex:1}.record-actions{width:100%}.mini-table{min-width:700px}}

/* V32 — user access & annual leave monitoring */
.leave-monitor-card{margin-top:16px}.leave-monitor-count{min-width:104px;text-align:right;padding:12px 16px;border:1px solid var(--line,#e7ebf2);border-radius:16px;background:linear-gradient(180deg,#fff,#f7f9fc)}.leave-monitor-count strong{display:block;font-size:26px;line-height:1}.leave-monitor-count span{display:block;margin-top:5px;font-size:10px;color:var(--muted,#667085);text-transform:uppercase;letter-spacing:.7px}.pill.amber{background:#fff7df;color:#9b6b00}
@media(max-width:720px){.leave-monitor-count{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between}.leave-monitor-count strong{font-size:23px}}
/* V35 Attendance */
.attendance-page{padding-bottom:24px}.attendance-toolbar{align-items:flex-start}.attendance-actions{display:flex;gap:8px;flex-wrap:wrap}.attendance-filters{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 10px;padding:14px;border:1px solid #e5e9ef;border-radius:16px;background:#f9fafc}.attendance-filters label{display:grid;gap:6px;font-size:10px;color:#697487;min-width:150px}.attendance-filters input,.attendance-filters select{min-height:40px;border:1px solid #dce2ea;border-radius:11px;background:#fff;padding:8px 10px;font:inherit;color:#25324a}.attendance-period-label{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 2px 14px}.attendance-period-label strong{font-size:13px;color:#172033}.attendance-period-label span{font-size:10px;color:#9099a7}.attendance-summary{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}.attendance-summary>div{border:1px solid #e6eaf0;border-radius:15px;padding:14px;background:linear-gradient(180deg,#fff,#fafbfd)}.attendance-summary span,.attendance-summary small{display:block;font-size:9px;color:#8a95a4;text-transform:uppercase;letter-spacing:.5px}.attendance-summary b{display:block;font-size:24px;line-height:1.05;margin:8px 0 5px;color:#172942}.attendance-note{margin:0 0 15px;padding:11px 13px;border:1px solid #ebe3cf;border-radius:12px;background:#fffcf4;color:#7d6a3c;font-size:10px}.attendance-table th{white-space:nowrap}.attendance-table td{vertical-align:top}.attendance-person{display:block;border:0;background:none;padding:0;text-align:left;cursor:pointer;color:inherit;min-width:210px}.attendance-person b{display:block;font-size:11px;color:#233148}.attendance-person small{display:block;margin-top:3px;font-size:8px;color:#929cab}.attendance-modal{width:min(98vw,1500px)!important}.attendance-entry-scroll{overflow:auto;max-height:68vh;padding:0 1px}.attendance-entry-table{width:100%;min-width:1250px;border-collapse:separate;border-spacing:0}.attendance-entry-table th{position:sticky;top:0;z-index:2;background:#f7f9fb;border-bottom:1px solid #dfe5ec;font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#6b7686;padding:10px 8px;text-align:left}.attendance-entry-table td{border-bottom:1px solid #eef1f5;padding:8px}.attendance-entry-table td:first-child{position:sticky;left:0;z-index:1;background:#fff;min-width:210px}.attendance-entry-table input{width:74px;min-height:34px;border:1px solid #dbe1e8;border-radius:9px;padding:6px 7px;font:inherit;font-size:11px}.attendance-entry-table td:first-child b,.attendance-entry-table td:first-child small{display:block}.attendance-entry-table td:first-child small{font-size:8px;color:#98a1ad;margin-top:2px}.attendance-import-form{padding:16px}.attendance-import-form>label{display:grid;gap:7px;font-size:11px;color:#677286}.attendance-import-form input[type=file]{border:1px dashed #ccd5e1;padding:15px;border-radius:13px;background:#fafbfc}.attendance-import-period{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:13px;background:#f7f9fc;border:1px solid #e5e9ef;margin-bottom:14px}.attendance-import-period strong{font-size:11px;color:#3d4a60}.attendance-import-period span{font-size:11px;font-weight:700;color:#172942}.attendance-import-help{margin-top:14px;padding:13px;border:1px solid #e5e9ef;border-radius:13px;background:#fbfcfd}.attendance-import-help strong,.attendance-import-help small{display:block}.attendance-import-help strong{font-size:10px;color:#526176}.attendance-import-help small{font-size:9px;line-height:1.5;color:#8b94a2;margin-top:5px}.attendance-import-help .btn{margin-top:10px}.attendance-person-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;padding:0 16px 16px}.attendance-person-summary>div{padding:12px;border:1px solid #e5e9ef;border-radius:13px;background:#fafbfd}.attendance-person-summary span{font-size:9px;color:#8993a1;display:block}.attendance-person-summary b{display:block;font-size:20px;margin-top:5px;color:#172942}.attendance-history-table th,.attendance-history-table td{white-space:nowrap}@media(max-width:1100px){.attendance-summary{grid-template-columns:repeat(3,1fr)}.attendance-person-summary{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.attendance-actions{width:100%}.attendance-actions .btn{flex:1;min-width:0}.attendance-filters{display:grid;grid-template-columns:1fr 1fr}.attendance-filters label{min-width:0}.attendance-period-label{display:grid;gap:4px}.attendance-summary{grid-template-columns:1fr 1fr}.attendance-summary b{font-size:21px}.attendance-person-summary{grid-template-columns:1fr 1fr}.attendance-import-form{padding:13px}.attendance-modal .modal-head{padding-bottom:12px}}@media(max-width:430px){.attendance-filters{grid-template-columns:1fr}.attendance-actions{display:grid;grid-template-columns:1fr}.attendance-person-summary{grid-template-columns:1fr 1fr}}
.attendance-schema-missing{min-height:360px;display:grid;place-items:center;text-align:center}.attendance-schema-missing>div{max-width:520px}.attendance-schema-missing h2{margin:8px 0}.attendance-schema-missing p{line-height:1.65;margin-bottom:18px}


/* V36 Digital Attendance */
.digital-modal{width:min(1000px,96vw)!important}.request-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px 0}.request-actions .btn{min-width:150px}.digital-attendance-layout{display:grid;grid-template-columns:1.4fr .6fr;gap:18px;padding:18px}.digital-camera-card{border:1px solid #e4e9f0;border-radius:18px;padding:14px;background:#fbfcfe}.digital-camera-frame{position:relative;aspect-ratio:4/3;background:#0c1220;border-radius:16px;overflow:hidden;display:grid;place-items:center}.digital-camera-frame video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.digital-face-guide{position:absolute;width:42%;aspect-ratio:.78;border:2px dashed rgba(255,255,255,.78);border-radius:46%;box-shadow:0 0 0 9999px rgba(0,0,0,.18)}.digital-face-guide::after{content:"Wajah utuh • 1 orang • tatap kamera";position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);width:max-content;max-width:88vw;padding:6px 9px;border-radius:999px;background:rgba(8,15,28,.76);color:#fff;font-size:8px;letter-spacing:.2px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.12)}.digital-camera-badge{position:absolute;left:12px;bottom:12px;color:#fff;background:rgba(8,15,28,.74);padding:6px 9px;border-radius:999px;font-size:9px}.digital-step-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.digital-step{border:1px solid #e5eaf1;border-radius:12px;padding:10px;background:#fff;opacity:.6}.digital-step.active{opacity:1;border-color:#172942;box-shadow:0 0 0 2px rgba(23,41,66,.06)}.digital-step.done{opacity:1;background:#f4faf6;border-color:#b9dcc4}.digital-step b,.digital-step span{display:block}.digital-step b{font-size:10px}.digital-step span{font-size:8px;color:#7e8998;margin-top:4px;line-height:1.4}.digital-status-box{margin-top:12px;padding:11px 13px;border:1px solid #e5eaf1;border-radius:12px;background:#fff;font-size:10px;color:#59667a}.digital-attendance-side{display:grid;align-content:start;gap:10px}.digital-info{border:1px solid #e4e9f0;border-radius:14px;padding:12px;background:linear-gradient(180deg,#fff,#f8fafc)}.digital-info span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.7px;color:#8b95a3}.digital-info b{display:block;margin-top:5px;font-size:12px;color:#182942}.digital-today-card{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:14px 0;padding:15px 16px;border:1px solid #dce4ee;border-radius:18px;background:linear-gradient(135deg,#f9fbfd,#f4f7fb)}.digital-today-card span{display:block;font-size:9px;letter-spacing:1px;color:#768296}.digital-today-card b{display:block;margin-top:6px;font-size:19px;color:#172942}.digital-today-card small{display:block;margin-top:4px;color:#8792a2;font-size:9px}.digital-today-actions{display:flex;align-items:center;gap:8px}.digital-config-warning{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0;padding:12px 14px;border:1px solid #eadfbf;border-radius:13px;background:#fffcf3;color:#786a3c;font-size:10px}.digital-config-warning strong{color:#5f4f27}.digital-config-warning span{flex:1}.face-enroll-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;padding:18px}.face-sample-list{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.face-enroll-grid .full{width:100%;margin-top:8px}.attendance-note.danger{border-color:#efcaca;background:#fff6f6;color:#863b3b}.attendance-note.danger strong{color:#7a2424}@media(max-width:820px){.digital-attendance-layout,.face-enroll-grid{grid-template-columns:1fr}.digital-step-list{grid-template-columns:1fr}.digital-today-card{align-items:flex-start;flex-direction:column}.digital-today-actions{width:100%}.digital-today-actions .btn{flex:1}}@media(max-width:600px){.digital-modal{width:98vw!important}.digital-attendance-layout,.face-enroll-grid{padding:12px}.digital-camera-frame{aspect-ratio:3/4}.digital-face-guide{width:54%}.digital-info{padding:10px}.digital-today-card{padding:13px}.digital-today-card b{font-size:17px}}

.status-readonly{display:flex;align-items:center;min-height:42px;padding:10px 12px;border:1px solid #d8e0ea;border-radius:10px;background:#f7f9fb;font-weight:700}.status-readonly.active{color:#17663a}.status-readonly.inactive{color:#6c4b4b}

/* WJP official identity */
.brand-logo{overflow:hidden;padding:4px!important;background:#fff!important;border-color:rgba(255,255,255,.22)!important;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.brand-logo img{width:100%;height:100%;display:block;object-fit:contain}
.side-brand .brand-logo{width:38px;height:38px;padding:3px!important;border-radius:10px}
.login-brand .brand-logo{width:44px;height:44px;padding:3px!important;border-radius:12px}
.leave-filters{display:grid;grid-template-columns:150px minmax(150px,1fr) minmax(150px,1fr) auto;gap:12px;align-items:end;margin:18px 0 4px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8fafc}
.leave-filters label{display:grid;gap:6px;font-size:10px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.06em}
.leave-filters input{min-height:38px;border:1px solid #dbe2ea;border-radius:9px;padding:0 10px;background:#fff;color:#172033}
.leave-filter-actions{display:flex;gap:8px}
.leave-filter-note{font-size:11px;color:#7b8798;margin:7px 2px 14px}
.leave-page .pagination{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:16px}
.leave-page .pagination span{font-size:11px;color:#68758a}
.print-brand{display:flex;align-items:center;gap:12px}
.print-brand img{width:48px;height:48px;object-fit:contain}
@media(max-width:850px){.leave-filters{grid-template-columns:1fr 1fr}.leave-filter-actions{grid-column:1/-1}}
@media(max-width:520px){.leave-filters{grid-template-columns:1fr}.leave-filter-actions{grid-column:auto}}

.logo img{width:100%;height:100%;object-fit:contain;display:block}

/* Attendance request period filter — bounded, period-first UX */
.request-filter{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid #edf0f4;background:#fafbfd}
.request-filter>div>label,.request-custom-dates>label{display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:800;color:#59667a}
.request-filter select,.request-filter input{min-height:36px;font-size:11px}
.request-custom-dates{display:flex;gap:8px;align-items:flex-end}
.request-custom-dates[hidden]{display:none!important}
.request-summary{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 18px 10px;color:#7b8797;font-size:10px}
.request-summary strong{color:#172942;font-size:11px}
.request-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px 16px;color:#7b8797;font-size:10px;border-top:1px solid #edf0f4}
.request-pager>div{display:flex;gap:6px}
.request-pager .btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:700px){.request-filter{align-items:stretch}.request-filter>div,.request-filter>button{width:100%}.request-custom-dates{width:100%;}.request-custom-dates>label{flex:1}.request-summary,.request-pager{align-items:flex-start;flex-direction:column}.request-pager{gap:8px}.request-pager>div{width:100%}.request-pager .btn{flex:1}}


/* HRIS Bank WJP — premium login refresh */
body.login-page{background:#07152a}
.login-scene{min-height:100svh;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.94fr);align-items:center;gap:clamp(28px,4vw,72px);padding:112px clamp(24px,5.8vw,96px) 88px;background:radial-gradient(ellipse at 18% 55%,rgba(68,105,151,.30),transparent 38%),radial-gradient(ellipse at 90% 85%,rgba(190,145,65,.16),transparent 28%),linear-gradient(115deg,#091a34 0%,#0b1d39 50%,#07152a 100%)}
.login-scene:before{background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:120px 120px;opacity:.4}
.login-scene:after{height:20%;background:linear-gradient(180deg,transparent,rgba(1,8,20,.5))}
.login-brand{left:clamp(24px,5.8vw,96px);top:30px;gap:14px}
.login-brand .brand-mark{width:48px;height:48px;border-radius:14px}
.login-brand strong{font-size:16px;letter-spacing:0}
.login-brand small{font-size:12px;letter-spacing:0;text-transform:none;color:#a7bad7;margin-top:3px}
.login-motto{position:absolute;right:clamp(24px,5.8vw,96px);top:38px;z-index:3;text-align:right;font-size:13px;line-height:1.45;font-style:italic;color:#d5dfef}
.login-motto i{display:inline-block;width:35px;height:2px;background:#c6a35f;vertical-align:middle;margin-left:8px}
.login-welcome{position:relative;z-index:4;grid-column:1;grid-row:1;max-width:410px;margin-left:clamp(0px,18%,180px);padding-top:20px;align-self:center}
.welcome-rule{display:block;width:60px;height:5px;border-radius:8px;background:linear-gradient(90deg,#f0c66d,#bd8c3d);margin-bottom:20px}
.login-welcome .eyebrow{font-size:12px;letter-spacing:.13em;color:#e4b65e}
.login-welcome h1{font-size:clamp(36px,3.1vw,54px);line-height:1.08;letter-spacing:-.045em;margin:12px 0 18px;color:#f6f8fc}
.login-welcome p{font-size:15px;line-height:1.65;color:#d0d9e8;max-width:360px;margin:0}
.welcome-note{margin-top:25px;color:#aabbd4;font-size:11px;display:flex;align-items:center;gap:9px}
.welcome-dot{width:7px;height:7px;border-radius:50%;background:#d4ad5f;box-shadow:0 0 0 5px rgba(212,173,95,.12)}
.login-panel{position:relative;right:auto;top:auto;transform:none;width:100%;max-width:570px;justify-self:center;grid-column:2;grid-row:1;opacity:1;animation:panelReveal .7s .15s cubic-bezier(.16,.82,.2,1) both}
.login-card{padding:clamp(26px,3.2vw,44px);border:1px solid rgba(157,190,232,.62);border-radius:28px;background:linear-gradient(145deg,rgba(14,32,60,.9),rgba(7,22,44,.88));box-shadow:0 30px 85px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(22px)}
.login-card:before{display:none}.login-card:after{pointer-events:none}
.login-card-brand{display:flex;align-items:center;gap:15px;margin-bottom:32px;position:relative;z-index:2}
.login-card-brand .brand-mark{width:58px;height:58px;border-radius:15px;flex:none}
.login-card-brand strong{display:block;font-size:17px;color:#f5f7fc;letter-spacing:.01em}
.login-card-brand small{display:block;margin-top:3px;color:#9fb2d1;font-size:12px}
.login-card h2{margin:0;font-size:25px;letter-spacing:-.035em;color:#f4f7fc}
.login-subtitle{margin:8px 0 25px;color:#9eb0cc;font-size:13px}
.login-card form{gap:17px}
.login-card .login-field{gap:8px;color:#d2dced;font-size:12px;font-weight:600}
.login-input-wrap{display:flex;align-items:center;min-height:51px;border:1px solid #48668e;border-radius:12px;background:rgba(17,39,72,.78);transition:border-color .2s,box-shadow .2s,background .2s}
.login-input-wrap:focus-within{border-color:#d4ad5f;box-shadow:0 0 0 3px rgba(212,173,95,.13);background:rgba(21,45,81,.95)}
.login-card .login-input-wrap input{min-width:0;flex:1;width:100%;height:49px;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;border-radius:0;padding:0 14px 0 5px;color:#fff;font-size:13px}
.login-card .login-input-wrap input::placeholder{color:#8fa4c5}
.field-icon{width:47px;flex:none;text-align:center;font-size:20px;color:#dce6f5}
.password-toggle{width:42px;align-self:stretch;border:0;background:transparent;color:#adc3e5;font-size:19px;border-radius:10px}
.password-toggle:hover{color:#fff;background:rgba(255,255,255,.06)}
.login-card .form-error{min-height:0;color:#ffb1b1;font-size:12px;line-height:1.5}
.login-card .form-error:empty{display:none}
.login-card .btn.primary.login-submit{min-height:53px;border:1px solid #e0b966;border-radius:12px;background:linear-gradient(110deg,#f2cb78,#c99a4e);color:#17243a;font-size:14px;font-weight:800;box-shadow:0 9px 22px rgba(174,127,47,.17);transition:transform .2s,filter .2s}
.login-card .btn.primary.login-submit span{font-size:24px;vertical-align:-2px;margin-right:10px}
.login-card .btn.primary.login-submit:hover{filter:brightness(1.05);transform:translateY(-1px)}
.login-card .btn.primary.login-submit:disabled{opacity:.75;cursor:wait;transform:none}
.login-security{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:19px;color:#9fb4d3;font-size:11px}
.login-security span{font-size:16px;color:#d9b568}
.login-meta{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:30px;color:#8199bd;font-size:10px}
.login-meta i,.login-footer i{height:13px;width:1px;background:rgba(160,184,219,.45)}
.login-footer{position:absolute;bottom:22px;display:flex;align-items:center;justify-content:center;gap:22px;color:#b4c5df;font-size:11px;letter-spacing:0}
.login-footer i{height:15px}
.login-footer span{white-space:nowrap}
.login-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(23,36,58,.25);border-top-color:#17243a;border-radius:50%;animation:loginSpin .7s linear infinite;vertical-align:-2px;margin-right:9px}
@keyframes loginSpin{to{transform:rotate(360deg)}}
@media(max-width:1100px){.login-scene{grid-template-columns:minmax(0,.82fr) minmax(390px,1fr);gap:26px;padding-left:34px;padding-right:34px}.login-welcome{margin-left:0}.login-welcome h1{font-size:clamp(34px,4vw,46px)}.login-brand{left:34px}.login-motto{right:34px}.login-footer{gap:14px}}
@media(max-width:820px){.login-scene{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:22px;padding:112px 22px 82px;min-height:100svh}.login-brand{left:22px;top:20px}.login-brand .brand-mark{width:42px;height:42px}.login-brand strong{font-size:13px}.login-brand small{font-size:10px}.login-motto{display:none}.login-welcome{max-width:570px;margin:0 auto;width:100%;padding:0}.welcome-rule{margin-bottom:13px}.login-welcome h1{font-size:34px;margin:8px 0 10px}.login-welcome p{font-size:13px;max-width:520px}.welcome-note{display:none}.login-panel{width:100%;max-width:570px;margin:0 auto}.login-card{padding:27px;border-radius:22px}.login-card-brand{margin-bottom:23px}.login-card-brand .brand-mark{width:48px;height:48px}.login-card h2{font-size:22px}.login-subtitle{margin-bottom:20px}.login-footer{position:relative;bottom:auto;left:auto;right:auto;flex-wrap:wrap;gap:10px;margin:4px auto 0;width:100%;font-size:10px}}
@media(max-width:480px){.login-scene{padding:91px 16px 22px;gap:17px}.login-brand{left:16px;top:15px;gap:9px}.login-brand .brand-mark{width:38px;height:38px;border-radius:11px}.login-brand strong{font-size:12px}.login-brand small{font-size:9px}.login-welcome h1{font-size:29px}.login-welcome p{font-size:12px;line-height:1.55}.login-card{padding:21px 18px;border-radius:19px}.login-card-brand{gap:11px;margin-bottom:20px}.login-card-brand .brand-mark{width:43px;height:43px}.login-card-brand strong{font-size:14px}.login-card-brand small{font-size:10px}.login-card h2{font-size:20px}.login-subtitle{font-size:12px;margin:6px 0 18px}.login-card form{gap:14px}.login-input-wrap,.login-card .login-input-wrap input{min-height:47px;height:47px}.field-icon{width:39px;font-size:18px}.login-card .login-input-wrap input{font-size:12px;padding-right:5px}.password-toggle{width:36px}.login-card .btn.primary.login-submit{min-height:49px}.login-meta{gap:9px;margin-top:22px;font-size:9px}.login-security{font-size:10px}.login-footer{gap:7px;font-size:9px}.login-footer i{height:11px}}
@media(prefers-reduced-motion:reduce){.login-scene:before,.scene-glow,.walker,.walker *,.bag,.login-panel,.login-card:after{animation:none!important;transition:none!important}.login-panel{opacity:1;transform:none}}


/* HRIS Bank WJP — Login Premium V3: clean, scroll-safe, responsive */
body.login-page{margin:0;min-height:100%;background:#08162b;color:#f5f7fb;overflow-x:hidden}
body.login-page #app{min-height:100svh}
.login-scene.login-clean{position:relative;isolation:isolate;box-sizing:border-box;width:100%;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vh,52px) 18px;background:radial-gradient(ellipse at 15% 10%,rgba(58,91,139,.30),transparent 38%),radial-gradient(ellipse at 90% 90%,rgba(196,151,70,.12),transparent 30%),linear-gradient(135deg,#08162b 0%,#102747 52%,#071326 100%);overflow:visible}
.login-scene.login-clean:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 85%)}
.login-scene.login-clean:after{display:none}
.login-clean .login-panel{position:relative;inset:auto;transform:none;width:min(100%,460px);max-width:460px;margin:auto;opacity:1;animation:none;grid-column:auto;grid-row:auto}
.login-clean .login-card{box-sizing:border-box;width:100%;padding:clamp(24px,5vw,38px);border:1px solid rgba(159,187,224,.35);border-radius:22px;background:rgba(10,27,51,.88);box-shadow:0 24px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(14px)}
.login-clean .login-card-brand{gap:13px;margin:0 0 30px}
.login-clean .login-card-brand .brand-mark{width:48px;height:48px;border-radius:13px;overflow:hidden;background:#fff;flex:0 0 48px}
.login-clean .login-card-brand .brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.login-clean .login-card-brand strong{font-size:16px;line-height:1.35;color:#f8fafc;letter-spacing:.01em}
.login-clean .login-card-brand small{font-size:11px;line-height:1.45;color:#a9bad4;margin-top:3px}
.login-heading{margin:0 0 26px}
.login-accent{display:block;width:42px;height:4px;border-radius:9px;background:linear-gradient(90deg,#f4cf80,#c79443);margin-bottom:17px}
.login-clean .login-heading h1{font-size:clamp(24px,4vw,29px);line-height:1.2;letter-spacing:-.035em;margin:0;color:#f7f9fc;font-weight:750}
.login-clean .login-heading p{margin:9px 0 0;color:#aabbd3;font-size:13px;line-height:1.55}
.login-clean .login-card form{display:flex;flex-direction:column;gap:17px;margin:0}
.login-clean .login-card .login-field{display:flex;flex-direction:column;gap:8px;color:#dce5f2;font-size:12px;font-weight:650;margin:0}
.login-clean .login-input-wrap{box-sizing:border-box;display:flex;align-items:center;width:100%;min-width:0;min-height:50px;border:1px solid #405a7e;border-radius:11px;background:rgba(17,39,69,.76);transition:border-color .18s,box-shadow .18s}
.login-clean .login-input-wrap:focus-within{border-color:#dfb968;box-shadow:0 0 0 3px rgba(223,185,104,.13)}
.login-clean .login-card .login-input-wrap input{box-sizing:border-box;display:block;min-width:0;flex:1;width:100%;height:48px;min-height:0;padding:0 12px 0 2px;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;color:#fff;font-size:14px}
.login-clean .login-card .login-input-wrap input::placeholder{color:#8298b8;opacity:1}
.login-clean .field-icon{width:43px;flex:0 0 43px;text-align:center;color:#c5d4e9;font-size:19px}
.login-clean .password-toggle{flex:0 0 42px;width:42px;min-height:46px;border:0;background:transparent;color:#b9cbe5;font-size:18px;cursor:pointer}
.login-clean .form-error{margin:0;color:#ffb4b4;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.login-clean .form-error:empty{display:none}
.login-clean .btn.primary.login-submit{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:51px;margin:2px 0 0;border:1px solid #e1b96b;border-radius:11px;background:linear-gradient(110deg,#f4d18a,#d1a052);color:#15243b;font-size:14px;font-weight:750;box-shadow:0 8px 20px rgba(178,128,43,.13);transition:filter .18s,transform .18s}
.login-clean .btn.primary.login-submit span{font-size:21px;line-height:1;margin:0}
.login-clean .btn.primary.login-submit:hover{filter:brightness(1.04);transform:translateY(-1px)}
.login-clean .btn.primary.login-submit:disabled{opacity:.75;cursor:wait;transform:none}
.login-clean .login-footer{position:static;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:27px 0 0;padding-top:19px;border-top:1px solid rgba(155,180,214,.18);color:#9eb0ca;font-size:11px;line-height:1.6;letter-spacing:0;text-align:center}
.login-clean .login-footer strong{color:#e4ebf6;font-weight:650}
.login-clean .login-heart{white-space:nowrap}
.login-clean .login-footer-separator{margin:0 5px;color:#6f87aa}
.login-clean .login-spinner{flex:0 0 14px}
@media(max-width:520px){.login-scene.login-clean{align-items:flex-start;min-height:100svh;padding:clamp(18px,5vh,38px) 14px;}
.login-clean .login-panel{width:100%;max-width:420px;margin:auto}
.login-clean .login-card{padding:24px 20px;border-radius:18px}
.login-clean .login-card-brand{margin-bottom:27px;gap:11px}
.login-clean .login-card-brand .brand-mark{width:43px;height:43px;flex-basis:43px}
.login-clean .login-card-brand strong{font-size:14px}
.login-clean .login-card-brand small{font-size:10px}
.login-clean .login-heading{margin-bottom:23px}
.login-clean .login-heading h1{font-size:25px}
.login-clean .login-heading p{font-size:12px}
.login-clean .login-card form{gap:15px}
.login-clean .login-input-wrap{min-height:49px}
.login-clean .login-card .login-input-wrap input{height:47px;font-size:16px}
.login-clean .field-icon{width:39px;flex-basis:39px}
.login-clean .password-toggle{flex-basis:40px;width:40px}
.login-clean .login-footer{margin-top:23px;padding-top:16px;font-size:10px}}
@media(max-height:650px) and (min-width:521px){.login-scene.login-clean{align-items:flex-start;padding-top:18px;padding-bottom:18px}.login-clean .login-card{padding:22px 30px}.login-clean .login-card-brand{margin-bottom:18px}.login-clean .login-heading{margin-bottom:18px}.login-clean .login-accent{margin-bottom:10px}.login-clean .login-card form{gap:12px}.login-clean .login-footer{margin-top:16px;padding-top:12px}}
@media(prefers-reduced-motion:reduce){.login-clean *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* HRIS BANK WJP LOGIN V4 — supplied background + responsive hardening */
html:has(body.login-page), body.login-page{min-height:100%;margin:0;}
body.login-page{min-height:100vh;min-height:100dvh;overflow-x:hidden;background:#07162c;}
body.login-page #app{min-height:100vh;min-height:100dvh;}
.login-scene.login-clean{
  position:relative;isolation:isolate;box-sizing:border-box;
  display:flex;align-items:center;justify-content:flex-end;
  width:100%;min-height:100vh;min-height:100svh;min-height:100dvh;
  padding:clamp(20px,4vh,44px) clamp(18px,6.5vw,100px);
  background-color:#07162c;
  background-image:linear-gradient(90deg,rgba(4,15,32,.06) 0%,rgba(4,15,32,.12) 38%,rgba(4,15,32,.56) 64%,rgba(4,15,32,.38) 100%),url('https://bprwjp.com/wp-content/uploads/2026/10/backgroundsdm-scaled.jpg');
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  overflow:visible;
}
.login-scene.login-clean:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(3,12,26,.20),transparent 32%,rgba(3,12,26,.08));}
.login-scene.login-clean:after{display:none;}
.login-clean .login-panel{position:relative;inset:auto;transform:none;grid-column:auto;grid-row:auto;opacity:1;animation:none;width:min(100%,460px);max-width:460px;margin:0 clamp(0px,3.5vw,52px) 0 0;min-width:0;}
.login-clean .login-card{box-sizing:border-box;width:100%;max-width:100%;padding:clamp(22px,3vw,34px);border:1px solid rgba(188,211,242,.42);border-radius:22px;background:rgba(7,24,47,.91);box-shadow:0 24px 72px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.login-clean .login-card-brand{margin-bottom:clamp(20px,3vh,28px);}
.login-clean .login-heading{margin-bottom:clamp(18px,3vh,25px);}
.login-clean .login-card form{gap:clamp(12px,2.2vh,17px);}
.login-clean .login-footer{margin-top:clamp(18px,3vh,25px);padding-top:15px;overflow-wrap:anywhere;}
.login-clean .login-input-wrap{min-width:0;}
.login-clean .login-card .login-input-wrap input{min-width:0;}
@media (max-width:900px){
 .login-scene.login-clean{justify-content:center;padding:24px;background-position:30% center;background-image:linear-gradient(90deg,rgba(5,17,35,.60),rgba(5,17,35,.68)),url('https://bprwjp.com/wp-content/uploads/2026/10/backgroundsdm-scaled.jpg');}
 .login-clean .login-panel{margin:0 auto;width:min(100%,440px);}
 .login-clean .login-card{background:rgba(7,23,45,.94);}
}
@media (max-width:520px){
 .login-scene.login-clean{align-items:center;justify-content:center;min-height:100vh;min-height:100svh;min-height:100dvh;padding:18px 13px;background-position:27% center;}
 .login-clean .login-panel{width:100%;max-width:410px;margin:auto;}
 .login-clean .login-card{padding:clamp(20px,5.5vw,25px) clamp(17px,5vw,22px);border-radius:18px;}
 .login-clean .login-card-brand{gap:10px;margin-bottom:22px;}
 .login-clean .login-card-brand .brand-mark{width:42px;height:42px;flex-basis:42px;}
 .login-clean .login-card-brand strong{font-size:14px;}
 .login-clean .login-card-brand small{font-size:10px;}
 .login-clean .login-heading{margin-bottom:20px;}
 .login-clean .login-heading h1{font-size:clamp(23px,6.5vw,27px);}
 .login-clean .login-heading p{font-size:12px;}
 .login-clean .login-card form{gap:14px;}
 .login-clean .login-input-wrap{min-height:49px;}
 .login-clean .login-card .login-input-wrap input{height:47px;font-size:16px;}
 .login-clean .login-footer{margin-top:21px;padding-top:14px;font-size:10px;}
}
@media (max-height:740px){
 .login-scene.login-clean{align-items:flex-start;padding-top:18px;padding-bottom:18px;}
 .login-clean .login-card{padding-top:20px;padding-bottom:20px;}
 .login-clean .login-card-brand{margin-bottom:16px;}
 .login-clean .login-heading{margin-bottom:16px;}
 .login-clean .login-accent{margin-bottom:10px;}
 .login-clean .login-card form{gap:11px;}
 .login-clean .login-input-wrap{min-height:46px;}
 .login-clean .login-card .login-input-wrap input{height:44px;}
 .login-clean .login-footer{margin-top:14px;padding-top:10px;}
}
@media (max-width:520px) and (max-height:720px){
 .login-scene.login-clean{align-items:flex-start;padding-top:12px;padding-bottom:12px;}
 .login-clean .login-card{padding-top:17px;padding-bottom:17px;}
 .login-clean .login-card-brand{margin-bottom:14px;}
 .login-clean .login-heading{margin-bottom:14px;}
 .login-clean .login-card form{gap:10px;}
 .login-clean .login-footer{margin-top:13px;padding-top:10px;}
}
@media (prefers-reduced-motion:reduce){.login-clean *{animation:none!important;transition:none!important;}}


/* HRIS LOGIN V5 — compact, precisely aligned, responsive */
.login-scene.login-clean{
  box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end;
  min-height:100vh;min-height:100svh;min-height:100dvh;width:100%;
  padding:clamp(20px,4vh,40px) clamp(24px,8vw,128px);
  overflow-x:hidden;overflow-y:auto;
  background-position:center center;background-size:cover;background-repeat:no-repeat;
}
.login-clean .login-panel{
  position:relative;inset:auto;transform:none;opacity:1;animation:none;
  flex:0 1 400px;width:min(100%,400px);max-width:400px;min-width:0;margin:0;
}
.login-clean .login-card{
  box-sizing:border-box;width:100%;max-width:100%;padding:25px 26px 19px;
  border-radius:20px;border:1px solid rgba(190,211,239,.38);
  background:rgba(7,23,44,.91);box-shadow:0 22px 58px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
}
.login-clean .login-card:before{display:none}
.login-clean .login-card-brand{display:flex;align-items:center;gap:12px;margin:0 0 22px;min-width:0}
.login-clean .login-card-brand .brand-mark{width:44px;height:44px;flex:0 0 44px;border-radius:12px;overflow:hidden;background:#fff}
.login-clean .login-card-brand .brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.login-clean .login-card-brand strong{display:block;font-size:15px;line-height:1.3;color:#f8fafc}
.login-clean .login-card-brand small{display:block;margin-top:3px;font-size:10px;line-height:1.4;color:#aebed4;overflow-wrap:anywhere}
.login-clean .login-heading{display:none!important}
.login-clean .login-card form{display:flex;flex-direction:column;gap:13px;margin:0;position:relative;z-index:2}
.login-clean .login-card .login-field{display:flex;flex-direction:column;gap:6px;margin:0;color:#dce5f2;font-size:11px;font-weight:650}
.login-clean .login-input-wrap{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-height:46px;border:1px solid rgba(154,184,222,.42);border-radius:11px;background:rgba(255,255,255,.055);overflow:hidden}
.login-clean .field-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;color:#c9d8ed;font-size:17px}
.login-clean .login-card .login-input-wrap input{box-sizing:border-box;display:block;flex:1;width:100%;min-width:0;height:44px;min-height:44px;padding:0 8px 0 0;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;color:#fff;font-size:14px}
.login-clean .login-card .login-input-wrap input::placeholder{color:#8fa3c0;opacity:1}
.login-clean .login-input-wrap:focus-within{border-color:#d8b66f;box-shadow:0 0 0 3px rgba(216,182,111,.12)}
.login-clean .password-toggle{display:grid;place-items:center;flex:0 0 38px;width:38px;height:42px;padding:0;border:0;background:transparent;color:#c9d8ed;cursor:pointer}
.login-clean .login-card .btn.primary.login-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin-top:2px;border-radius:11px;background:linear-gradient(135deg,#f0ce82,#c99a4e);border:1px solid rgba(255,224,157,.6);color:#17253a;font-size:14px;font-weight:750;box-shadow:0 8px 22px rgba(198,151,67,.18)}
.login-clean .login-card .btn.primary.login-submit span{font-size:19px;margin:0}
.login-clean .form-error{min-height:0;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.login-clean .login-footer{position:static;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;margin:19px 0 0;padding-top:13px;border-top:1px solid rgba(155,180,214,.18);color:#9eb0ca;font-size:10px;line-height:1.5;text-align:center}
.login-clean .login-footer strong{color:#e4ebf6;font-weight:650}
.login-clean .login-footer-separator{margin:0 4px;color:#6f87aa}
@media(max-width:900px){
 .login-scene.login-clean{justify-content:center;padding:24px;background-position:35% center;background-image:linear-gradient(90deg,rgba(5,17,35,.58),rgba(5,17,35,.72)),url('https://bprwjp.com/wp-content/uploads/2026/10/backgroundsdm-scaled.jpg')}
 .login-clean .login-panel{flex:0 1 390px;width:min(100%,390px);margin:0 auto}
 .login-clean .login-card{background:rgba(7,23,45,.94)}
}
@media(max-width:520px){
 .login-scene.login-clean{align-items:center;justify-content:center;padding:18px 14px;background-position:30% center}
 .login-clean .login-panel{width:100%;max-width:370px;flex-basis:370px;margin:auto}
 .login-clean .login-card{padding:22px 19px 17px;border-radius:17px}
 .login-clean .login-card-brand{gap:10px;margin-bottom:19px}
 .login-clean .login-card-brand .brand-mark{width:41px;height:41px;flex-basis:41px}
 .login-clean .login-card-brand strong{font-size:14px}
 .login-clean .login-card-brand small{font-size:10px}
 .login-clean .login-card form{gap:12px}
 .login-clean .login-card .login-field{gap:5px}
 .login-clean .login-input-wrap{min-height:46px}
 .login-clean .login-card .login-input-wrap input{height:44px;min-height:44px;font-size:16px}
 .login-clean .login-footer{margin-top:16px;padding-top:12px;font-size:10px}
}
@media(max-height:650px){
 .login-scene.login-clean{align-items:flex-start;padding-top:12px;padding-bottom:12px}
 .login-clean .login-card{padding-top:17px;padding-bottom:14px}
 .login-clean .login-card-brand{margin-bottom:13px}
 .login-clean .login-card form{gap:9px}
 .login-clean .login-input-wrap,.login-clean .login-card .login-input-wrap input{min-height:41px;height:41px}
 .login-clean .password-toggle{height:39px}
 .login-clean .login-card .btn.primary.login-submit{min-height:42px}
 .login-clean .login-footer{margin-top:11px;padding-top:9px}
}
@media(max-width:520px) and (max-height:570px){
 .login-scene.login-clean{padding-top:10px;padding-bottom:10px}
 .login-clean .login-card{padding-top:14px;padding-bottom:12px}
 .login-clean .login-card-brand{margin-bottom:10px}
 .login-clean .login-card form{gap:8px}
 .login-clean .login-footer{margin-top:9px;padding-top:8px}
}
@media(prefers-reduced-motion:reduce){.login-clean *{animation:none!important;transition:none!important}}


/* HRIS Bank WJP Login Premium V6 — desktop right/true vertical center */
@media (min-width: 901px) and (min-height: 651px){
  .login-scene.login-clean{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    min-height:100vh; min-height:100svh; min-height:100dvh;
    padding:clamp(24px,4vh,42px) clamp(36px,7.5vw,120px) !important;
    background-position:center center !important;
  }
  .login-clean .login-panel{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    width:min(100%,430px) !important;
    max-width:430px !important;
    flex:0 1 430px !important;
    margin:0 !important;
    align-self:center !important;
  }
  .login-clean .login-card{padding:clamp(22px,2.3vw,30px) !important;}
}
/* V7 FIX: center login card on desktop at every viewport height.
   Short windows remain scrollable; mobile rules above remain unchanged. */
@media (min-width:901px){
  .login-scene.login-clean{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    min-height:100vh !important;
    min-height:100svh !important;
    min-height:100dvh !important;
    height:auto !important;
    box-sizing:border-box !important;
    padding:24px clamp(36px,7.5vw,120px) !important;
    overflow-y:auto !important;
  }
  .login-clean .login-panel{
    position:relative !important;
    top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    transform:none !important;
    align-self:center !important;
    margin-top:auto !important; margin-bottom:auto !important;
    width:min(100%,430px) !important;
    max-width:430px !important;
    flex:0 1 430px !important;
  }
}
@media (min-width:901px) and (max-height:650px){
  .login-scene.login-clean{align-items:center !important;padding-top:18px !important;padding-bottom:18px !important;}
  .login-clean .login-panel{margin-top:0 !important;margin-bottom:0 !important;}
}

/* Kredit Internal - isolated styles; existing HRIS components remain unchanged */
.credit-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 26px;margin-bottom:18px;border-radius:18px;background:linear-gradient(120deg,#101f38,#233e63);color:#fff;box-shadow:0 12px 30px rgba(16,31,56,.14)}.credit-hero h2{margin:6px 0;font-size:25px;letter-spacing:-.4px}.credit-hero p{margin:0;color:#d6dfec}.credit-hero .section-kicker{color:#a9c7ed;font-size:10px;letter-spacing:1.5px;font-weight:800}.credit-hero .btn{white-space:nowrap}.credit-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:18px}.credit-stat{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:7px;padding:18px;border:1px solid #e1e7ef;border-radius:15px;background:#fff;cursor:pointer;color:#192b43;box-shadow:0 3px 14px rgba(25,43,67,.035);transition:transform .15s,box-shadow .15s}.credit-stat:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(25,43,67,.09)}.credit-stat small{color:#66758a;font-size:12px}.credit-stat strong{font-size:29px;line-height:1.15}.credit-stat span{font-size:12px;color:#69788c}.credit-stat.good strong{color:#18804b}.credit-stat.danger strong{color:#c0444d}.credit-stat.warning strong{color:#a86b12}.credit-list-card .toolbar{gap:12px}.credit-modal{max-height:92vh;overflow:auto}.credit-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.credit-form-grid label,.credit-config-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#344054}.credit-form-grid input,.credit-form-grid select,.credit-form-grid textarea,.credit-config-grid input,.credit-config-grid textarea,.credit-upload-row select,.credit-vote-actions input,.credit-vote-actions select{width:100%;min-width:0;border:1px solid #d5dce6;border-radius:9px;padding:10px 11px;background:#fff;color:#172033;font:inherit;font-weight:400;box-sizing:border-box}.credit-form-grid textarea,.credit-config-grid textarea{resize:vertical}.credit-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}.credit-detail-grid>div{background:#f5f7fa;border:1px solid #e7ebf1;border-radius:10px;padding:13px;display:flex;flex-direction:column;gap:6px}.credit-detail-grid small{font-size:11px;color:#667085}.credit-detail-grid b{font-size:15px;overflow-wrap:anywhere}.credit-detail-sections{display:grid;gap:15px}.credit-detail-sections>section,.credit-config-grid>section{border:1px solid #e4e8ef;border-radius:12px;padding:16px;min-width:0}.credit-detail-sections h3,.credit-config-grid h3{margin:0 0 12px;font-size:15px}.credit-detail-sections p{margin:7px 0;font-size:13px;line-height:1.55;overflow-wrap:anywhere}.credit-upload-row{display:grid;grid-template-columns:1fr 2fr auto;gap:8px;align-items:center}.credit-detail-sections ul{padding-left:20px;font-size:12px;overflow-wrap:anywhere}.credit-workflow-form{background:#f8fafc}.credit-workflow-form form>button{margin-top:12px}.credit-vote-actions{display:grid;grid-template-columns:180px 1fr auto auto;gap:8px}.credit-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.credit-user-list{max-height:230px;overflow:auto;border:1px solid #e4e8ef;border-radius:10px;padding:7px}.credit-user-choice{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;padding:9px;border-bottom:1px solid #edf0f4}.credit-user-choice:last-child{border-bottom:0}.credit-user-choice input{width:auto}.credit-user-choice span{display:flex;flex-direction:column;gap:2px}.credit-user-choice small{font-weight:400;color:#667085}.credit-matrix-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(90px,.6fr) minmax(90px,.6fr);gap:7px;align-items:center;padding:8px 0;border-bottom:1px solid #edf0f4}.credit-matrix-row label{display:flex;flex-direction:row;align-items:center;gap:6px}.credit-matrix-row input[type=checkbox]{width:auto}.credit-matrix-row input[type=number]{padding:7px}.credit-modal .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.credit-hero+.credit-stats+.card{margin-top:0}@media(max-width:900px){.credit-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.credit-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.credit-vote-actions{grid-template-columns:1fr 1fr}.credit-vote-actions input{grid-column:span 2}}@media(max-width:600px){.credit-hero{align-items:flex-start;flex-direction:column;padding:20px}.credit-hero h2{font-size:22px}.credit-stats{gap:8px}.credit-stat{padding:13px}.credit-stat strong{font-size:24px}.credit-form-grid,.credit-config-grid{grid-template-columns:1fr}.credit-detail-grid{gap:7px}.credit-detail-grid>div{padding:10px}.credit-detail-grid b{font-size:13px}.credit-upload-row{grid-template-columns:1fr}.credit-vote-actions{grid-template-columns:1fr}.credit-vote-actions input{grid-column:auto}.credit-matrix-row{grid-template-columns:1fr 1fr}.credit-matrix-row label{grid-column:span 2}.credit-list-card .toolbar{align-items:flex-start;flex-direction:column}.credit-list-card .actions{width:100%;flex-wrap:wrap}.credit-list-card select{max-width:100%}}
/* Kredit Internal: compact, guided application form and polished settings modal */
.credit-simple-modal{max-width:920px!important;border:1px solid #e2e8f0;box-shadow:0 28px 80px rgba(12,27,48,.24)}.credit-simple-modal .modal-head{padding-bottom:18px;border-bottom:1px solid #edf1f6;margin-bottom:18px}.credit-simple-intro{display:flex;align-items:center;gap:12px;margin:20px 0 13px;padding:13px 15px;border:1px solid #e6ebf2;border-radius:12px;background:linear-gradient(110deg,#f8fafc,#fff)}.credit-simple-intro>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#172b49;color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px}.credit-simple-intro>div{display:flex;flex-direction:column;gap:3px}.credit-simple-intro b{font-size:13px;color:#172b49}.credit-simple-intro small{font-size:11px;color:#718096}.credit-simple-modal .credit-form-grid{gap:14px}.credit-simple-modal .credit-form-grid label{font-size:12px;line-height:1.45}.credit-simple-modal .credit-form-grid input,.credit-simple-modal .credit-form-grid select,.credit-simple-modal .credit-form-grid textarea{min-height:42px;border-color:#dbe2ec;border-radius:10px;padding:11px 12px;transition:border-color .15s,box-shadow .15s}.credit-simple-modal .credit-form-grid input:focus,.credit-simple-modal .credit-form-grid select:focus,.credit-simple-modal .credit-form-grid textarea:focus{outline:none;border-color:#7895bc;box-shadow:0 0 0 3px rgba(73,112,165,.12)}.credit-simple-modal #creditAmountWords{font-size:11px;line-height:1.5;overflow-wrap:anywhere}.credit-optional-details{margin-top:20px;border:1px solid #e1e7ef;border-radius:12px;background:#fbfcfe}.credit-optional-details summary{padding:14px 16px;cursor:pointer;color:#263b58;font-size:12px;font-weight:800}.credit-optional-details[open] summary{border-bottom:1px solid #e8edf3}.credit-optional-details .credit-form-grid{padding:16px}.credit-form-footer{margin-top:20px;padding-top:15px;border-top:1px solid #e8edf3}.credit-form-footer>p{font-size:12px;line-height:1.6;color:#66758a}.credit-simple-modal .modal-actions{position:sticky;bottom:-1px;background:#fff;padding:12px 0 2px}.credit-simple-modal .btn.primary{box-shadow:0 5px 14px rgba(28,54,88,.14)}#creditApprovers{max-height:360px;overflow:auto;padding-right:3px}.credit-config-grid>section{background:#fff}.credit-config-grid h3{color:#172b49}.credit-settings-error{color:#b42318;font-size:12px}@media(max-width:600px){.credit-simple-modal{max-height:94vh!important}.credit-simple-modal .modal-head{align-items:flex-start}.credit-simple-modal .credit-form-grid{grid-template-columns:1fr}.credit-simple-intro{margin-top:16px}.credit-form-footer .modal-actions{display:flex;flex-direction:column-reverse}.credit-form-footer .modal-actions button{width:100%}}

/* Kredit Internal v1.0.2 — premium progressive form */
.credit-premium-form .modal-head{position:sticky;top:0;z-index:4;background:#fff}
.credit-premium-form .credit-step-title{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:18px 0 14px;border:1px solid #dce5f1;border-radius:14px;background:linear-gradient(135deg,#fbfdff,#f1f5fb)}
.credit-premium-form .credit-step-title>span{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:#172b49;color:#fff;font-weight:800}
.credit-premium-form .credit-step-title b,.credit-premium-form .credit-step-title small{display:block}.credit-premium-form .credit-step-title small{margin-top:3px;color:#718096;font-size:12px}
.credit-premium-form .credit-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.credit-premium-form .credit-form-grid label{min-width:0}.credit-premium-form .credit-form-grid input,.credit-premium-form .credit-form-grid select,.credit-premium-form .credit-form-grid textarea{width:100%;box-sizing:border-box;min-width:0}
.credit-premium-form .span-2{grid-column:span 2}.credit-premium-form [hidden]{display:none!important}
.credit-premium-form .credit-subtitle{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 10px;font-weight:750;color:#172b49}.credit-premium-form .credit-subtitle small{font-weight:400;color:#718096}.credit-premium-form .credit-subtitle button{margin-left:auto}
.credit-collateral-row{display:grid;grid-template-columns:1fr 1.3fr 1fr auto;gap:10px;align-items:end;padding:12px;margin:8px 0;border:1px solid #e0e7f1;border-radius:12px;background:#fbfcfe}.credit-collateral-row label{min-width:0}.credit-collateral-row input,.credit-collateral-row select{width:100%;box-sizing:border-box}
.credit-calculation-strip,.credit-finance-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.credit-calculation-strip>div,.credit-finance-summary>div{padding:14px;border:1px solid #dce5f1;border-radius:12px;background:#f7f9fc}.credit-calculation-strip small,.credit-finance-summary small{display:block;color:#718096;margin-bottom:5px}.credit-calculation-strip b,.credit-finance-summary b{color:#172b49;font-size:17px}.credit-finance-summary{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px}.credit-premium-form .credit-form-footer{position:sticky;bottom:0;background:#fff;padding-top:14px;margin-top:20px;border-top:1px solid #e6ebf2}
@media(max-width:700px){.credit-premium-form .credit-form-grid{grid-template-columns:minmax(0,1fr)}.credit-premium-form .span-2{grid-column:auto}.credit-collateral-row{grid-template-columns:minmax(0,1fr)}.credit-finance-summary{grid-template-columns:1fr}.credit-premium-form .modal-head{align-items:flex-start}}

/* Kredit Internal v1.0.3: application form uses the full workspace, not a popup */
.credit-inline-page{max-width:1180px;margin:0 auto 24px;padding:0 24px 24px;overflow:visible}.credit-inline-page .modal-head{padding:20px 0 16px;margin-bottom:20px;position:sticky;top:0;background:#fff;z-index:3}.credit-inline-page .credit-form{display:grid;gap:18px}.credit-inline-page .credit-form-grid{margin-bottom:6px}.credit-inline-page .credit-step-title{margin-top:4px}.credit-inline-page .credit-form-footer{border-top:1px solid #e8edf3;padding-top:16px}.credit-inline-page .modal-actions{position:sticky;bottom:0;background:rgba(255,255,255,.96);padding:12px 0;z-index:2}@media(max-width:600px){.credit-inline-page{padding:0 14px 16px}.credit-inline-page .modal-head{padding:14px 0}.credit-inline-page .credit-form-grid{grid-template-columns:1fr}}

/* Kredit Internal: honor native hidden state even where component CSS sets display:grid */
#view [hidden], #modal [hidden], .credit-form [hidden], .credit-form-grid [hidden] { display:none !important; }
.credit-idr { font-variant-numeric: tabular-nums; }


/* Kredit Internal v1.0.7 — refined luxury corporate application workspace */
.credit-inline-page{
  --credit-ink:#14243b;--credit-navy:#172b49;--credit-navy-2:#223d61;--credit-gold:#b99a62;
  max-width:1240px;margin:18px auto 32px;padding:0 30px 28px;border:1px solid #e4e9f0;
  border-radius:24px;background:linear-gradient(180deg,#fff 0%,#fff 76%,#fbfcfe 100%);
  box-shadow:0 18px 55px rgba(20,36,59,.075);overflow:visible;position:relative
}
.credit-inline-page:before{content:"";display:block;height:4px;position:absolute;top:0;left:0;right:0;border-radius:24px 24px 0 0;background:linear-gradient(90deg,#14243b 0%,#2e4b70 68%,#c3a36c 100%)}
.credit-inline-page .modal-head{padding:27px 0 22px;margin-bottom:8px;border-bottom:1px solid #e9edf3;background:rgba(255,255,255,.97);gap:20px}
.credit-inline-page .modal-head .eyebrow{display:inline-block;color:#9b7b46;font-size:10px;font-weight:850;letter-spacing:2px;margin-bottom:7px}
.credit-inline-page .modal-head h2{margin:0;color:var(--credit-ink);font-size:29px;font-weight:780;letter-spacing:-.8px;line-height:1.18}
.credit-inline-page .modal-head .icon-btn{width:42px;height:42px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;color:#4c6078;box-shadow:0 4px 12px rgba(20,36,59,.045);transition:all .18s ease}
.credit-inline-page .modal-head .icon-btn:hover{background:#f5f7fa;border-color:#cbd5e1;transform:translateY(-1px)}
.credit-inline-page .credit-form{gap:23px}
.credit-inline-page .credit-step-title{display:flex;align-items:center;gap:14px;margin:8px 0 17px;padding:0 0 13px;border:0;border-bottom:1px solid #e8edf3;border-radius:0;background:transparent}
.credit-inline-page .credit-step-title>span{width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:linear-gradient(145deg,#1b3151,#102039);box-shadow:0 5px 12px rgba(23,43,73,.17);font-size:12px;letter-spacing:.4px;color:#fff}
.credit-inline-page .credit-step-title b{font-size:16px;font-weight:780;letter-spacing:-.2px;color:var(--credit-ink)}
.credit-inline-page .credit-form-grid{gap:17px 20px;margin-bottom:8px}
.credit-inline-page .credit-form-grid label,.credit-inline-page .credit-collateral-row label{display:flex;flex-direction:column;gap:7px;color:#34445a;font-size:12px;font-weight:700;line-height:1.4;min-width:0}
.credit-inline-page .credit-form-grid input,.credit-inline-page .credit-form-grid select,.credit-inline-page .credit-form-grid textarea,.credit-inline-page .credit-collateral-row input,.credit-inline-page .credit-collateral-row select{
  min-height:45px;width:100%;min-width:0;box-sizing:border-box;border:1px solid #dce3ec;border-radius:12px;background:#fff;padding:11px 13px;color:#182b44;font-size:13px;font-weight:450;box-shadow:inset 0 1px 1px rgba(20,36,59,.015);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease
}
.credit-inline-page .credit-form-grid textarea{min-height:86px;resize:vertical}
.credit-inline-page .credit-form-grid input::placeholder,.credit-inline-page .credit-form-grid textarea::placeholder,.credit-inline-page .credit-collateral-row input::placeholder{color:#9aa6b6;font-weight:400}
.credit-inline-page .credit-form-grid input:hover,.credit-inline-page .credit-form-grid select:hover,.credit-inline-page .credit-form-grid textarea:hover,.credit-inline-page .credit-collateral-row input:hover,.credit-inline-page .credit-collateral-row select:hover{border-color:#bdc9d9}
.credit-inline-page .credit-form-grid input:focus,.credit-inline-page .credit-form-grid select:focus,.credit-inline-page .credit-form-grid textarea:focus,.credit-inline-page .credit-collateral-row input:focus,.credit-inline-page .credit-collateral-row select:focus{outline:none;border-color:#7189a8;box-shadow:0 0 0 4px rgba(54,83,121,.10);background:#fff}
.credit-inline-page .credit-form-grid input[readonly]{background:#f5f7fa;color:#596b81}
.credit-inline-page .credit-subtitle.credit-collateral-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 13px;padding:0 0 13px;border-bottom:1px solid #e7ecf2;color:#1b2d47;font-size:15px;font-weight:780;letter-spacing:-.2px}
.credit-inline-page .credit-collateral-heading>span{display:flex;align-items:center;gap:10px}
.credit-inline-page .credit-collateral-heading>span:before{content:"";width:4px;height:20px;border-radius:8px;background:var(--credit-gold)}
.credit-inline-page #creditAddCollateral{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;margin-left:auto;padding:0 16px;border:1px solid #d8c39e;border-radius:12px;background:linear-gradient(135deg,#fffdf8,#f8f1e5);color:#765b2e;font-size:12px;font-weight:800;letter-spacing:.1px;box-shadow:0 4px 12px rgba(129,99,49,.07);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.credit-inline-page #creditAddCollateral:hover{transform:translateY(-1px);border-color:#b99a62;box-shadow:0 8px 18px rgba(129,99,49,.14);background:linear-gradient(135deg,#fffaf0,#f4e8d2)}
.credit-inline-page #creditAddCollateral:active{transform:translateY(0)}
.credit-inline-page #creditAddCollateral span{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:#ead9b8;color:#684c20;font-size:16px;line-height:1}
.credit-inline-page .credit-collateral-row{position:relative;grid-template-columns:minmax(150px,1fr) minmax(180px,1.25fr) minmax(150px,.9fr) auto;gap:13px;margin:10px 0;padding:17px 15px 14px;border:1px solid #e0e6ee;border-radius:15px;background:linear-gradient(115deg,#fff 0%,#fbfcfe 100%);box-shadow:0 3px 10px rgba(20,36,59,.025);transition:border-color .18s ease,box-shadow .18s ease}
.credit-inline-page .credit-collateral-row:focus-within{border-color:#b9c7d8;box-shadow:0 6px 18px rgba(20,36,59,.055)}
.credit-inline-page .credit-collateral-row .coll-remove{min-height:42px;padding:0 13px;border:1px solid #e5caca;border-radius:11px;background:#fff;color:#9c4545;font-size:11px;font-weight:750;transition:background .18s ease,border-color .18s ease}
.credit-inline-page .credit-collateral-row .coll-remove:hover{background:#fff5f5;border-color:#d8aaaa}
.credit-inline-page .credit-calculation-strip{gap:13px;margin-top:15px}
.credit-inline-page .credit-calculation-strip>div,.credit-inline-page .credit-finance-summary>div{padding:17px 19px;border:1px solid #e0e7f0;border-radius:15px;background:linear-gradient(135deg,#f9fbfe,#f3f6fa)}
.credit-inline-page .credit-calculation-strip small,.credit-inline-page .credit-finance-summary small{font-size:11px;font-weight:650;letter-spacing:.15px;color:#697b91}
.credit-inline-page .credit-calculation-strip b,.credit-inline-page .credit-finance-summary b{font-size:19px;font-weight:800;letter-spacing:-.3px;color:#172b49}
.credit-inline-page .credit-optional-details{margin-top:16px;border:1px solid #e1e7ef;border-radius:14px;background:#fbfcfe}
.credit-inline-page .credit-optional-details summary{padding:15px 17px;color:#344a65;font-size:12px;font-weight:750}
.credit-inline-page .credit-form-footer{margin-top:5px;padding-top:18px;border-top:1px solid #e5eaf1}
.credit-inline-page .modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 0 3px;background:rgba(255,255,255,.97);backdrop-filter:blur(12px)}
.credit-inline-page .modal-actions .btn{min-height:44px;padding:0 19px;border-radius:12px;font-size:12px;font-weight:780;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.credit-inline-page .modal-actions .btn.primary{border:1px solid #172b49;background:linear-gradient(135deg,#243e61,#14243b);color:#fff;box-shadow:0 7px 18px rgba(20,36,59,.18)}
.credit-inline-page .modal-actions .btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(20,36,59,.24)}
.credit-inline-page .modal-actions .btn.ghost{border:1px solid #dbe2eb;background:#fff;color:#42536a}
.credit-inline-page .modal-actions .btn.ghost:hover{background:#f6f8fb;border-color:#c5d0de}
@media(max-width:760px){.credit-inline-page{margin:10px 10px 22px;padding:0 17px 20px;border-radius:18px}.credit-inline-page .modal-head{padding:23px 0 17px}.credit-inline-page .modal-head h2{font-size:24px}.credit-inline-page .credit-form-grid{grid-template-columns:minmax(0,1fr);gap:14px}.credit-inline-page .credit-form-grid .span-2{grid-column:auto}.credit-inline-page .credit-collateral-row{grid-template-columns:minmax(0,1fr);padding:14px}.credit-inline-page .credit-collateral-row .coll-remove{justify-self:start}.credit-inline-page .credit-subtitle.credit-collateral-heading{align-items:flex-start;flex-direction:column}.credit-inline-page #creditAddCollateral{margin-left:0;width:100%}.credit-inline-page .credit-calculation-strip{grid-template-columns:1fr}.credit-inline-page .modal-actions{display:grid;grid-template-columns:1fr}.credit-inline-page .modal-actions .btn{width:100%}}