* { box-sizing: border-box; }
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #142f39; background: #f4f6f8; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 40px 20px; }
.entry { width: 100%; max-width: 388px; text-align: center; }
.brand-mark { display: grid; place-items: center; position: relative; width: 48px; height: 48px; margin: 0 auto 15px; background: #17675b; color: white; border-radius: 14px; font-size: 25px; font-weight: 650; letter-spacing: -4px; padding-right: 4px; }
.brand-mark span { position: absolute; right: 10px; bottom: 10px; font-size: 15px; line-height: 1; letter-spacing: 0; }
.brand { margin: 0 0 31px; font-size: 19px; font-weight: 650; letter-spacing: -.4px; }
.card { padding: 32px; border: 1px solid #e1e7ea; border-radius: 18px; background: #fff; box-shadow: 0 10px 35px #142f3906; }
.lock { width: 28px; height: 28px; color: #17675b; }
h1 { font-size: 25px; font-weight: 600; letter-spacing: -.7px; margin: 16px 0 10px; }
.intro { font-size: 14px; line-height: 1.6; color: #637381; margin: 0 0 29px; }
label { display: block; text-align: left; font-size: 13px; font-weight: 550; margin-bottom: 9px; }
input, button { width: 100%; height: 46px; font: inherit; border-radius: 8px; }
input { padding: 0 14px; border: 1px solid #dfe5e8; background: #f7f9fa; color: #637381; }
input::placeholder { color: #96a2a8; letter-spacing: 3px; }
button { margin-top: 14px; border: 0; font-size: 14px; font-weight: 600; background: #17675b; color: white; cursor: pointer; }
.availability { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: #637381; }
.footer { margin: 24px 0 0; color: #74818b; font-size: 12px; }
@media (max-width: 360px) { .card { padding: 26px 22px; } }

[hidden] { display: none !important; }
button:disabled { opacity: .5; cursor: wait; }
.secondary { background: #f0f4f3; color: #17675b; }
input:enabled { background: #fff; color: #142f39; }
input:focus-visible, button:focus-visible { outline: 3px solid #76b7a9; outline-offset: 3px; }
#otp-login { margin-top: 24px; }