/* Login — two-column authentication shell. Loaded last so it can win ties against modern.css
   using ordinary two-class specificity instead of !important. */

.login-page{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100dvh;
    padding:var(--space-lg) var(--space-md);
    background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--color-primary-subtle) 22%,var(--color-surface)) 0%,var(--color-surface) 55%);
}

.login-shell{
    display:grid;
    grid-template-columns:minmax(0,42fr) minmax(0,58fr);
    width:min(100%,72.5rem);
    min-height:44rem;
    background:var(--color-surface);
    border:1px solid var(--color-border-subtle);
    border-radius:1.5rem;
    box-shadow:var(--shadow-ambient);
    overflow:hidden;
}

/* Brand panel */

.login-brand-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:3rem 2.75rem 5rem;
    background:linear-gradient(165deg,color-mix(in srgb,var(--color-primary-subtle) 32%,var(--color-surface)),var(--color-surface) 70%);
    overflow:hidden;
}

.login-brand-panel__content{
    position:relative;
    z-index:1;
    display:grid;
    gap:var(--space-lg);
}

.login-brand{
    display:inline-flex;
    align-items:center;
    gap:.75rem;
    width:fit-content;
}

.login-brand__mark{
    display:grid;
    place-items:center;
    width:2.75rem;
    height:2.75rem;
    flex:0 0 auto;
    color:var(--color-on-primary);
    background:var(--color-primary);
    border-radius:999px;
}

.login-brand__text{display:grid;gap:.1rem;line-height:1.1}
.login-brand__text strong{font-family:var(--font-editorial);font-size:1.375rem;font-weight:600;color:var(--color-text)}
.login-brand__text small{font-size:.8125rem;font-weight:600;color:var(--color-primary)}

.login-brand-panel__headline{
    margin:0;
    font-family:var(--font-editorial);
    font-size:1.75rem;
    font-weight:600;
    line-height:1.3;
    color:var(--color-text);
}

.login-brand-panel__lead{
    margin:0;
    font-size:.9375rem;
    line-height:1.6;
    color:var(--color-text-muted);
    max-width:22rem;
}

.login-brand-panel__decoration{
    position:absolute;
    left:1rem;
    bottom:-2rem;
    width:14rem;
    opacity:1;
    pointer-events:none;
}

.login-brand-panel__flower{width:100%;height:auto;display:block}

/* Login panel */

.login-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:3rem 2.5rem;
    background:var(--color-surface);
}

.login-panel__content{
    width:100%;
    max-width:27.5rem;
    text-align:center;
}

.login-panel__brand-mobile{display:none}

.login-panel__eyebrow{
    display:block;
    margin-bottom:.375rem;
    color:var(--color-primary);
    font-size:.6875rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.login-panel__title{
    margin:0 0 var(--space-sm);
    font-family:var(--font-editorial);
    font-size:2rem;
    font-weight:600;
    line-height:1.25;
    color:var(--color-text);
}

.login-panel__lead{
    margin:0 auto;
    max-width:24rem;
    color:var(--color-text-muted);
    font-size:.9375rem;
    line-height:1.6;
}

/* Form */

.login-form{
    display:grid;
    gap:var(--space-gutter);
    margin-top:var(--space-xl);
    text-align:left;
}

.login-form__error{
    display:flex;
    align-items:flex-start;
    gap:var(--space-sm);
    margin:0;
    padding:.75rem var(--space-md);
    color:var(--color-on-error-container);
    background:var(--color-error-container);
    border-radius:var(--radius-control);
    font-size:.875rem;
    text-align:left;
}
.login-form__error svg{flex:0 0 auto;margin-top:.15rem}

.login-field{display:grid;gap:.5rem}

.login-input{position:relative;display:flex;align-items:center}

.login-input__icon{
    position:absolute;
    left:1rem;
    color:var(--color-text-muted);
    pointer-events:none;
}

.login-input__control{
    width:100%;
    min-height:3.375rem;
    padding:0 1rem 0 2.75rem;
    border-radius:.75rem;
    font-size:.9375rem;
}
.login-input__control--password{padding-right:2.75rem}

.login-input__toggle{
    position:absolute;
    right:.5rem;
    display:grid;
    place-items:center;
    width:2.25rem;
    height:2.25rem;
    padding:0;
    color:var(--color-text-muted);
    background:transparent;
    border:0;
    border-radius:.5rem;
    cursor:pointer;
    transition:color var(--transition-fast),background-color var(--transition-fast);
}
.login-input__toggle:hover{color:var(--color-text);background:var(--color-surface-low)}
.login-input__toggle:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.login-input__toggle:disabled{cursor:not-allowed;opacity:.6}

.login-form__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-sm);
    margin-top:-.25rem;
}

.login-remember{padding:0;min-height:0;background:transparent}
.login-remember:hover{background:transparent}
.login-remember .app-choice__content strong{font-weight:500;font-size:.875rem}

.login-form__forgot{
    padding:0;
    color:var(--color-primary);
    background:transparent;
    border:0;
    font-size:.8125rem;
    font-weight:600;
    cursor:pointer;
}
.login-form__forgot:hover{text-decoration:underline;text-underline-offset:.2em}
.login-form__forgot:disabled{cursor:not-allowed;color:var(--color-text-muted)}

.login-page .app-button.login-submit{
    min-height:3.375rem;
    color:var(--color-on-primary);
    background:var(--color-primary);
    border-color:var(--color-primary);
    font-weight:600;
}
.login-page .app-button.login-submit:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.login-page .app-button.login-submit:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.login-page .app-button.login-submit:disabled{
    color:var(--color-text-muted);
    background:var(--color-surface-container);
    border-color:var(--color-surface-dim);
}

.login-panel__footer{
    margin:var(--space-xl) 0 0;
    color:var(--color-text-muted);
    font-size:.75rem;
    text-align:center;
}

@media (max-width:1023px){
    .login-shell{min-height:auto}
    .login-brand-panel{padding:2.5rem 2rem 4rem}
    .login-panel{padding:2.5rem 2rem}
}

@media (max-width:767px){
    .login-page{padding:var(--space-md);align-items:flex-start}
    .login-shell{grid-template-columns:1fr;border-radius:1.25rem;width:100%}
    .login-brand-panel{display:none}
    .login-panel{padding:2rem 1.25rem}
    .login-panel__brand-mobile{
        display:flex;
        justify-content:center;
        margin-bottom:var(--space-lg);
    }
    .login-form{margin-top:var(--space-lg)}
}