/* Public pages use a small standalone stylesheet and normal document scrolling. */
html { min-height:100%; scroll-padding-block:16px; }
.login-page {
    --login-ink:var(--public-surface-ink); --login-muted:var(--public-surface-muted);
    --login-line:color-mix(in srgb,var(--public-surface) 55%,var(--public-surface-ink)); --login-field:var(--public-surface);
    margin:0; min-width:0; min-height:100vh; min-height:100svh;
    display:flex; flex-direction:column; color:var(--public-ink);
    background:var(--public-backdrop);
    font-family:Inter,Arial,sans-serif; line-height:1.5; -webkit-text-size-adjust:100%;
}
.login-page *, .login-page *::before, .login-page *::after { box-sizing:border-box; }
.login-page [hidden] { display:none!important; }
.login-page.login-keyboard-open { padding-bottom:50vh; }
.login-page button,.login-page input { font:inherit; }
.login-page button,.login-page a { -webkit-tap-highlight-color:transparent; }
.login-page a { color:inherit; }
.login-container { width:min(1280px,calc(100% - 48px)); margin-inline:auto; }
.login-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding-block:20px; flex-shrink:0; border-bottom:1px solid var(--public-line-subtle); }
.login-public-home .login-header { justify-content:space-between; }
.login-brand { display:flex; align-items:center; gap:12px; min-width:0; color:var(--public-ink); text-decoration:none; }
.login-brand img { flex:0 0 44px; width:44px; height:44px; border-radius:clamp(4px,calc(var(--public-radius) * .6),16px); object-fit:contain; background:white; box-shadow:0 4px 16px #00000020; }
.login-brand>span { min-width:0; }
.login-brand strong { display:block; font-size:15px; font-weight:700; overflow-wrap:anywhere; }
.login-brand small { display:block; margin-top:2px; color:var(--public-muted); font-size:11px; overflow-wrap:anywhere; }
.login-page .login-jump { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid var(--public-line); border-radius:clamp(8px,calc(var(--public-radius) / 2),14px); background:var(--public-surface); color:var(--public-surface-ink); font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
.login-page .login-jump:hover { border-color:var(--public-surface-accent); color:var(--public-surface-accent); }
.login-main { flex:1 0 auto; width:100%; min-width:0; }
.login-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); grid-template-areas:'overview form'; align-items:center; gap:clamp(24px,5vw,64px); padding-block:clamp(20px,4vh,48px); }
.login-hero { grid-area:overview; min-width:0; padding:20px 12px; color:var(--public-ink); }
.login-eyebrow { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:7px 11px; margin:0 0 20px; border:1px solid var(--public-line); border-radius:999px; color:var(--public-accent-text); font-size:11px; font-weight:600; overflow-wrap:anywhere; }
.login-eyebrow>span { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,var(--public-accent) 5%,transparent); }
.login-hero h1 { margin:0; font-size:clamp(29px,3vw,43px); line-height:1.2; font-weight:700; text-wrap:balance; overflow-wrap:anywhere; }
.login-description { max-width:540px; margin:16px 0 0; color:var(--public-muted); font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.login-illustration { display:block; width:100%; max-width:540px; max-height:340px; object-fit:contain; height:auto; margin:12px auto; }
.login-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; border-top:1px solid var(--public-line-subtle); padding-top:20px; }
.login-features>div { display:flex; align-items:center; min-width:0; gap:9px; font-size:11px; line-height:1.6; color:var(--public-muted); }
.login-features strong { font-weight:600; color:var(--public-ink); }
.login-feature-icon { width:32px; height:36px; flex:0 0 32px; display:grid; place-items:center; border:1px solid var(--public-line); border-radius:clamp(4px,calc(var(--public-radius) / 2),14px); color:var(--public-accent-text); font-size:16px; }
.login-form-area { grid-area:form; width:100%; max-width:470px; min-width:0; justify-self:center; align-self:center; }
.login-card { position:relative; width:100%; padding:clamp(24px,2.5vw,36px); border:1px solid var(--public-line); border-radius:calc(var(--public-radius) * 1.2); background:var(--public-card); color:var(--login-ink); box-shadow:0 24px 60px #00000026,inset 0 1px 0 color-mix(in srgb,var(--public-surface-ink) 4%,transparent); }
.login-card::before { content:''; position:absolute; pointer-events:none; top:-1px; left:16%; right:16%; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--public-accent) 67%,transparent),transparent); }
.login-card-heading { margin-bottom:24px; }
.login-welcome { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:var(--login-muted); }
.login-card-heading h2 { margin:10px 0 8px; font-size:clamp(24px,2vw,29px); line-height:1.25; font-weight:700; color:var(--login-ink); overflow-wrap:anywhere; }
.login-card-heading h2>span { color:var(--public-surface-accent); }
.login-card-heading p { margin:0; color:var(--login-muted); font-size:12px; line-height:1.7; }
#login-form { margin:0; scroll-margin-block:16px; }
.login-field { margin-bottom:18px; }
.login-field>label { display:block; margin-bottom:7px; color:var(--login-ink); font-size:12px; font-weight:600; }
.login-input { display:flex; align-items:center; position:relative; width:100%; min-width:0; border:1px solid var(--login-line); border-radius:clamp(8px,calc(var(--public-radius) * .55),16px); background:var(--login-field); }
.login-input:focus-within { border-color:var(--public-surface-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--public-surface-accent) 10%,transparent); }
.login-input>i { position:absolute; left:14px; pointer-events:none; color:var(--login-muted); font-size:16px; }
#login-form .login-input>input { width:100%; min-width:0; min-height:50px; padding:12px 14px 12px 43px; border:0; border-radius:inherit; background:transparent; color:var(--login-ink); caret-color:var(--login-ink); font-size:16px; line-height:24px; outline:none; scroll-margin-block:20px; }
#login-form .login-input>input::placeholder { color:var(--login-muted); opacity:1; }
#login-form .login-input>input[aria-invalid='true'] { outline:2px solid var(--public-surface-accent); outline-offset:-2px; }
#login-form .login-input-password>input { padding-right:50px; }
.login-password-toggle { position:absolute; display:grid; place-items:center; right:3px; width:44px; height:44px; padding:0; border:0; border-radius:clamp(4px,calc(var(--public-radius) * .4),12px); background:transparent; color:var(--login-muted); cursor:pointer; }
.login-password-toggle:hover { color:var(--login-ink); background:var(--public-surface-raised); }
.login-caps-lock { margin:6px 0 0; color:var(--login-ink); font-size:12px; }
.login-form-options { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 12px; }
.login-remember { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--login-ink); font-size:12px; cursor:pointer; }
.login-remember input[type='checkbox'] { width:16px; height:16px; flex:0 0 16px; margin:0; accent-color:var(--public-accent); }
.login-page .login-form-options>a { display:inline-flex; align-items:center; min-height:44px; color:var(--public-surface-accent); font-size:12px; font-weight:600; text-decoration:none; }
.login-form-options>a:hover { text-decoration:underline; }
.login-remember-hint { margin:2px 0 18px; color:var(--login-muted); font-size:11px; line-height:1.65; overflow-wrap:anywhere; }
.login-submit { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:50px; padding:12px 16px; border:1px solid transparent; border-radius:clamp(8px,calc(var(--public-radius) * .55),16px); background:var(--public-accent); color:var(--public-on-accent); font-size:14px; font-weight:700; cursor:pointer; scroll-margin-block:20px; }
.login-submit:hover { background:var(--public-accent-hover); }
.login-submit:disabled { cursor:wait; opacity:.75; }
.login-support { display:flex; align-items:center; gap:11px; margin-top:20px; padding-top:18px; border-top:1px solid var(--login-line); }
.login-support-icon { display:grid; place-items:center; width:34px; height:38px; flex:0 0 34px; border-radius:clamp(4px,calc(var(--public-radius) / 2),14px); color:var(--public-surface-accent); font-size:18px; }
.login-support p { margin:0; color:var(--login-muted); font-size:11px; line-height:1.7; }
.login-support strong { font-weight:500; }
.login-platform-note { display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 4px 0; color:var(--public-muted); font-size:11px; line-height:1.5; }
.login-notice { display:flex; align-items:flex-start; gap:9px; padding:12px; margin-bottom:16px; border:1px solid; border-radius:clamp(8px,calc(var(--public-radius) / 2),14px); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.login-notice>i { flex:0 0 15px; }
.login-notice-success { color:#14715a; border-color:#c0e8dc; background:#edfaf5; }
.login-notice-error { color:#a72e41; border-color:#f1c9d0; background:#fff2f4; }
.login-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; padding-block:18px; padding-bottom:max(18px,env(safe-area-inset-bottom)); font-size:11px; color:var(--public-muted); overflow-wrap:anywhere; }
.login-page a:focus-visible,.login-page button:focus-visible,.login-remember input:focus-visible { outline:3px solid var(--public-accent-text); outline-offset:4px; }
.login-card a:focus-visible,.login-card button:focus-visible,.login-remember input:focus-visible,.login-page .login-jump:focus-visible { outline-color:var(--public-surface-accent); }
.login-page .ui-skip-link { position:fixed; top:8px; left:8px; z-index:100; transform:translateY(-160%); padding:10px 14px; border-radius:clamp(4px,calc(var(--public-radius) * .4),12px); background:var(--public-accent); color:var(--public-on-accent); }
.login-page .ui-skip-link:focus { transform:translateY(0); }
html.dark .login-page { background:var(--public-backdrop); }
/* Short desktop windows keep the working controls compact, with page scrolling for overflow. */
@media (min-width:961px) and (max-height:800px) {
    .login-header { padding-block:12px; }
    .login-layout { padding-block:12px; align-items:start; }
    .login-hero { padding:12px; }
    .login-illustration { max-width:360px; margin-block:4px; }
    .login-card { padding:22px 26px; border-radius:var(--public-radius); }
    .login-card-heading { margin-bottom:14px; }
    .login-card-heading h2 { margin-block:6px; font-size:25px; }
    .login-field { margin-bottom:12px; }
    .login-remember-hint { margin-bottom:12px; }
    .login-support { margin-top:14px; padding-top:12px; }
    .login-platform-note { margin-top:10px; }
    .login-footer { padding-block:10px; }
}
@media (max-width:960px) {
    .login-container { width:min(680px,calc(100% - 32px)); }
    .login-header { padding-block:14px; }
    .login-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:'form' 'overview'; gap:28px; padding-block:6px 24px; }
    .login-form-area { max-width:500px; }
    .login-hero { padding:18px 8px; }
    .login-hero h1 { font-size:30px; }
    .login-illustration { max-width:380px; }
    .login-footer { justify-content:center; text-align:center; }
}
@media (max-width:600px) {
    .login-container { width:calc(100% - 24px); }
    .login-header { padding-block:12px; gap:8px; }
    .login-brand { gap:8px; }
    .login-brand img { width:36px; height:36px; flex-basis:36px; }
    .login-brand strong { font-size:13px; }
    .login-brand small { font-size:10px; }
    .login-page .login-jump { min-height:44px; padding:8px 10px; font-size:12px; }
    .login-card { padding:22px 18px 18px; border-radius:var(--public-radius); }
    .login-card-heading { margin-bottom:18px; }
    .login-field { margin-bottom:14px; }
    .login-card-heading h2 { font-size:25px; }
    .login-support { margin-top:16px; padding-top:14px; }
    .login-platform-note { display:none; }
    .login-page:not(.login-public-home) .login-hero { display:none; }
    .login-features>div { flex-direction:column; align-items:flex-start; gap:6px; }
    .login-illustration { max-width:340px; }
}
@media (max-height:500px) and (max-width:960px) {
    .login-header { padding-block:6px; }
    .login-card { padding:16px 20px; }
    .login-card-heading { margin-bottom:12px; }
    .login-card-heading h2 { font-size:23px; margin-block:4px; }
    .login-field { margin-bottom:10px; }
    .login-remember-hint { margin-bottom:12px; }
}
@media(prefers-reduced-motion:reduce) { .login-page * { scroll-behavior:auto!important; transition:none!important; } }
@media(forced-colors:active) { .login-input,.login-submit,.login-password-toggle,.login-notice { border:1px solid ButtonText; } }
