/* Login presentation only. Form hooks and validation remain owned by HTValidate. */
body.login-page-body {
    margin: 0;
    padding: 12px;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--sld-background);
    font-family: var(--sld-font-body);
}
.login-page-body *, .login-page-body *::before, .login-page-body *::after { box-sizing: border-box; }
.auth-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    min-height: calc(100vh - 24px);
    min-height: calc(100svh - 24px);
    width: 100%;
    color: var(--sld-text);
    font-size: 16px;
    line-height: 1.5;
}
.auth-card {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 40px;
    border: 1px solid var(--sld-line);
    border-radius: 24px;
    background: var(--sld-surface);
}
.auth-card__inner { width: 100%; max-width: 400px; padding: 32px 0; }
.auth-card__brand { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto 20px; border-radius: 16px; }
.auth-card__logo { display: block; width: auto; max-width: 200px; height: 56px; object-fit: contain; }
.auth-card__title, .auth-forgot__title { margin: 0; color: var(--sld-ink); font-size: 30px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; text-align: center; }
.auth-card__subtitle, .auth-forgot__subtitle { margin: 8px 0 32px; color: var(--sld-muted); font-size: 15px; line-height: 1.6; text-align: center; }
.auth-card form { margin: 0; padding: 0; }
.auth-card .form-box { position: relative; margin-bottom: 12px; }
.auth-card .form-box > label { position: absolute; top: 8px; left: 14px; z-index: 2; margin: 0; color: var(--sld-muted); font-size: 10px; line-height: 14px; font-weight: 400; cursor: text; }
.auth-card .form-box > label span { color: var(--sld-danger); }
.auth-card .form-group { position: relative; display: flex; align-items: stretch; }
.auth-card .c-form-border { min-height: 60px; width: 100%; border: 1px solid var(--sld-line); border-radius: 12px; background: var(--sld-surface); transition: border-color 150ms, box-shadow 150ms; }
.auth-card .c-form-border:hover { border-color: var(--sld-faint); }
.auth-card .c-form-border:focus-within { border-color: var(--sld-brand-light); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sld-brand-light) 18%, transparent); }
.auth-card .form-icon-left { display: none; }
.auth-card .c_input { flex: 1 1 auto; min-width: 0; width: 100%; height: 58px; padding: 23px 14px 8px; border: 0; border-radius: 12px; background: transparent; outline: none; color: var(--sld-ink); font: inherit; font-size: 15px; line-height: 1.4; }
.auth-card .c_input::placeholder { color: var(--sld-faint); opacity: 1; }
.auth-card input[name="password"] { padding-right: 64px; letter-spacing: 0.05em; }
.auth-card .togglePassword { position: absolute; z-index: 3; inset: 0 0 0 auto; display: grid; place-items: center; width: 56px; padding: 0; border: 0; border-left: 1px solid var(--sld-line); border-radius: 0 11px 11px 0; background: var(--sld-background); color: var(--sld-muted); font-size: 18px; font-family: FontAwesome; cursor: pointer; }
.auth-card .togglePassword:hover { background: var(--sld-soft); color: var(--sld-brand); }
/* Retain the plugin's outside-field error space and error nodes. */
.auth-card .c-form-border.is-error { margin-bottom: 30px; border-color: var(--sld-danger); background: var(--sld-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sld-danger) 14%, transparent); }
.auth-card .c_error { color: var(--sld-danger); font-size: 12px; }
.auth-checkbox-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 20px; font-size: 13px; }
.auth-checkbox-label { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--sld-text); cursor: pointer; }
.auth-checkbox-label input { position: absolute; width: 20px; height: 20px; opacity: 0; margin: 0; }
.custom-checkbox { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1px solid var(--sld-line); border-radius: 6px; background: var(--sld-surface); }
.custom-checkbox i { display: none; color: var(--sld-surface); font-size: 11px; }
.auth-checkbox-label input:checked ~ .custom-checkbox { border-color: var(--sld-brand); background: var(--sld-brand); }
.auth-checkbox-label input:checked ~ .custom-checkbox i { display: block; }
.auth-checkbox-label input:focus-visible ~ .custom-checkbox { outline: 2px solid var(--sld-brand-light); outline-offset: 3px; }
.auth-forgot-link { color: var(--sld-ink); text-decoration: none; font-size: 13px; font-weight: 500; }
.auth-forgot-link:hover { color: var(--sld-brand); text-decoration: underline; }
.auth-btn-primary {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 52px; margin: 12px 0 0; padding: 12px 20px;
    border: 2px solid transparent; border-radius: 999px;
    color: var(--sld-surface); font: inherit; font-size: 15px; font-weight: 500; text-transform: none;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--sld-icon-light) 38%, transparent), transparent 50%, color-mix(in srgb, var(--sld-accent) 28%, transparent)) padding-box,
        linear-gradient(90deg, var(--sld-brand-dark), var(--sld-brand), var(--sld-brand-dark)) padding-box,
        linear-gradient(180deg, var(--sld-icon-light), var(--sld-brand) 50%, var(--sld-accent)) border-box;
    cursor: pointer; transition: filter 150ms, opacity 150ms;
}
.auth-btn-primary:hover { filter: brightness(1.08); }
.auth-btn-primary:active { filter: brightness(0.95); }
.auth-btn-primary:disabled { cursor: progress; opacity: 0.7; }
.auth-wrapper a:focus-visible, .auth-wrapper button:focus-visible { outline: 2px solid var(--sld-brand-light); outline-offset: 3px; }
.auth-back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px; color: var(--sld-muted); font-size: 14px; text-decoration: none; }
.auth-back-link:hover { color: var(--sld-brand); }
.auth-hero {
    position: relative; isolation: isolate; grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 0; overflow: hidden; padding: 64px 48px; border-radius: 24px;
    background: radial-gradient(60% 45% at 78% 15%, color-mix(in srgb, var(--sld-brand-light) 65%, transparent), transparent), linear-gradient(165deg, var(--sld-brand-light), var(--sld-brand) 40%, var(--sld-brand-dark));
    color: var(--sld-surface); text-align: center;
}
.auth-hero::before { content: ""; position: absolute; inset: 0 0 auto 30%; height: 40%; z-index: -1; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sld-surface) 12%, transparent) 0 1px, transparent 1px 56px); mask-image: linear-gradient(200deg, var(--sld-black), transparent 70%); pointer-events: none; }
.auth-hero__illustration { display: block; width: min(100%, 560px); height: auto; max-height: 52vh; object-fit: contain; margin: 0 0 40px; }
.auth-hero__title { margin: 0 0 12px; color: var(--sld-surface); font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 500; }
.auth-hero__footer-text { max-width: 460px; margin: 0; color: color-mix(in srgb, var(--sld-surface) 82%, transparent); font-size: 16px; line-height: 1.6; }
.auth-hero__footer-text strong { color: var(--sld-surface); font-weight: 500; }
@media (max-width: 1024px) {
    .auth-wrapper { grid-template-columns: minmax(0, 1fr); }
    .auth-hero { display: none; }
    .auth-card { padding: 32px; }
}
@media (max-width: 640px) {
    body.login-page-body { padding: 8px; }
    .auth-wrapper { min-height: calc(100svh - 16px); font-size: 14px; }
    .auth-card { padding: 24px 20px; border-radius: 16px; }
    .auth-card__inner { padding: 24px 0; }
    .auth-card__title, .auth-forgot__title { font-size: 24px; }
    .auth-card__subtitle, .auth-forgot__subtitle { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-wrapper *, .auth-wrapper *::before, .auth-wrapper *::after { transition: none; }
}