:root { --navy: #142b3f; --teal: #00aa9d; --ink: #253749; --muted: #7e8299; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; padding: 48px 24px; display: grid; place-items: center; font-family: 'Poppins', sans-serif; color: var(--ink); background: #edf1f5; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input[type=checkbox]:focus-visible { outline: 2px solid #598487; outline-offset: 3px; }
.auth-shell { width: 100%; max-width: 940px; display: grid; grid-template-columns: 44% 56%; background: #fff; border: 1px solid #e1e6eb; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 55px #152c4010; }
.auth-shell.auth-shell-wide { max-width: 1020px; grid-template-columns: 40% 60%; }
.fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-shell.auth-shell-wide .signin-content { max-width: 480px; }
.brand-panel { position: relative; isolation: isolate; overflow: hidden; padding: 32px 34px; min-height: 540px; display: flex; flex-direction: column; color: #fff; background: linear-gradient(145deg, #1b3d52, #102b3e 75%); border-radius: 0 0 110px 0; }
.brand-panel::before { content: ''; position: absolute; z-index: -1; width: 290px; height: 290px; border: 1px solid #7bd0c912; border-radius: 50%; right: -178px; top: -95px; box-shadow: 0 0 0 48px #7bd0c905; }
.brand-panel::after { content: ''; position: absolute; z-index: -1; width: 235px; height: 235px; left: -108px; bottom: -154px; border-radius: 50%; background: linear-gradient(140deg, #139f98, #164458); }
.brand-logo { display: block; width: 258px; max-width: 100%; height: 52px; }
.brand-logo img { width: 270px; max-width: calc(100% + 12px); height: auto; display: block; margin: -16px 0 0 -12px; }
.brand-content { margin: auto 0; padding: 27px 0 50px; position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 19px; color: #a6c2cd; font-size: 8px; font-weight: 500; letter-spacing: 1.25px; }
.eyebrow > span { width: 16px; height: 2px; background: #30c5b7; flex-shrink: 0; }
.brand-panel h1 { margin: 0; font-size: 32px; line-height: 1.35; font-weight: 600; letter-spacing: -1.2px; }
.brand-panel h1 em { font-style: normal; color: #31d2be; }
.brand-description { color: #b3c6d0; font-size: 11px; line-height: 1.9; margin: 19px 0 0; }
.brand-features { display: flex; gap: 13px; margin-top: 23px; color: #c2d9df; font-size: 10px; }
.brand-features span + span::before { content: '·'; margin-right: 13px; color: #4dc8b8; }
.brand-note { position: relative; z-index: 1; font-size: 9px; color: #a6c2cb; margin: 0; }
.brand-orb { position: absolute; z-index: 0; right: -22px; bottom: -31px; width: 139px; height: 139px; border-radius: 50%; background: linear-gradient(140deg, #0fa89e, #15556a 68%, #173b50); }
.signin-panel { display: flex; flex-direction: column; padding: 48px 58px 20px; min-width: 0; }
.signin-content { width: 100%; max-width: 340px; margin: auto; }
.form-eyebrow { font-size: 8px; letter-spacing: 1.1px; font-weight: 500; color: #7e929b; margin: 0 0 9px; }
.signin-content h2 { font-weight: 600; font-size: 24px; line-height: 1.4; letter-spacing: -.7px; margin: 0 0 8px; }
.signin-description { font-size: 11px; color: var(--muted); line-height: 1.8; margin: 0 0 25px; }
.field-group { margin-bottom: 16px; }
.field-group > label { display: block; font-size: 11px; font-weight: 500; margin-bottom: 7px; color: #3f4254; }
.input-wrap { position: relative; }
.input-wrap input { width: 100%; height: 44px; padding: 0 39px; border: 1px solid #f3f6f9; border-radius: 4px; outline: none; box-shadow: none; background: #f3f6f9; color: #3f4254; font-size: 11px; transition: background-color .15s, border-color .15s; }
.input-wrap input::placeholder { color: #9399ab; opacity: 1; }
.input-wrap input:focus, .input-wrap input:active { background: #ebedf3; border-color: #ebedf3; outline: none; box-shadow: none; }
.input-wrap input:focus-visible { border-color: #9ca9b6; }
.field-icon { position: absolute; width: 16px; height: 16px; top: 14px; left: 13px; color: #969dab; pointer-events: none; }
.password-toggle { display: grid; place-items: center; position: absolute; right: 3px; top: 3px; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #8b94a3; }
.password-toggle:hover, .password-toggle[aria-pressed=true] { color: #345566; }
.password-toggle svg { width: 17px; height: 17px; }
.form-options { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 1px 0 20px; font-size: 10px; }
.remember-option { display: flex; align-items: center; gap: 7px; color: #7e8299; cursor: pointer; min-height: 24px; }
.remember-option input { margin: 0; width: 14px; height: 14px; accent-color: #00a699; cursor: pointer; }
.text-button { padding: 5px 0; font-size: 10px; color: #486372; background: transparent; border: 0; }
.text-button:hover, .signup-prompt a:hover { color: #008b80; }
.signin-button { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; height: 44px; padding: 0 10px; background: #00a99b; color: #fff; border: 1px solid #00a99b; border-radius: 4px; box-shadow: none; font-size: 12px; font-weight: 500; transition: background-color .15s; }
.signin-button:hover { background: #00998d; border-color: #00998d; }
.signin-button:disabled { cursor: wait; background: #258e86; }
.signin-button svg { width: 16px; height: 16px; }
.session-note { display: flex; align-items: flex-start; gap: 5px; font-size: 8px; line-height: 1.7; color: #9299a7; margin: 13px 0 0; }
.session-note svg { width: 11px; height: 11px; margin-top: 1px; }
.signup-prompt { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 10px; color: #8a90a0; margin-top: 25px; }
.signup-prompt a { display: flex; align-items: center; gap: 4px; font-weight: 500; color: #305467; }
.signup-prompt svg { width: 12px; height: 12px; }
.signin-footer { text-align: center; color: #a0a5b1; font-size: 8px; margin-top: 30px; }
.form-feedback, .password-help { border: 1px solid #ead5d5; border-radius: 4px; padding: 10px 12px; background: #fff4f3; color: #a23838; font-size: 11px; line-height: 1.7; margin: 0 0 15px; }
.form-feedback.is-success { background: #e9f7f2; color: #187453; border-color: #bfdfd4; }
.password-help { background: #edf5f7; border-color: #d5e4e9; color: #476577; }
.field-note { color: #997218; font-size: 10px; margin: 6px 0 0; }
.button-spinner { width: 16px; height: 16px; border: 2px solid #ffffff55; border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.licence-notice .container-fluid { padding: 0; }
.licence-notice .alert { font-size: 11px; line-height: 1.6; padding: 12px; border-radius: 4px; background: #fff1ee; color: #983e2e; margin-bottom: 18px; }
.licence-notice .h5 { font-size: 11px; }
.licence-notice a { display: inline-block; text-decoration: underline; margin-top: 8px; }
.licence-notice .alert-icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) and (min-width: 681px) {
    .brand-panel { padding: 28px 25px; }
    .brand-panel h1 { font-size: 27px; }
    .signin-panel { padding: 42px 32px 20px; }
    .signin-content h2 { font-size: 22px; }
    .eyebrow { font-size: 7px; letter-spacing: .7px; }
    .brand-features { gap: 9px; }
    .brand-features span + span::before { margin-right: 9px; }
}
@media (max-width: 680px) {
    body { padding: 24px 16px; }
    .auth-shell { grid-template-columns: 1fr; max-width: 420px; border-radius: 8px; }
    .fields-row { grid-template-columns: 1fr; gap: 0; }
    .brand-panel { min-height: 0; padding: 23px 28px 28px; border-radius: 0 0 45px 0; }
    .brand-logo { height: 40px; width: 228px; }
    .brand-logo img { width: 240px; margin-top: -15px; }
    .brand-content { margin: 0; padding: 16px 0 0; }
    .eyebrow, .brand-features, .brand-note, .brand-orb { display: none; }
    .brand-panel h1 { font-size: 25px; line-height: 1.35; letter-spacing: -.7px; }
    .brand-description { font-size: 10px; margin: 10px 0 0; line-height: 1.7; }
    .brand-description br { display: none; }
    .signin-panel { padding: 29px 28px 19px; }
    .signin-content h2 { font-size: 23px; }
    .signin-description { margin-bottom: 21px; }
    .input-wrap input { font-size: 16px; height: 45px; }
    .input-wrap input::placeholder { font-size: 12px; }
    .form-options, .text-button { font-size: 11px; }
    .signup-prompt { margin-top: 21px; }
    .signin-footer { margin-top: 22px; }
}
@media (max-width: 360px) {
    body { padding: 14px 10px; }
    .brand-panel, .signin-panel { padding-left: 22px; padding-right: 22px; }
    .signin-content h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }