/* Reference-matched AQ360 login. Artwork is the supplied reference, rendered
   through a left-column viewport; form controls remain live HTML elements. */
html body #loginScreen#loginScreen.login-screen {
 --login-unit: .05903188cqw;
 container-type: inline-size;
 display: grid !important; grid-template-columns: 61.27509% 38.72491% !important;
 grid-template-rows: minmax(min-content, 1fr) !important;
 align-items: center !important; justify-items: center !important;
 align-content: stretch !important; padding: 0 !important; margin: 0 !important;
 min-height: 100dvh !important; box-sizing: border-box; overflow: auto !important;
 background: #f3f8fe !important; font-family: Arial, "Segoe UI", sans-serif !important;
}
html body #loginScreen#loginScreen.hidden { display: none !important; }
html body #loginScreen#loginScreen::after { display: none !important; }
html body #loginScreen#loginScreen .login-left-mark {
 position: relative !important; inset: auto !important; transform: none !important;
 grid-column: 1; grid-row: 1; align-self: stretch !important;
 display: block !important; width: 100% !important; min-width: 0;
 min-height: max(100dvh, 54.84061cqw) !important; margin: 0 !important; padding: 0 !important;
 background: url("assets/login-reference.png") left top / 163.19846% 100% no-repeat !important;
 overflow: hidden; pointer-events: none !important;
}
html body #loginScreen#loginScreen .login-left-mark::after { display: none !important; }
html body #loginScreen#loginScreen .login-left-mark > * {
 position: absolute !important; width: 1px !important; height: 1px !important;
 padding: 0 !important; margin: -1px !important; overflow: hidden !important;
 clip-path: inset(50%) !important; white-space: nowrap !important;
}
html body #loginScreen#loginScreen .login-panel {
 position: relative !important; grid-column: 2; grid-row: 1;
 width: 78.65854% !important; height: calc(818 * var(--login-unit)) !important;
 min-height: calc(818 * var(--login-unit)) !important;
 margin: calc(63 * var(--login-unit)) 0 calc(48 * var(--login-unit)) !important; padding: 0 !important;
 box-sizing: border-box; border: 1px solid #e2eaf3 !important;
 border-radius: calc(22 * var(--login-unit)) !important;
 background: linear-gradient(135deg,#fff,#fefefe) !important;
 box-shadow: 0 12px 42px #12355005 !important;
}
html body #loginScreen#loginScreen .login-brand {
 position: absolute !important; left: 10.07752%; right: 10.07752%; top: 0;
 height: calc(170 * var(--login-unit)) !important; margin: 0 !important; padding: 0 !important;
 display: block !important; border-bottom: 1px solid #c7d5e4 !important;
}
html body #loginScreen#loginScreen .login-brand::before {
 content: ''; position: absolute; top: calc(43 * var(--login-unit)); left: 50%; transform: translateX(-50%);
 width: calc(300 * var(--login-unit)); height: calc(90 * var(--login-unit));
 background: url("assets/login-reference.png") calc(-1218 * var(--login-unit)) calc(-106 * var(--login-unit)) / calc(1694 * var(--login-unit)) calc(929 * var(--login-unit)) no-repeat;
}
html body #loginScreen#loginScreen .login-brand img,
html body #loginScreen#loginScreen .brand-copy,
html body #loginScreen#loginScreen .mobile-login-intro,
html body #loginScreen#loginScreen .login-security-footer { display: none !important; }
html body #loginScreen#loginScreen .login-form {
 position: absolute !important; inset: 0 10.07752% !important; width: auto !important;
 display: block !important; padding: 0 !important; margin: 0 !important; font-family: inherit !important;
}
html body #loginScreen#loginScreen #loginHeading {
 position: absolute; top: calc(199 * var(--login-unit)); left: 0;
 margin: 0 !important; color: #0b2b3c !important; font-size: calc(36 * var(--login-unit)) !important;
 line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -.035em !important;
}
html body #loginScreen#loginScreen #loginHelp {
 position: absolute; top: calc(258 * var(--login-unit)); left: 0;
 margin: 0 !important; font-size: calc(17 * var(--login-unit)) !important;
 line-height: 1.4 !important; color: #55718f !important;
}
html body #loginScreen#loginScreen .login-form > label {
 position: absolute; left: 0; right: 0; margin: 0 !important;
 display: grid !important; gap: calc(9 * var(--login-unit)) !important;
 font-size: calc(16 * var(--login-unit)) !important; font-weight: 500 !important; color: #123046 !important;
}
html body #loginScreen#loginScreen .login-account-field { top: calc(307 * var(--login-unit)); }
html body #loginScreen#loginScreen .login-secret-field { top: calc(415 * var(--login-unit)); }
html body #loginScreen#loginScreen .login-input-shell {
 display: grid !important; grid-template-columns: calc(48 * var(--login-unit)) minmax(0,1fr) !important;
 height: calc(61 * var(--login-unit)) !important; min-height: 0 !important;
 border: 1px solid #cbd9e8 !important; border-radius: calc(11 * var(--login-unit)) !important;
 background: transparent !important; box-sizing: border-box; overflow: hidden;
}
html body #loginScreen#loginScreen .login-account-field .login-input-shell {
 border-color: #1686ff !important; box-shadow: 0 0 5px #1686ff35 !important;
}
html body #loginScreen#loginScreen .login-input-shell:focus-within { border-color: #1686ff !important; box-shadow: 0 0 0 2px #1686ff18 !important; }
html body #loginScreen#loginScreen .login-password-field { grid-template-columns: calc(48 * var(--login-unit)) minmax(0,1fr) calc(60 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-input-icon,
html body #loginScreen#loginScreen .login-password-toggle {
 width: auto !important; height: 100% !important; min-height: 0 !important; color: #5b7994 !important;
 padding: 0 !important; background: transparent !important;
}
html body #loginScreen#loginScreen .login-password-toggle { border-left: 1px solid #dce5ee !important; }
html body #loginScreen#loginScreen .login-input-icon svg { width: calc(19 * var(--login-unit)) !important; height: calc(19 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-password-toggle svg { width: calc(24 * var(--login-unit)) !important; height: calc(24 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-form input:not([type="checkbox"]) {
 width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important;
 padding: 0 calc(12 * var(--login-unit)) !important; border: 0 !important; background: transparent !important;
 font-size: calc(17 * var(--login-unit)) !important; font-weight: 400 !important; color: #123046 !important;
}
html body #loginScreen#loginScreen input::placeholder { color: #59738f !important; opacity: 1; }
html body #loginScreen#loginScreen .login-options-row {
 position: absolute; top: calc(523 * var(--login-unit)); left: 0; right: 0;
 display: flex; align-items: center; justify-content: space-between;
}
html body #loginScreen#loginScreen .remember-row {
 display: flex !important; align-items: center; gap: calc(11 * var(--login-unit)) !important;
 font-size: calc(16 * var(--login-unit)) !important; font-weight: 400 !important; color: #123046 !important; margin: 0 !important;
}
html body #loginScreen#loginScreen .remember-row input { width: calc(21 * var(--login-unit)) !important; height: calc(21 * var(--login-unit)) !important; min-height: 0 !important; margin: 0 !important; accent-color: #007281 !important; }
html body #loginScreen#loginScreen .login-forgot { background: none; border: 0; padding: 0; color: #007d8d; font: inherit; font-size: calc(16 * var(--login-unit)); cursor: pointer; }
html body #loginScreen#loginScreen .login-submit-button {
 position: absolute; top: calc(575 * var(--login-unit)); left: 0; width: 100%;
 display: flex !important; align-items: center; justify-content: center; gap: calc(15 * var(--login-unit));
 height: calc(63 * var(--login-unit)) !important; min-height: 0 !important; margin: 0 !important;
 border: 0 !important; border-radius: calc(11 * var(--login-unit)) !important;
 background: #006c7c !important; color: #fff !important;
 font-size: calc(21 * var(--login-unit)) !important; font-weight: 500 !important; box-shadow: none !important;
}
html body #loginScreen#loginScreen .login-submit-button svg { width: calc(24 * var(--login-unit)) !important; height: calc(24 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-submit-button:hover { background: #005c6a !important; }
html body #loginScreen#loginScreen .login-submit-button:disabled { opacity: .65; }
html body #loginScreen#loginScreen .login-account-note {
 position: absolute; top: calc(663 * var(--login-unit)); left: 0; right: 0;
 text-align: center; margin: 0 !important; color: #5a7492; font-size: calc(17 * var(--login-unit)); line-height: 1.5;
}
html body #loginScreen#loginScreen .login-support-row {
 position: absolute; top: calc(734 * var(--login-unit)); left: 0; right: 0;
 display: flex !important; align-items: center; justify-content: center; gap: calc(40 * var(--login-unit));
 padding-top: calc(22 * var(--login-unit)); border-top: 1px solid #e0e8f1;
}
html body #loginScreen#loginScreen .login-support-row button {
 display: flex; align-items: center; gap: calc(12 * var(--login-unit)); color: #0082ff;
 background: none; border: 0; padding: 0; font-size: calc(17 * var(--login-unit)); cursor: pointer;
}
html body #loginScreen#loginScreen .login-support-row svg { width: calc(28 * var(--login-unit)) !important; height: calc(28 * var(--login-unit)) !important; stroke: currentColor; fill: none; }
html body #loginScreen#loginScreen .login-support-row i { height: calc(24 * var(--login-unit)); width: 1px; background: #e2eaf3; }
html body #loginScreen#loginScreen #loginError:not([hidden]) {
 position: absolute; top: calc(286 * var(--login-unit)); left: 0; right: 0; z-index: 5;
 margin: 0 !important; font-size: calc(13 * var(--login-unit)) !important;
}
html body #loginScreen#loginScreen button:focus-visible { outline: 2px solid #1686ff; outline-offset: 3px; }
@media (max-width: 760px) {
 html body #loginScreen#loginScreen.login-screen { --login-unit: .78px; grid-template-columns: 1fr !important; padding: 20px 14px !important; }
 html body #loginScreen#loginScreen .login-left-mark { display: none !important; }
 html body #loginScreen#loginScreen .login-panel { grid-column: 1; width: min(100%, 440px) !important; margin: 0 !important; }
 html body #loginScreen#loginScreen #loginError:not([hidden]) { font-size: 11px !important; }
}
/* Clear legacy size and icon overrides so reference dimensions win. */
html body #loginScreen#loginScreen .login-panel { max-width: none !important; }
html body #loginScreen#loginScreen .login-form { max-width: none !important; }
html body #loginScreen#loginScreen .remember-row { width: auto !important; flex: 0 0 auto; }
html body #loginScreen#loginScreen .login-forgot { white-space: nowrap; flex: 0 0 auto; }
html body #loginScreen#loginScreen .login-support-row button { font-weight: 400 !important; }
html body #loginScreen#loginScreen .login-support-row svg { color: #0082ff !important; stroke: #0082ff !important; }
html body #loginScreen#loginScreen .login-submit-button svg { display: block !important; color: #fff !important; stroke: #fff !important; }
html body #loginScreen#loginScreen.login-screen { font-family: Inter, "Segoe UI", Arial, sans-serif !important; }
html body #loginScreen#loginScreen .login-panel { transform: translateX(calc(2 * var(--login-unit))) !important; }
html body #loginScreen#loginScreen .login-form > label { line-height: 1.15 !important; gap: calc(7 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-account-note { font-size: calc(17 * var(--login-unit)) !important; line-height: 1.5 !important; font-weight: 400 !important; }
html body #loginScreen#loginScreen #loginError:not([hidden]) { top: auto; bottom: calc(-55 * var(--login-unit)); }
@media (max-width: 760px) { html body #loginScreen#loginScreen .login-panel { transform: none !important; } }
/* Approved artwork with accessible, editable marketing content and original logo. */
html body #loginScreen#loginScreen.login-screen { --login-unit: min(.05903188cqw, .10764263dvh); }
html body #loginScreen#loginScreen .login-left-mark { min-height: 100dvh !important; }
html body #loginScreen#loginScreen .login-left-mark::before {
 content: ''; position: absolute; inset: 0; z-index: 0;
 background: linear-gradient(125deg,#0b2230,#10384c 55%,#0a2636);
 clip-path: polygon(0 0,59% 0,67% 14%,60% 38%,70% 65%,85% 100%,0 100%);
}
html body #loginScreen#loginScreen .login-left-mark > * {
 width: auto !important; height: auto !important; margin: 0 !important;
 padding: 0 !important; overflow: visible !important; clip-path: none !important;
 white-space: normal !important; z-index: 1;
}
html body #loginScreen#loginScreen .login-story-content { inset: 0 !important; color: #fff; }
html body #loginScreen#loginScreen .login-workspace-label {
 position: absolute; left: calc(90 * var(--login-unit)); top: calc(160 * var(--login-unit));
 font-size: calc(12 * var(--login-unit)) !important; letter-spacing: .3em; color: #dce8ed;
}
html body #loginScreen#loginScreen .login-workspace-label i { display: none; }
html body #loginScreen#loginScreen .login-workspace-label::after { content: ''; display: block; width: calc(42 * var(--login-unit)); height: 3px; background: #a2d5dd; margin-top: calc(17 * var(--login-unit)); }
html body #loginScreen#loginScreen .login-left-mark h2 {
 position: absolute; left: calc(90 * var(--login-unit)); top: calc(214 * var(--login-unit));
 margin: 0 !important; font-size: calc(68 * var(--login-unit)) !important; line-height: 1.06 !important;
 font-weight: 700 !important; letter-spacing: -.04em !important; color: #fff !important;
}
html body #loginScreen#loginScreen .login-left-mark h2 em { color: #77d4df; font-style: normal; }
html body #loginScreen#loginScreen .login-story-content > p {
 position: absolute; left: calc(93 * var(--login-unit)); top: calc(450 * var(--login-unit));
 width: calc(515 * var(--login-unit)); max-width: 63%; margin: 0 !important;
 color: #91e1e7 !important; font-size: calc(20 * var(--login-unit)) !important; line-height: 1.5 !important;
}
html body #loginScreen#loginScreen .login-feature-grid {
 position: absolute; left: calc(93 * var(--login-unit)); top: calc(580 * var(--login-unit));
 display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: calc(600 * var(--login-unit)); max-width: 66%;
}
html body #loginScreen#loginScreen .login-feature-grid > div { padding: 0 calc(32 * var(--login-unit)); border-right: 1px solid #77d4df22; }
html body #loginScreen#loginScreen .login-feature-grid > div:first-child { padding-left: 0; }
html body #loginScreen#loginScreen .login-feature-grid > div:last-child { border: 0; padding-right: 0; }
html body #loginScreen#loginScreen .login-feature-icon { display: grid; place-items: center; width: calc(62 * var(--login-unit)); height: calc(62 * var(--login-unit)); border-radius: calc(16 * var(--login-unit)); background: linear-gradient(135deg,#ffffff38,#ffffff10); }
html body #loginScreen#loginScreen .login-feature-icon svg { width: calc(36 * var(--login-unit)); height: calc(36 * var(--login-unit)); fill: none; stroke: #d7f9fa; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body #loginScreen#loginScreen .login-feature-grid strong { display: block; margin: calc(12 * var(--login-unit)) 0 calc(9 * var(--login-unit)); color: #9ae9ed; font-size: calc(16 * var(--login-unit)); white-space: nowrap; letter-spacing: -.03em; }
html body #loginScreen#loginScreen .login-feature-grid p { position: static; margin: 0 !important; color: #d1e0e8 !important; font-size: calc(14 * var(--login-unit)) !important; line-height: 1.4 !important; }
html body #loginScreen#loginScreen .login-story-flow {
 position: absolute; left: calc(93 * var(--login-unit)); top: calc(750 * var(--login-unit));
 width: calc(600 * var(--login-unit)); display: flex; align-items: center; gap: calc(21 * var(--login-unit));
 padding-top: calc(24 * var(--login-unit)); border-top: 1px solid #77d4df33; color: #7fd4e4; font-size: calc(15 * var(--login-unit));
}
html body #loginScreen#loginScreen .login-story-flow b { color: #477f90; font-weight: 400; }
html body #loginScreen#loginScreen .flow-complete { color: #9af5ef; }
html body #loginScreen#loginScreen .login-left-mark > .login-story-footer {
 position: absolute !important; left: calc(93 * var(--login-unit)); bottom: calc(46 * var(--login-unit));
 font-size: calc(12 * var(--login-unit)); color: #b7c9d5; letter-spacing: .22em;
}
html body #loginScreen#loginScreen .login-story-footer span { display: block; margin-top: calc(11 * var(--login-unit)); font-size: calc(16 * var(--login-unit)); letter-spacing: 0; color: #dce7ee; }
html body #loginScreen#loginScreen .login-panel { width: calc(516 * var(--login-unit)) !important; max-width: calc(100% - 40px) !important; }
html body #loginScreen#loginScreen .login-brand::before { display: none !important; }
html body #loginScreen#loginScreen .login-brand { overflow: hidden; }
html body #loginScreen#loginScreen .login-brand .brand-logo {
 display: block !important; position: absolute; left: 50%; top: calc(6 * var(--login-unit));
 transform: translateX(-50%); width: calc(330 * var(--login-unit)) !important; max-width: none !important;
 height: auto !important; max-height: none !important; object-fit: contain !important;
}
html body #loginScreen#loginScreen #loginError:not([hidden]) { bottom: auto !important; top: calc(284 * var(--login-unit)) !important; font-size: calc(12 * var(--login-unit)) !important; padding: 4px 6px !important; line-height: 1.2 !important; }
@media (max-width: 1000px) { html body #loginScreen#loginScreen.login-screen { --login-unit: .78px; grid-template-columns: 1fr !important; padding: 20px 14px !important; } html body #loginScreen#loginScreen .login-left-mark { display: none !important; } html body #loginScreen#loginScreen .login-panel { grid-column: 1; width: min(440px,100%) !important; max-width: 100% !important; margin: 0 !important; transform: none !important; } }
@media (max-height: 660px) and (min-width: 1001px) { html body #loginScreen#loginScreen.login-screen { --login-unit: .71px; } html body #loginScreen#loginScreen .login-panel { margin: 12px 0 !important; } }
html body #loginScreen#loginScreen .login-left-mark { font-family: Inter, "Segoe UI", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: normal !important; }
html body #loginScreen#loginScreen .login-workspace-label { font-weight: 500 !important; }
html body #loginScreen#loginScreen .login-story-content > p,
html body #loginScreen#loginScreen .login-feature-grid p,
html body #loginScreen#loginScreen .login-story-flow,
html body #loginScreen#loginScreen .login-story-footer { font-weight: 400 !important; }
html body #loginScreen#loginScreen .login-feature-grid strong { font-weight: 600 !important; }
html body #loginScreen#loginScreen .login-brand .brand-logo { top: calc(-18 * var(--login-unit)); }
/* Reserve the intro line for validation feedback without covering controls. */
html body #loginScreen#loginScreen .login-form:has(#loginError:not([hidden])) #loginHelp { visibility: hidden; }
html body #loginScreen#loginScreen #loginError:not([hidden]) { top: calc(254 * var(--login-unit)) !important; padding: calc(4 * var(--login-unit)) calc(6 * var(--login-unit)) !important; max-height: calc(49 * var(--login-unit)); overflow: auto; }
/* Match the reference's more compact visual scale. */
html body #loginScreen#loginScreen .login-panel { width: calc(500 * var(--login-unit)) !important; height: calc(792 * var(--login-unit)) !important; min-height: calc(792 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-brand { height: calc(156 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-brand .brand-logo { width: calc(310 * var(--login-unit)) !important; top: calc(-22 * var(--login-unit)); }
html body #loginScreen#loginScreen #loginHeading { top: calc(186 * var(--login-unit)); font-size: calc(34 * var(--login-unit)) !important; font-weight: 600 !important; }
html body #loginScreen#loginScreen #loginHelp { top: calc(242 * var(--login-unit)); font-size: calc(16 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-account-field { top: calc(291 * var(--login-unit)); }
html body #loginScreen#loginScreen .login-secret-field { top: calc(395 * var(--login-unit)); }
html body #loginScreen#loginScreen .login-form > label { font-size: calc(15 * var(--login-unit)) !important; font-weight: 400 !important; }
html body #loginScreen#loginScreen .login-input-shell { height: calc(58 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-form input:not([type="checkbox"]) { font-size: calc(16 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-options-row { top: calc(500 * var(--login-unit)); }
html body #loginScreen#loginScreen .remember-row { font-size: calc(15 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-submit-button { top: calc(551 * var(--login-unit)); height: calc(60 * var(--login-unit)) !important; font-size: calc(20 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-account-note { top: calc(637 * var(--login-unit)); font-size: calc(16 * var(--login-unit)) !important; }
html body #loginScreen#loginScreen .login-support-row { top: calc(708 * var(--login-unit)); }
html body #loginScreen#loginScreen .login-support-row button { font-size: calc(16 * var(--login-unit)); }
html body #loginScreen#loginScreen #loginError:not([hidden]) { top: calc(266 * var(--login-unit)) !important; max-height: calc(23 * var(--login-unit)); }
html body #loginScreen#loginScreen #loginError:not([hidden]) { top: calc(238 * var(--login-unit)) !important; max-height: calc(49 * var(--login-unit)); }
@media (max-width: 1000px) { html body #loginScreen#loginScreen .login-panel { width: min(440px, 100%) !important; max-width: 100% !important; } }