*,*::before,*::after{box-sizing:border-box}
html{min-height:100%}
body.login-page{margin:0;min-height:100vh;display:grid;place-items:center;padding:34px 18px;font:16px/1.5 Arial,sans-serif;color:#241d18}
a{color:inherit}
.login-page.hr{background:radial-gradient(circle at 14% 10%,#fff8e9,transparent 39%),linear-gradient(145deg,#e7dccb,#f8f4ec 55%,#e7ddcf)}
.login-page.kpi{background:radial-gradient(circle at 86% 8%,#405493,transparent 42%),linear-gradient(135deg,#0a1632,#192747 57%,#101c39)}
.login-page.social{background:radial-gradient(circle at 15% 14%,#daf5eb,transparent 43%),linear-gradient(145deg,#edf8f4,#d5e8e2 55%,#f7faf7)}
.login-shell{width:min(1080px,100%);min-height:630px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr);border-radius:28px;overflow:hidden;box-shadow:0 38px 100px #241b1930;animation:login-enter .65s cubic-bezier(.2,.8,.2,1) both}
.kpi .login-shell,.social .login-shell{animation:login-fade .45s ease-out both}
.login-story{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:42px 46px 32px;isolation:isolate}
.login-story::before{content:"";position:absolute;width:440px;height:440px;border:1px solid currentColor;border-radius:50%;right:-170px;top:-195px;opacity:.12;z-index:-1}
.login-story::after{content:"";position:absolute;width:290px;height:290px;border:1px solid currentColor;border-radius:50%;right:-84px;top:-116px;opacity:.15;z-index:-1}
.story-top{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.story-logo{width:47px;height:47px;object-fit:contain;filter:drop-shadow(0 2px 2px #18100d29)}
.story-mark{width:40px;height:40px;display:grid;place-items:center;border:1px solid currentColor;border-radius:13px;font-size:25px;font-weight:400;line-height:1}
.story-copy{position:relative;z-index:2}
.story-kicker{display:block;font-size:12px;font-weight:800;letter-spacing:.23em;text-transform:uppercase;margin-bottom:18px;opacity:.8}
.story-copy h2{font-family:Georgia,serif;font-weight:500;letter-spacing:-.035em;line-height:1.06;font-size:clamp(38px,4.5vw,58px);margin:0 0 19px}
.story-copy p{max-width:440px;margin:0;font-size:16px;line-height:1.7;opacity:.86}
.story-foot{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.66}
.login-panel{background:#fff;display:flex;flex-direction:column;justify-content:center;padding:52px clamp(28px,5vw,62px)}
.login-panel-inner{max-width:420px;width:100%;margin:auto}
.panel-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;margin-bottom:24px}
.panel-icon svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.panel-eyebrow{font-size:11px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;margin:0 0 8px}
.login-panel h1{font-family:Georgia,serif;font-size:34px;line-height:1.12;letter-spacing:-.035em;margin:0 0 12px}
.panel-subtitle{color:#6a6762;margin:0 0 31px;line-height:1.65;font-size:14px}
.login-alert{color:#923022;background:#fff1ee;border:1px solid #efc5bd;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.45;margin-bottom:20px}
.login-form label{display:block;font-size:13px;font-weight:700;margin:16px 0 8px}
.login-form input:not([type=hidden]){display:block;width:100%;height:48px;padding:0 14px;border:1px solid #d8d4ce;border-radius:10px;background:#fbfaf8;color:#26221e;font:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s,background .2s}
.login-form input:focus{outline:0;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
.login-submit{width:100%;height:50px;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:27px;border:0;border-radius:11px;background:var(--accent);color:#fff;font:700 15px Arial,sans-serif;cursor:pointer;box-shadow:0 10px 20px var(--button-shadow);transition:transform .2s,box-shadow .2s,filter .2s}
.login-submit:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 15px 27px var(--button-shadow)}
.login-submit:active{transform:translateY(0)}
.login-submit span{font-size:18px;font-weight:400}
.login-links{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:19px;font-size:12px;font-weight:700}
.login-links a{text-decoration:none;color:var(--accent)}.login-links a:hover{text-decoration:underline}
.login-back{display:inline-flex;align-items:center;gap:7px;margin-top:37px;color:#85817c;text-decoration:none;font-size:12px}.login-back:hover{color:var(--accent)}
.hr{--accent:#805b31;--accent-soft:#805b3122;--button-shadow:#805b3145}
.hr .login-story{background:linear-gradient(155deg,#e9d8ba,#d7b989 58%,#bc8e5c);color:#52361d}
.hr .panel-icon{background:#f8efe1;color:#805b31}.hr .panel-eyebrow{color:#936b39}
.hr .login-scene{position:relative;height:245px;margin:8px -24px 0;border-radius:20px;background:radial-gradient(circle at 51% 45%,#fff5d7a8,transparent 60%);overflow:hidden}
.hr .login-scene::before,.hr .login-scene::after{content:"";position:absolute;border:1px solid #79582d42;border-radius:50%;width:260px;height:260px;left:calc(50% - 130px);top:15px}
.hr .login-scene::after{width:330px;height:330px;left:calc(50% - 165px);top:-20px;opacity:.5}
.hr .mascot{position:absolute;bottom:0;left:50%;width:230px;height:210px;overflow:visible;filter:drop-shadow(0 14px 11px #43321d3f);animation:mascot-roam 4.2s ease-in-out infinite}
.hr .login-scene:hover .mascot{animation-duration:2s}
.hr .mascot-body{animation:mascot-bob .85s ease-in-out infinite}.hr .mascot-board{transform-origin:92px 121px;animation:wave-board 1.1s ease-in-out infinite}.hr .mascot-eye{transform-box:fill-box;transform-origin:center;animation:mascot-blink 4.6s infinite}.hr .mascot-feet{transform-origin:92px 106px;animation:mascot-step .85s ease-in-out infinite}
.hr .scene-spark{position:absolute;color:#fff8dc;font-size:22px;animation:spark-float 3s ease-in-out infinite}.hr .scene-spark.one{top:36px;left:18%}.hr .scene-spark.two{top:58px;right:17%;font-size:16px;animation-delay:-1.4s}
.kpi{--accent:#433eb6;--accent-soft:#544ee124;--button-shadow:#433eb645}
.kpi .login-story{background:linear-gradient(145deg,#162864,#263da3 55%,#3b2a89);color:#fff}
.kpi .panel-icon{background:#ededff;color:#433eb6}.kpi .panel-eyebrow{color:#514bbc}
.kpi-visual{position:relative;height:250px;max-width:480px;margin:12px 0 2px;perspective:900px}
.kpi-board{position:absolute;inset:14px 38px 12px 4px;padding:22px 24px;border:1px solid #ffffff6b;border-radius:19px;background:linear-gradient(135deg,#fdfdffef,#e5eaffec);color:#25296e;box-shadow:0 25px 45px #080d4757;transform:rotate(-5deg) rotateY(-8deg)}
.kpi-board-head{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.kpi-board-head span:last-child{color:#7774c3}.kpi-bars{height:114px;display:flex;align-items:end;gap:15px;padding:16px 4px 0;border-bottom:1px solid #bdc4e2}
.kpi-bars i{width:16%;height:var(--h);display:block;border-radius:8px 8px 0 0;background:linear-gradient(#978bff,#4b49c6);animation:kpi-grow .8s ease-out both;transform-origin:bottom;animation-delay:var(--d)}
.kpi-board-foot{display:flex;justify-content:space-between;align-items:center;margin-top:15px;font-size:12px;font-weight:800}.kpi-board-foot strong{font-size:24px;color:#4a47bf}
.kpi-score{position:absolute;right:3px;top:0;width:96px;height:96px;display:grid;place-items:center;border-radius:25px;background:linear-gradient(135deg,#a9f3d6,#5fc9a6);color:#17654c;font-size:29px;font-weight:800;box-shadow:0 16px 30px #09184a58;transform:rotate(9deg)}
.kpi-score small{display:block;font-size:10px;letter-spacing:.13em;margin-top:-21px}
.social{--accent:#0f705f;--accent-soft:#10897722;--button-shadow:#0f705f42}
.social .login-story{background:linear-gradient(145deg,#0d554f,#1b8170 56%,#095954);color:#f5fffb}
.social .panel-icon{background:#e2f4ee;color:#0f705f}.social .panel-eyebrow{color:#128371}
.social .login-panel h1{font-size:29px}
.social-visual{position:relative;height:270px;max-width:480px;margin:10px 0 -10px}
.social-card{position:absolute;left:0;top:30px;width:min(330px,82%);padding:18px;border:1px solid #ffffffab;border-radius:18px;background:#ffffffed;color:#284841;box-shadow:0 20px 36px #003d3570;transform:rotate(-3deg)}
.social-author{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700}.social-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#d6ae75;color:#382313;font-weight:800}.social-lines{display:grid;gap:8px;margin:16px 0}.social-lines i{height:8px;border-radius:9px;background:#dce9e3}.social-lines i:nth-child(2){width:78%}.social-lines i:nth-child(3){width:56%}.social-reactions{border-top:1px solid #dfe9e3;padding-top:10px;color:#168871;font-size:12px}
.chat-bubble{position:absolute;right:0;bottom:22px;width:235px;padding:14px 16px;border:1px solid #d9f4ec;border-radius:16px 16px 5px 16px;background:#edfff8;color:#145a4d;font-size:12px;line-height:1.5;box-shadow:0 17px 32px #003d3566;transform:rotate(2deg)}
.chat-bubble strong{display:block;margin-bottom:3px}.online-dot{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:#6cecaa;box-shadow:0 0 0 4px #6cecaa2c}
.social-orb{position:absolute;width:80px;height:80px;border:1px solid #ffffff55;border-radius:50%;right:20px;top:10px;animation:orb-float 18s cubic-bezier(.45,0,.55,1) infinite}
@keyframes login-enter{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes login-fade{from{opacity:0}to{opacity:1}}
@keyframes mascot-roam{0%,100%{transform:translateX(calc(-50% - 75px)) rotate(-7deg)}50%{transform:translateX(calc(-50% + 75px)) rotate(7deg)}}
@keyframes wave-board{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes mascot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mascot-step{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes mascot-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@keyframes spark-float{0%,100%{transform:translateY(0) scale(.85);opacity:.55}50%{transform:translateY(-11px) scale(1.15);opacity:1}}
@keyframes kpi-float{0%,100%{transform:translateY(0) rotate(-5deg) rotateY(-8deg)}50%{transform:translateY(-7px) rotate(-4.4deg) rotateY(-8deg)}}
@keyframes kpi-grow{from{transform:scaleY(.1)}to{transform:scaleY(1)}}
@keyframes kpi-score{0%,100%{transform:translateY(0) rotate(9deg)}50%{transform:translateY(-6px) rotate(8.5deg)}}
@keyframes social-card{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(-2.4deg)}}
@keyframes chat-pop{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}
@keyframes orb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(max-width:760px){body.login-page{padding:14px}.login-shell{grid-template-columns:1fr;max-width:500px;min-height:0}.login-story{padding:23px 28px 20px;min-height:245px}.story-top{font-size:11px}.story-copy h2{font-size:33px}.story-copy p,.story-foot{display:none}.story-kicker{margin-bottom:8px}.login-panel{padding:32px 28px}.hr .login-scene{position:absolute;right:0;bottom:0;width:200px;height:190px;margin:0;opacity:.92}.hr .mascot{width:150px;height:147px}.hr .login-story .story-copy{max-width:57%}.kpi-visual,.social-visual{position:absolute;right:10px;bottom:0;width:44%;height:160px;opacity:.8}.kpi-board{inset:12px 16px 9px 0;padding:12px}.kpi-board-head{font-size:7px}.kpi-bars{height:75px;gap:5px}.kpi-board-foot{font-size:8px}.kpi-board-foot strong{font-size:15px}.kpi-score{width:45px;height:45px;font-size:15px;border-radius:12px;right:0}.kpi-score small{display:none}.social-card{top:10px;padding:10px}.social-lines{margin:8px 0;gap:5px}.social-lines i{height:5px}.social-reactions{font-size:8px;padding-top:5px}.social-author{font-size:8px}.social-avatar{height:19px;width:19px}.chat-bubble{width:125px;padding:7px;font-size:8px;bottom:8px}.login-panel h1{font-size:30px}}
@media(max-width:400px){.login-story{min-height:213px}.story-copy h2{font-size:28px}.login-panel{padding:27px 23px}.hr .login-scene{width:160px;height:150px}.hr .mascot{width:120px;height:120px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.hr .mascot{animation-duration:4.2s!important}.hr .login-scene:hover .mascot{animation-duration:2s!important}.hr .mascot-board{animation-duration:1.1s!important}}