body.contract-page { margin: 0; background: #f3f6fa; color: #203347; font: 14px/1.6 "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.contract-page *, .contract-page *::before, .contract-page *::after { box-sizing: border-box; }
.contract-page a { text-decoration: none; }
.contract-page a:focus-visible, .contract-page button:focus-visible, .contract-page summary:focus-visible { outline: 3px solid #2677b9; outline-offset: 4px; }
.contract-width { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.contract-skip { position: absolute; top: -100px; left: 16px; z-index: 1100; padding: 10px 16px; background: #fff; }
.contract-skip:focus { top: 12px; }
.contract-official { background: #b8223f; color: #fff; font-size: 10px; letter-spacing: 1.5px; padding: 7px 0; }
.contract-official span { float: right; letter-spacing: .3px; opacity: .9; }
.contract-header { background: #fff; border-bottom: 1px solid #e1e7ed; }
.contract-header > div { display: flex; justify-content: space-between; align-items: center; min-height: 88px; gap: 20px; }
.contract-header img { width: 172px; height: auto; }
.back-home { color: #526577; font-size: 12px; font-weight: 600; }
.back-home i { margin-right: 7px; }
.back-home:hover { color: #b8223f; }
.contract-breadcrumb { display: flex; align-items: center; gap: 12px; padding: 22px 0 18px; font-size: 11px; color: #6b7b8a; }
.contract-breadcrumb a { color: #526577; }
.contract-breadcrumb > span[aria-hidden] { color: #b9c4ce; }
.contract-intro { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-bottom: 25px; }
.contract-eyebrow { font-size: 9px; font-weight: 750; letter-spacing: 1.5px; color: #b8223f; }
.contract-intro h1 { color: #203347; font-size: 32px; line-height: 1.25; letter-spacing: -.9px; font-weight: 700; margin: 9px 0 10px; }
.contract-intro h1 span { color: #65778a; font-weight: 400; }
.contract-intro p { margin: 0; color: #617486; font-size: 13px; }
.contract-pill { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 8px 13px; background: #fff; border: 1px solid #dce5ed; border-radius: 6px; color: #48637b; font-size: 11px; }
.contract-pill i { color: #b8223f; }
.contract-layout { display: grid; grid-template-columns: 350px minmax(0, 1fr); align-items: start; gap: 23px; }
.contract-panel { border: 1px solid #dfe6ed; border-radius: 11px; background: #fff; }
.contract-login { padding: 27px 26px 18px; border-top: 3px solid #b8223f; box-shadow: 0 5px 20px #20334705; }
.login-intro { display: flex; align-items: center; gap: 13px; margin-bottom: 25px; }
.login-symbol { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: #fff0f3; color: #b8223f; font-size: 21px; }
.contract-page h2 { margin: 0; font-size: 19px; line-height: 1.4; color: #203347; font-weight: 700; letter-spacing: -.3px; }
.login-intro p { font-size: 11px; line-height: 1.6; margin: 5px 0 0; color: #6b7b8a; }
.contract-field { margin-bottom: 18px; }
.contract-field label { display: block; font-size: 12px; font-weight: 650; color: #334b60; margin-bottom: 7px; }
.input-shell { display: flex; align-items: center; gap: 11px; padding: 0 13px; border: 1px solid #d5dfe8; border-radius: 7px; background: #fbfcfe; }
.input-shell:focus-within { border-color: #b8223f; box-shadow: 0 0 0 3px #b8223f0d; }
.input-shell > i { width: 14px; color: #8494a4; font-size: 14px; text-align: center; }
.input-shell input { width: 100%; min-width: 0; height: 43px; border: 0; background: transparent; outline: none; color: #203347; font: inherit; font-size: 13px; box-shadow: none; }
.input-shell input::placeholder { color: #8593a1; }
.input-shell > button { display: grid; place-items: center; background: transparent; border: 0; color: #6a7c8c; padding: 10px 0 10px 6px; cursor: pointer; }
.password-help { text-align: right; margin: -7px 0 20px; }
.password-help a { color: #9e2540; font-size: 11px; font-weight: 600; }
.password-help a:hover, .contract-register a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contract-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 60px; border: 1px solid #b8223f; border-radius: 7px; background: #b8223f; color: #fff; padding: 11px 15px; font-size: 13px; font-weight: 650; cursor: pointer; }
.contract-submit:hover { background: #9c1c36; }
.contract-admin { margin: 13px 0 0; color: #697c8d; font-size: 10px; }
.contract-admin summary { cursor: pointer; }
.contract-admin button { width: 100%; margin-top: 8px; background: #fff8e9; color: #805510; border: 1px solid #eddaa9; border-radius: 5px; padding: 8px; font-size: 10px; }
.contract-register { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid #e8edf2; margin-top: 23px; padding-top: 18px; font-size: 11px; color: #6b7d8d; }
.contract-register a { color: #b8223f; font-weight: 700; }
.contract-register i { margin-left: 5px; }
.login-footnote { display: flex; gap: 7px; align-items: baseline; color: #7a8a98; font-size: 10px; line-height: 1.6; margin: 17px 0 0; }
.login-footnote i { color: #4d8a7a; }
.contract-information { display: grid; gap: 20px; min-width: 0; }
.contract-notice { padding: 22px 25px; background: #fffcf4; border-color: #eddfbc; }
.information-heading { display: flex; gap: 13px; align-items: center; margin-bottom: 16px; }
.notice-symbol { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: #fff0c7; color: #926014; }
.contract-notice .contract-eyebrow { color: #946518; }
.contract-notice h2 { font-size: 17px; margin-top: 3px; }
.contract-notice ol { padding-left: 21px; margin: 0; color: #5b626a; font-size: 13px; line-height: 1.8; }
.contract-notice li { padding-left: 6px; margin-bottom: 7px; }
.contract-notice li:last-child { margin-bottom: 0; }
.contract-notice li::marker { color: #a27934; font-weight: 650; }
.contract-notice strong { color: #46566a; }
.contract-contacts { padding: 23px 25px; }
.contacts-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.contacts-heading h2 { margin-top: 5px; }
.contact-symbol { display: grid; place-items: center; width: 36px; height: 36px; background: #edf7fc; color: #307a9e; border-radius: 9px; font-size: 19px; }
.contact-description { color: #6c7d8c; font-size: 12px; margin: 10px 0 18px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact-person { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #e5ebf0; background: #fbfcfe; padding: 13px 11px; border-radius: 7px; min-width: 0; }
.contact-avatar { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; background: #ecf1f7; color: #66829c; border-radius: 50%; font-size: 12px; }
.contact-person > div { min-width: 0; }
.contact-person h3 { margin: 0 0 8px; color: #344b60; font-size: 12px; font-weight: 700; line-height: 1.65; overflow-wrap: anywhere; }
.contact-person a { display: flex; gap: 7px; align-items: baseline; color: #62788a; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.contact-person a:hover { color: #a12640; }
.contact-person a i { flex-shrink: 0; color: #8096a6; }
.contact-empty { grid-column: 1 / -1; font-size: 12px; color: #6b7d8e; margin: 0; }
.contract-footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #dfe6ed; padding: 17px 0 24px; margin-top: 28px; font-size: 10px; color: #728392; }
.contract-footer a { color: #526c81; }
.contract-footer i { margin-left: 5px; }
.contract-page .modal-content { border-radius: 11px; overflow: hidden; border: 0; box-shadow: 0 20px 80px #15263730; }
.contract-page .modal-header { background: #f3f6fa !important; border-bottom: 1px solid #e2e9f0; padding: 18px 22px; }
.contract-page .modal-title { color: #203347; font-size: 18px; font-weight: 650; }
.contract-page .modal-body { padding: 24px; }
.contract-page .modal .form-control { border: 1px solid #d5dfe8; box-shadow: none; border-radius: 6px; min-height: 38px; }
.contract-page .modal .form-control:focus { border-color: #b8223f; }
.contract-page .modal-footer { background: #fafbfd; border-top: 1px solid #e3eaf0; padding: 14px 22px; }
.contract-page .modal-footer .btn-success, .contract-page .modal-footer .btn-default { background: #b8223f; border-color: #b8223f; color: #fff; }
@media (max-width: 1050px) { .contract-layout { grid-template-columns: 320px minmax(0, 1fr); gap: 18px; } .contact-grid { grid-template-columns: 1fr; } .contract-intro h1 { font-size: 28px; } .contract-pill { display: none; } }
@media (max-width: 720px) { .contract-width { width: calc(100% - 32px); } .contract-official span { display: none; } .contract-header > div { min-height: 76px; } .contract-header img { width: 145px; } .back-home { font-size: 10px; } .contract-breadcrumb { padding-block: 17px 14px; } .contract-intro { margin-bottom: 20px; } .contract-intro h1 { font-size: 27px; } .contract-intro h1 span { display: block; margin-top: 4px; font-size: 22px; } .contract-intro p { font-size: 12px; line-height: 1.8; } .contract-layout { grid-template-columns: 1fr; gap: 20px; } .contract-login { padding: 22px 21px 18px; } .contract-notice, .contract-contacts { padding: 20px; } .contact-grid { grid-template-columns: 1fr; } .contact-person h3, .contact-person a { font-size: 12px; } .contract-footer { flex-wrap: wrap; gap: 9px; } }
@media (prefers-reduced-motion: reduce) { .contract-page *, .contract-page *::before, .contract-page *::after { transition: none !important; animation: none !important; } }