/* Login shares the dashboard palette, typography and panel treatment. */
.auth-overlay{isolation:isolate;overflow:auto;padding:clamp(20px,4vw,64px);background:radial-gradient(ellipse at 10% 10%,color-mix(in srgb,var(--green) 9%,transparent),transparent 60%),var(--bg,#f0f4f7)}
.auth-overlay::before{content:none}
.auth-shell{display:grid;grid-template-columns:1.08fr 1fr;width:min(1120px,100%);min-height:680px;overflow:hidden;border:1px solid var(--line);border-radius:30px;background:var(--c-panel,#fff);box-shadow:0 24px 80px #0000000c}
.auth-scene{position:relative;isolation:isolate;overflow:hidden;min-width:0;background:linear-gradient(145deg,color-mix(in srgb,var(--green) 15%,var(--c-panel,#fff)),color-mix(in srgb,var(--green) 5%,var(--bg,#f0f4f7)));display:flex;align-items:flex-end;padding:48px}
.auth-scene-rings{position:absolute;z-index:-1;inset:0;background:linear-gradient(132deg,transparent 0 35%,color-mix(in srgb,var(--green) 7%,transparent) 35% 48%,transparent 48% 64%,color-mix(in srgb,var(--green) 4%,transparent) 64% 65%,transparent 65%);pointer-events:none}
.auth-scene-archer{position:absolute;inset:28px 6% auto;width:88%;height:440px;object-fit:contain;mix-blend-mode:multiply;opacity:.8}
.auth-scene-copy{position:relative;z-index:1;max-width:360px}
.auth-scene-copy>span{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--green)}
.auth-scene-copy h2{margin:14px 0 12px;font-size:clamp(30px,3.5vw,45px);line-height:1.08;letter-spacing:-1.6px;color:var(--ink)}
.auth-scene-copy p{font-size:14px;line-height:1.6;color:var(--muted);max-width:280px}
.auth-overlay .auth-card{display:flex;flex-direction:column;justify-content:center;position:relative;width:100%;min-width:0;margin:0;padding:54px 48px;border:0;border-radius:0;background:var(--c-panel,#fff);box-shadow:none;text-align:left;backdrop-filter:none}
.auth-overlay .auth-card>img{width:100%;max-width:300px;margin:0 0 36px;object-fit:contain}
.auth-overlay .auth-card h1{margin:0;letter-spacing:-1px;font-size:32px;line-height:1.2;text-align:left}
.auth-overlay .auth-form{max-width:none;margin:28px 0 0;gap:18px}
.auth-overlay .auth-form label{text-align:left;font-size:12px;font-weight:600;color:var(--muted);gap:8px}
.auth-overlay .auth-form input{min-height:50px;padding:13px 15px;border-radius:12px;text-align:left;font-size:16px;letter-spacing:normal;background:var(--c-soft,var(--bg));border:1px solid var(--line);color:var(--ink)}
.auth-overlay .auth-form button{min-height:50px;border-radius:12px;font-size:15px}
.auth-overlay .auth-form .primary{background:var(--green);color:var(--c-buttonText,#fff);box-shadow:0 4px 14px color-mix(in srgb,var(--green) 15%,transparent)}
.auth-overlay .auth-forgot,.auth-overlay [data-reset-back]{background:transparent;color:var(--green);font-size:13px!important;min-height:44px!important}
.auth-overlay .auth-error{font-size:13px}
.auth-overlay .auth-form>p:not(.auth-error):not(.auth-reset-notice){font-size:14px;line-height:1.6;color:var(--muted)}
body.dark .auth-scene-archer{mix-blend-mode:screen;opacity:.35}
body.dark .auth-overlay .auth-reset-notice{color:#fbbf24}
@media(min-width:1600px){.auth-shell{min-height:740px}.auth-scene-archer{height:490px}}
@media(max-width:760px){.auth-overlay{padding:18px;align-items:start}.auth-shell{grid-template-columns:minmax(0,1fr);min-height:0;max-width:460px;border-radius:24px;margin:auto}.auth-scene{min-height:220px;padding:26px 28px;align-items:flex-end}.auth-scene-rings{position:absolute;z-index:-1;inset:0;background:linear-gradient(132deg,transparent 0 35%,color-mix(in srgb,var(--green) 7%,transparent) 35% 48%,transparent 48% 64%,color-mix(in srgb,var(--green) 4%,transparent) 64% 65%,transparent 65%);pointer-events:none}.auth-scene-archer{inset:8px 0 auto auto;width:55%;height:205px;opacity:.65}.auth-scene-copy{max-width:66%}.auth-scene-copy>span{font-size:8px;letter-spacing:.1em}.auth-scene-copy h2{font-size:28px;letter-spacing:-1px;margin:12px 0 8px}.auth-scene-copy p{font-size:11px;max-width:190px}.auth-overlay .auth-card{padding:30px 28px 24px}.auth-overlay .auth-card>img{max-width:250px;margin:0 auto 26px}.auth-overlay .auth-card h1{font-size:27px}.auth-overlay .auth-form{margin-top:24px;gap:16px}}
@media(max-width:380px){.auth-overlay{padding:10px}.auth-scene{padding:22px;min-height:200px}.auth-overlay .auth-card{padding:26px 22px}.auth-scene-copy h2{font-size:25px}}

/* Render the existing silhouette as a cutout rather than its source rectangle. */
.auth-scene-archer{visibility:hidden}
.auth-scene::after{content:"";position:absolute;inset:28px 6% auto;width:88%;height:440px;background:var(--green);mask:url("/archer-shadow.webp") center/contain no-repeat;mask-mode:luminance;opacity:.68;pointer-events:none}
body.dark .auth-scene::after{opacity:.65}
@media(min-width:1600px){.auth-scene::after{height:490px}}
@media(max-width:760px){.auth-scene::after{inset:8px 0 auto auto;width:55%;height:205px;opacity:.55}}

/* Arrow follows the same image coordinates as the archer at every size. */
.auth-scene::before{content:"";position:absolute;inset:28px 6% auto;width:88%;height:440px;background:var(--green);mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201199%201312%22%3E%3Cpath%20d%3D%22M491%20464%20L805%20464%22%20stroke%3D%22white%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:.68;pointer-events:none;z-index:1}
@media(min-width:1600px){.auth-scene::before{height:490px}}
@media(max-width:760px){.auth-scene::before{inset:8px 0 auto auto;width:55%;height:205px;opacity:.55}}

/* Mobile login: branded colour header flows into the form. */
@media(max-width:760px){
.auth-overlay{padding:0;background:var(--c-panel,#fff)}
.auth-shell{display:block;max-width:460px;width:100%;min-height:100dvh;margin:0 auto;border:0;border-radius:0;box-shadow:none;overflow:hidden}
.auth-scene{display:none}
.auth-overlay .auth-card{isolation:isolate;min-height:100dvh;justify-content:flex-start;padding:40px 28px max(32px,env(safe-area-inset-bottom));background:linear-gradient(to bottom,color-mix(in srgb,var(--green) 18%,var(--c-panel,#fff)) 0 172px,var(--c-panel,#fff) 172px 100%)}
.auth-overlay .auth-card::before{content:"";position:absolute;z-index:-1;top:142px;left:-20%;width:140%;height:64px;background:var(--c-panel,#fff);border-radius:50% 48% 0 0 / 65% 50% 0 0;transform:rotate(-3deg);pointer-events:none}
.auth-overlay .auth-card>img{position:relative;max-width:260px;width:100%;height:88px;object-fit:contain;margin:0 auto 84px}
.auth-overlay .auth-card h1{text-align:left;font-size:28px}
.auth-overlay .auth-form{margin-top:26px}
}
@media(max-width:380px){.auth-overlay .auth-card{padding-left:24px;padding-right:24px}.auth-overlay .auth-card>img{max-width:240px}}

/* Centre the mobile composition and give the brand more breathing room. */
@media(max-width:760px){
.auth-overlay .auth-card{padding-top:max(64px,calc((100dvh - 650px)/2));text-align:center;background:linear-gradient(to bottom,color-mix(in srgb,var(--green) 18%,var(--c-panel,#fff)) 0 max(225px,calc((100dvh - 650px)/2 + 161px)),var(--c-panel,#fff) max(225px,calc((100dvh - 650px)/2 + 161px)) 100%)}
.auth-overlay .auth-card::before{top:max(195px,calc((100dvh - 650px)/2 + 131px))}
.auth-overlay .auth-card>img{margin-bottom:112px}
.auth-overlay .auth-card h1{text-align:center}
.auth-overlay .auth-form{width:100%;max-width:360px;margin:28px auto 0}
.auth-overlay .auth-form label{text-align:center}
.auth-overlay .auth-form input{text-align:center}
.auth-overlay .auth-error{text-align:center}
}

/* Keep the heading clear of the curved header edge on mobile. */
@media(max-width:760px){body .auth-overlay .auth-card>img{margin-bottom:108px}.auth-overlay .auth-card h1{position:relative;z-index:1}}

/* Rose accents coordinate the mobile fields and controls with the header. */
@media(max-width:760px){
.auth-overlay{--auth-rose:#b83b56;--auth-rose-soft:#fcf3f5;--auth-rose-border:#e7cbd2}
body .auth-overlay .auth-form input{background:var(--auth-rose-soft);border-color:var(--auth-rose-border);color:#493039}
body .auth-overlay .auth-form label{color:#86616b}
body .auth-overlay .auth-form input:focus-visible{outline-color:var(--auth-rose);border-color:var(--auth-rose)}
body .auth-overlay .auth-form .primary{background:var(--auth-rose);color:#fff;box-shadow:0 4px 14px #b83b5626}
body .auth-overlay .auth-forgot,body .auth-overlay [data-reset-back]{color:var(--auth-rose)}
body .auth-overlay .auth-form button:focus-visible{outline-color:var(--auth-rose)}
body.dark .auth-overlay{--auth-rose:#d98094;--auth-rose-soft:#2b1e25;--auth-rose-border:#62404d}
body.dark .auth-overlay .auth-form input{color:#f5e7eb}
body.dark .auth-overlay .auth-form label{color:#d3a9b4}
body.dark .auth-overlay .auth-form .primary{color:#24151b}
}

@media(max-width:760px){body .auth-overlay .auth-form input,body.dark .auth-overlay .auth-form input{background:#fff;color:#493039}}

/* Restore the framed mobile login card. */
@media(max-width:760px){
.auth-overlay{padding:20px 16px;background:var(--bg,#f0f4f7);align-items:center}
.auth-shell{min-height:0;margin:auto;border:1px solid var(--line);border-radius:28px;box-shadow:0 18px 60px #0000000d}
.auth-overlay .auth-card{min-height:0;padding-bottom:36px}
}

/* Lift the mobile composition, keeping the email field near screen centre. */
@media(max-width:760px){
.auth-overlay{align-items:start;padding-top:max(20px,calc(50dvh - 340px))}
.auth-shell{margin:0 auto}
.auth-overlay .auth-card{padding-top:32px;background:linear-gradient(to bottom,color-mix(in srgb,var(--green) 18%,var(--c-panel,#fff)) 0 193px,var(--c-panel,#fff) 193px 100%)}
.auth-overlay .auth-card::before{top:163px}
body .auth-overlay .auth-card>img{margin-bottom:88px}
}

/* Airier mobile card, with a muted backdrop and rose light above. */
@media(max-width:760px){
.auth-overlay{padding-left:26px;padding-right:26px;background:radial-gradient(ellipse at 50% 0%,#d9a7b480,transparent 52%),#dfe4e9}
.auth-shell{width:100%;max-width:400px;border-color:#d0d9e1;box-shadow:0 24px 65px #2635441c}
.auth-overlay .auth-card{padding-left:32px;padding-right:32px}
.auth-overlay .auth-form{max-width:290px}
body .auth-overlay .auth-card>img{max-width:245px}
body.dark .auth-overlay{background:radial-gradient(ellipse at 50% 0%,#7d405b66,transparent 55%),#19212a}
}
@media(max-width:380px){.auth-overlay{padding-left:22px;padding-right:22px}.auth-overlay .auth-card{padding-left:26px;padding-right:26px}}

/* Adjust only the mobile logo visually; preserve all layout spacing. */
@media(max-width:760px){body .auth-overlay .auth-card>img{transform:translateY(18px) scale(1.1);transform-origin:center}}