* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body {
  background-color: #7bc943;
  background-image: url('mama-money-pattern.svg');
  background-size: 72px 72px;
  background-position: 0 0;
  background-repeat: repeat;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input { font: inherit; }
button { touch-action: manipulation; }
::placeholder { color: rgba(255,255,255,0.85) !important; opacity: 1; }
input::-webkit-input-placeholder { color: rgba(255,255,255,0.85) !important; }
input::-moz-placeholder { color: rgba(255,255,255,0.85) !important; }
.otp-digit { font-size: 30px; font-weight: 800; line-height: 1; }
.app-frame { min-height: 100dvh; }
.screen-enter { animation: screen-enter .16s ease-out both; }
@keyframes screen-enter { from { opacity: 0; } }
.loading-overlay { animation: overlay-in .16s ease-out both; }
@keyframes overlay-in { from { opacity: 0; } }
.field-shake { animation: field-shake .24s ease-in-out; }
@keyframes field-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.country-scroll { scrollbar-width: thin; scrollbar-color: #999 transparent; }
.country-scroll::-webkit-scrollbar { width: 8px; }
.country-scroll::-webkit-scrollbar-thumb { background: #999; border-radius: 999px; }
.country-scroll::-webkit-scrollbar-track { background: transparent; }

.login-screen { min-height:100dvh; width:100%; max-width:430px; margin:0 auto; position:relative; overflow:hidden; background:#7bc943 url('mama-money-pattern.svg') repeat; background-size:72px 72px; color:#003e2b; user-select:none; }
.login-content { position:relative; z-index:1; display:flex; min-height:100dvh; flex-direction:column; align-items:center; padding:13px 18px 40px; }
.login-back-row { width:100%; }
.login-back { width:40px; height:40px; display:grid; place-items:center; padding:0; border:0; background:transparent; color:#000; cursor:pointer; }
.login-brand { display:flex; align-items:center; gap:12px; margin-top:15px; }
.login-brand img { width:91px; height:104px; object-fit:contain; flex:0 0 auto; transform:scale(1.25); }
.login-brand-copy { display:flex; flex-direction:column; }
.login-brand-name { color:#003e2b; font-size:37px; font-weight:900; font-style:italic; letter-spacing:-2px; line-height:.79; }
.login-brand-tagline { margin-top:8px; color:#fff; font-size:11px; font-weight:900; font-style:italic; letter-spacing:-.2px; text-align:center; }
.login-fields { width:min(274px, calc(100vw - 72px)); display:grid; gap:25px; margin-top:30px; }
.login-field { width:100%; height:57px; padding:0 17px; border:1px solid rgba(255,255,255,.96); border-radius:0; outline:0; background:rgba(27,103,34,.16); color:#fff; font-size:18px; font-weight:400; }
.login-field::placeholder { color:rgba(255,255,255,.9) !important; }
.login-field:focus { box-shadow:0 0 0 1px rgba(255,255,255,.38); }
.login-error { color:#fff4a3; font-size:11px; margin:-20px 0 -5px 4px; }
.login-submit { width:min(192px, calc(100vw - 108px)); height:58px; margin-top:39px; display:flex; align-items:center; justify-content:center; gap:20px; border:0; border-radius:5px; background:#00452f; box-shadow:0 4px 7px rgba(0,0,0,.24); color:#fff; cursor:pointer; font-size:16px; font-weight:700; letter-spacing:1.2px; }
.login-submit:active { transform:translateY(1px); }
.remember-wrap { width:min(192px, calc(100vw - 108px)); height:51px; margin-top:6px; border-radius:7px; background:rgba(47,113,28,.13); box-shadow:inset 0 0 0 1px rgba(112,173,40,.35); }
.remember-button { width:100%; height:100%; display:flex; align-items:center; gap:13px; padding:0 14px; border:0; background:transparent; color:#003e2b; cursor:pointer; white-space:nowrap; font-size:16px; font-weight:700; }
.remember-box { width:21px; height:21px; display:grid; place-items:center; flex:0 0 auto; border-radius:4px; background:#fff; }
.forgot-pin { margin-top:6px; color:#003e2b; text-align:center; font-size:15px; font-weight:700; line-height:1.32; }
.forgot-pin u { text-underline-offset:2px; }
@media (max-width:350px) { .login-brand { margin-top:8px; transform:scale(.9); } .login-fields { margin-top:18px; } .login-submit { margin-top:28px; } }