/* V20 - login enhancement with brand logo */
body.login-mode{min-height:100vh;background:linear-gradient(180deg,#f8fbf1,#f5f8ee 50%,#f8f5f1)!important;overflow-x:hidden}
.login-mobile-stage-v20{min-height:100vh;position:relative;display:grid;place-items:center;padding:24px;overflow:hidden}
.login-bg-shape-v20{position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px)}
.login-bg-shape-v20.shape-one{width:360px;height:360px;right:-110px;top:-130px;background:radial-gradient(circle,rgba(132,196,0,.18),rgba(132,196,0,.02) 70%)}
.login-bg-shape-v20.shape-two{width:280px;height:280px;left:-90px;bottom:-90px;background:radial-gradient(circle,rgba(75,43,35,.09),rgba(75,43,35,.01) 70%)}
.login-bg-shape-v20.shape-three{width:180px;height:180px;left:18%;top:10%;background:radial-gradient(circle,rgba(132,196,0,.08),transparent 72%)}

.login-mobile-card-v20{position:relative;z-index:2;width:min(430px,100%);padding:24px 22px 18px;border-radius:38px;background:rgba(255,255,255,.92);border:1px solid #e7ecda;box-shadow:0 38px 90px rgba(81,109,18,.14),0 12px 24px rgba(75,43,35,.05);backdrop-filter:blur(18px);display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
.login-mobile-card-v20:before{content:"";position:absolute;inset:1px;border-radius:37px;border:1px solid rgba(255,255,255,.78);pointer-events:none}
.login-card-glow-v20{position:absolute;inset:auto -40px -50px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(132,196,0,.12),transparent 70%);pointer-events:none}

.login-logo-wrap-v20{display:flex;justify-content:center;margin:4px 0 16px;position:relative;z-index:1}
.login-logo-frame-v20{width:160px;max-width:72%;padding:12px;border-radius:28px;background:linear-gradient(180deg,#fff,#fcfdf8);border:1px solid #e7ecda;box-shadow:0 18px 36px rgba(81,109,18,.10), inset 0 1px 0 rgba(255,255,255,.95)}
.login-logo-image-v20{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(75,43,35,.06))}

.login-step-v20{width:100%}
.login-head-v20{text-align:center;margin-bottom:16px}
.login-chip-v20{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:linear-gradient(180deg,#fff,#fcfdf8);border:1px solid #e7ecda;color:#4b2b23;font-size:10px;font-weight:800;box-shadow:0 10px 24px rgba(81,109,18,.06)}
.login-chip-v20 i{color:#6eaa00}
.login-head-v20 h1{margin:12px 0 8px!important;font-size:28px!important;line-height:1.4!important;color:#4b2b23!important}
.login-head-v20 p{margin:0!important;color:#7d6d65!important;font-size:12px!important;line-height:1.9!important}
.login-head-v20.compact{margin-top:2px}

.login-form-v20{display:flex;flex-direction:column;gap:12px}
.login-floating-field-v20{display:grid;grid-template-columns:50px minmax(0,1fr);gap:10px;align-items:center;min-height:76px;padding:10px 12px;border:1px solid #e7ecda;border-radius:24px;background:linear-gradient(180deg,#fff,#fcfdf8);box-shadow:0 14px 30px rgba(81,109,18,.06);transition:.2s ease;cursor:text}
.login-floating-field-v20:focus-within{border-color:#bcd97c;box-shadow:0 0 0 5px rgba(132,196,0,.10),0 16px 32px rgba(81,109,18,.10);transform:translateY(-1px)}
.login-field-icon-v20{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#eef8d9,#f8fbe9);color:#6eaa00;font-size:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
.login-field-body-v20{position:relative;display:block;min-width:0;padding-top:10px}
.login-field-body-v20 input{width:100%;height:28px;border:0!important;outline:0!important;background:transparent!important;padding:8px 0 0!important;box-shadow:none!important;font-size:16px!important;letter-spacing:.6px;color:#4b2b23!important;text-align:left!important;direction:ltr!important}
.login-field-body-v20 em{position:absolute;right:0;top:17px;font-style:normal;color:#8e8179;font-size:13px;pointer-events:none;transition:.18s ease;background:transparent;padding:0 2px}
.login-field-body-v20 small{position:absolute;left:0;top:18px;color:#a5968c;font-size:11px;pointer-events:none;transition:.18s ease}
.login-field-body-v20 input:focus ~ em,
.login-field-body-v20 input:not(:placeholder-shown) ~ em{top:-1px;font-size:10px;color:#6eaa00;background:#fff;padding:0 6px;border-radius:999px}
.login-field-body-v20 input:focus ~ small,
.login-field-body-v20 input:not(:placeholder-shown) ~ small{top:24px;font-size:10px;opacity:.88}
.login-submit-v20{width:100%;height:60px!important;border:0!important;border-radius:22px!important;background:linear-gradient(135deg,#84c400,#6eaa00)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;font-size:13px!important;font-weight:800!important;box-shadow:0 18px 34px rgba(116,165,16,.28)!important;transition:.18s}.login-submit-v20:hover{transform:translateY(-1px);box-shadow:0 22px 40px rgba(116,165,16,.34)!important}.login-submit-v20 i{font-size:12px}
.login-back-v20{display:inline-flex!important;align-items:center;gap:7px;margin:0 0 10px!important;padding:0!important;font-size:10px!important;color:#7d6d65!important}

.otp-boxes-v20{display:grid!important;grid-template-columns:repeat(6,1fr)!important;gap:8px!important;margin:14px 0 4px!important}
.otp-boxes-v20 input{width:100%!important;height:56px!important;border-radius:18px!important;border:1px solid #e7ecda!important;background:linear-gradient(180deg,#fff,#fcfdf8)!important;font-size:18px!important;box-shadow:0 10px 22px rgba(81,109,18,.05)!important;color:#4b2b23!important}
.otp-boxes-v20 input:focus{border-color:#bcd97c!important;box-shadow:0 0 0 4px rgba(132,196,0,.10)!important;background:#fff!important}

.login-bottom-v20{margin-top:18px;padding-top:18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}.login-bottom-v20 span{height:1px;background:linear-gradient(90deg,transparent,#dfe7c8)}.login-bottom-v20 span:last-child{background:linear-gradient(90deg,#dfe7c8,transparent)}.login-bottom-v20 small{font-size:10px;letter-spacing:1.1px;color:#8e8179}

/* hide old login layout pieces if any */
.login-mode .login-mobile-stage-v18,.login-mode .login-stage-v17,.login-mode .login-card,.login-mode .login-visual,.login-mode .visual-grid,.login-mode .login-orb{display:none!important}

@media(max-width:620px){
  .login-mobile-stage-v20{
    min-height:100svh;
    padding:max(24px,env(safe-area-inset-top)) 12px max(24px,env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
    box-sizing:border-box;
  }
  .login-mobile-card-v20{width:100%;min-height:0;height:auto;padding:20px 16px 16px;border-radius:30px}
  .login-mobile-card-v20:before{border-radius:29px}
  .login-logo-frame-v20{width:150px;max-width:74%;padding:10px;border-radius:24px}
  .login-head-v20 h1{font-size:24px!important}
  .login-floating-field-v20{grid-template-columns:46px 1fr;min-height:72px;padding:10px 10px;border-radius:22px}
  .login-field-icon-v20{width:42px;height:42px;border-radius:14px}
  .login-field-body-v20 input{font-size:15px!important}
  .otp-boxes-v20{gap:6px!important}
  .otp-boxes-v20 input{height:52px!important;border-radius:16px!important}
}