:root { font-family: Calibri, "Segoe UI", Arial, sans-serif; font-weight: 500; color: #1d251e; background: #17271a; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 85% 10%, #39543d 0, transparent 35%), linear-gradient(145deg, #101a12, #223827); }
[hidden] { display: none !important; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.login-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 20px 16px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.login-panel { width: 100%; max-width: 430px; border: 1px solid #ffffff24; border-radius: 24px; background: #fffdf8; overflow: hidden; box-shadow: 0 26px 80px #07100980; }
.login-brand { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid #ffffff1f; background: #1d2b1f; color: white; }
.login-brand img { display: block; object-fit: contain; flex-shrink: 0; border: 3px solid white; border-radius: 50%; background: #44291f; }
.login-brand span { font-size: 19px; font-weight: 700; letter-spacing: .01em; }
.close-login { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; flex-shrink: 0; background: #ffffff12; color: white; border: 1px solid #ffffff42; border-radius: 50%; font-size: 27px; line-height: 1; cursor: pointer; }
.close-login:hover { background: white; color: #1d2b1f; }
.login-content { padding: 30px 28px 32px; }
.login-eyebrow { display: block; margin-bottom: 7px; color: #c86432; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0 0 25px; font-family: Georgia, "Times New Roman", serif; font-size: 32px; line-height: 1.15; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
input { width: 100%; height: 52px; border: 1px solid #6f786f; border-radius: 11px; padding: 11px 13px; font-size: 16px; color: #1d251e; background: #fff; }
input:focus { border-color: #d69f4c; outline: 3px solid #d69f4c30; }
input[aria-invalid="true"] { border-color: #c62828; }
input::placeholder { color: #566571; opacity: 1; }
.primary-button { width: 100%; min-height: 52px; margin-top: 20px; padding: 11px 16px; border: 0; border-radius: 999px; background: #1d2b1f; box-shadow: 0 8px 20px #1d2b1f2e; color: white; font-weight: 700; cursor: pointer; }
.primary-button:hover { background: #304934; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid #2799b9; outline-offset: 3px; }
.login-error, .login-notice { margin: 0 0 18px; border-left: 3px solid; padding: 10px 12px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.login-error { color: #a92121; background: #fff0ef; }
.login-notice { color: #255864; background: #edf6f8; }
.email-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 24px; }
.email-summary span { min-width: 0; overflow-wrap: anywhere; font-size: 14px; color: #394b57; }
.text-button { background: transparent; color: #19738b; padding: 8px 0; min-height: 40px; border: 0; font-size: 14px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.text-button:hover { text-decoration: underline; }
#customerOtp { text-align: center; font-size: 22px; letter-spacing: 0; }
.expiry-label { margin: 8px 0 0; color: #394b57; font-size: 13px; }
.resend-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
#resendTimer { color: #394b57; font-size: 13px; white-space: nowrap; }
.login-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #e5dfd2; padding: 16px 28px; background: #f5f0e5; font-size: 13px; }
.login-footer a { color: #8a542e; font-weight: 700; text-decoration: none; padding: 4px 0; }
.login-footer a:hover { text-decoration: underline; }
.login-footer span { color: #5d685f; }
.verified-state { text-align: center; padding: 8px 0 20px; }
.verified-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #e6f5eb; color: #218c4c; font-size: 28px; margin: 0 auto 16px; }
.verified-state h2 { font-size: 20px; margin: 0; }
@media (max-width: 480px) {
    .login-shell { padding: 12px; }
    .login-panel { border-radius: 20px; }
    .login-brand { padding: 14px 16px; }
    .login-content { padding: 25px 20px 28px; }
    h1 { font-size: 29px; }
    .login-footer { padding: 14px 20px; }
}