/* Login presentation is scoped here so dashboard reports keep their own styles. */
body.login-visible{height:100vh;height:100dvh;height:var(--login-viewport,100dvh);overflow:hidden}
#login{display:grid;height:100%;min-height:0;background:#f5f8f7;color:#142a35;color-scheme:light;line-height:normal}
#login .quick-aside{position:relative;isolation:isolate;overflow:hidden}
#login .quick-aside::before,#login .quick-aside::after{position:absolute;pointer-events:none}
#login .quick-form{display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:-14px 0 42px #16384708}
#login .form{width:min(100%,360px);margin:0}
#login .brand{display:flex;align-items:center}
#login .brand img{display:block;object-fit:contain}
#login .copy p{margin:0;color:#687c84;text-wrap:pretty}
#login .field label{display:block;font-weight:700;color:#38505a}
#login .field input{width:100%;padding:0 14px;border:1px solid #d4dfe2;border-radius:9px;background:#fbfcfc;font-family:inherit;color:#142a35;line-height:normal;box-shadow:inset 0 0 0 1000px #fbfcfc;-webkit-text-fill-color:#142a35;caret-color:#142a35}
#login .field input:is(:autofill,:-webkit-autofill){background-color:#fbfcfc!important;box-shadow:inset 0 0 0 1000px #fbfcfc!important;-webkit-text-fill-color:#142a35!important;color:#142a35!important;caret-color:#142a35;filter:none}
#login .field input::placeholder{color:#758289;-webkit-text-fill-color:#758289;opacity:1}
#login .field input:focus{outline:2px solid #0f7d8f33;outline-offset:0;border-color:#0f7d8f}
#login .submit{display:block;width:100%;padding:0 14px;border:0;border-radius:9px;background:#0f7d8f;color:#fff;font-family:inherit;font-weight:700;line-height:normal;box-shadow:0 10px 20px #0f7d8f2d;cursor:pointer}
#login .submit:hover{background:#0b7182}
#login .submit:focus-visible{outline:2px solid #0f7d8f;outline-offset:3px}
#login .hint{color:#8a999e!important;border-top:1px solid #edf0ef}
#login .login-err{margin:10px 0 0;font-size:12px;line-height:1.6;color:#b23b34}
#login .login-err:not([hidden]) + .hint{display:none}

#login .quick-aside{display:flex;align-items:center;justify-content:center;padding:32px clamp(22px,4vw,64px);background:#edf3f1;isolation:isolate}
#login .quick-aside::before{content:"";inset:auto;width:640px;height:640px;top:-340px;right:-340px;border:1px solid #c5d9d3;border-radius:50%;background:none;box-shadow:0 0 0 50px #dfeae640;z-index:-1}
#login .quick-aside::after{content:"";inset:auto;width:280px;height:280px;bottom:-190px;left:-100px;border:1px solid #c5d9d3;border-radius:50%;background:none;z-index:-1}
#login .park-gallery{width:100%;max-width:960px;min-width:0;container-type:inline-size;container-name:park-photo}
#login .photo-frame{position:relative;aspect-ratio:1.46;overflow:hidden;border-radius:26px 76px 26px 26px;box-shadow:0 24px 45px -25px #143b463f;background:#dbe6e3}
#login .photo-frame>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .9s ease-in-out}
#login .photo-frame>img.is-active{opacity:1}
#login .photo-frame::after{content:"";position:absolute;inset:0;border:1px solid #ffffff40;border-radius:inherit;pointer-events:none;z-index:1}
#login .gallery-scene{position:relative;padding:44px 0 78px}
#login .gallery-caption{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px;min-height:36px}
#login .location-label{display:flex;align-items:center;gap:8px;color:#355f63}
#login .location-label svg{width:19px;height:19px;fill:none;stroke:#2d7f82;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
#login .gallery-caption h2{font-size:15px;font-weight:500;margin:0;line-height:1.5;color:#355f63}
#login .quick-form .brand{gap:16px;margin-bottom:28px}
#login .quick-form .brand img{width:88px;height:104px;object-fit:contain;padding:0;background:transparent;border-radius:0;flex-shrink:0}
#login .quick-form .brand b{font-size:14px;line-height:1.9}
#login .analytics-decoration{position:absolute;inset:0;pointer-events:none;color:#21404a}
#login .stat-float{position:absolute;box-sizing:border-box;padding:11px 12px;background:#fffffff7;border:1px solid #fff;border-radius:14px;box-shadow:0 15px 30px -12px #153e4845,0 3px 8px #153e4810;min-width:0;pointer-events:auto;transform:rotate(var(--card-angle));transform-origin:center;transition:transform .3s cubic-bezier(.22,.68,.25,1.2),box-shadow .3s,border-color .3s;z-index:2;cursor:default}
#login .stat-growth{width:168px;left:-12px;top:0;--card-angle:-4deg}
#login .stat-composition{width:148px;right:-12px;bottom:30px;--card-angle:4deg}
#login .stat-monthly{width:156px;left:10px;bottom:-5px;--card-angle:-2.5deg}
#login .stat-float:is(:hover,:focus-visible){transform:translateY(-7px) rotate(0deg) scale(1.035);box-shadow:0 23px 40px -14px #153e4870,0 5px 12px #153e481c;border-color:#9fceca;z-index:3;outline:none}
#login .stat-float:focus-visible{outline:2px solid #268f94;outline-offset:3px}
#login .stat-float:is(:hover,:focus-visible) .line-trace{stroke-dasharray:1;animation:login-trace-chart .7s ease both}
#login .stat-bars i{transform-origin:bottom;transition:filter .3s}
#login .stat-float:is(:hover,:focus-visible) .stat-bars i{animation:login-bar-pulse .55s ease both;animation-delay:calc(var(--bar-order,0)*45ms);filter:saturate(1.35)}
#login .stat-bars i:nth-child(2){--bar-order:1}
#login .stat-bars i:nth-child(3){--bar-order:2}
#login .stat-bars i:nth-child(4){--bar-order:3}
#login .stat-bars i:nth-child(5){--bar-order:4}
#login .stat-bars i:nth-child(6){--bar-order:5}
@keyframes login-trace-chart{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes login-bar-pulse{0%{transform:scaleY(.75)}65%{transform:scaleY(1.07)}100%{transform:scaleY(1)}}
#login .stat-float h3{font-size:10px;font-weight:700;line-height:1.6;margin:0;white-space:nowrap}
#login .stat-topline{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:5px}
#login .stat-badge{font-size:7px;padding:2px 5px;border-radius:4px;background:#edf6f4;color:#46827a;white-space:nowrap}
#login .stat-value{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
#login .stat-value strong{font-size:22px;line-height:1.15;color:#17424c;font-weight:700}
#login .stat-value span{font-size:8px;color:#69968b}
#login .stat-trend{display:block;width:100%;height:40px;overflow:visible}
#login .stat-scale{display:flex;justify-content:space-between;direction:rtl;margin-top:4px;font-size:7px;color:#8a9e9f}
#login .stat-donut-row{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px}
#login .stat-donut{transition:transform .55s ease;flex:0 0 60px;aspect-ratio:1;border-radius:50%;background:conic-gradient(#258e92 0% 44%,#fff 44% 46%,#79aeda 46% 77%,#fff 77% 79%,#ddbd7e 79% 98%,#fff 98%);display:grid;place-items:center;transform:rotate(-30deg)}
#login .stat-donut>span{transition:transform .55s ease;width:44px;height:44px;border-radius:50%;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(30deg);font-size:7px;color:#82949a}
#login .stat-float:is(:hover,:focus-visible) .stat-donut{transform:rotate(0deg)}
#login .stat-float:is(:hover,:focus-visible) .stat-donut>span{transform:rotate(0deg)}
#login .stat-donut b{font-size:16px;font-weight:700;line-height:1.1;color:#21404a}
#login .stat-legend{display:grid;gap:5px;font-size:8px;color:#68808a}
#login .stat-legend span{display:flex;align-items:center;gap:4px;white-space:nowrap}
#login .stat-legend i{width:4px;height:4px;border-radius:2px;background:var(--chart-color);display:inline-block}
#login .stat-bars{display:flex;direction:ltr;align-items:flex-end;justify-content:space-between;gap:6px;height:62px;margin-top:11px;padding:0 2px;border-bottom:1px solid #e6eeed;background:repeating-linear-gradient(to top,transparent 0px,transparent 16px,#eaf0ef 16px,#eaf0ef 17px)}
#login .stat-bars i{width:16px;height:var(--bar-height);background:#afd4d2;border-radius:3px 3px 0 0}
#login .stat-bars i:nth-child(2n){background:#6db4b2}
#login .stat-bars i:last-child{background:#167f88}
@media(max-width:1050px) and (min-width:851px){
#login .quick-aside{padding:24px}
#login .photo-frame{border-radius:22px 60px 22px 22px}
}
@media(min-width:1100px) and (min-height:680px){
#login .park-gallery{max-width:min(960px,calc((100svh - 310px)*1.46))}
}
@media(max-width:850px){
#login .quick-aside{min-height:0;padding:24px clamp(18px,5vw,40px)}
#login .park-gallery{max-width:650px}
#login .photo-frame{border-radius:22px 64px 22px 22px}
}
@container park-photo (max-width:450px){
#login .gallery-scene{padding:62px 0 90px}
#login .stat-growth{width:144px;left:-6px;top:0}
#login .stat-composition{width:128px;right:-6px;bottom:39px}
#login .stat-monthly{width:137px;left:4px;bottom:0}
#login .stat-float{padding:9px}
#login .stat-float h3{font-size:9px}
#login .stat-badge{font-size:6px}
#login .stat-value>span{display:none}
#login .stat-value strong{font-size:17px}
#login .stat-scale{font-size:6px}
#login .stat-donut-row{gap:6px}
#login .stat-donut{flex-basis:46px}
#login .stat-donut>span{width:34px;height:34px}
#login .stat-donut b{font-size:14px}
#login .stat-legend{font-size:7px}
#login .stat-bars{height:43px;gap:5px}
#login .stat-trend{height:29px}
#login .gallery-caption h2{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
#login .photo-frame>img,#login .stat-float,#login .stat-donut,#login .stat-donut>span,#login .stat-bars i{transition:none}
#login .stat-float:is(:hover,:focus-visible){transform:rotate(0deg)}
#login .stat-float:is(:hover,:focus-visible) .line-trace,#login .stat-float:is(:hover,:focus-visible) .stat-bars i{animation:none}
}

#login{height:100%;min-height:0;grid-template-columns:minmax(0,1fr) clamp(330px,35vw,440px);grid-template-rows:minmax(0,1fr)}
#login .quick-aside{min-height:0;min-width:0;padding:16px clamp(20px,2.4vw,36px);container-type:size;container-name:login-art}
#login .park-gallery{width:min(100%,max(180px,calc((100cqh - 136px)*1.46)));max-width:960px;container-name:park-photo}
#login .gallery-scene{padding:32px 0 58px}
#login .photo-frame{aspect-ratio:1.46}
#login .gallery-caption{margin-top:8px;min-height:30px}
#login .stat-growth{width:clamp(156px,32cqw,236px)}
#login .stat-monthly{width:clamp(142px,29cqw,210px)}
#login .stat-composition{width:clamp(124px,25cqw,178px)}
#login .quick-form{min-width:0;min-height:0;padding:20px clamp(24px,3.4vw,48px) 56px;container-type:size;container-name:login-form;align-items:center}
#login .quick-form .form{width:100%;max-width:360px;min-width:0}
#login .quick-form .brand{justify-content:center;margin-bottom:clamp(24px,4cqh,36px)}
#login .quick-form .brand img{height:clamp(88px,19cqh,128px);width:auto;max-width:116px}
#login .quick-form .brand b{font-size:13px;line-height:1.8}
#login .quick-form .brand span{font-size:10px}
#login .quick-form .copy .tag{font-size:10px;padding:4px 8px}
#login .quick-form .copy h1{font-size:clamp(23px,4.5cqh,30px);line-height:1.4;margin:8px 0}
#login .quick-form .copy p{font-size:12px;line-height:1.7}
#login .quick-form .fields{margin-top:clamp(22px,4cqh,32px)}
#login .quick-form .field{margin-bottom:clamp(20px,3.5cqh,28px)}
#login .quick-form .field label{font-size:11px;line-height:1.5;margin-bottom:5px}
#login .quick-form .field input{height:46px;font-size:14px;min-width:0}
#login .quick-form .submit{height:46px;margin-top:0;font-size:13px}
#login .quick-form .hint{font-size:10px!important;line-height:1.6;margin:clamp(10px,2.5cqh,18px) 0 0!important;padding-top:clamp(8px,2cqh,14px)}



/* Phone/tablet portrait: the form keeps its readable, touch-sized controls. */
@media(max-width:700px) and (orientation:portrait){
  #login{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,min(34dvh,calc(100% - 392px))) minmax(0,1fr)}
  #login .quick-form{container-type:normal;align-items:flex-start;padding:clamp(16px,4dvh,34px) max(22px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-bottom));box-shadow:0 -12px 36px #173e4606}
  #login .quick-form .form{max-width:390px}
  #login .quick-form .brand{gap:12px;margin-bottom:16px}
  #login .quick-form .brand img{height:70px;width:auto}
  #login .quick-form .brand b{font-size:12px;line-height:1.6}
  #login .quick-form .brand span{font-size:9px}
  #login .quick-form .copy .tag{display:none}
  #login .quick-form .copy h1{font-size:22px;line-height:1.4;margin:0 0 4px}
  #login .quick-form .copy p{font-size:11px;line-height:1.65}
  #login .quick-form .fields{margin-top:18px}
  #login .quick-form .field{margin-bottom:16px}
  #login .quick-form .field label{font-size:11px;margin-bottom:4px;line-height:1.4}
  #login .quick-form .field input{height:44px;font-size:16px}
  #login .quick-form .submit{height:44px;font-size:13px}
  #login .quick-form .hint{font-size:9px!important;margin:9px 0 0!important;padding-top:8px;line-height:1.5}
  #login .quick-aside{padding:8px 16px;align-items:center}
  #login .park-gallery{width:100%;height:100%;max-width:480px;container-type:size;container-name:mobile-art}
  #login .gallery-scene{height:calc(100% - 28px);padding:10px 0 16px;max-height:330px;margin:auto}
  #login .photo-carousel{height:100%;width:min(92%,calc((100cqh - 54px)*1.46));min-width:100px;max-width:100%;margin:auto}
  #login .photo-frame{height:100%;width:100%;aspect-ratio:auto;border-radius:18px 44px 18px 18px}
  #login .gallery-caption{height:28px;min-height:0;margin:0}
  #login .gallery-caption h2{font-size:11px}
  #login .location-label{gap:5px}
  #login .location-label svg{width:14px;height:14px}
  #login .stat-float{padding:7px 8px;border-radius:10px;box-shadow:0 10px 20px -9px #153e483b}
  #login .stat-growth{width:124px;top:0;left:2px;--card-angle:-3deg}
  #login .stat-composition{width:96px;right:0;bottom:24px;--card-angle:3deg}
  #login .stat-monthly{width:110px;left:9px;bottom:0;--card-angle:-2deg}
  #login .stat-float h3{font-size:8px;line-height:1.5}
  #login .stat-topline{margin-bottom:4px}
  #login .stat-badge,#login .stat-scale,#login .stat-value>span,#login .stat-legend{display:none}
  #login .stat-value{margin-bottom:1px}
  #login .stat-value strong{font-size:14px}
  #login .stat-trend{height:22px}
  #login .stat-donut-row{margin-top:4px}
  #login .stat-donut{flex-basis:34px}
  #login .stat-donut>span{width:25px;height:25px;font-size:6px}
  #login .stat-donut b{font-size:12px}
  #login .stat-bars{height:28px;margin-top:4px;gap:4px}
  #login .stat-bars i{width:9px;border-radius:2px 2px 0 0}
}

/* Compact windows and phone landscape. */
@container mobile-art (max-height:160px){
  #login .stat-float{padding:5px;border-radius:8px}
  #login .stat-float h3{font-size:7px}
  #login .stat-topline{margin-bottom:2px}
  #login .stat-value{margin:0}
  #login .stat-value strong{font-size:12px}
  #login .stat-trend{height:15px}
  #login .stat-bars{height:18px;margin-top:2px}
  #login .stat-donut-row{margin-top:2px}
  #login .stat-donut{flex-basis:28px}
  #login .stat-donut>span{width:20px;height:20px;font-size:5px}
  #login .stat-donut b{font-size:10px}
  #login .stat-growth{width:91px}
  #login .stat-composition{width:72px}
  #login .stat-monthly{width:82px;left:8px}
}

@media(max-height:600px) and (min-width:701px), (max-height:500px) and (orientation:landscape){
  #login{grid-template-columns:minmax(0,1fr) clamp(300px,45vw,420px)}
  #login .quick-form{padding:16px 24px 48px}
  #login .quick-form .brand{margin-bottom:30px;gap:10px}
  #login .quick-form .brand img{height:82px;width:auto}
  #login .quick-form .brand b{font-size:11px}
  #login .quick-form .brand span{font-size:9px}
  #login .quick-form .copy .tag{display:none}
  #login .quick-form .copy h1{font-size:20px;margin:0 0 3px}
  #login .quick-form .copy p{font-size:10px;line-height:1.6}
  #login .quick-form .fields{margin-top:22px}
  #login .quick-form .field{margin-bottom:20px}
  #login .quick-form .field label{font-size:10px;line-height:1.4;margin-bottom:3px}
  #login .quick-form .field input{height:44px;font-size:16px}
  #login .quick-form .submit{height:44px}
  #login .quick-form .hint{font-size:8px!important;line-height:1.4;padding-top:6px;margin:6px 0 0!important}
  #login .quick-aside{padding:12px 18px}
  #login .park-gallery{width:min(100%,max(150px,calc((100cqh - 94px)*1.46)))}
  #login .gallery-scene{padding:26px 0 32px}
  #login .stat-float{padding:10px}
  #login .stat-growth{width:188px;left:-4px}
  #login .stat-composition{width:138px;right:-4px;bottom:16px}
  #login .stat-monthly{width:168px;left:4px;bottom:0}
  #login .stat-scale,#login .stat-badge,#login .stat-legend,#login .stat-value>span{display:none}
  #login .stat-float h3{font-size:10px}
  #login .stat-value strong{font-size:20px}
  #login .stat-trend{height:40px}
  #login .stat-bars{height:46px;margin-top:5px}
  #login .stat-donut-row{margin-top:5px}
  #login .stat-donut{flex-basis:48px}
  #login .stat-donut>span{width:35px;height:35px;font-size:6px}
  #login .stat-donut b{font-size:12px}
  #login .gallery-caption{min-height:28px;margin-top:4px}
  #login .gallery-caption h2{font-size:11px}
}

@media(max-height:420px) and (orientation:landscape){
  #login .quick-form{padding:8px 24px}
  #login .quick-form .brand{margin-bottom:10px}
  #login .quick-form .fields{margin-top:12px}
  #login .quick-form .field{margin-bottom:12px}
  #login .quick-form .brand img{height:50px}
  #login .stat-growth{width:132px}
  #login .stat-monthly{width:114px}
  #login .stat-composition{width:96px}
  #login .stat-float{padding:7px}
  #login .stat-trend{height:24px}
  #login .stat-bars{height:28px}
  #login .stat-donut{flex-basis:32px}
  #login .stat-donut>span{width:24px;height:24px}
}

@media(max-width:700px) and (max-height:640px) and (orientation:portrait){
  #login .quick-form{padding-top:12px}
  #login{grid-template-rows:minmax(0,min(34dvh,calc(100% - 370px))) minmax(0,1fr)}
  #login .quick-form .brand{margin-bottom:12px}
  #login .quick-form .brand img{height:64px}
  #login .quick-form .fields{margin-top:16px}
  #login .quick-form .field{margin-bottom:14px}
}

/* Keep fields reachable when the on-screen keyboard reduces usable height. */
body.login-visible.keyboard-open{--preview-bar:0px;grid-template-rows:minmax(0,1fr)}
body.login-visible.keyboard-open #login .quick-aside{display:none}
body.login-visible.keyboard-open #login{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
body.login-visible.keyboard-open #login .quick-form{container-type:normal;overflow-y:auto;overscroll-behavior:contain;align-items:flex-start;padding:12px 22px;scroll-padding-block:12px}
body.login-visible.keyboard-open #login .quick-form .form{margin:auto;flex-shrink:0}
body.login-visible.keyboard-open #login .quick-form .brand,body.login-visible.keyboard-open #login .quick-form .copy,body.login-visible.keyboard-open #login .quick-form .hint{display:none}
body.login-visible.keyboard-open #login .quick-form .fields{margin-top:0}
body.login-visible.keyboard-open #login .quick-form input{font-size:16px}

@media(prefers-reduced-motion:reduce){#login *{scroll-behavior:auto}}