/* CHG-2026-007 P4A: zodaccess auth pages (login / register / password reset), translated from the confirmed design
 * output/visualizations/zodaccess-sketch-study.html (CHG-007 §3.41/3.45, A2 "paper-refined": 840/48/460, 1000px narrow two-column, 760px single column, 820/620px height rules).
 * Loaded only when include/auth/head.tpl receives $za_auth_expressive; scope: body.za-auth-ui. password/token.tpl is untouched.
 * Business hooks (form/input ids and names, .fv-row, KT indicators, captcha wrappers, cap-widget) keep their markup; this file only styles them.
 */
body.za-auth-ui {
    --za-paper: #f7f6f3; --za-surface: #fff; --za-ink: #171717; --za-muted: #67635e; --za-line: #e9e6e1;
    --za-blue: #266eb0; --za-blue-hover: #205c93; --za-pink: #f7d1df;
    --za-auth-soft: #eaf2f9; --za-auth-soft-ink: #235f96; --za-auth-input: #fcfbf9; --za-auth-border: #8a8782; --za-auth-error: #a5443e;
    --za-auth-card-pad: 32px; --za-auth-form-gap: 18px; --za-auth-head-gap: 27px; --za-auth-section-gap: 24px; --za-auth-switch-pad: 20px; --za-auth-frame-height: 88px; --za-auth-layout-pad: 24px;
    margin: 0; background: var(--za-paper) !important; color: var(--za-ink);
    font: 400 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
html[data-bs-theme="dark"] body.za-auth-ui {
    --za-paper: #191919; --za-surface: #262626; --za-ink: #e8e6e1; --za-muted: #b3b3ac; --za-line: #414141; --za-blue-hover: #2c78bc; --za-pink: #594455;
    --za-auth-soft: #253440; --za-auth-soft-ink: #acd0ef; --za-auth-input: #191919; --za-auth-border: #777771; --za-auth-error: #e5a29b;
}
body.za-auth-ui .za-auth-page { display: flex; flex-direction: column; flex-shrink: 0; min-height: 100svh; padding: 0 44px 16px; }
body.za-auth-ui .za-auth-page h1, body.za-auth-ui .za-auth-page p { margin: 0; color: inherit; }
body.za-auth-ui .za-auth-page a { color: var(--za-auth-soft-ink); text-decoration: none; }
body.za-auth-ui .za-auth-page a:hover { text-decoration: underline; text-underline-offset: 4px; }
body.za-auth-ui .za-icon { width: 16px; height: 16px; flex-shrink: 0; }
/* Header stays at the top. Only the main layout shares spare vertical space with auto margins.
 * The page has a minimum height, not a fixed height: long forms grow the page and auto margins collapse to zero. */
/* header */
body.za-auth-ui .za-auth-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; height: var(--za-auth-frame-height); flex-shrink: 0; max-width: 1180px; margin: 0 auto; }
body.za-auth-ui .za-auth-logo { display: block; line-height: 0; }
body.za-auth-ui .za-auth-logo img { width: 155px; height: auto; display: block; }
body.za-auth-ui .za-auth-theme { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--za-muted); font: inherit; font-size: 13px; cursor: pointer; }
body.za-auth-ui .za-auth-theme:hover { background: var(--za-surface); }
body.za-auth-ui .za-auth-theme .za-icon { color: currentColor; }
/* layout: 840px, 48px gap, brand column centered, 460px form */
body.za-auth-ui .za-auth-layout { flex: none; width: 100%; max-width: 840px; margin: auto; padding-block: var(--za-auth-layout-pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: 48px; align-items: center; }
body.za-auth-ui .za-auth-story { min-width: 0; padding: 0; }
body.za-auth-ui .za-auth-quiet-brand { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
/* A2 cat-ear art: original JPEG, black lines on paper; dark = white lines via CSS only, no plate */
body.za-auth-ui .za-auth-refined-art { display: block; width: 224px; height: 224px; padding: 0; border: 0; border-radius: 0; background: var(--za-paper); box-shadow: none; transform: none; isolation: isolate; }
body.za-auth-ui .za-auth-refined-art img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: none; }
html[data-bs-theme="dark"] body.za-auth-ui .za-auth-refined-art { background: transparent; isolation: auto; }
html[data-bs-theme="dark"] body.za-auth-ui .za-auth-refined-art img { filter: grayscale(1) contrast(1.2) invert(1); mix-blend-mode: screen; }
body.za-auth-ui .za-auth-quiet-copy { width: 100%; margin: 0; font-family: inherit; font-size: 17px; font-weight: 400; line-height: 1.85; color: var(--za-ink); letter-spacing: 0; text-wrap: balance; min-height: 1.85em; }
/* card */
body.za-auth-ui .za-auth-card { min-width: 0; padding: var(--za-auth-card-pad); border: 1px solid var(--za-line); border-radius: 16px; background: var(--za-surface); }
body.za-auth-ui .za-auth-card-head { margin-bottom: var(--za-auth-head-gap); }
body.za-auth-ui .za-auth-card h1 { font-size: 26px; line-height: 1.4; font-weight: 500; letter-spacing: -.6px; margin-bottom: 7px; }
body.za-auth-ui .za-auth-card-head p { color: var(--za-muted); font-size: 13px; line-height: 1.75; }
/* form: keep .fv-row as the FormValidation row; design gap via grid */
body.za-auth-ui .za-auth-form { display: grid; gap: var(--za-auth-form-gap); }
body.za-auth-ui .za-auth-form .fv-row { margin: 0 !important; }
body.za-auth-ui .za-auth-field { display: grid; gap: 7px; min-width: 0; }
body.za-auth-ui .za-auth-field > label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 500; color: var(--za-ink); }
body.za-auth-ui .za-auth-field label small { color: var(--za-muted); font-weight: 400; font-size: 12px; }
body.za-auth-ui .za-auth-field .form-control { display: block; width: 100%; min-width: 0; height: 46px; min-height: 46px; padding: 10px 12px; border: 1px solid var(--za-auth-border); border-radius: 8px; color: var(--za-ink); background: var(--za-auth-input) !important; font-size: 16px; line-height: 1.5; box-shadow: none; }
body.za-auth-ui .za-auth-field .form-control::placeholder { color: var(--za-muted); opacity: .8; }
body.za-auth-ui .za-auth-field .form-control:focus { border-color: var(--za-auth-border); box-shadow: none; outline: 2px solid var(--za-blue); outline-offset: 2px; }
body.za-auth-ui .za-auth-field .form-control.is-invalid,
body.za-auth-ui .fv-plugins-bootstrap5-row-invalid .form-control { border-color: var(--za-auth-error); background-image: none; padding-right: 12px; }
body.za-auth-ui .za-auth-hint { color: var(--za-muted); font-size: 12px; line-height: 1.65; }
body.za-auth-ui .fv-plugins-message-container { color: var(--za-auth-error); font-size: 12px; line-height: 1.65; margin-top: 2px; }
body.za-auth-ui .za-auth-password { position: relative; }
body.za-auth-ui .za-auth-password .form-control { padding-right: 58px; }
body.za-auth-ui .za-auth-password .za-auth-toggle { position: absolute; right: 4px; top: 3px; bottom: 3px; padding: 0 8px; min-width: 44px; border: 0; border-radius: 5px; font: inherit; font-size: 12px; background: transparent; color: var(--za-muted); cursor: pointer; z-index: 2; }
/* KTPasswordMeter visibility control (register main password): same look as the design toggle; bundle sets it as .btn-icon */
body.za-auth-ui .za-auth-password .btn.btn-icon[data-kt-password-meter-control="visibility"] { position: absolute; right: 4px; top: 3px; bottom: 3px; transform: none; margin: 0; width: 44px; height: auto; border-radius: 5px; color: var(--za-muted); background: transparent; z-index: 2; }
body.za-auth-ui .za-auth-password .btn.btn-icon[data-kt-password-meter-control="visibility"] i { color: var(--za-muted); font-size: 18px; }
body.za-auth-ui .za-auth-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 3px 0 0; }
body.za-auth-ui .za-auth-strength .za-auth-strength-bar { height: 3px; margin: 0; border-radius: 2px; background: var(--za-line) !important; }
body.za-auth-ui .za-auth-strength .za-auth-strength-bar.active { background: var(--za-auth-soft-ink) !important; }
body.za-auth-ui .za-auth-mail-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
body.za-auth-ui .za-auth-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: -7px; }
body.za-auth-ui .za-auth-text-button { border: 0; background: none; color: var(--za-auth-soft-ink); font: inherit; font-size: 13px; padding: 3px 0; text-decoration: none; text-underline-offset: 4px; cursor: pointer; }
body.za-auth-ui .za-auth-text-button:hover { text-decoration: underline; }
/* buttons (KT .btn kept for indicator hooks; restyled) */
body.za-auth-ui .za-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--za-auth-border) !important; border-radius: 8px; background: var(--za-surface); color: var(--za-ink); font: inherit; font-size: 13px; line-height: 1.5; white-space: nowrap; cursor: pointer; text-decoration: none; }
body.za-auth-ui .za-button:hover { background: var(--za-paper) !important; color: var(--za-ink); text-decoration: none; }
body.za-auth-ui .za-button-primary { background: var(--za-blue) !important; color: #fff !important; border-color: var(--za-blue) !important; }
body.za-auth-ui .za-button-primary:hover { background: var(--za-blue-hover) !important; border-color: var(--za-blue-hover) !important; color: #fff !important; }
body.za-auth-ui .za-button:disabled, body.za-auth-ui .za-button[disabled] { opacity: .6; cursor: default; }
body.za-auth-ui .za-auth-submit { width: 100%; min-height: 46px !important; font-size: 14px !important; }
body.za-auth-ui .za-auth-mail-code .za-button { min-height: 46px; }
body.za-auth-ui .za-button .indicator-progress .spinner-border { width: 1rem; height: 1rem; }
body.za-auth-ui .za-auth-legal { color: var(--za-muted); font-size: 11px; text-align: center; line-height: 1.8; margin-top: -7px; }
body.za-auth-ui .za-auth-legal a { font-size: 11px; }
body.za-auth-ui .za-auth-other { display: grid; gap: 14px; margin-top: var(--za-auth-section-gap); }
body.za-auth-ui .za-auth-divider { display: flex; align-items: center; gap: 14px; color: var(--za-muted); font-size: 11px; }
body.za-auth-ui .za-auth-divider::before, body.za-auth-ui .za-auth-divider::after { content: ''; height: 1px; background: var(--za-line); flex: 1; }
body.za-auth-ui .za-auth-other .za-button img { height: 15px; width: auto; }
body.za-auth-ui .za-auth-switch { border-top: 1px solid var(--za-line); margin-top: var(--za-auth-section-gap); padding-top: var(--za-auth-switch-pad); text-align: center; color: var(--za-muted); font-size: 13px; }
body.za-auth-ui .za-auth-switch a { margin-left: 5px; }
body.za-auth-ui .za-auth-footer { flex-shrink: 0; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; max-width: 840px; margin: 0 auto; border-top: 1px solid var(--za-line); padding-top: 18px; color: var(--za-muted); font-size: 11px; }
body.za-auth-ui .za-auth-footer div { display: flex; flex-wrap: wrap; gap: 15px; }
body.za-auth-ui .za-auth-footer a { font-size: 11px; color: var(--za-muted); }
/* existing captcha blocks inside the card: align to the input look (markup untouched) */
body.za-auth-ui .cap-widget-wrap cap-widget {
    --cap-font: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    --cap-background: var(--za-auth-input); --cap-color: var(--za-ink); --cap-border-color: var(--za-auth-border); --cap-border-radius: 8px;
    --cap-widget-height: 46px; --cap-widget-padding: 10px 12px; --cap-checkbox-background: var(--za-auth-input); --cap-checkbox-border: 1px solid var(--za-auth-border);
    --cap-spinner-color: var(--za-blue); --cap-spinner-background-color: var(--za-line); --cap-focus-ring: var(--za-blue); --cap-troubleshoot-color: var(--za-muted);
}
body.za-auth-ui .captcha-wrap, body.za-auth-ui .gregwar-captcha-wrap, body.za-auth-ui .slider-captcha-trigger { background: var(--za-auth-input); border: 1px solid var(--za-auth-border); border-radius: 8px; box-shadow: none; }
body.za-auth-ui .captcha-wrap:hover, body.za-auth-ui .gregwar-captcha-wrap:hover, body.za-auth-ui .slider-captcha-trigger:hover { background: var(--za-auth-input); border-color: var(--za-auth-border); }
body.za-auth-ui .captcha-fallback { background: var(--za-paper); border-color: var(--za-line); }
body.za-auth-ui .captcha-fallback__title { color: var(--za-ink); }
body.za-auth-ui .captcha-fallback__desc { color: var(--za-muted); }
body.za-auth-ui .captcha-fallback__btn { min-height: 44px; }
body.za-auth-ui .slider-captcha-trigger .slider-text { color: var(--za-ink); }
body.za-auth-ui .gregwar-captcha-row .gregwar-captcha-refresh { color: var(--za-auth-soft-ink); }
/* Telegram modal on this page: keep Bootstrap modal, restyle surface */
body.za-auth-ui .modal-content { background: var(--za-surface); color: var(--za-ink); border: 1px solid var(--za-line); border-radius: 16px; }
body.za-auth-ui .modal-content .modal-title { color: var(--za-ink); }
body.za-auth-ui .modal-content .btn { min-height: 44px; border-radius: 8px; }
body.za-auth-ui .modal-content .text-muted { color: var(--za-muted) !important; }
/* focus */
body.za-auth-ui .za-auth-page button:focus-visible, body.za-auth-ui .za-auth-page a:focus-visible { outline: 2px solid var(--za-blue); outline-offset: 3px; }
/* ---- width rules (design: ≤1000px narrower two-column, ≤760px single column) ---- */
@media (max-width: 1000px) {
    body.za-auth-ui .za-auth-page { padding-inline: 28px; }
    body.za-auth-ui .za-auth-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); gap: 32px; }
    body.za-auth-ui .za-auth-refined-art { width: 200px; height: 200px; }
}
@media (max-width: 760px) {
    /* single column; compact spacing comes from the same variables as the short-height rules (header/card/layout stay variable-driven) */
    body.za-auth-ui { --za-auth-card-pad: 22px; --za-auth-form-gap: 12px; --za-auth-head-gap: 16px; --za-auth-section-gap: 16px; --za-auth-switch-pad: 12px; --za-auth-frame-height: 60px; --za-auth-layout-pad: 10px; }
    body.za-auth-ui .za-auth-page { padding: 0 16px 24px; }
    body.za-auth-ui .za-auth-header { max-width: 460px; }
    body.za-auth-ui .za-auth-logo img { width: 140px; }
    body.za-auth-ui .za-auth-layout { display: block; max-width: 460px; }
    body.za-auth-ui .za-auth-story { display: none; }
    body.za-auth-ui .za-auth-card h1 { font-size: 24px; }
    body.za-auth-ui .za-auth-field { gap: 5px; }
    body.za-auth-ui .za-auth-other { gap: 10px; }
    body.za-auth-ui .za-auth-footer { max-width: 460px; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 12px; }
}
@media (max-width: 420px) {
    body.za-auth-ui .za-auth-mail-code .za-button { padding-inline: 9px; font-size: 12px; }
}
/* ---- height rules (design: ≤820px and ≤620px); after the width rules so short screens win. Inputs stay 46px / 16px. ---- */
@media (max-height: 820px) {
    body.za-auth-ui { --za-auth-card-pad: 22px; --za-auth-form-gap: 12px; --za-auth-head-gap: 16px; --za-auth-section-gap: 16px; --za-auth-switch-pad: 12px; --za-auth-frame-height: 60px; --za-auth-layout-pad: 10px; }
    body.za-auth-ui .za-auth-page { padding-bottom: 12px; }
    body.za-auth-ui .za-auth-field { gap: 5px; }
    body.za-auth-ui .za-auth-other { gap: 10px; }
    body.za-auth-ui .za-auth-footer { padding-top: 12px; }
    body.za-auth-ui .za-auth-refined-art { width: clamp(156px, 28vh, 200px); height: clamp(156px, 28vh, 200px); }
    body.za-auth-ui .za-auth-quiet-brand { gap: 16px; }
}
@media (max-height: 620px) {
    body.za-auth-ui { --za-auth-card-pad: 18px; --za-auth-form-gap: 10px; --za-auth-frame-height: 52px; --za-auth-layout-pad: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    body.za-auth-ui * { transition: none !important; animation-duration: .01ms !important; }
}

/* Large-screen A2 (CHG-007 §3.45): actual viewport replaces the prototype container.
 * Only sufficiently wide/tall windows grow. Form logic and ordinary/compact sizes remain unchanged. */
@media (min-width:1800px) and (min-height:900px) {
    body.za-auth-ui {
        --za-auth-wide-step: clamp(0px, calc((100vw - 1800px) / 7), 100px);
        --za-auth-wide-width: calc(840px + var(--za-auth-wide-step) * 2.8);
        --za-auth-wide-form: calc(460px + var(--za-auth-wide-step) * .6);
        --za-auth-wide-art: calc(224px + var(--za-auth-wide-step) * .96);
        --za-auth-wide-control: calc(46px + var(--za-auth-wide-step) * .06);
        --za-auth-wide-text: calc(13px + var(--za-auth-wide-step) * .02);
        --za-auth-card-pad: calc(32px + var(--za-auth-wide-step) * .08);
        --za-auth-form-gap: calc(18px + var(--za-auth-wide-step) * .04);
        --za-auth-head-gap: calc(27px + var(--za-auth-wide-step) * .05);
        --za-auth-section-gap: calc(24px + var(--za-auth-wide-step) * .04);
        --za-auth-switch-pad: calc(20px + var(--za-auth-wide-step) * .04);
        --za-auth-frame-height: calc(88px + var(--za-auth-wide-step) * .16);
        --za-auth-layout-pad: calc(24px + var(--za-auth-wide-step) * .04);
    }
    body.za-auth-ui .za-auth-layout { max-width: var(--za-auth-wide-width); grid-template-columns: minmax(0, 1fr) var(--za-auth-wide-form); gap: calc(48px + var(--za-auth-wide-step) * .32); }
    body.za-auth-ui .za-auth-header { max-width: calc(1180px + var(--za-auth-wide-step) * 2.2); }
    body.za-auth-ui .za-auth-logo img { width: calc(155px + var(--za-auth-wide-step) * .25); }
    body.za-auth-ui .za-auth-theme { font-size: var(--za-auth-wide-text); }
    body.za-auth-ui .za-auth-refined-art { width: var(--za-auth-wide-art); height: var(--za-auth-wide-art); }
    body.za-auth-ui .za-auth-quiet-brand { gap: calc(22px + var(--za-auth-wide-step) * .06); }
    body.za-auth-ui .za-auth-quiet-copy { font-size: calc(17px + var(--za-auth-wide-step) * .03); }
    body.za-auth-ui .za-auth-card h1 { font-size: calc(26px + var(--za-auth-wide-step) * .04); }
    body.za-auth-ui :is(.za-auth-card-head p, .za-auth-field > label, .za-auth-text-button, .za-auth-switch) { font-size: var(--za-auth-wide-text); }
    body.za-auth-ui .za-auth-field .form-control { height: var(--za-auth-wide-control); min-height: var(--za-auth-wide-control); font-size: calc(16px + var(--za-auth-wide-step) * .02); }
    body.za-auth-ui .za-button, body.za-auth-ui .za-auth-mail-code .za-button { min-height: var(--za-auth-wide-control); font-size: var(--za-auth-wide-text); }
    body.za-auth-ui .za-auth-submit { min-height: var(--za-auth-wide-control) !important; font-size: calc(14px + var(--za-auth-wide-step) * .02) !important; }
    body.za-auth-ui :is(.za-auth-hint, .fv-plugins-message-container, .za-auth-password .za-auth-toggle) { font-size: calc(12px + var(--za-auth-wide-step) * .02); }
    body.za-auth-ui :is(.za-auth-legal, .za-auth-legal a, .za-auth-divider) { font-size: calc(11px + var(--za-auth-wide-step) * .02); }
    body.za-auth-ui .za-auth-field label small { font-size: calc(12px + var(--za-auth-wide-step) * .01); }
    body.za-auth-ui .za-auth-footer { max-width: var(--za-auth-wide-width); }
    body.za-auth-ui .za-auth-footer, body.za-auth-ui .za-auth-footer a { font-size: calc(11px + var(--za-auth-wide-step) * .02); }
    body.za-auth-ui .cap-widget-wrap cap-widget { --cap-widget-height: var(--za-auth-wide-control); }
    body.za-auth-ui .slider-captcha-trigger { min-height: var(--za-auth-wide-control); }
}