:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; color: #203429; background: #f4f6f5; --login-teal: #006c60; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100dvh; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5; }
[hidden] { display: none !important; }
button, input { font: inherit; touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }
.login-shell { width: min(444px, calc(100% - 36px)); margin: 0 auto; padding: clamp(32px, 8dvh, 86px) 0 30px; }
.login-brand-block { display: flex; align-items: center; flex-direction: column; margin-bottom: 29px; }
.login-brand { position: relative; display: block; width: 248px; height: 65px; overflow: hidden; }
.login-brand img { position: absolute; width: 270px; height: 270px; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain; mix-blend-mode: multiply; }
.login-brand-block > span { margin-top: 2px; color: #74867a; font-size: 12px; letter-spacing: .025em; }
.login-card { padding: 33px 34px 30px; border: 1px solid #dce5df; border-radius: 13px; background: #fff; box-shadow: 0 8px 28px #234a3010; }
.login-heading { margin-bottom: 25px; }
.login-eyebrow { color: #748a7b; font-size: 11px; font-weight: 600; letter-spacing: .035em; }
.login-heading h1 { margin: 9px 0 10px; color: #263d2f; font-size: 26px; font-weight: 620; letter-spacing: -.65px; line-height: 1.3; }
.login-heading > p { margin: 0; color: #6f8376; font-size: 14px; line-height: 1.7; }
.login-field { display: grid; gap: 8px; margin-bottom: 20px; color: #425e4b; font-size: 13px; font-weight: 550; }
.login-field > label { cursor: pointer; }
.login-field input { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #cbd9cf; border-radius: 7px; outline: none; color: #254530; background: #fff; font-size: 16px; font-weight: 400; line-height: 1.4; }
.login-field input:hover { border-color: #afc6b6; }
.login-field input[readonly] { color: #6c8274; background: #f6f9f7; }
.login-field input:disabled { color: #92a096; border-color: #e0e7e2; background: #f8faf9; }
.login-field input[aria-invalid="true"] { border-color: #b8765e; }
.login-field small { color: #87988b; font-size: 12px; font-weight: 400; line-height: 1.65; }
.login-password { position: relative; }
.login-password input { padding-right: 88px; }
.login-reveal { position: absolute; top: 4px; right: 4px; bottom: 4px; min-width: 73px; padding: 7px 10px; border: 0; border-radius: 5px; color: #5e7b67; background: transparent; font-size: 13px; cursor: pointer; }
.login-reveal:hover:not(:disabled) { color: var(--login-teal); background: #f0f7f3; }
.login-reveal:disabled { color: #a0aea4; cursor: default; }
.login-submit { width: 100%; min-height: 46px; margin-top: 4px; padding: 12px 16px; border: 1px solid var(--login-teal); border-radius: 7px; color: #fff; background: var(--login-teal); font-size: 14px; font-weight: 600; cursor: pointer; }
.login-submit:hover:not(:disabled) { background: #00594f; border-color: #00594f; }
.login-submit:disabled { color: #87a193; border-color: #e0ebe4; background: #e5eee8; cursor: wait; }
:is(input,button,a):focus-visible { outline: 3px solid #8ac9b8; outline-offset: 3px; }
.login-message { margin: 0 0 19px; padding: 12px 14px; border: 1px solid #e9cfc4; border-radius: 7px; color: #975740; background: #fff7f3; font-size: 13px; line-height: 1.75; }
.login-message.info { border-color: #d6e6dc; color: #5d7b68; background: #f4faf6; }
.login-status { margin: -5px 0 20px; color: #6f8b78; font-size: 13px; line-height: 1.7; }
.login-setup-note { margin: -3px 0 20px; padding: 12px 13px; border: 1px solid #e0ebe4; border-radius: 6px; background: #f7fbf8; color: #7b9182; font-size: 12px; line-height: 1.75; }
.login-retry { display: block; width: 100%; margin-top: 17px; padding: 10px; border: 1px solid #d7e4db; border-radius: 6px; color: #5e7d67; background: white; font-size: 13px; line-height: 1.5; cursor: pointer; }
.login-retry:disabled { color: #94a79a; cursor: wait; }
.login-link { display: block; margin-top: 18px; color: var(--login-teal); font-size: 13px; text-align: center; text-underline-offset: 3px; }
.login-footer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 25px; color: #84998b; font-size: 12px; line-height: 1.7; text-align: center; }
.login-footer svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) { .login-shell { width: min(420px, calc(100% - 28px)); padding-top: 29px; }.login-brand-block { margin-bottom: 23px; }.login-brand { width: 235px; height: 60px; }.login-brand img { width: 254px; height: 254px; }.login-card { padding: 27px 23px 25px; }.login-heading h1 { font-size: 25px; }.login-footer { margin-top: 22px; } }
@media (max-width: 340px) { .login-card { padding: 24px 18px; }.login-heading h1 { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }